Remove Item with animation in a Horizontal FlatList with LayoutAnimation in React Native

February 27, 2021Posted intutorialNo Comments
I have been working on a horizontal FlatList in React Native. The idea is, a user can remove the item by clicking on the item. So once the item is removed, I need to : Remove the item from the list with a nice opacity animationAt the same time, I need to fill up space with the next items sliding in to fill it up properly. At first, I was trying it out with react native Animated library but it was getting messier and I could not achieve the effects that I wanted. However, with LayoutAnimation from react-native, this can…

Dynamic Height, Width, and Aspect Ratio in React Native

February 4, 2021Posted incode-read, today-i-learnedNo Comments
Let's say you are given this design to build a simple horizontal FlatList. How can you dynamically find the width and height of the items in the flat list? We can do it in different ways but recently in my code read journey I have learned a cool trick from my colleague. First of all, let's find the width of the item, shall we? As we can see from the above image, the whole screen width is 376 and if we inspect our item width in Figma (which is not shown in the above image), the item width is 240.…