Value for uri cannot be cast from readablenativearray to string-CodePudding

Can anyone can tell me how can i fix this error i am using windows and i am building app for andriod expo the error say

Error while updating property 'src' of a view managed by: RCTImageView

null

Value for uri cannot be cast from readablenativearray to string

What is the solution of the error in my case?

I tried doing:

<Image source={{ uri: postImage[0] }} style={styles.image} />

I am doing something like this:

import { StyleSheet, Text, View, Image } from 'react-native'
import React from 'react'

const Post_Big_Card = ({ username, profile_image, postImage }) => {

    console.log(username, profile_image, postImage)

    return (
        <View style={styles.container}>
            <View style={styles.c1}>
                <Image source={{ uri: profile_image }} style={styles.profilepic} />
                <Text style={styles.username}>{username}</Text>
            </View>
            <Image source={{ uri: postImage }} style={styles.image} />
        </View>
    );
}

export default Post_Big_Card

And on consoling the value of username, profile_image, postImage its showing

LOG  TestUser1 https://firebasestorage.googleapis.com/v0/b/geekchat1-bacd8.appspot.com/o/file:/data/user/0/host.exp.exponent/cache/ImagePicker/47df22f7-9124-4db9-8651-a6a8ab9b37c5.jpeg?alt=media&token=98ca96ce-b9d3-4673-ab28-5e724dc40123 [{"post": "https://firebasestorage.googleapis.com/v0/b/geekchat1-bacd8.appspot.com/o/file:/data/user/0/host.exp.exponent/cache/ImagePicker/55ddc4f1-69ce-42c0-a00a-8cd7672bf10a.jpeg?alt=media&token=adf1d5b0-5be7-4e22-9ef0-a2c3beeeb1a9", "postdescription": null}]

And username, profile_image, postImage are coming from:

import { StyleSheet, Text, View, ScrollView, Image } from 'react-native'
import React, { useState, useEffect } from 'react'
import Post_Big_Card from '../Cards/Post_Big_Card'

const FollowersRandomPost = () => {
  const [userData, setUserData] = useState([]);

  useEffect(() => {
    async function fetchUserData() {
      try {
        const response = await fetch('http://10.0.2.2:3000/postdata');
        const data = await response.json();
        setUserData(data);
      } catch (err) {
        console.error(err);
      }
    }
    fetchUserData();
  }, []);

  return (
    <ScrollView style={styles.container}>
      {userData.map(item => (
        <Post_Big_Card
          key={item.postImage}
          username={item.username}
          profile_image={item.profile_image}
          postImage={item.postImages}
        />
      ))}
    </ScrollView>
  );
}

export default FollowersRandomPost

If anyone needs my backend code pls ask but how can i fix this issue?

CodePudding user response：

I think it is because the first element of postImage is object and you want to get uri from there. For this you need to use post key:

<Image source={{ uri: postImage[0].post }} style={styles.image} />

since your postImage looks like this

[
  {
    "post": "https://firebasestorage.googleapis.com/v0/b/geekchat1-bacd8.appspot.com/o/file:/data/user/0/host.exp.exponent/cache/ImagePicker/55ddc4f1-69ce-42c0-a00a-8cd7672bf10a.jpeg?alt=media&token=adf1d5b0-5be7-4e22-9ef0-a2c3beeeb1a9", 
    "postdescription": null
  }
]

CodePudding user response：

It looks like the 'postImage' prop is an array of objects, with each object having a 'post' property that contains an image URL.

To fix the error, you can try updating your <Image> element like this:

<Image source={{ uri: postImage[0].post }} style={styles.image} />

This will pass the first image URL in the 'postImage' array to the 'source' prop. If you want to render multiple images, you can map over the 'postImage' array and render an <Image> component for each image URL like this:

{postImage.map((imageObject) => (
  <Image key={imageObject.post} source={{ uri: imageObject.post }} style={styles.image} />
))}

This will render one <Image> component for each object in the 'postImage' array, with the 'key' prop set to the image URL and the 'source' prop set to the image URL.