Currently, I am working on a small app using react native. As I am not very familiar with react, I would appreciate any help I can get. My main objective is to implement react navigation in the app, specifically redirecting authenticated users to the home page. I have been attempting this using stack navigator but so far without success. Below are snippets of the code:
App.js
class App extends Component {
render(){
const MainNavigator = TabNavigator({
login: { screen : LoginScreen },
register: { screen : RegisterForm },
)};
return (
<View style={{flex: 1}}>
<MainNavigator />
</View>
);
}
and the login screen
LoginScreen.js
class LoginForm extends Component {
constructor(props) {
super(props);
this.initialState = {
isLoading: false,
error: null,
username: '',
password: '',
};
this.state = this.initialState;
}
componentWillMount(){
fetch('https://www.mywebsite.com',{
method: 'POST',
headers:{
'Content-Type' : 'application/json',
},
body: JSON.stringify({
grant_type: 'authorization_code',
username: this.state.username,
password: this.state.password,
client_id: 'xxxxx',
client_secret: 'xxxx',
callback_url: 'www.mywebsite.com'
})
})
.then(response => response.json())
.then((responseData) => {
console.log(responseData);
})
.done();
}
render(){
return(
<Button style={styles.button} onPress={() => this.props.navigation.navigate("HomeScreen")} >
<Text style={{paddingLeft:50}}>Login</Text>
</Button>
</View>
</View>
</Container>
);
}
}
export default LoginForm
I am also utilizing stack navigation for the rest of the screens.
Route.js
import React, {Component} from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import Profile from './Profile';
import CourseListing from './CourseListing';
import Faq from './Faq';
import HomeScreen from './HomeScreen';
import CategoryDetail from './CategoryDetail';
import LoginForm from './LoginForm';
import DetailedView from './DetailedView';
import IndividualSection from './IndividualSection';
import LoginForm from './LoginForm';
const StackScreens = StackNavigator({
LoginForm :{screen: LoginForm}
CourseListing:{screen: CourseListing},
Home: {screen: HomeScreen},
CategoryDetail: {screen: CategoryDetail},
DetailedView: {screen: DetailedView},
IndividualSection: {screen: IndividualSection}
})
export const MyDrawer = DrawerNavigator({
Home: {
screen: StackScreens,
},
Profile: {
screen: Profile
},
FAQ: {
screen: Faq
}
});
Additionally, I have included the MyDrawer component within MyHome.js
MyHome.js
class MyHome extends Component {
render(){
return(
<MyDrawer />
);
}
}
export default MyHome;
In my current implementation, App.js returns MainNavigator which includes Login and Register screens. If I return MyHome instead of MainNavigator in App.js, it displays the inner screens (without specifying LoginScreen as a stack in Route.js). However, my goal is to enable navigation from the login page to the home page. How can I achieve this?