Passing image source to another navigation - React Native

Question

I am build a simple app for school and I have a question regarding passing images source from one navigation view to another navigation view.

Here is the code:

class projekt2 extends React.Component {
  render() {
    return (
      <Navigator initialRoute={{id:'first'}} renderScene={this.navigatorRenderScene}/>
    )
  }

  navigatorRenderScene(route, navigator) {

    _navigator = navigator;

    switch(route.id) {
      case 'first':
        return (<First navigator={navigator} title="first" />);
      case 'second':
        return (<Second navigator={navigator} title="second" />)
      case 'third':
        return (<Third navigator={navigator} title="third" />)
    }

  }
};

class First extends React.Component { // http://blog.paracode.com/2016/01/05/routing-and-navigation-in-react-native/
  navSecond() {
    this.props.navigator.push({
      id: 'second',
    })
  }
  render() { //na sklad se da navigacijske slide, če klikaš gumbek back, se jemlje iz tega sklada
    return (
      <View style={styles.container}> 
          <TouchableHighlight
            onPress={this.navSecond.bind(this)}>
              <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}>
              <Image source={require('./slike_google/btn_google_light_normal_hdpi.9.png')}></Image>
                <Text>Sign in with Google</Text>
              </View>
          </TouchableHighlight>
        </View>
    );
  }
}

class Second extends React.Component {

  _handlePress() {
    this.props.navigator.push({
      id: 'third',     
    })
  }

  _dodaj() {
    ToastAndroid.show('Ni se vnesenih kartic',ToastAndroid.LONG);
  }


  render() {
    return (
      <View style={styles.container} id="prva">
        <TouchableHighlight onPress={this._dodaj.bind(this)}>
          <Image source={require( './slike_google/plus_318-80291.png')} style={{width: 30, height: 30}}></Image>
        </TouchableHighlight>
        <View>
          <TouchableHighlight onPress={this._handlePress.bind(this)}>
            <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image>
          </TouchableHighlight>
          <TouchableHighlight onPress={this._handlePress.bind(this)}>
            <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image>
          </TouchableHighlight>
          <TouchableHighlight onPress={this._handlePress.bind(this)}>
            <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image>
          </TouchableHighlight>
          <TouchableHighlight onPress={this._handlePress.bind(this)}>
            <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image>
          </TouchableHighlight>
          <TouchableHighlight onPress={this._handlePress.bind(this)}>
            <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image>
          </TouchableHighlight>
        </View>
        <Text ref="none" style={{opacity: 0}}>Se ni dodanih kartic</Text>
      </View>
    );
  }
};

class Third extends React.Component {

  render() {
    return (
    <View style={styles.container}>
      <Image source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')}></Image>
    </View>
    );
  }
}

So, in class Third should image's source should be something like: source={passed_data.url}.

Thank you for your help

You need to pass it down as a prop. Check out this tutorial https://medium.com/@dabit3/react-native-navigator-navigating-like-a-pro-in-react-native-3cb1b6dc1e30 . — Nader Dabit, Jun 11 '16 at 16:02
The answer is No, it's possibly like `source={{uri:_httpAddress_}}` or `source={require(_localPath_)}` look [here](https://facebook.github.io/react-native/docs/image.html#source), but if you use `require`, you can't use variable in it like : `source={require(passed_data.url)}`, look [here](http://stackoverflow.com/questions/33907218/react-native-use-variable-for-image-file). By the way, you can use navigator.push to pass data between components. — Siou, Jun 11 '16 at 16:10

score 1 · Accepted Answer · answered Jun 13 '16 at 16:38

I did an example to you in https://rnplay.org/apps/b3mJ5A

var SampleApp = React.createClass({
  render: function() {
    var vSource = {uri: 'http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg'};
    return (
      <View style={styles.container}>
        <Text>CustomImage Example</Text>
        <CustomImage source={vSource} />
      </View>
    );
  }
});

var CustomImage = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={this.props.source} style={{width: 60,height: 60,}}/>
      </View>
    );
  }
});

It works fine.

Hope that is what are you looking for.

Passing image source to another navigation - React Native

1 Answers1