Let’s start coding by opening the App.js file and adding our imports:
import * as React from 'react';
import { Text, View, StyleSheet, Alert, TouchableOpacity, Image } from 'react-native';
import { Ionicons, FontAwesome } from "@expo/vector-icons";
import * as Facebook from 'expo-facebook';
Content assist while Developing React Native App
Next, let’s define the login method of our class. This will be the method that’s called when the login button is pressed, it uses thelogInWithReadPermissionsAsync
Expo helper class of the Facebook method to prompt the user with a Facebook login screen.
Replace the first parameter, labeled APP_ID
in the following code, with your App’s ID:
export default class App extends React.Component {
FBlogIn = async () => {
try {
const {
type,
token,
expires,
permissions,
declinedPermissions
} = await Facebook.logInWithReadPermissionsAsync("App_ID", {
permissions: ["public_profile"]
});
if (type === "success") {
// Get the user's name using Facebook's Graph API
const response = await fetch(
`https://graph.facebook.com/me?access_token=${token}`
);
Alert.alert("Logged in!", `Hi ${(await response.json()).name}!`);
} else {
alert(`Facebook Login Error: Cancelled`);
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
};
In the second half of the logIn method, if the request is successful, we’ll make a call to the Facebook Graph API using the token that was received from logging in to request the logged-in user’s information. Once the response resolves, we set the state accordingly, we’ll also need a simple render function and need to display a Login button for logging in, as well as Text elements that will display user information once the login has completed successfully.
render() {
return (
<View style={styles.container}>
<Text style={{fontWeight: 'bold', color: '#fff', fontSize:30, justifyContent:'center', marginVertical:10}}>
React Native devlopment using CodeMix
</Text>
<Image
style={{width: 300, height: 300, alignContent: 'center'}}
source={{uri: 'https://resources.cloud.genuitec.com/wp-content/uploads/2019/03/tutorials_livechat.gif'}}
/>
<Text style={{fontWeight: 'bold', color: '#fff', fontSize:30, justifyContent:'center', marginVertical:10}}>
Login With Facebook
</Text>
<TouchableOpacity
style={{
backgroundColor: "#3f5c9a",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: 60,
borderColor: "#3f5c9a",
borderWidth: 1
}}
onPress={this.FBlogIn}
>
<FontAwesome name="facebook-f" size={20} color="white" />
</TouchableOpacity>
</View>
);
}
Hyperlink Navigation
Finally, we’ll add styles to complete the layout, setting padding, margins, color, and font sizes:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#000'
}
});
Now, if we run the app, we’ll see our Login button, a login modal when the Login button is pressed, and the user’s information, which will be displayed once the user has successfully logged in:
Facebook login with React Native
And that should be it, we’ve finished building our React Native app!