React Native

React Native provide component called FlatList which is used for listing any type dynamic or static data. In this blog we will discuss how to implement a FlatList in React Native.

To use FlatList component import FlatList  from 'react-native' as below.

Now define an array of data which will bind in flatlist, Here i am taking static data as below , you can have your own static or dynamic data from API endpoint.

Now call FlatList component with data-source.

That's all, we done with flatlist so complete component will looks like

Now if want to display item title on touch of list item, or other operation on an item then modified your renderItem function as bellow

1. Import StyleSheet,Text,View,SectionList, SafeAreaView  Component in your class as below.

2. Declare an array of list to display on SectionList

3. Set some style to your UI Elements

4. Create SectionList component inside your render function as below

In the above code snippet , sections holds the data to display in list . stickySectionHeadersEnabled is for sticky header section of the list.

5. Complete source code of component will as below

When list become long its difficult to find items on list. So in this blog we will learn how to implement searchable FlatList in react native.

Import all required component as below.

Here SearchBar component using from 'react-native-elements' .

Lets first define an array of list for our FlatList

Now lets initialize  some state variable which will be use later.

Now,  we need to add a search bar for FlatList so user can search the list . FlatList has a prop to add any custom component to its header which is useful as we’ll be adding a search component there.

In the above code snippet, seachAction function which will filter our existing list user input on seacrbar

So our flatList component will look like

Here ListHeaderComponet is the  property to add seacrh bar at  top of the FlatList.

So our complete component will be as bellow

Previously we learn how we can implement a SectionList  . In this blog we will learn how to make section list expandable.

Here we'll use a flag isExpanded in data list, Initially isExpanded is set to false for each data item in the list. In each click of header section we will change the value of isExpanded.

1. Declare the data  list or if you have dynamic data format the data as below

2. Define constructor in your class and set state

Here DATA list which we define above assign to listData for binding list data from state. If you have dynamic data the after fetching update state variable "listData" with new data .

3. Now set-up the SectionList component , here data source we are using from the state.

In renderItem component we are passing section data along with item, so we can check wether isExpanded is set true or false. If it is set to false then we will return an empty View, if true then we will return the list item.

expand() function is used for expanding the list item, so on each click of header section we are going to invoke the expand() function setting up the updated value of isExpanded flag as below. And along with update the state so list can render with updated data.

4. That's all, our expandable sectionList is done. Full source code will look like below.

We can get access to a navigator through a ref and pass it to the NavigationService which we will use for navigate from anywhere . Use this only with the top-level (root) navigator of your app.

step 1: Create a file NavigationService.js

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

step 2:  Add the navigation ref in app.js as below

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { AppNavigator } from './navigator';
import NavigationService from './NavigationService';
import { store } from './redux/store';


class App extends Component {
   render() {
     return (
      
                  ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
         />
      
     );
   }
}
export default App;

step 3 : To use of navigation ref , import  NavigationService and call the navigate function

import NavigationService from '../../NavigationService';
const checkAuth=(response)=>{
  if(response.status==='unauthorized'){
      NavigationService.navigate('Logout');
  }else {
    return true;
  }
}
export default checkAuth;