Cant able to implement social login in react native

See more:

reactive

Node.js

ReactJS

I have used

react-native-simple-auth

for social logins.My code is like

import React from 'react';
import { AsyncStorage } from "react-native";
import firebase from 'firebase';
import {
    StyleSheet,
    Text,
    ScrollView,
    Picker,
    View,
    ActivityIndicator,
    TouchableHighlight,
    Image,
    Dimensions,
    Navigator,
    StatusBar,
    NativeModules,
} from 'react-native';
import {Button} from 'react-native';
import {alert} from "react-native/Libraries/Alert/Alert";
import '../../App.js';
import Main from "./Main";
import NavigationExperimental from 'react-native-deprecated-custom-components';

import * as simpleAuthProviders from 'react-native-simple-auth';
import secrets from './secrets';

    class Profile extends React.Component {
      constructor(props) {
      super(props);
      this.state = {
      timePassed:false
    };
  }

  render() {
        return (
            <View><Text>kjsgbngegjen</Text></View>
        );
      }

}

class Login extends React.Component {
      constructor(props) {
      super(props);
      this.state = {
      loading:false,
      response:null
    };
  }
componentDidMount() {
    setTimeout( () => {
        this.setTimePassed();
    },3000);
  }

  setTimePassed() {
    this.setState({timePassed: true});
}
  render() {
        return (
            <View style={styles.containerr}>
        <StatusBar
     backgroundColor="#485b2d"
   />
            <View style={styles.container}>
<View style={styles.logo} >
       <Image source={require('./logo.png')}/>
</View>
       <Text style={styles.signText} >SIGN IN TO ETSY </Text>
     
    <View style={styles.mainbox}>
     {
          this.state.loading ? null : Object.keys(this.props.secrets).map((provider, i) => {
            return(
         <View style={styles.viewStyleOne}>
  <TouchableHighlight style={[styles.buttonContainer, styles.signupButton1]} onPress={this.onBtnPressed.bind(this, 'google',this.props.secrets[provider])}>
    <Text style={styles.textStyle}>CONTINUE WITH {provider.toUpperCase()}</Text>
    </TouchableHighlight>
  </View>
  );
          })
        }
        <View style={styles.viewStyleOne}>
  <TouchableHighlight style={[styles.buttonContainer, styles.signupButton1]} onPress={() => this.props.navigation.navigate('ShopifyLogin')}>
    <Text style={styles.textStyle}>CONTINUE WITH SHOPIFY  </Text>
    </TouchableHighlight>
  </View>
          <Text style={styles.space} > </Text>
       <View style={styles.containermenu}>
  <View style={styles.viewStyleOne}>
  <TouchableHighlight style={[styles.buttonContainer, styles.signupButton1]} onPress={() => this.props.navigation.navigate('Signup')}>
    <Text style={styles.textStyle}> REGISTER  </Text>
    </TouchableHighlight>
  </View>
  <View style={[styles.viewStyleTwo]} >
  <TouchableHighlight style={[styles.buttonContainer, styles.signupButton1]} onPress={() => this.props.navigation.navigate('Login')}>
    <Text style={styles.textStyle}> LOGIN </Text>
    </TouchableHighlight>
  </View>
  
</View>
       </View>
        
      </View>
      </View>
        );
      }

      onBtnPressed(provider, opts) {
    const _this = this;
    this.setState({
      loading: true
    });
    simpleAuthProviders[provider](opts)
      .then((info) => {
        _this.setState({
            loading: false,
            data:info
        });
        _this.props.navigator.push({
          title: provider,
          provider,
          info,
          index: 1
        });
      })
      .catch((error) => {
        _this.setState({
            loading: false
        });
        Alert.alert(
          'Authorize Error',
          error.message
        );
      });
  }

}
export default class HomeScreen extends React.Component {
     static navigationOptions = ({navigation}) => {
        const {state, navigate} = navigation;
    };
  constructor(props){
    super(props);
    this.state = {
        loading: false,
        data:null
    };
}
static navigationOptions = {
        header: null
    }

componentDidMount() {
    AsyncStorage.getItem('userDetails').then((user_data_json) => {
      let user_data = JSON.parse(user_data_json);
      if(user_data != null){
        this.props.navigation.navigate('Dashboard');
      }else{
        this.props.navigation.navigate('Home');
      }
    });
}
 render() {
  return(
    <NavigationExperimental.Navigator
        style={styles.container}
        initialRoute={{
          title: 'Simple Auth',
          secrets,
          index: 0
        }}
        renderScene={(route, navigator) => {
          return route.info ?
            <Profile
              info={route.info}
              provider={route.provider} /> :
            <Login
              title={route.title}
              secrets={route.secrets}
              navigator={navigator} />
        }}
      />
    );
  }
}

const styles = StyleSheet.create({

  logo:{  justifyContent: 'center', alignItems: 'center',  marginBottom:30,  marginTop:50,},

  mainbox:{flex: 1,marginLeft:10,marginRight:10,},

  signText:{fontSize: 22, color:'#2b3915',marginBottom:20,  marginLeft:20, fontWeight: 'bold', marginRight:20,   marginTop:20,  borderBottomColor: '#bbb',
    borderBottomWidth: StyleSheet.hairlineWidth,},
    space:{ height:20,},
  container: {
      flex: 1,
      backgroundColor: '#ffffff',
      marginBottom:20,  
      marginLeft:20,  
      marginRight:20, 
      marginTop:20, 
    },
    containerr: {
        flex: 1,
        backgroundColor: '#485b2d'
    },
      backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    },
    containermenu: { flexDirection: 'row', flex: 1,
     justifyContent:'space-between',
     },
     
     viewStyleOne: {
     alignItems:'center',
     backgroundColor:'#2b3b15',
     borderColor: '#b6a238',
     borderRightWidth: 10,
     borderLeftWidth: 10,
     paddingLeft:20,
     paddingRight:20,
     paddingTop:15,
     paddingBottom:15,
     height: 50,
     margin:5
     },
     
     viewStyleTwo: {
     backgroundColor:'#2b3b15',
     borderColor: '#b6a238',
     borderRightWidth: 10,
     borderLeftWidth: 10,
     paddingLeft:40,
     paddingRight:40,
     paddingTop:15,
     paddingBottom:15,
     height: 50,
     margin:5
     },
    newClass:{
      marginLeft:50,
    },
    textStyle:{
      textAlign:'center',fontSize: 16, color:'#ffffff',fontWeight: 'bold',
    },
 
});

Everything is working fine but I cant able to read the response coming from the onPress event. Finally the Login page loads and stops right there. I need to move to the next page once the response is not null. I stuck here for last two days. Please help. Thanks in advance.

What I have tried:

I don't have any idea whatsoever regarding this problem since its my first app.