React Native - A Start

Hey Guys!! Good Day!!! In last post , we have seen how to implement pull to refresh, scroll and filtering feature in FlatList. Today, let's see how to implement a FlatList as horizontal list and also as header of another FlatList. Making FlatList as Horizontal one is so easy in React Native with a single property, horizontal. Setting that to {true} will work as expected. And making FlatList to have two columns is also simple in React Native. It needs a property, numColumns , where we can pass the no. of columns to be implemented. Let's combine both of the features.i.e., At top of the page, lets have a horizontal list and below that let's have a grid of 2 columns, like below: Nice na??!! So we can make the grid one as our main list and the top horizontal list as the header of the list. For that, ListHeaderComponent is to be used. import React, { Component } from 'react' ; import { AppRegistry, FlatList, StyleSheet, Image, View,

Hey Guys!! Good Day!!! In last post , we have seen how to render FlatList using React Native Elements. Today, Let's see how to implement filtering functionality, load more functionality and pull to refresh functionality. (i) First, let's see how to implement filtering data from FlatList . Initially, we have to set some fields in State as below:                         isLoading - to show/hide ActivityIndicator                          dataSource - to set the values to FlatList                         dataBackup - to store the values as backup  Let's fetch data from api, on app's launch and set the values to dataSource and dataBackup and use that to render it in FlatList . Then we can set FlatList with itemSeparator  - to show our custom bottom line, header  - to add Searchbar at the top of it.                                   <FlatList                                          ....                                          ....            

Hey Guys!! Gud Day to You!!! In last post , we have learnt some basics in React Native. Today, let's learn about rendering FlatList easily using React Native Elements.   React Native Elements is a library, which makes our designing work much simpler. We just have to install it into our project's location and then to start using it.  Let's start installing (i) Open Terminal and navigate to your project's location. (Ex: D:/React/TestProject ; Here, TestProject is my Project's name). (ii)  (a) With Yarn: If you have installed yarn already, then its much simpler to install with following command: (either with Create React Native or React Native CLI) yarn add react - native - elements (b) With NPM: If you're using Creat React Native, then enter following command: npm install -- save react - native - elements If you're using React Native CLI, then execute following commands: npm i react - native - elements -- sav