source={require("../assets/image1.png")} - work!!! ----------------------------------------------------------------------------------------------------------------------------------------------
but -> source={require(image.img)} --- doesn't work (image.img = "../assets/image1.png")
export default function Home({ navigation}) {
var images = [
{
key: 0,
img: "../assets/image1.png",
user: "milos_markovic",
}
]
return (<View style={styles.slike}>
{images.map(image => {
return(<View >
<Image
source={require(image.img)}
//this doesn't work (source={require(image.img)}) , image.img = "../assets/image1.png"
//but this -> source={require("../assets/image1.png")} work, why i cant get image from object
/>
</View>)
})}
</View>
)}
Try to use require in object:
import * as React from 'react';
import { Text, View, StyleSheet,Image } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const images = [
{
key: 0,
img: require('@expo/snack-static/react-native-logo.png'),
user: "milos_markovic",
}
]
return (
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={images[0].img}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
LIVE example https://snack.expo.dev/2qkBNGQRg