MultiSelected List in React Native

MultiSelected List in React Native

December 10, 2020Posted incode-readNo Comments
In today's code-read, I read through how to implement multi-selected inputs. All we need to do is to control an array with selected items.  let's say in our demo user can select his favorite brands from a list of options. First, we need to show all the inputs to the user. We can use FlatList to render the items. Like so - const BRANDS = [ { name: 'Toyota', slug: 'toyota', }, { name: 'Mazda', slug: 'mazda', }, { name: 'Honda', slug: 'honda', }, { name: 'Tesla', slug: 'tesla', }, .....] export default function App() { const [brands, setBrands] =…

Dynamically add height to the ScrollView with Sticky Footer

December 8, 2020Posted intoday-i-learnedNo Comments
In another post, we have seen how to add a sticky footer with ScrollView. One problem occurs if we put a sticky footer in the ScrollView, is that the last part of ScrollView gets hidden/ gets overlapped with the sticky footer. We need to add a proper padding-bottom to the ScrollView so that the last content of the ScrollView is also visible and there is no extra white space when the user scrolls to the bottom. The problem can be seen in the following image. When we scroll down, the sticky footer is overlapping with the red view and the…