Cant get React native app to navigate to homescreen after facebook login - react-native

Question

I am making a react native application where the user logs in with Facebook and then goes to their home page with more details of the app and I can not get the App to navigate to the homepage after successful login with Facebook.
I'm using React Navigator. I have been searching Stackoverflow for 3 days with no luck...
Any help would be appreciated
the homepage successfully navigated when using the regular button
as shown above but it will not after the facebook authentication
//index.js
import React, {
Component
} from 'react';
import {
Platform,
StyleSheet,
Image,
Button,
Slider,
Text,
View,
Dimensions
} from 'react-native';
import FBLoginButton from '../FBLoginButton';
import {
SliderBox
} from 'react-native-image-slider-box';
import {
SafeAreaView
} from 'react-navigation';
import A from 'react-native-a'
import {
NavigationActions,
StackActions
} from 'react-navigation';
import {
createStackNavigator,
createAppContainer
} from 'react-navigation';
//import App from '../App';
const FBSDK = require('react-native-fbsdk');
const {
LoginManager,
} = FBSDK;
let isLoggedIn = false
type Props = {};
export default class Login extends Component < Props > {
constructor(props) {
//this._loginAuth = this._loginAuth.bind(this)
super(props);
this.state = {
images: [
'https://hluhluwegamereserve.com/wp-content/uploads/2014/03/IMG_1579.jpg',
'https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/04/26/09/giraffe.jpg',
]
};
}
//this.props.navigation.push('Home')
render() {
LoginManager.logInWithReadPermissions(['public_profile']).then(
function(result) {
if (result.isCancelled) {
alert('Login was cancelled');
} else {
alert('Login was successful with permissions: ' + result.grantedPermissions.toString());
//this.props.navigation.push('Home')
//this.props.navigation.navigate("Home")
//this._loginAuth()
}
},
function(error) {
alert('Login failed with error: ' + error);
}
);
//alert(this.state.loggedIn)
return (
<
View style = {
styles.container
} >
<
SliderBox style = {
styles.slider
}
images = {
this.state.images
}
sliderBoxHeight = {
'100%'
}
paginationBoxVerticalPadding = {
0
}
//parentWidth={400}
/>
<
Button onPress = {
() => this.props.navigation.navigate('Home')
}
title = "Go to Home"
color = "#841584" /
>
<
FBLoginButton onload = {
() => this.props.navigation.navigate('Home')
}
style = {
styles.welcome
} >
<
/FBLoginButton>
<
Text style = {
styles.instructions
} >
<
/Text>
<
/View>
);
}
}
if (this.isLoggedIn) {
this.props.navigation.navigate('Home')
}
// ...
// Attempt a login using the Facebook login dialog,
// asking for default permissions.
const styles = StyleSheet.create({
container: {
flex: 1,
//padding: 40,
//marginBottom: 250,
justifyContent: 'center',
alignItems: 'center',
//marginTop: '15%',
paddingTop: '15%',
paddingBottom: '15%',
resizeMode: 'contain',
},
slider: {
//width: '100%',
//alignSelf: 'flex-start',
//width: this.deviceWidth,
resizeMode: 'contain',
},
welcome: {
fontSize: 12,
textAlign: 'center',
marginBottom: '10%',
padding: '5%',
//paddingTop: 40,
},
terms: {
fontSize: 12,
color: 'blue',
textAlign: 'center',
margin: 1,
},
instructions: {
textAlign: 'center',
color: '#333333',
//marginBottom: 5,
},
safeArea: {
backgroundColor: '#ddd'
},
});
Here is my App.Js
//App.js
/*
* #format
* #flow
*/
import React, {
Component
} from 'react';
import {
Platform,
StyleSheet,
Image,
Button,
Slider,
Text,
View,
Dimensions
} from 'react-native';
import A from 'react-native-a'
import {
NavigationActions,
StackActions
} from 'react-navigation';
import {
createStackNavigator,
createAppContainer
} from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
import Login from './screens/Login';
import {
StackNavigator
} from "react-navigation";
import FBLoginButton from './FBLoginButton'
type Props = {};
//Login Screen
const NavigationApp = createStackNavigator({
Login: Login,
Home: HomeScreen
}, {
initialRouteName: "Login"
});
class App extends Component < Props > {
constructor(props) {
super(props);
}
render() {
return (
//Empty View For App.js
<
View >
<
/View>
);
}
}
//Navagation Goes To Login.js For Default
export default createAppContainer(NavigationApp);

Answer 1

Instead of doing an if-statement in your code outside of your class, do this one:
Once you are logged-in, Facebook's LoginManager will be returning a Promise
The promise will then be checked. So, if you have
.then((result) => {
if(result) {
this.props.navigation.navigate('HomeScreen');
} else {
alert('...'); // Anything you want to do if login failed.
}
});

Answer 2

I used
FBLogout = (accessToken) => {
let logout =
new GraphRequest(
"me/permissions/",
{
accessToken: accessToken,
httpMethod: 'DELETE'
},
(error, result) => {
if (error) {
console.log('Error fetching data: ' + error.toString());
} else {
LoginManager.logOut();
}
});
new GraphRequestManager().addRequest(logout).start();
};
and added a button and used
LoginManager.logout();
<View style={styles.container}>
<SettingsView profile={this.state.profile}/>
<Button
onPress={() => {
FBLogout();
this.props.navigation.navigate('HomeScreen')
}}
title="Log Out"
color="#3b5998"
/>
</View>