title: React Native : Communicating between components
body: <p>complete newcomer to react native and programming alike. </p>
  
  <p>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. </p>
  
  <p>This was the link to the tutorialspoint that I was following:</p>
  
  <p><a href="https://www.tutorialspoint.com/react_native/react_native_geolocation.htm" rel="nofollow noreferrer">https://www.tutorialspoint.com/react_native/react_native_geolocation.htm</a></p>
  
  <p>The only difference is that my index.android.js has a scrollable tab view so the "presentation component" is one of the tabs. </p>
  
  <p>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: </p>
  
  <p>Oh and I've already changed the android manifest to include permissions for access fine location so that isn't the problem. </p>
  
  <p>Please and thank you in advance!!</p>
  
  <p>This is the index.android.js</p>
  
  <pre><code>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 (
  &lt;ScrollableTabView
    tabBarPosition='bottom'
    initialPage={0}
    renderTabBar={() =&gt; &lt;ScrollableTabBar/&gt;}
    tabBarUnderlineColor='#123456'
    tabBarBackgroundColor='#FFFFFF'
    tabBarActiveTextColor='#4682b4'
    tabBarInactiveTextColor='#696969'
    tabBarTextStyle={{fontSize: 14,fontWeight: "bold"}}&gt;
  
    &lt;Welcome tabLabel='Welcome' /&gt;
    &lt;GeolocationExample tabLabel='LocationTest'/&gt;
  
  &lt;/ScrollableTabView&gt;
  
      );
    }
  }
  
  
  AppRegistry.registerComponent('test', () =&gt; test);
  </code></pre>
  
  <p>This is the GeolocationExample.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
   Text,
   View,
   StyleSheet
  } from 'react-native';
  
  export default GeolocationExample = (props) =&gt; {
   return (
    &lt;View style = {styles.container}&gt;
  
       &lt;Text&gt;
          &lt;Text style = {styles.boldText}&gt;
             Initial position:
          &lt;/Text&gt;
          {props.initialPosition}
       &lt;/Text&gt;
       &lt;Text&gt;
          &lt;Text style = {styles.boldText}&gt;
             Current position:
          &lt;/Text&gt;
          {props.lastPosition}
       &lt;/Text&gt;
  
    &lt;/View&gt;
   );
  }
  
  const styles = StyleSheet.create ({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 70
  },
  boldText: {
    flex: 1,
    fontWeight: 'bold'
  }
  });
  </code></pre>
  
  <p>And lastly is the HomeContainer</p>
  
  <pre><code>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 = () =&gt; {
    navigator.geolocation.getCurrentPosition(
       (position) =&gt; {
          var initialPosition = JSON.stringify(position);
          this.setState({initialPosition});
       },
       (error) =&gt; alert(error.message),
       {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );
    this.watchID = navigator.geolocation.watchPosition((position) =&gt; {
       var lastPosition = JSON.stringify(position);
       this.setState({lastPosition});
    });
  }
  componentWillUnmount = () =&gt; {
    navigator.geolocation.clearWatch(this.watchID);
  }
  
  render() {
    return (
       &lt;GeolocationExample
          initialPosition = {this.state.initialPosition}
          lastPosition = {this.state.lastPosition}
       /&gt;
        );
     }
  }
  </code></pre>