title: React-native Sending information between pages?
body: <blockquote>
  <p>Hello, I want to redirect Mapview.js to ShowInfo.js page. I want to
  send ** locInfo ** information while redirecting. locInfo is a
  variable defined in ShowInfo. How can I do this in Mapview.js.</p>
  </blockquote>
  <p><strong>I get an error when I write this code in Mapview.js.</strong></p>
  <pre><code>Actions.ShowInfo({locationID: this.props.locID })
  </code></pre>
  <p>My purpose; Location information, pictures descriptions etc. from Mapview.js to ShowInfo. Send.</p>
  <p><strong>Mapview.js</strong></p>
  <pre><code>import React from 'react';
  //import {View, Text} from 'react-native';
  import { getDistance, getPreciseDistance } from 'geolib';
  import MapView, { Marker, PROVIDER_GOOGLE, Callout } from 'react-native-maps';
  import Geolocation from '@react-native-community/geolocation';
  import {
    StyleSheet,
    Image,
    View,
    Dimensions,
    TouchableOpacity,
    Text,
  } from 'react-native';
  const { width, height } = Dimensions.get('window');
  import LinearGradient from 'react-native-linear-gradient';
  import MapViewDirections from 'react-native-maps-directions';
  import ImagePicker from 'react-native-image-picker';
  export default class Mapview extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        latitude: 0,
        longitude: 0,
        error: null,
        coords: [],
        places: null,
        selectedLat: &quot;&quot;,
        selectedLang: &quot;&quot;,
        distance: &quot;&quot;,
      };
    }
  
    getLocation = () =&gt; {
      Geolocation.getCurrentPosition(position =&gt; {
        this.setState({ latitude: position.coords.latitude })
        this.setState({ longitude: position.coords.longitude })
      }
      );
    }
  
  
    setLatLang = (lat, lng) =&gt; {
      this.setState({ selectedLat: lat })
      this.setState({ selectedLang: lng })
    }
  
    showCoords() {
      const arrayMarkers = [];
      var coordsLatLang = [];
      var allCoords = [];
      var selectedCoordLat = [];
      var selectedCoordLang = [];
      var dis = [];
  
      Geolocation.getCurrentPosition(position =&gt; {
        var userLat = position.coords.latitude
        var userLang = position.coords.longitude
  
        for (let index = 0; index &lt; this.props.locCoord.length; index++) {
          coordsLatLang = this.props.locCoord[index].split(',')
          allCoords.push(this.props.locCoord[index].split(','))
          selectedCoordLat.push(allCoords[index][0])
          selectedCoordLang.push(allCoords[index][1])
          dis.push(getDistance(
            { latitude: userLat, longitude: userLang },
            { latitude: selectedCoordLat[index], longitude: selectedCoordLang[index] }
          ))
  
  
          var lat = coordsLatLang[0]
          var lng = coordsLatLang[1]
  
          arrayMarkers.push(
            &lt; Marker
              pinColor={'#24012f'}
              coordinate={{
                latitude: Number(lat),
                longitude: Number(lng),
              }}
            &gt;
              &lt;Callout tooltip style={{ position: 'relative' }} onPress={() =&gt; this.setLatLang(selectedCoordLat[index], selectedCoordLang[index])}&gt;
                &lt;LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={{ borderRadius: 20 }} colors={['#531c5c', '#4b5cab']}&gt;
                  &lt;View style={{ flexDirection: 'column', alignContent: 'center', alignItems: 'center', flex: 1, padding: 15 }}&gt;
                    &lt;Text style={{ color: &quot;white&quot;, fontWeight: 'bold', fontSize: 20 }}&gt;{this.props.locNames[index]}&lt;/Text&gt;
                    &lt;Text style={{ marginTop: 5, color: &quot;white&quot; }}&gt;Puanı:{this.props.TourLocRating[index].toFixed(2)}&lt;/Text&gt;
                    &lt;Text style={{ color: &quot;white&quot; }}&gt;Mesafe:{(dis[index] / 1000).toFixed(2)}KM&lt;/Text&gt;
                    &lt;Text style={{ marginTop: 5, color: &quot;white&quot;, marginBottom: 5 }}&gt;Rota Oluşturmak İçin Tıklayın!&lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/LinearGradient&gt;
              &lt;/Callout&gt;
            &lt;/Marker &gt;
          )
        }
      }
      )
  
      this.setState({ places: arrayMarkers })
    }
  
    openCam() {
      ImagePicker.launchCamera((response) =&gt; {
        console.log('Response = ', response);
  
        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton);
        } else {
          const source = { uri: response.uri };
  
          // You can also display the image using data:
          // const source = { uri: 'data:image/jpeg;base64,' + response.data };
  
          this.setState({
            avatarSource: source,
          });
        }
      });
    }
  
    componentWillMount() {
      this.showCoords();
    }
  
    componentDidMount() {
      this.getLocation();
    }
  
    render() {
      console.log(this.props.images)
      return (
        &lt;View style={{ flex: 1 }}&gt;
          &lt;View style={{
            backgroundColor: 'white',
            alignItems: 'center',
            width: width,
            height: height * 0.08,
            fontWeight: &quot;bold&quot;,
            flexDirection: 'row',
            justifyContent: 'flex-start',
          }}&gt;
            &lt;TouchableOpacity onPress={() =&gt; { this.props.navigation.goBack() }}&gt;
              &lt;Image
                style={{ width: width * 0.05, height: height * 0.03, marginTop: 15, marginBottom: 10, marginLeft: 5 }}
                source={require('../../img/back.png')}
              /&gt;
            &lt;/TouchableOpacity&gt;
            &lt;Image resizeMode=&quot;contain&quot; style={{ marginLeft: width * 0.17 }}
              source={require('../../img/headerText.png')}
            /&gt;
          &lt;/View&gt;
          &lt;View style={[styles.lineFooterStyle]} /&gt;
          &lt;MapView
            provider={PROVIDER_GOOGLE}
            region={{
              latitude: this.state.latitude,
              longitude: this.state.longitude,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
            showsUserLocation={true}
            style={{ flex: 1 }}
          &gt;
            {this.state.places}
  
            &lt;MapViewDirections
              precision={&quot;high&quot;}
              origin={{ latitude: this.state.latitude, longitude: this.state.longitude }}
              destination={{ latitude: this.state.selectedLat, longitude: this.state.selectedLang }}
              apikey={'s-v8lEdDbtagGsssssasaNp5ogtAA8ok'}
              strokeWidth={6}
              strokeColor=&quot;#531959&quot;
            /&gt;
          &lt;/MapView&gt;
          &lt;View&gt;
  
            &lt;TouchableOpacity style={{ width: width * 0.2, height: width * 0.2, marginTop: -height * 0.17, marginLeft: width * 0.4 }} onPress={() =&gt; this.openCam()}&gt;
              &lt;Image style={{ width: width * 0.2, height: width * 0.2, marginTop: 15, borderRadius: 25 }}
                source={require('../../img/ARLogo.png')}
              /&gt;
            &lt;/TouchableOpacity&gt;
        
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  <p><strong>ShowInfo.js</strong></p>
  <pre><code>import React from 'react';
  import { Actions } from 'react-native-router-flux';
  import {
      StyleSheet,
      Text,
      ScrollView,
      Image,
      View,
      Dimensions,
      TouchableOpacity,
      TextInput
  } from 'react-native';
  
  import { AirbnbRating, Rating } from 'react-native-ratings';
  import LinearGradient from 'react-native-linear-gradient';
  import * as firebase from 'firebase';
  import { SliderBox } from &quot;react-native-image-slider-box&quot;;
  const { width, height } = Dimensions.get('window');
  import Comment from '../HorizontalSlider/Comment';
  let userRef = db.ref('/Users');
  let commentsRef = db.ref('/LocationComments');
  let locationRef = db.ref('/Location');
  import { db } from '../../components/dbConfig/config';
  if (!firebase.apps.length) {
      firebase.initializeApp(db);
  }
  
  const rootRef = firebase.database().ref();
  const loccommentRef = rootRef.child('LocationComments');
  
  let addItem = (comment, locationID, userName, rating, comments, locID) =&gt; {
      loccommentRef.push({
          comment: comment,
          LocationID: locationID,
          username: userName,
          users: [],
          rating: rating
      });
      var count = 0;
      var newRating = 0;
      for (let index = 0; index &lt; comments.length; index++) {
          if (locID == comments[index].LocationID) {
              count++;
              newRating += comments[index].rating
          }
      }
      var generalNewRating = (newRating + rating - 1) / count
      locationRef.child(locID).update({ 'Rating': generalNewRating })
  };
  
  export default class ShowInfo extends React.PureComponent {
      constructor(props) {
          super(props);
          this.state = {
              locInfo: [],
              comments: [],
              comment: '',
              userName: '',
              userEmail: '',
              rating: '',
              users: [],
          };
      }
  
      ratingCompleted = (rating) =&gt; {
          this.setState({ rating: rating })
      }
  
      getUserData() {
          userRef.on('value', snapshot =&gt; {
              let data = snapshot.val();
              let users = Object.values(data);
              this.setState({ users: users });
          });
      }
  
      getComments() {
          commentsRef.on('value', snapshot =&gt; {
              let data = snapshot.val();
              let comments = Object.values(data);
              this.setState({ comments: comments });
          });
      }
  
      getLocationData() {
          locationRef.on('value', snapshot =&gt; {
              let data = snapshot.val();
              let locInfo = Object.values(data);
              this.setState({ locInfo: locInfo });
          });
      }
  
      getUserName = () =&gt; {
          for (let index = 0; index &lt; this.state.users.length; index++) {
              if (this.props.userEmail == this.state.users[index].email) {
                  return this.state.users[index].username;
              }
          }
      }
      updateRating = () =&gt; {
          var count = 0;
          for (let index = 0; index &lt; this.state.comments.length; index++) {
              if (this.props.locID == this.state.comments[index].LocationID) {
                  count++;
              }
          }
          locationRef.child(this.props.locID).update({ 'Rating': (this.state.locInfo[this.props.locID].Rating + this.state.rating) / count })
      }
  
  
      componentWillMount() {
          this.getLocationData()
          this.getUserData()
          this.getComments()
      }
      inRender(images, commentContext, comments, locCoord, locNames) {
  
          console.log(this.state.locInfo[2].Rating, &quot;---&quot;)
          if (this.getUserName() != null) {
              this.setState({ userName: this.getUserName() })
          }
          for (let index = 0; index &lt; this.state.locInfo.length; index++) {
              if (this.props.locID == this.state.locInfo[index].ID) {
                  images = this.state.locInfo[index].Image.split(',')
                  locCoord.push(this.state.locInfo[index].Coordinate)
                  console.log(locCoord)
                  locNames.push(this.state.locInfo[index].Name)
              }
          }
          for (let index = 0; index &lt; this.state.comments.length; index++) {
              if (this.props.locID == this.state.comments[index].LocationID) {
                  comments.push(this.state.comments[index])
              }
          }
          for (let index = 0; index &lt; comments.length; index++) {
              if (comments[index].username != &quot;&quot;) {
                  commentContext.push(
                      &lt;Comment
                          username={comments[index].username}
                          comment={comments[index].comment}
                          rating={comments[index].rating}
                      /&gt;
                  )
              }
          }
          return images;
      }
      render() {
          var locNames = [];
          var images = [];
          var comments = [];
          var commentContext = [];
          var locCoord = []
          var retImages = this.inRender(images, commentContext, comments, locCoord, locNames);
          var TourLocRating = [];
          TourLocRating.push(this.props.rating)
          return (
              &lt;View style={{ flex: 1, backgroundColor: 'white' }}&gt;
                  &lt;View style={{
                      backgroundColor: 'white',
                      alignItems: 'center',
                      width: width,
                      height: height * 0.08,
                      fontWeight: &quot;bold&quot;,
                      flexDirection: 'row',
                      justifyContent: 'flex-start',
                  }}&gt;
                      &lt;TouchableOpacity onPress={() =&gt; { this.props.navigation.goBack() }}&gt;
                          &lt;Image
                              style={{ width: width * 0.05, height: height * 0.03, marginTop: 15, marginBottom: 10, marginLeft: 5 }}
                              source={require('../../img/back.png')}
                          /&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;Image resizeMode=&quot;contain&quot; style={{ marginLeft: width * 0.17 }}
                          source={require('../../img/headerText.png')}
                      /&gt;
                  &lt;/View&gt;
                  &lt;View style={[styles.lineFooterStyle]} /&gt;
                  &lt;ScrollView&gt;
                      &lt;SliderBox
                          style={{ height: height * 0.4, marginLeft: 5, marginRight: 5 }}
                          imageLoadingColor=&quot;white&quot;
                          dotColor=&quot;white&quot;
                          inactiveDotColor=&quot;#90A4AE&quot;
                          autoplay
                          disableOnPress
                          circleLoop
                          images={retImages}
                      //currentImageEmitter={index =&gt; locName=imgSliderHolder[index].Name} //Resim üzerinde lokasyonun adını gösterebilirsin. Resim geldiğinde gerçekleşen func. 
                      //onCurrentImagePressed={index =&gt; Actions.ShowInfo({ locImage: images[index], tourName: imgSliderHolder[index].Name, info: imgSliderHolder[index].Info })}
                      /&gt;
                      &lt;View style={{ marginLeft: 15 }}&gt;
                          &lt;View style={{ flexDirection: 'row' }}&gt;
                              &lt;View style={{ flexDirection: 'column' }}&gt;
                                  &lt;View style={{ marginTop: 30 }}&gt;
                                      &lt;Text style={{ color: '#171c69', fontWeight: 'bold', fontSize: 15, marginLeft: height * 0.01 }}&gt;{this.props.tourName}&lt;/Text&gt;
                                      &lt;LinearGradient style={styles.gradientLineStyle} start={{ x: 0, y: 1 }} end={{ x: 1, y: 1 }} colors={['#3E276F', '#F9F7F6']}&gt;&lt;/LinearGradient&gt;
                                  &lt;/View&gt;
                                  &lt;TouchableOpacity style={styles.BtnStyleLogin} onPress={() =&gt; Actions.LocMapview({ locCoord: locCoord, locNames, kind: &quot;location&quot;, TourLocRating })}&gt;
                                      &lt;Text style={{ color: 'white' }}&gt;
                                          Başla
                              &lt;/Text&gt;
                                  &lt;/TouchableOpacity&gt;
                                  &lt;View style={{ flexDirection: 'row' }}&gt;
                                      &lt;Rating
                                          readonly={true}
                                          startingValue={this.props.rating}
                                          style={{ paddingVertical: 10 }}
                                          imageSize={20}
                                      /&gt;
                                      &lt;Text style={{ marginLeft: width * 0.02, marginBottom: height * 0.015, marginTop: height * 0.012, fontWeight: 'bold' }}&gt;Puanı:{this.props.rating.toFixed(2)}&lt;/Text&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                              &lt;TouchableOpacity onPress={() =&gt; this.playSound()}&gt;
                                  &lt;Image style={{ width: 40, height: 40, marginTop: height * 0.1, }}
                                      source={require('../../img/sound_button.png')}
                                  /&gt;
                              &lt;/TouchableOpacity&gt;
                          &lt;/View&gt;
                          &lt;View style={{ flexDirection: 'row', marginBottom: 15, marginTop: 15, justifyContent: 'space-between' }}&gt;
                              &lt;TouchableOpacity onPress={() =&gt; { this.refs._scrollView.scrollTo(); }}&gt;
                                  &lt;Text style={{ color: '#171c69', fontWeight: 'bold', fontSize: 15, marginLeft: height * 0.025 }}&gt;Hakkında&lt;/Text&gt;
                              &lt;/TouchableOpacity&gt;
                              &lt;TouchableOpacity onPress={() =&gt; { this.refs._scrollView.scrollTo({ x: width, y: 0 }); }}&gt;
                                  &lt;Text style={{ color: '#171c69', fontWeight: 'bold', fontSize: 15, marginRight: 15 }}&gt;Değerlendir&lt;/Text&gt;
                              &lt;/TouchableOpacity&gt;
                          &lt;/View&gt;
                          &lt;LinearGradient style={styles.gradientLineStyle} start={{ x: 0, y: 1 }} end={{ x: 1, y: 1 }} colors={['#3E276F', '#F9F7F6']}&gt;&lt;/LinearGradient&gt;
                      &lt;/View&gt;
  
  
  
                      &lt;ScrollView
                          ref='_scrollView'
                          horizontal={true}
                          pagingEnabled={true}
                      &gt;
                          &lt;View style={{
                              flex: 1,
                              width: width,
                          }}&gt;
                              &lt;Text style={{ padding: 15, textAlign: 'justify' }}&gt;{this.props.info}&lt;/Text&gt;
                          &lt;/View&gt;
                          &lt;View
                              style={{
                                  flex: 1,
                                  width: width,
                                  padding: 15
                              }}&gt;
                              &lt;TextInput
                                  style={{ height: 150, borderColor: 'gray', borderWidth: 0.5, borderRadius: 25 }}
                                  multiline={true}
                                  onChangeText={comment =&gt; this.setState({ comment })}
                              /&gt;
                              &lt;View style={{ flexDirection: 'row', justifyContent: 'space-between' }}&gt;
                                  &lt;View style={{ marginTop: 20 }}&gt;
                                      &lt;AirbnbRating
                                          count={5}
                                          showRating={false}
                                          onFinishRating={this.ratingCompleted}
                                          defaultRating={0}
                                          size={30}
                                          fractions={2}
                                      /&gt;
                                  &lt;/View&gt;
                                  &lt;TouchableOpacity style={{
                                      width: width * 0.3,
                                      height: height * 0.06,
                                      marginTop: 15,
                                      marginBottom: 15,
                                      borderRadius: 15,
                                      alignItems: 'center',
                                      justifyContent: 'center',
                                      backgroundColor: '#1a345c',
                                      flexDirection: 'row',
                                  }} onPress={() =&gt; addItem(this.state.comment, this.props.locID, this.state.userName, this.state.rating, this.state.comments, this.props.locID)}&gt;
                                      &lt;Text style={{ color: 'white' }}&gt;
                                          Değerlendir
                              &lt;/Text&gt;
                                  &lt;/TouchableOpacity&gt;
                              &lt;/View&gt;
                              &lt;Text style={{ color: '#171c69', fontWeight: 'bold', fontSize: 25, marginTop: 15 }}&gt;Yorumlar&lt;/Text&gt;
                              {commentContext}
                          &lt;/View&gt;
  
                      &lt;/ScrollView&gt;
  
                  &lt;/ScrollView&gt;
                  &lt;View style={styles.lineFooterStyle} /&gt;
                  &lt;View style={styles.footerStyle}&gt;
                      &lt;TouchableOpacity style={styles.styleInBottombar} onPress={() =&gt; this.props.navigation.navigate(&quot;Mainpage&quot;)}&gt;
                          &lt;Image style={styles.navItemHomeStyle}
                              source={require('../../img/Home.png')}
                          /&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;TouchableOpacity style={styles.styleInBottombar} onPress={() =&gt; this.props.navigation.navigate(&quot;Discover&quot;)}&gt;
                          &lt;Image style={styles.navItemBookmarkStyle}
                              source={require('../../img/Bookmark_2.png')}
                          /&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;TouchableOpacity style={styles.styleInBottombar} onPress={() =&gt; this.props.navigation.navigate(&quot;MyProfile&quot;)}&gt;
                          &lt;Image style={styles.navItemProfileStyle}
                              source={require('../../img/Profile.png')}
                          /&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
  
              &lt;/View&gt;
          );
      }
  }
  </code></pre>