React Native - A Start

Hey Guys!! Good Day!!! Hope you all are doing fine! Today let's learn about showing Toast message and Alert in React Native. These two components are some of the most important UI Components. So let's learn in detail. Alert: It displays an alert dialog with title and message. We can also add buttons to it to perform click operation, which in turn, fires onPress() event. In IOS, we can have any no. of buttons in it. But in Android, we can atmost have only 3 buttons. i.e., one Positive button(like 'Ok'), one negative button(like 'Cancel') and one neutral button(like 'Later'). Also In Android, by default, the alert will be dismissed by tapping outside of the 'Alert'. At that time, the event onDismiss() will be fired, where we can do any operation we need. In case, if you don't need that dismissible functionality, you can disable it by adding, { cancellable: false } Alert.alert('Title', 'Message here',

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

Hey Guys!! Good Day!! In previous post , we have done installation and setup for React Native. Today, Let's learn some basics of React Native. Basically, React Native uses Android and IOS device's native components instead of using <div>, <span>, etc in WebView to design UI like other cross platforms. To use the Components, we have to know stuffs like Props and State first. Props and State: Props is nothing but that can be changed dynamically in a Component. Whereas, State can be referred as triggering method, which is used to update or refresh values in a Component. Each time when setState() method is calling , the render function of that Component will also be called simultaneously. Let's learn about it with example. Props: React Native Components have default Props. Also we can create custom props for our own Components. <Image  source={       {uri:'https://encrypted-tbn0.gstatic.com/images?                   q=tbn:ANd9GcSVBDn