dharavp

Command to get hashKey for facebook login (android)
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

dharavp

Fabric and Crashlytic setup for iOS:

1)  Login on https://www.fabric.io/
2)  Install Fabric on Mac
3)  Install two framework 1) Fabric.framework 2) Crashlytics.framework
4)  Put this two framework in your project folder (below AppDelegate.m file)
5)  In Fabric app, Login to your account, choose your app in it. After that follow the steps given in it. 

Add a run script and build a phase
 

dharavp

Fabric and Crashlytic setup for Android:

1)	Install Fabric Plugin From system preferences.
2)	Log in to your account in it and select your app and follow the steps given in it.

Add Fabric key in manifest and give internet permission:
 <meta-data
 android:name="io.fabric.ApiKey"
 android:value="abd55412a7e88e86f3c8289e87c3b175b157ed4f" /> // this value is different for your project

dharavp

react-native-fbsdk (For facebook login)
react-native-fast-image (For loading image from url)
react-navigation and react-native-gesture-handler
react-navigation-redux-helpers, react-redux, redux, redux-thunk 
react-native-device-info
react-native-exception-handler
react-native-fabric

dharavp

render() {
    if (this.state.loading && this.page === 1) {
      return <View style={{
        width: '100%',
        height: '100%'
      }}><ActivityIndicator style={{ color: '#000' }} /></View>;
    }
    return (
      <View style={{ width: '100%', height: '100%' }}>
        <FlatList

dharavp

  onRefresh() {
    this.setState({ isRefreshing: true }); // true isRefreshing flag for enable pull to refresh indicator
    const url = `https://api.stackexchange.com/2.2/users?page=1&order=desc&sort=reputation&site=stackoverflow`;
    axios.get(url)
      .then(res => {
        let data = res.data.items
        this.setState({ isRefreshing: false, data: data }) // false isRefreshing flag for disable pull to refresh indicator, and clear all data and store only first page data
      })
      .catch(error => {
        this.setState({ isRefreshing: false, error: 'Something just went wrong' }) // false isRefreshing flag for disable pull to refresh

dharavp

 renderSeparator = () => {
    return (
      <View
        style={{
          height: 2,
          width: '100%',
          backgroundColor: '#CED0CE'
        }}
      />
    );

dharavp

 renderFooter = () => {
   //it will show indicator at the bottom of the list when data is loading otherwise it returns null
    if (!this.state.loading) return null;
    return (
      <ActivityIndicator
        style={{ color: '#000' }}
      />
    );
  };

dharavp

  handleLoadMore = () => {
    if (!this.state.loading) {
      this.page = this.page + 1; // increase page by 1
      this.fetchUser(this.page); // method for API call 
    }
  };

dharavp

 fetchUser(page) {
   //stackexchange User API url
    const url = `https://api.stackexchange.com/2.2/users?page=${page}&order=desc&sort=reputation&site=stackoverflow`;
    this.setState({ loading: true })
    axios.get(url)
      .then(res => {
        let listData = this.state.data;
        let data = listData.concat(res.data.items) . //concate list with response
        this.setState({ loading: false, data: data })
      })