skip to Main Content

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


  1. data is an array. use Index to access the object

    uri: data[0].profilepic
    
    Login or Signup to reply.
  2. 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

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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search