I am trying to display an Image in which the data was fetch from an api and render into a flatlist, I am trying to concat or connect the sting link with the variable, in the image source uri but did not work, how can I fix it.

<FlatList 
data = {data}
keyExtractor={item => item.id}
showsVerticalScrollIndicator = {false}  
renderItem={({item}) => {
   return (

    <Image 
            source={{ uri: `https://placewave.com/avatar/${item.user_image}` }}
            resizeMode="cover"
            style={styles.userImage}
    /> 

   )
}}
/>

Thanks for the help

CodePudding user response：

Unfortunately it will not work in such way. Image must not have conditional source prop. Consider moving https://placewave.com/avatar/${item.user_image} to a variable and add condition to display some kind of fallback(like ActivityIndicator) until you will have valid user_image.

CodePudding user response：

Complete test code

import * as React from 'react';
import { Image, Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const data = [{ id: 1, user_image: 'cute-boy-standing-little-white-background-40214306.jpg' }, { id: 1, user_image: 'no image url.jpg' }]
  return (
    <View >
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => {
          let uriVar
          if (item.user_image) uriVar = `https://thumbs.dreamstime.com/b/${item.user_image}`
          return (<View>
            {uriVar != null ?
              <Image source={{ uri: uriVar }}

                style={styles.userImage}
              /> : null} </View>)
        }}
      />
      <Text style={styles.paragraph}>
        Hello
      </Text>

    </View>
  );
}

const styles = StyleSheet.create({
  userImage: {
    width: '150px',
    height: '150px',
    borderWidth: 1
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});