About educcess

Posts by educcess:

React Native Android Build: Exception After Ejecting(Detaching) Expo with ExpoKit

React Native Android Build: Exception After Ejecting(Detaching) Expo

After so much struggle resolved all the build issues for React Native Android build after ejecting expo but using ExpoKit. Now getting android runtime exception, the app crashes as soon as it is launched. Exception is as follows.

React Native Android Runtime Exception

E/AndroidRuntime(17278): Process: com.company.testapp, PID: 17278
E/AndroidRuntime(17278): java.lang.NoClassDefFoundError: Failed resolution of: Lbolts/AppLinks;
E/AndroidRuntime(17278): 	at com.facebook.appevents.internal.SourceApplicationInfo$Factory.create(SourceApplicationInfo.java:131)
E/AndroidRuntime(17278): 	at com.facebook.appevents.internal.ActivityLifecycleTracker.onActivityCreated(ActivityLifecycleTracker.java:131)
E/AndroidRuntime(17278): 	at com.facebook.appevents.internal.ActivityLifecycleTracker$1.onActivityCreated(ActivityLifecycleTracker.java:77)
E/AndroidRuntime(17278): 	at android.app.Application.dispatchActivityCreated(Application.java:189)
E/AndroidRuntime(17278): 	at android.app.Activity.onCreate(Activity.java:952)
E/AndroidRuntime(17278): 	at android.support.v4.app.SupportActivity.onCreate(SupportActivity.java:66)
E/AndroidRuntime(17278): 	at android.support.v4.app.FragmentActivity.onCreate(FragmentActivity.java:297)
E/AndroidRuntime(17278): 	at host.exp.exponent.experience.ReactNativeActivity.onCreate(ReactNativeActivity.java:130)
E/AndroidRuntime(17278): 	at host.exp.expoview.ExponentActivity.onCreate(ExponentActivity.java:69)
E/AndroidRuntime(17278): 	at android.app.Activity.performCreate(Activity.java:6120)
E/AndroidRuntime(17278): 	at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1112)
E/AndroidRuntime(17278): 	at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2467)
E/AndroidRuntime(17278): 	at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2600)
E/AndroidRuntime(17278): 	at android.app.ActivityThread.access$800(ActivityThread.java:177)
E/AndroidRuntime(17278): 	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1469)
E/AndroidRuntime(17278): 	at android.os.Handler.dispatchMessage(Handler.java:111)
E/AndroidRuntime(17278): 	at android.os.Looper.loop(Looper.java:194)
E/AndroidRuntime(17278): 	at android.app.ActivityThread.main(ActivityThread.java:5622)
E/AndroidRuntime(17278): 	at java.lang.reflect.Method.invoke(Native Method)
E/AndroidRuntime(17278): 	at java.lang.reflect.Method.invoke(Method.java:372)
E/AndroidRuntime(17278): 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:959)
E/AndroidRuntime(17278): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:754)
E/AndroidRuntime(17278): Caused by: java.lang.ClassNotFoundException: Didn't find class "bolts.AppLinks" on path: DexPathList[[zip file "/data/app/com.company.testapp-1/base.apk"],nativeLibraryDirectories=[/data/app/com.company.testapp-1/lib/arm, /vendor/lib, /system/lib]]
E/AndroidRuntime(17278): 	at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:56)
E/AndroidRuntime(17278): 	at java.lang.ClassLoader.loadClass(ClassLoader.java:511)
E/AndroidRuntime(17278): 	at java.lang.ClassLoader.loadClass(ClassLoader.java:469)
E/AndroidRuntime(17278): 	... 22 more
E/AndroidRuntime(17278): 	Suppressed: java.lang.ClassNotFoundException: bolts.AppLinks
E/AndroidRuntime(17278): 		at java.lang.Class.classForName(Native Method)
E/AndroidRuntime(17278): 		at java.lang.BootClassLoader.findClass(ClassLoader.java:781)
E/AndroidRuntime(17278): 		at java.lang.BootClassLoader.loadClass(ClassLoader.java:841)
E/AndroidRuntime(17278): 		at java.lang.ClassLoader.loadClass(ClassLoader.java:504)
E/AndroidRuntime(17278): 		... 23 more
E/AndroidRuntime(17278): 	Caused by: java.lang.NoClassDefFoundError: Class not found using the boot class loader; no stack available
V/SettingsInterface(  765):  from settings cache , name = dropbox:data_app_crash , value = null
V/SettingsInterface(  765):  from settings cache , name = send_action_app_error , value = 1
D/ActivityManager(  765): SVC-mBroadcastQueues: com.android.server.am.BroadcastQueue@29a56dae
D/ActivityManager(  765): SVC-mBroadcastQueues: com.android.server.am.BroadcastQueue@256ee74f
W/ActivityManager(  765):   Force finishing activity 1 com.company.testapp/.MainActivity

 

