Why rn is not displaying Image?-CodePudding

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,
  }
})

CodePudding user response：

data is an array. use Index to access the object

uri: data[0].profilepic

CodePudding user response：

if you have data like this

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 //
      ]
    }

  ]

its should be like this.

<Image style={styles.profileimg} source={{ uri: data[0].profilepic }} />

the way you want to display your image then declare your data as object not an array.

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 //
      ]
    }

Now you can access it like this