Click here to Skip to main content
14,330,747 members

Cant able to implement social login in react native

Janardhanam Julapalli asked:

Open original thread
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.
Tags: Node.js, Reactive, ReactJS

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the The Code Project Open License (CPOL).




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