0
 var testData=[{"name":"require('./Images/X.jpg')"},{"name":"require('./Images/Y.jpg')"}];

 class SampleRow extends React.Component{
 render() {
  return (
  <View style={styles.wrapper}>
    <View>
            <Image style={styles.Img} source={this.props.name}></Image> 
            <Text style={styles.text}>Hello</Text>
    </View>
   </View>
);
}
}

class ListViewRows extends React.Component{
 constructor() { super(); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(testData), }; }


 renderRow(rowData) {
return <SampleRow name={rowData.name} style={styles.row} />
 }

 render() {
  return (
  <ListView
    ref="listView"
    style={styles.container}
    dataSource={this.state.dataSource}
    renderRow={this.renderRow}
  />
);
 }
}


var styles = StyleSheet.create({
 container: {
flex: 1,
backgroundColor: '#F5FCFF',
padding: 20
 },
 wrapper: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingRight: 10,
borderBottomWidth: 1,
borderBottomColor: '#e9e9e9',
marginTop: 20
 },
 text: {
fontSize: 24,
fontWeight: "100",
color: 'black',
  },Img:{
 width:200,height:200,resizeMode: 'contain'
  },
  });

  AppRegistry.registerComponent('List', () => ListViewRows);

I am trying to create listview with images. Trying to replicate this https://rnplay.org/apps/d3DM6A .In my Output image is not showing up. I refereed React-native failed propType on Image component and changed source to

source={{uri: this.props.name}} It still not works.Kindly assist.

Community
  • 1
  • 1
Lambo
  • 79
  • 2
  • 11

1 Answers1

1

Replace 

 var testData=[{"name":"require('./Images/X.jpg')"},{"name":"require('./Images/Y.jpg')"}];

with 

 var testData=[{"name":require('./Images/X.jpg')},{"name":require('./Images/Y.jpg')}];
Jickson
  • 5,133
  • 2
  • 27
  • 38
  • @ Jickson It works. I tried that also previously the main problem was my Geny Motion was displaying the previous output several times even though i changed the code so I thought some error in code.I restarted Geny Motion several times and it works atlast. I have one question also my app which involves lot of static images is becoming slower as I develop it. Navigation is getting difficult in particular. How to overcome this – Lambo Nov 02 '16 at 02:10
  • Sorry difficult to find the reason without seeing code.. Create a question with part of code which we can use to re create the issue. Hopefully we will be able help you then. – Jickson Nov 02 '16 at 04:39
  • Size of the image files affects the performance of the app.I reduced the dimension of images to lower KB it works fine now. – Lambo Nov 02 '16 at 09:17
  • Cool. Nice you found the solution :) – Jickson Nov 02 '16 at 09:18