Click here to Skip to main content
14,331,896 members
Rate this:
Please Sign up or sign in to vote.
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.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100