Solution

Finding the solution… Will update it soon here.

React Native Building In Android and iOS: After Ejecting(Detaching) Expo with ExpoKit

React Native Building In Android and iOS: After Ejecting(Detaching) Expo

I am trying to build React Native app for android and iOS but keep finding one and other issues. After so much struggle I succeeded with initial hickups but now struck at one point where I am not finding any solution.

Problems I am facing with React Native Build For Android and iOS , before encountering the issue I followed the below steps

1. Install Cocoapods (https://cocoapods.org/)
2. Run pod install from your project’s ios directory.
3. Run ‘react-native run-ios’ in the project root folder.
4. Run ‘react-native run-android’ in the project root folder.

After running react-native run-android I am getting below error.

:app:transformClassesWithJarMergingForDebug 
FAILED

FAILURE: Build failed with an exception.

* What went wrong:

Execution failed for task ':app:transformClassesWithJarMergingForDebug'.

com.android.build.api.transform.TransformException: java.util.zip.ZipException: duplicate entry: com/google/android/gms/auth/api/signin/zzc.class
* Try:

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 25.103 secs

Could not install the app on the device, read the error above for details.

Make sure you have an Android emulator running or a device connected and have

set up your Android development environment:

https://facebook.github.io/react-native/docs/android-setup.html

————————————————————————————————————————————————————————————————————————

My app gradle file looks as follows

<span style="color: #3366ff;">apply plugin: 'com.android.application'

android {
  compileSdkVersion 26
  buildToolsVersion '26.0.2'

  defaultConfig {
    applicationId "com.mycompany.testapp"
    minSdkVersion 20
    targetSdkVersion 25
    versionCode 1
    versionName "1.0"
    multiDexEnabled true
    ndk {
      abiFilters 'armeabi-v7a', 'x86'
    }
    manifestPlaceholders = [
      'appAuthRedirectScheme': 'com.mycompany.testapp'
    ]
  }
  buildTypes {
    release {
      minifyEnabled false
      proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
  }
  dexOptions {
    javaMaxHeapSize "8g"
  }
}

task exponentPrebuildStep(type: Exec) {
  workingDir '../../'

  if (System.getProperty('os.name').toLowerCase().contains('windows')) {
    commandLine 'cmd', '/c', '.\\.expo-source\\android\\detach-scripts\\prepare-detached-build.bat'
  } else {
    commandLine './.expo-source/android/detach-scripts/prepare-detached-build.sh'
  }
}
preBuild.dependsOn exponentPrebuildStep

repositories{
  flatDir{
    dirs 'libs'
  }
  mavenLocal()
  maven { url 'https://maven.fabric.io/public' }
}

dependencies {
    compile project(':react-native-social-share')
    compile project(':react-native-maps')
    compile project(':react-native-vector-icons')
  compile fileTree(dir: 'libs', include: ['*.jar'])
  testCompile 'junit:junit:4.12'
  compile 'com.android.support:appcompat-v7:25.3.1'
  compile 'com.android.support:multidex:1.0.1'

  compile 'com.google.firebase:firebase-core:10.0.1'
  compile 'com.google.firebase:firebase-auth:10.0.0'
  compile 'com.google.android.gms:play-services-auth:10.2.1'

  compile('host.exp.exponent:expoview:21.0.0@aar') {
    exclude group: 'com.facebook.android', module: 'facebook-android-sdk'
    exclude group: 'com.facebook.android', module: 'audience-network-sdk'
    exclude group: 'io.nlopez.smartlocation', module: 'library'
    transitive = true;
  }

  compile ('com.facebook.android:facebook-android-sdk:4.+') {

  }
  compile('com.facebook.android:audience-network-sdk:4.+') {
    exclude module: 'play-services-ads'
  }
  compile('io.nlopez.smartlocation:library:3.2.11') {
    transitive = false
  }
}
</span>

 

Solution:

The solution is to find the conflicting dependencies using following command inside your app/android folder

$ ./gradlew app:dependencies

Closely observe the dependency hierarchy and check the conflicted dependency for com.google.android.gms. To resolve this you have to exclude it for specific dependency as follows, see the updated build.gradle file

apply plugin: 'com.android.application'

android {
  compileSdkVersion 26
  buildToolsVersion '26.0.1'

  defaultConfig {
    applicationId "com.mycompany.testapp"
    minSdkVersion 19
    targetSdkVersion 25
    versionCode 1
    versionName "1.0"
    multiDexEnabled true
    ndk {
      abiFilters 'armeabi-v7a', 'x86'
    }
    manifestPlaceholders = [
      'appAuthRedirectScheme': 'com.mycompany.testapp'
    ]
  }
  buildTypes {
    release {
      minifyEnabled false
      proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
  }
  dexOptions {
    javaMaxHeapSize "8g"
  }
}

task exponentPrebuildStep(type: Exec) {
  workingDir '../../'

  if (System.getProperty('os.name').toLowerCase().contains('windows')) {
    commandLine 'cmd', '/c', '.\\.expo-source\\android\\detach-scripts\\prepare-detached-build.bat'
  } else {
    commandLine './.expo-source/android/detach-scripts/prepare-detached-build.sh'
  }
}
preBuild.dependsOn exponentPrebuildStep

repositories{
  flatDir{
    dirs 'libs'
  }
  mavenLocal()
  maven { url 'https://maven.fabric.io/public' }
}

dependencies {
  compile project(':react-native-vector-icons')
  compile(project(':react-native-maps')){
      exclude group: 'com.google.android.gms'
  }

  compile fileTree(dir: "libs", include: ["*.jar"])
  compile 'com.android.support:appcompat-v7:25.3.1'
  compile "com.facebook.react:react-native:+"  // From node_modules
  compile ("com.google.android.gms:play-services-base:10.0.1") {
      force = true;
  }
  compile ("com.google.android.gms:play-services-maps:10.0.1") {
      force = true;
  }
  compile ("com.google.android.gms:play-services-gcm:10.0.1") {
      force = true;
  }
  compile ('com.google.firebase:firebase-core:10.0.1') {
      force = true;
  }


  testCompile 'junit:junit:4.12'

  compile project(':react-native-vector-icons')

  compile(project(':react-native-social-share')){
        exclude group: 'com.google.android.gms'
  }

  compile('host.exp.exponent:expoview:21.0.0@aar') {
    exclude group: 'com.facebook.android', module: 'audience-network-sdk'
    exclude group: 'io.nlopez.smartlocation', module: 'library'
    exclude group: 'com.google.android.gms'
    transitive = true;
  }

  compile('com.facebook.android:audience-network-sdk:4.+') {
    exclude module: 'play-services-ads'
  }
  compile('io.nlopez.smartlocation:library:3.2.11') {
    transitive = false
  }


}

React Native Android Build Failure : failed to find Build Tools revision 26.0.1 or failed to find Build Tools revision 23.0.1

React Native Android Build Failure : failed to find Build Tools revision 26.0.1 or failed to find Build Tools revision 23.0.1

If you are facing following exception

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
&gt; A problem occurred configuring project ':react-native-vector-icons'.
   &gt; failed to find Build Tools revision 26.0.1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 2 mins 44.097 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

Or the exception may be for Build Tools revision 23.0.1

Then Kindly install build tools versions from your android studio. 

Go to android studio Preferences, select second tab SDK Tools, Install respective build tool version. Do not forget to check mark Show Package Details in the dailog box. Refer below screenshot

ReatNativeAndroidExceptionBuildToolsrevision

ReatNativeAndroidExceptionBuildToolsrevision

 

ReactJS/Redux Exception – Uncaught TypeError: Cannot read property ‘type’ of undefined

ReactJS/Redux Exception – Uncaught TypeError: Cannot read property ‘type’ of undefined

This issue might occur in many cases but one case which is hard to troubleshoot and debug is as given below. The typical call stack looks as follows for the exception

Uncaught TypeError: Cannot read property 'type' of undefined
at bundle.js:64518
    at bundle.js:64518
    at Array.forEach (&lt;anonymous&gt;)
    at x (bundle.js:64518)

One can make out nothing from the call stack, it looks meaningless. Hence the debugging will be tedious job in ReactJS . 

Solution for the above exception

check whether return statement with dispatch is missing in your redux action method.

  return (function (dispatch) {

  });

Your action should have return statement as shown above.

More Read About ReactJS:

Advantages of React Stateless Functional Components

Advantages of React Stateless Functional Components

Before reading this post, if you have not gone through what are functional components in Reactjs then kindly go through this post

In this post we will see what are the advantages of functional posts in React js. If you check your react js code, you will quickly figure out that many components do not actually need state, they do get data from parent as props and will render the information. In such a case why to introduce state and make it complicated? rather I would prefer calling a function which returns me a component. Isn’t it so simple ? React 14 introduced Functional Components, also called as stateless components and removed unnecessary complications. So let us explore what are the advantages of stateless components 

Advantages of React Functional/Stateless Components: Ref

1. More focused on presentation

React is forcing us to write components which are used only for presentational purpose, these components are useful for dumb presentational purpose only, that focus on UI rather than behaviour. Technically speaking its normal tendency to go for stateful components, doing that way we are making our code easily hackable where every damn component keeps its own local state. Functional components allowing us to have pure components which just focus on presentation. where as the state is maintained by few higher level components.

2. Gain in Performance

Stateless components will bring performance gain since there is no state and lifecycle of a component. React doesn’t need to have unnecessary check and memory allocations which eventually brings performance boost.

3. Clean and Optimised Code

Stateless components reduce lot of code, almost 20% – 30% reduction in code and hence the code will become clean and optimised.

4. Easy to debug

Functional components are pure components and helps your to analyse your code quickly and you no need to put log if assert calls everywhere to debug. 

React more on React

React More on ReactNative 

Glimpse Of Intel AI & HPC Summit : Application’s Of Artificial Intelligence – Part 3

Glimpse Of Intel AI & HPC Summit : Application’s Of Artificial Intelligence – Part 3

Read my previous article Part 2

Intel demonstrated some of the great applications of Artificial Intelligence where Intel’s hardwares and softwares out performing to solve complex problems in realtime using AI. Intel is working with many customers to solve their complex problems. 

Application’s Of Artificial Intelligence

1. Tumour detection in large 3-D medical images

Identifying tumour from huge medical images is yet another complex problems, today we have algorithms which does this job better than doctors.

2. Disease Risk Prediction Using Genetic Variation Data

3. Classification and predictions of protein sequences

4. Intelligent Knowledge Management 

This is another interesting application where, the algorithms analyse the huge set of documents and help the management to answer for complex queries.

5. Oil Rig Inspector Assist System

This is a very complex problem, identifying corrosion on nut-bolts under deep sea water is a complex problem solve for oil mining industries. Currently it is a manual process, where video cameras are fixed in oil rig systems and several hundred people will manually go through thousands of frames of videos manually and identify the corrosion on nut-bolts.

Now Intel is working with such industries to automate the process by analysing the video frames. thousands of video frames will be analysed in just few hours. The algorithms are capable of identifying the corrosion with great precision.

6. Self driving Cars and Car automation

BMW CARASSO is the system based on ai, the company is using to collect data from several sensors to debug their hard systems and to achieve the quality in their product. Company is using this system only for their internal quality improvements and to understand the roads and behaviour of the cars.

Intel has lot of open source code base which can be used for many such applications, kindly see the source code of Intel’s Nervana in Github

Glimpse Of Intel AI & HPC Summit : Intel’s Vision For Artificial Intelligence Part 2

Glimpse Of Intel AI & HPC Summit : Intel’s Vision For Artificial Intelligence Part 2

Kindly read part 1 of this article .The next biggest step taken by Intel is bringing out Intel Xeon Platinum processor. This will bring a transformation in cloud computing, there are multiple benefits we gain from Xeon processors as given below.

Benefits Of Intel Xeon Processors:

Breakthrough Performance of Intel Xeon Platinum

Intel Xeon Breakthrough Performance

Intel Xeon Breakthrough Performance

Along with this Intel is addressing several issues to bring the speed in computing – the biggest problem in computing is the waiting time of the processor due to slow response of hard drives. Hard drives are very slower compared to processors and hence processors always waste their time to wait for hard drives.

Intel addressing the waiting time of processors through Intel’s 3D NAND technology and Intel OPTANE technology, through these technology we can bring highly responsive applications, highly responsive cloud storage.

Read More About Applications of AI: glimpse-of-intel-ai-hpc-summit-applications-of-artificial-intelligence-part-3

Glimpse Of Intel AI & HPC Summit : Intel’s Vision For Artificial Intelligence Part 1

Glimpse Of Intel AI & HPC Summit : Intel’s Vision For Artificial Intelligence

Thought of writing highlights of Intel AI & HPC Summit held in Bengaluru on 9Mar2018, The event was superb What is AI, What is current state of AI, What is future of AI. Now the whole world is talking a lot about AI , Artificial intelligence is transforming the industries, health care, transportation, education and our entire life style 🙂 There are lot of positive side of Artificial Intelligence but many people are afraid about the future, some even say Humanity may destroy either by natural disasters or by AI and some of the demos shown in yesterday’s summit also tend to think us in that way.

What is AI (Artificial Intelligence) ?

Well I do not give textbook definition for AI, because one google search on this topic will give you many definitions, here I would like to explain AI in simple way, humans are most intelligent animals on this planet, we invented machines to ease our life, we learn to manage and control the machines for our comfort, but that era is over, now we are onto a new transformation, machines are becoming smarter than humans, with no doubt one can say in future machines will control humans 🙂 thats all AI 

for your better understanding of AI, Intel defines as ” the key to machine intelligence is that it must be able to sense, reason, and act, then adapt based on experience.”

  • SenseIdentify and recognize meaningful objects or concepts in the midst of vast data. Is that a stoplight? Is it a tumor or normal tissue?
     
  • ReasonUnderstand the larger context, and make a plan to achieve a goal. If the goal is to avoid a collision, the car must calculate the likelihood of a crash based on vehicle behaviors, proximity, speed, and road conditions.
     
  • ActEither recommend or directly initiate the best course of action. Based on vehicle and traffic analysis, it may brake, accelerate, or prepare safety mechanisms.
     
  • AdaptFinally, we must be able to adapt algorithms at each phase based on experience, retraining them to be ever more intelligent. Autonomous vehicle algorithms should be re-trained to recognize more blind spots, factor new variables into the context, and adjust actions based on previous incidents.

What Does AI Look Today ?

 

 

What does AI look Today

What does AI look Today

 

Reference : How To Get Started as a Developer in AI

As per Prakash Mallya, Managing director – Sales and Marketing Group, Intel India Pvt Ltd, today the traffic due to ai, some stats shows as follows.

3000 GB per day from smart hospitals 

4000 GB per day from smart Cars

1, 000, 000 GB per day from connected factories

also 1 in 7 organisations adopting AI and the key sectors where AI is being adopted are,  BFSI (Banking Finance Services and Insurance) , Health care, Industries, Self driving cars etc. 

Intel’s Vision For AI

Intel is focusing on different aspects to emerge as leader in AI, it is not only building great products but it is creating the whole eco system to succeed in this AI era. Following are some of the key focus for Intel, which we can say building blocks for Artificial Intelligence

  1. Machine Learning

pcworld has detailed post about how Intel is mastering in machine learning through Intel’s Nervana, a Deep Learning Cloud and System. Nervana Cloud is a hosted platform designed to give organizations of all sizes the ability to quickly build and deploy deep-learning tools without having to invest in infrastructure equipment or a large team of experts. Based on neon, Nervana’s open-source deep-learning framework, the full-stack offering is optimized to handle complex machine-learning problems at scale

  2. Reasoning System

Another important building blog for AI is, reasoning system. Intel® Saffron™ uses human-like reasoning to find hidden patterns in data to enable confident decisions that deliver rapid return on investment (ROI).

  3. Computer Vision

Intel® Movidius™ VPUs drive the demanding workloads of  modern computer vision and AI applications at ultra-low power. By coupling highly parallel programmable compute with workload-specific hardware acceleration, and co-locating these components on a common intelligent memory fabric, Movidius achieves a unique balance of power efficiency and high performance. Movidius technology allows device makers to deploy deep neural network and computer vision applications in categories such as smartphones, drones, intelligent cameras and augmented reality devices.

  4. Depth Sensing

Intel® RealSense™ technology is fundamentally re-shaping the future of technology by equipping devices with the ability to see, understand, interact with, and learn from their environment.1 There are three products with depth perception technology that enable you to create new and innovative ways to connect with the world.

Read More : glimpse-of-intel-ai-hpc-summit-intels-vision-for-artificial-intelligence-part-2

React Native List View : Animate Rows While Scrolling Using FlatList

React Native List View : Animate Rows While Scrolling Using FlatList

In my previous post I have written about how to use React Native FlatList and we have seen the issues we face with pagination also how to add a loading indicator in the footer of FlatList. You can first read about it Link In this post we will see how to animate the rows while scrolling a FlatList.

Animating Rows In React Native FlatList :

To achieve animation for FlatList Rows, you have to install an npm module react-native-animatable, which provides variety of smooth animations for List Rows.

Installation of npm module:

$ npm install react-native-animatable --save

 

To make a continuous animation do this

&lt;Animatable.Text animation="slideInDown" iterationCount={5} direction="alternate"&gt;Up and down you go&lt;/Animatable.Text&gt;
&lt;Animatable.Text animation="pulse" easing="ease-out" iterationCount="infinite" style={{ textAlign: 'center' }}&gt;❤&lt;/Animatable.Text&gt;

 

To animate rows in FlatList Rows do this

import * as Animatable from 'react-native-animatable';

class FlatListRow extends Component {
  render(){
    return(
      &lt;Animatable.View animation='fadeInUp'&gt;;
       &lt;TouchableWithoutFeedback&gt;;
          // here your row component
       &lt;/TouchableWithoutFeedback&gt;;
      &lt;/Animatable.View&gt;;
    );
  }
}

Variety of animations are supported in this React Native Animation library

React Native List View : Pagination With FlatList – Building A Great Scrollable List In React Native

React Native List View : Pagination With FlatList  – Building A Great Scrollable List In React Native

FlatList is is an interface used to render flat list, the component is provided by Facebook’s React Native Library

Handy features of FlatList are as follows

  1. It renders list of items if you just provide rendering View
  2. You can mention whether your list is horizontal or vertical, by default its vertical list view
  3. Configurable Callbacks provided 
  4. Header / Footer / Separator are supported by FlatList
  5. Pull To Refresh is made simple with React Native Flat List View
  6. Pagination is made easy using React Native Flat List view

How To Use React Native Flat List Component: With Loading symbol in Footer

&lt;FlatList
          refreshing={this.state.refreshing}
          onRefresh={true}
          onEndReachedThreshold={0.5}
          onEndReached={({ distanceFromEnd }) =&gt; {
            //Call API to fetch next page of data
            console.log('on end reached ', distanceFromEnd);
          }}
          ListFooterComponent={(
            &lt;View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}&gt;
              &lt;Spinner color='#6d4c41' /&gt;
              &lt;Text&gt;Loading please wait...&lt;/Text&gt;
            &lt;/View&gt;
          )}
          data={this.props.messages}
          renderItem={this.notificationContent.bind(this)}
          keyExtractor={(item) =&gt; item._id}
        /&gt;

React Native Pull To Refresh Using Flat List

Pull to refresh is made easy by just mentioning onRefresh = true and we should also mention refreshing = true while fetching new data 

Pagination Using Flat List In React Native

To achieve pagination mention onEndReachedThreshold some value between 0 – 1 and  a callback for onEndReached should be provided where we have a logic to call API to fetch next page of data

Official documentation of React Native FlatList has many more functionalities listed.

Issues with React Native FlatList or onEndReached doesn’t get fired

Some times pagination for FlatList doesn’t work as expected, onEndReached Will never get fired, or some times it will be called only first time when list is loaded. Possible reason for this behaviour would be keeping FlatList inside native base Container or Content, Keep FlatList inside View to fix the issue. 

Another possible solution to the issue of FlatList is changing onEndReachedThreshold value to a small number like 0.001.

Another Interesting solution which worked for me is giving height explicitly to the FlatList , this will call onEndReached callback

style={{ height: ( Dimensions.get(‘window’).height – 100 ) }}

Addressing The issue : React Native FlatList onEndReached called again and again

This can be addressed by ignoring the callback calls, this is can be done by using distanceFromEnd, if the value is +ve then do your pagination stuffs, if the value is    -ve then ignore the callback call. ReactNative FlatList returns +ve value when scroll reaches the end of the list. So the update code looks like below

&lt;FlatList
          refreshing={this.state.refreshing}
          onRefresh={true}
          onEndReachedThreshold={0.5}
          onEndReached={({ distanceFromEnd }) =&gt; {
            if (distanceFromEnd &gt;= 0) {
              //call API to get next page values
            }
            console.log('on end reached ', distanceFromEnd);
          }}
          data={this.props.messages}
          renderItem={this.notificationContent.bind(this)}
          keyExtractor={(item) =&gt; item._id}
        /&gt;


Also Explore React Native Exceptions