LocationPin
In this section, we will focus on building the pinpointing to the center of the map to visually confirm the pickup location. This pin also contains a button, which can be used to trigger a pickup request:
/** * src/components/LocationPin.js ** */ import React from 'react'; import { View, Text, Dimensions, TouchableOpacity, StyleSheet, } from 'react-native'; const { height, width } = Dimensions.get('window'); export default class LocationPin extends React.Component { render() { return ( <View style={styles.container}> <View style={styles.banner}> <Text style={styles.bannerText}>SET PICKUP LOCATION</Text> <TouchableOpacity style={styles.bannerButton} onPress={this.props.onPress} > <Text style={styles.bannerButtonText}>{'>'}</Text> </TouchableOpacity> ...Get React: Cross-Platform Application Development with React Native now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
