React Native: Base64 Image Array String not rendering in FlatList

Question

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!

Answer 1

Two problems I can see...

1. You aren't using any state
2. You're encoding the buffer as ASCII where you want Base64

// Define state using the useState hook
const [ imagesList, setImagesList ] = useState<Array<{ imageURI: string }>>([]);

const loadData = async () => {
  const { image1 } = await callAPI()
  // you want an array for some reason ¯\_(ツ)_/¯
  return [{
    imageURI: `data:image/jpeg;base64,${Buffer.from(image1).toString("base64")}`
  }]
}

useEffect(() => {
  loadData.then(setImagesList)
}, [])