LoginScreen.js

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity,
    Alert,
    Button,
    Image,
    ScrollView,
    AsyncStorage
} from 'react-native';
import {
    LoginButton, AccessToken, GraphRequest,
    GraphRequestManager,
    LoginManager
} from 'react-native-fbsdk';

import { List, ListItem } from 'react-native-elements';
import Icon from 'react-native-vector-icons/Ionicons';

import { Navigation } from 'react-native-navigation';

import { registerScreens } from './screens';

registerScreens();
export default class LoginScreen extends Component {
    static navigatorStyle = {
        navBarHidden: true
    };

    constructor(props) {
        super(props);
        this.state = {
            user: null,
            userName: null,
            userPassword: null
        };
    }
    _handleFacebookLogin() {
        LoginManager.logInWithReadPermissions(['public_profile', 'email']).then(
            function (result) {
                if (result.isCancelled) {
                    console.log('Login cancelled')
                } else {
                    console.log('Login success with permissions: ' + result.grantedPermissions.toString())
                    //
                    AccessToken.getCurrentAccessToken().then(
                        (data) => {
                            var accessToken = data.accessToken.toString();
                            const responseInfoCallback = (error, result) => {
                                if (error) {
                                    console.log(error)
                                    alert('Error fetching data: ' + error.toString());
                                } else {
                                    //console.log(result)
                                    //console.log(result.name);
                                    if (typeof result.name !== undefined) {
                                        AsyncStorage.setItem("name", result.name);
                                    }
                                    if (typeof result.name !== undefined) {
                                        AsyncStorage.setItem("email", result.email);
                                    }
                                    // image nanti
                                    // if(typeof result.name !== undefined){
                                    //     AsyncStorage.setItem("name",result.name);
                                    // }
                                }
                            }

                            const infoRequest = new GraphRequest(
                                '/me',
                                {
                                    accessToken: accessToken,
                                    parameters: {
                                        fields: {
                                            string: 'email,name,first_name,middle_name,last_name,picture.type(large)'
                                        }
                                    }
                                },
                                responseInfoCallback
                            );

                            // Start the graph request.
                            new GraphRequestManager().addRequest(infoRequest).start();

                            // after all complete then push 
                            /** 
                            this.props.navigator.push({
                                screen: 'idcms.DashboardScreen',
                                title: 'Dashboard Screen'
                              }); **/
                        });
                    //
                }
            },
            function (error) {
                console.log('Login fail with error: ' + error)
            }
        )
    }
    _loginButton(obj) {

        // will be replace with axios .. 
        Alert.alert("system", "sat")
        // ajax request
        var url = "http://52.187.11.6/Mobile/Login.ashx";
        fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                userName: this.state.userName,
                userPassword: this.state.userPassword
            })
        })
            .then((response) => response.json())
            .then((responseJson) => {
                console.log("json", responseJson)
            })
            .catch((error) => {
                console.error(error);
            });
    }
    _byPassButton(obj) {
        this.href('idcms.DashboardScreen', 'Register Screen',true);
    }
    /**
     * Link to another Page
     * @param {string} screen 
     * @param {string} title
     * @param {string}  hidden 
     */
    href(screen, title,hidden) {
        if(typeof hidden === undefined){
            hidden = true;
        }
        this.props.navigator.push({
            screen: screen,
            title: title,
            navBarHidden:hidden,
        });
    }
    _focusNext(obj, text) {
        console.log(text);
        switch (text) {
            case "userPasswordRef":
                this.refs.userPasswordRef.focus();
                break;
            case "submitButton":
                // donothing
                break;
        }
    }
    render() {
        return (

            <Image source={require('./background.jpg')} style={styles.backgroundImage}>
                <ScrollView>
                    <Text style={styles.welcome}>
                        Login(Kena ada logo )
                   </Text>
                    <View >
                        <View style={styles.textRow}>
                            <View style={styles.textRowIcon}>
                                <Icon name="ios-person" size={30} color="#4F8EF7" />
                            </View>
                            <View style={styles.textRowTitle}>
                                <Text> Fullname</Text>
                            </View>
                            <View style={styles.textRowInput}>
                                <TextInput
                                    ref="userNameRef"
                                    value={this.state.userName}
                                    underlineColorAndroid="transparent"
                                    onChangeText={(text) => this.setState({ userName: text })}
                                    onSubmitEditing={this._focusNext('userPasswordRef')}
                                />
                            </View>
                        </View>
                        <View style={styles.textRow}>
                            <View style={styles.textRowIcon}>
                                <Icon name="ios-lock" size={30} color="#4F8EF7" />
                            </View>
                            <View style={styles.textRowTitle}>
                                <Text>Password</Text>
                            </View>
                            <View style={styles.textRowInput}>
                                <TextInput
                                    ref="userPasswordRef"
                                    secureTextEntry={true}
                                    underlineColorAndroid="transparent"
                                    value={this.state.userPassword}
                                    onChangeText={(text) => this.setState({ userPassword: text })}
                                />
                            </View>
                        </View>
                        <View style={{ padding: 10 }}>
                            <Button
                                onPress={this._loginButton.bind(this)}
                                title="Login"
                                color="#841584"
                                accessibilityLabel="Learn more about this purple button"
                            />
                            <Text> </Text>
                            <Button
                                onPress={this._byPassButton.bind(this)}
                                title="By Pass"
                                color="rgb(243,67,54)"
                                accessibilityLabel="Learn more about this purple button"
                            />
                            <Text> </Text>
                            <Button
                                onPress={this._byPassButton.bind(this)}
                                title="Register "
                                color="rgb(158,158,158)"
                                accessibilityLabel="Learn more about this purple button"
                            />
                        </View>
                    </View>
                    <List>
                        <ListItem title="Facebook" leftIcon={
                            { type: 'ionicon', name: 'logo-facebook', color: '#4267B2' }}
                            onPress={this._handleFacebookLogin.bind()}
                        />

                    </List>
                </ScrollView>
            </Image>
        );
    }
}

const styles = StyleSheet.create({
    textRow: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'rgba(33,150,242,0.2)',
        borderBottomColor: 'rgb(33,150,242)',
        marginBottom: 2,
    },
    textRowIcon: {
        width: 50, justifyContent: 'center', alignItems: 'center'
    },
    textRowTitle: {
        width: 85, justifyContent: 'center',
        alignItems: 'flex-start'
    },
    textRowInput: {
        flex: 1
    },
    row: {
        padding: 10
    },
    loginFormView: {
        padding: 20
    },
    loginFormText: {
        marginBottom: 10
    },
    loginFormTextInput: {
        marginBottom: 10
    },
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    },
    backgroundImage: {
        backgroundColor: '#000000',
        flex: 1,
        resizeMode: 'center',
        position: 'absolute',
        width: '100%',
        height: '100%',
        justifyContent: 'center'
    }
});