Timeline development in React Native

[NamalSanjaya]

Users able to see post/images shared by their friends. Timeline is the place where those will be appeared.(similar to Facebook News feed)

[NamalSanjaya]

We have 2 different way to download images to Timeline.

1. give URL to the component in react native. (I like this way)
   • We have less control
   • Have to first fetch the URL from server and again has to go for an API Call

     export default function ImgDownload(){
     return <Image source={{uri: imgUrl}}/>
     }

2. We fetch the image at the component mounting

   • Creating base64 dataURL needs more memory, takes times

     
     export default function ImgDownload(){
     const [dataUri, setDataUri] = useState("");

   useEffect(() => { let reader = new FileReader(); reader.onload = function() { setDataUri(reader.result) }; (async () => { try { let response = await fetch(imgUrl); if (response.ok) { let blob = await response.blob(); reader.readAsDataURL(blob); return } console.log("get a error status code due to " + response.status); } catch (err) { console.log("could not fetch due to ", err) } })() },[])

   return dataUri==="" ? Loading...:<Image style={style.img} source={{uri: dataUri}}/> }

[NamalSanjaya]

How to create Infinity Scrollbar with FlatList https://javascript.plainenglish.io/react-native-infinite-scroll-pagination-with-flatlist-e5fe5db6c1cb