React-native image - unknown named module '../img/2.jpeg' - react-native

Question

I'm trying to modify a react-redux tutorial code. I'm trying to load images that are stored locally and the paths are saved in an object.
...
{
"id": 2,
"title": "Redux",
"subtitle": "A State of Mind",
"img": "../img/3.jpeg",
"description": "Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test."
},
...
I have got the following error (I've restarted the simulator a few times)
Unknown named module: '../img/3.jpeg'
Here's the container (eslint also says - unexpected require())
import React, { Component } from 'react';
import {
Text,
TouchableWithoutFeedback,
View,
LayoutAnimation,
Image
} from 'react-native';
import { connect } from 'react-redux';
import { CardSection } from './common';
import * as actions from '../actions';
class ListItem extends Component {
componentWillUpdate() {
LayoutAnimation.spring();
}
renderDescription() {
const { library, expanded } = this.props;
if (expanded) {
return (
<CardSection>
<Image
source={require(library.img)}
style={styles.imageStyle}
/>
<View>
<Text>{library.subtitle}</Text>
<Text style={{ flex: 1 }}>
{library.description}
</Text>
</View>
</CardSection>
);
}
}
render() {
const { titleStyle } = styles;
const { id, title } = this.props.library;
return (
<TouchableWithoutFeedback
onPress={() => this.props.selectLibrary(id)}
>
<View>
<CardSection>
<Text style={titleStyle}>
{title}
</Text>
</CardSection>
{this.renderDescription()}
</View>
</TouchableWithoutFeedback>
);
}
}
const styles = {
titleStyle: {
fontSize: 18,
paddingLeft: 15
},
descriptionStyle: {
paddingLeft: 10,
paddingRight: 10
},
imageStyle: {
height: 100,
width: 100,
backgroundColor: 'black'
}
};
const mapStateToProps = (state, ownProps) => {
const expanded = state.selectedLibraryId === ownProps.library.id;
return { expanded };
};
export default connect(mapStateToProps, actions)(ListItem);
Apart from the image, everything is working fine - just the image is not there.

Answer 1

You can not dynamically require images in React Native, either do it statically, or use uri like this:
source={{ uri: library.img }}
But take in consideration the you have to put your images under this path
anroid/app/src/main/res/drawable
create drawable folder if it's not created.
and update the json file to remove the ../
Please refer to this issue: https://github.com/facebook/react-native/issues/2481