Mapas e Rotas com React Native - #7 Preço da Viagem

Nesse tutorial faremos a precificação da corrida, calculando a distância do usuário até o destino da viagem.

App com Valor da Viagem

App.js

No nosso entry point App.js vamos criar o estado price e vamos seta-lo assim que o usuário colocar o trajeto final:

import { Text, View, TouchableOpacity } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';

//Dentro da function
const [price,setPrice]=useState(null);

//Dentro do return
<MapViewDirections
origin={origin}
destination={destination}
apikey={config.googleApi}
strokeWidth={3}
onReady={result=>{
    setDistance(result.distance);
    setPrice(result.distance*3);
    mapEl.current.fitToCoordinates(
        result.coordinates,{
            edgePadding:{
                top:50,
                bottom:50,
                left:50,
                right:50
            }
        }
    );
}
}
/>

<GooglePlacesAutocomplete
    placeholder='Para onde vamos?'
    onPress={(data, details = null) => {
        setDestination({
            latitude: details.geometry.location.lat,
            longitude: details.geometry.location.lng,
            latitudeDelta: 0.000922,
            longitudeDelta: 0.000421
        });
    }}
    query={{
        key: config.googleApi,
        language: 'pt-br',
    }}
    enablePoweredByContainer={false}
    fetchDetails={true}
    styles={{
        listView:{backgroundColor:'#fff', zIndex:10},
        container:{position:'absolute',width:'100%'}
    }}
/>

{distance &&
    <View style={css.distance}>
        <Text style={css.distance__text}>Distância: {distance.toFixed(2).replace('.',',')}km</Text>
        <TouchableOpacity style={css.price}>
            <Text style={css.price__text}><MaterialIcons name="payment" size={24} color="white" /> Pagar R${price.toFixed(2).replace('.',',')}</Text>
        </TouchableOpacity>
    </View>
}

assets/css/Css.js

Vamos estilizar as características do nosso botão de pagar:

distance:{
    flex:1,
    justifyContent: 'center',
    alignItems:'center',
    padding: 10
},
distance__text:{
    fontSize:20,
    fontWeight:'bold'
},
price:{
    backgroundColor: '#000',
    padding: 7,
    borderRadius:4,
    marginTop:30,
    justifyContent:'center',
    alignItems: 'center'
},
price__text:{
    color:'#fff',
    fontWeight: 'bold',
    fontSize: 20
}

Por hoje é só turma. Sucesso nos códigos e na vida!

Precisando de assessoria? webdesignemfoco@gmail.com