React Native : Communicating between components

Question

complete newcomer to react native and programming alike.

Was following along with the tutorials in TutorialPoint and trying to pass data from one component to another via props. I can't for the life of me figure out why it wasn't working and was hoping if anyone could point a beginner in the right direction.

This was the link to the tutorialspoint that I was following:

https://www.tutorialspoint.com/react_native/react_native_geolocation.htm

The only difference is that my index.android.js has a scrollable tab view so the "presentation component" is one of the tabs.

Both GeolocationExample and HomeContainer are in the same folder called "app". My problem is that HomeContainer doesn't seem to pass the variable initialposition and lastposition to GeolocationExample via props. All I see when trying to run it is a blank screen with Initial position and LastPosition:

Oh and I've already changed the android manifest to include permissions for access fine location so that isn't the problem.

Please and thank you in advance!!

This is the index.android.js

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
ScrollView,
Navigator,
View
} from 'react-native';

import ScrollableTabView, { ScrollableTabBar, }  from 'react-native-scrollable-tab-view';
import GeolocationExample from './app/GeolocationExample';

export default class test extends Component {
  render() {
return (
<ScrollableTabView
  tabBarPosition='bottom'
  initialPage={0}
  renderTabBar={() => <ScrollableTabBar/>}
  tabBarUnderlineColor='#123456'
  tabBarBackgroundColor='#FFFFFF'
  tabBarActiveTextColor='#4682b4'
  tabBarInactiveTextColor='#696969'
  tabBarTextStyle={{fontSize: 14,fontWeight: "bold"}}>

  <Welcome tabLabel='Welcome' />
  <GeolocationExample tabLabel='LocationTest'/>

</ScrollableTabView>

    );
  }
}


AppRegistry.registerComponent('test', () => test);

This is the GeolocationExample.js

import React, { Component } from 'react';
import {
 Text,
 View,
 StyleSheet
} from 'react-native';

export default GeolocationExample = (props) => {
 return (
  <View style = {styles.container}>

     <Text>
        <Text style = {styles.boldText}>
           Initial position:
        </Text>
        {props.initialPosition}
     </Text>
     <Text>
        <Text style = {styles.boldText}>
           Current position:
        </Text>
        {props.lastPosition}
     </Text>

  </View>
 );
}

const styles = StyleSheet.create ({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  marginTop: 70
},
boldText: {
  flex: 1,
  fontWeight: 'bold'
}
});

And lastly is the HomeContainer

import React, { Component } from 'react'
import GeolocationExample from './GeolocationExample'

export default class HomeContainer extends Component {

 constructor() {
  super();
  this.state = {
     initialPosition: 'unknown',
     lastPosition: 'unknown'
  }
}
 watchID = (null: ?number);

componentDidMount = () => {
  navigator.geolocation.getCurrentPosition(
     (position) => {
        var initialPosition = JSON.stringify(position);
        this.setState({initialPosition});
     },
     (error) => alert(error.message),
     {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
  );
  this.watchID = navigator.geolocation.watchPosition((position) => {
     var lastPosition = JSON.stringify(position);
     this.setState({lastPosition});
  });
}
componentWillUnmount = () => {
  navigator.geolocation.clearWatch(this.watchID);
}

render() {
  return (
     <GeolocationExample
        initialPosition = {this.state.initialPosition}
        lastPosition = {this.state.lastPosition}
     />
      );
   }
}

Answer 1

I think your GeolocationExample class is a little off. Try this:

export default GeolocationExample extends Component {
    render() {
        return (
            <View style = {styles.container}>
                <Text>
                    <Text style = {styles.boldText}>
                        Initial position:
                    </Text>
                    {this.props.initialPosition}
                </Text>
                    <Text style = {styles.boldText}>
                        Current position:
                    </Text>
                    {this.props.lastPosition}
                </Text>
            </View>
        );
    }
}

Keep your imports and styles at the top and bottom of this as you had before.