React Native Image url as param

Question

I'm trying to make a basic React Native app where on the main page a person's picture will be displayed and on clicking that a new View will open and have all the details of that particular person. I'm able to print the name of the person but can't get to display his image, which is saved by the name of the person itself. Example - If the name is XYZ, image name is XYZ.jpg

import React, {Component} from 'react';
import { StyleSheet, Text, View, Image, ScrollView, Button, TouchableWithoutFeedback} from 'react-native';
import { createStackNavigator } from 'react-navigation';


class HomeScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
              <ScrollView vertical={true} contentContainerStyle={{flexGrow: 1}}>
                  <ScrollView horizontal={true}>
                  <TouchableWithoutFeedback  title="Go to Details" onPress={() => {
                        this.props.navigation.navigate('Details', {
                        name: 'Rohit',
                        otherParam: 'anything you want here',
                        });
                  }}>
                  <View style={styles.view}>
                      <Image source={require('./assets/rohit.jpg')} style={styles.image}></Image>
                      <Text style={styles.text}>Rohit</Text>
                  </View>
                  </TouchableWithoutFeedback>

          </ScrollView>
        </View>
    )
  }
}

class DetailsScreen extends React.Component {
  render() {
    const { navigation } = this.props;
    const name = navigation.getParam('name', 'NO-ID');
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  ----HERE--->    <Image source={require('./assets/'+{name}+'.jpg')} style={styles.image}></Image>
        <Text>{name}</Text>
      </View>
    );
  }
}

remove the brackets around name , this one {}. and try hope it helps. or string concatenate it before. i heard that if you concatenate two strings in react native require it throws error — Tharzeez
– Tharzeez, Commented Jun 19, 2018 at 8:05

bennygenel · Accepted Answer · 2018-06-19 08:14:51Z

1

As it states in Images docs, you can't use dynamic image path in react-native unless they are network image paths. Local image paths need to be known in compile so dynamic paths are not supported.

In order for this to work, the image name in require has to be known statically.

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

answered Jun 19, 2018 at 8:14

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native Image url as param

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related