'React Native: Base64 Image Array String not rendering in FlatList

I need to render a FlatList with Image Items in my RN App, but it looks like, I missed something out. I'm fetching blob data and parse it with Buffer to a String from my API and push it to my Array. I use that Array to render that FlatList

export function HomeScreen() {
  const imagesList: any = [];

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () =>{
    await callAPI().then(res => {
      //blob base64 is from type jpeg
      imagesList.push({imageURI: "data:image/jpeg;base64,"+Buffer.from(res.image1).toString('ascii')})
    })
  }

  return (
    <View style={[styles.imageSlider, {width, height}]}>
      <FlatList
        data={imagesList}
        renderItem={({item, index}) => (
          <>
            {console.log('item: ', item)}
            <Image
              key={index}
              source={{uri: item.imageURI}}
              style={{
                height,
                width,
                resizeMode: 'cover',
                maxHeight: 500,
                maxWidth: 500,
              }}
            />
          </>
        )}
      />
    </View>
  )
}

I checked the data that I receive from the api and everything is fine, but it's not rendering

Could anyone tell me my problem? I'm not an expert in RN Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source