Why rn is not displaying Image? i am giving a raw data to style my ui but when i am trying to add image in my ui than its not displaying Can anyone can tell what i did wrong? my image is a string but when i am hover over the profilepic than its telling me that its "any"
import { StyleSheet, View, StatusBar, Text, Image } from 'react-native'
import React from 'react'
import ButtomNavbar from '../../Components/ButtomNavbar'
import TopNavbar from '../../Components/TopNavbar'
import { formHead } from '../../CommonCss/FormCss'
import { ScrollView } from 'react-native-gesture-handler'
const Profile = ({ navigation }) => {
const data = [
{
username: 'Test user',
upvotes: 10,
downvotes: 2,
profilepic: 'https://yt3.ggpht.com/6quoOf5tT9wSZdn34szck3-0J63aWSlh2CECRrCew080MRbG-8E78SzGskWQzLuUKQjE0oFc=s48-c-k-c0x00ffffff-no-rj',
post: [
post data here //
]
}
]
return (
<View style={styles.container}>
<StatusBar />
<ButtomNavbar navigation={navigation} page={'profile'} />
<TopNavbar navigation={navigation} />
<ScrollView>
<View style={styles.section1}>
<Image style={styles.profileimg} source={{ uri: data.profilepic }} />
</View>
<View style={styles.section1}>
<Text style={styles.txt}>Your Post</Text>
<View style={styles.posts}>
{/* {POST} */}
</View>
</View>
</ScrollView>
</View>
)
}
export default Profile
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
backgroundColor: 'black',
paddingVertical: 50
},
section1: {
width: '100%',
alignItems: 'center'
},
profileimg: {
width: 150,
height: 150,
}
})
2
Answers
data
is an array. useIndex
to access the objectif you have data like this
its should be like this.
the way you want to display your image then declare your data as object not an array.
Now you can access it like this
<Image style={styles.profileimg} source={{ uri: data.profilepic }} />