Import this into map/index.js

Question

I need to import that Istance which is in map/index.js and display it in Details/index.js

Map/index.js

import React, { Component, Fragment } from 'react';
import { View, Image } from "react-native";
import MapView, { Marker } from "react-native-maps";
import Geocoder from 'react-native-geocoding';
import { getPixelSize } from "../../utils";
import Details from "../Details";
import Search from "../Search";
import Directions from "../Directions";
import {
    Back,
        LocationBox, 
        LocationText,
        LocationTimeBox, 
        LocationTimeText, 
        LocationTimeTextSmall
        } from './styles';

import markerImage from "../../assets/marker.png";
import backImage from "../../assets/back.png";
Geocoder.init('key')

export default class Map extends Component {
    state= {
        region: null,
        destination: null,
        duration: null,
        location: null,
        distance: null //essa distance
            };

    async componentDidMount() {
        navigator.geolocation.getCurrentPosition(
            async ({ coords: { latitude, longitude } }) => {
const response = await Geocoder.from({ latitude, longitude });
const address = response.results[0].formatted_address;
const location = address.substring(0, address.indexOf(','));

                this.setState({ 
                    location,
                    region: {
                    latitude,
                    longitude,
                    latitudeDelta: 49.644183,
                    longitudeDelta: 0.0134,

                } 
            })  
            }, //sucesso
            () => {}, //erro
            {
timeout: 2000,
enableHighAccuracy: true,
maximumAge: 1000,
        }

        );
    }

    handleLocationSelected = (data, { geometry }) => {
        const { location: { lat: latitude, lng: longitude } } = geometry;
        this.setState({
            destination: { 
            latitude,
            longitude,
            title: data.structured_formatting.main_text,
            },
        })
    }
handleBack = () => {
this.setState({ destination: null });
};

    render() {
        const { region, destination, duration, location, distance } = this.state; 
        return (
    <View style={{ flex: 1 }}>
    <MapView 
    style={{ flex: 1 }}
        region={region}
        showsUserLocation
        loadingEnabled
        ref={el => this.mapView = el}
        >
            { destination && (
                <Fragment>
                <Directions
                origin={region}
                destination={destination}
                onReady={result => {
                    this.setState({ duration: Math.floor(result.duration) });
                    this.setState({ distance: Math.floor(result.distance) });//essa distance

                    this.mapView.fitToCoordinates(result.coordinates, {
                        edgePadding: {
                            right: getPixelSize(50),
                            left: getPixelSize(50),
                            top: getPixelSize(50),
                            bottom: getPixelSize(350)
                        }
                });
            }}
                />
                <Marker 
                coordinate={destination}
                anchor={{ x: 0, y: 0 }}
                image={markerImage}
                >
            <LocationBox>
                <LocationText>{destination.title}</LocationText>
            </LocationBox>
            </Marker>

                    <Marker 
                coordinate={region}
                anchor={{ x: 0, y: 0 }}
                >
            <LocationBox>
                <LocationTimeBox>
                <LocationTimeText>{duration} MIN</LocationTimeText> 
                <LocationTimeTextSmall>R$: {distance*2.62}</LocationTimeTextSmall>  //dessa mesma forma so que no outro arquivo  
                </LocationTimeBox>
                <LocationText>{location}</LocationText>
            </LocationBox>
            </Marker>   
                </Fragment>
            )}
        </MapView>
{destination ? (
    <Fragment>
        <Back onPress={this.handleBack}>
            <Image source={backImage} />
            </Back>
<Details/> 
</Fragment>
) : (
<Search onLocationSelected={this.handleLocationSelected} />

)}       
    </View>
    );
    }
}

Details.index.js

import React, { Component } from 'react';

import { Container, TypeTitle, TypeDescription, TypeImage, RequestButton, RequestButtonText } from './styles';
import distance  from '../Map/index';//nao sei se esta correto desta forma
import tx from '../../assets/tx.png';


export default class Details extends Component {
    render() {
        return <Container>

<TypeTitle>Popular</TypeTitle>
<TypeDescription>testte</TypeDescription>
<TypeImage source={tx} />
<TypeTitle>TESTE</TypeTitle>

    <TypeDescription>{distance*2.62}</TypeDescription> // colocar ela aqui nesse lugar dessa forma que tá nao funciona da NAN

<RequestButton onPress={() => {}}>
<RequestButtonText>teste</RequestButtonText>

</RequestButton>

    </Container>;

    }
}

Answer 1

You can pass this value as property to your Details component:

<Details distance={this.state.distance} />

And in your component Tails use it that way:

this.props.distance

So you will have the value you need without using import.

I hope I’ve helped.