How to start Tab Navigation after Onboarding Screen? - react-native

Question

i have the following problem:
I am currently working on a app with react native.
I use 'react-navigation' for the navigation. Now i want to setup an Onboarding Screen, which is only shown at the first start of my application.
This screen should be shown in fullscreen format, nav bar and the tab bar should't be visible.
I already implemented the logic with AsyncStorage, for the Screen itself i use 'react-native-app-intro-slider'.
But how can i set it to be the initial screen? I was able to show it in my very first tab after initial launch of the screen, but then the tab bar is shown as well.
I could potentially hide the tabbar, but after completing the onboarding setup/screen I want the tab bar to be visible again.
Is there a way to show the screen fullscreen and after completing the onboarding to navigate to the Tab Navigator?
I am very new to react native and also javascript in general, sorry if this question is unprecise.
App.
App.js:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button,
ScrollView,
Statusbar
} from 'react-native';
import { SafeAreaView, TabNavigator, StackNavigator } from 'react-navigation';
import Home from './Tabs/Home';
import Wheel from './Tabs/Wheel';
import Categories from './Tabs/Categories';
import Settings from './Tabs/Settings';
import TabBar from './Tabs/TabBar';
import StrafenScreen from './screens/StrafenScreen';
import VideoScreen from './screens/VideoScreen';
import UberUns from './screens/UberUns';
import Rechtliches from './screens/Rechtliches';
import SprachAuswahl from './screens/Sprachauswahl';
import RandomVideoScreen from './screens/RandomVideoScreen';
import Onboarding from './screens/Onboarding.js';
export const FeedStack = StackNavigator({
Category: {
screen: Categories,
navigationOptions: {
title: 'Kategorien',
},
},
Strafen: {
screen: StrafenScreen,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.key} `,
}),
},
Videos: {
screen: VideoScreen,
navigationOptions: ({ navigation }) => ({
tabBarVisible: (navigation.state.params && navigation.state.params.hideTabBar) === true,
title: `${navigation.state.params.key} `,
}),
},
});
export const WheelStack = StackNavigator({
Wheel: {
screen: Wheel,
navigationOptions: {
title: 'Glücksrad',
},
},
RandomVideo: {
screen: RandomVideoScreen,
navigationOptions: ({ navigation }) => ({
tabBarVisible: (navigation.state.params && navigation.state.params.hideTabBar) === true,
animationEnabled: true
}),
},
Onboarding: {
screen: Onboarding,
navigationOptions: ({ navigation }) => ({
tabBarVisible: (navigation.state.params && navigation.state.params.hideTabBar) === true,
animationEnabled: true
}),
},
});
export const SettingsStack = StackNavigator({
Settings: {
screen: Settings,
navigationOptions: {
title: 'Über uns',
},
},
UberUns: {
screen: UberUns,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.key} `,
}),
},
SprachAuswahl: {
screen: SprachAuswahl,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.key} `,
}),
},
Rechtliches: {
screen: Rechtliches,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.key} `,
}),
},
});
const MainScreenNavigator = TabNavigator({
Home: {screen: Home},
Kategorien: {screen: FeedStack},
Rad: {screen: WheelStack},
Einstellungen: {screen: SettingsStack}
},
{
swipeEnabled:true,
tabBarOptions: {
activeTintColor: 'white',
activeBackgroundColor: 'darkgrey',
inactiveTintColor: 'black',
inactiveBackgroundColor: 'grey',
labelStyle: {
fontSize: 11,
padding: 0
}
}
});
MainScreenNavigator.navigationsOptions = {
title: 'Demo'
};
StackNavigator.navigationOptions = {
headerStyle: {
borderBottomWidth: 0,
}
};
export default MainScreenNavigator;
My First Tab:
import React from 'react';
import {
Text,
View,
Button,
Image,
TouchableHighlight,
TouchableOpacity,
AsyncStorage
} from 'react-native';
import WelcomeScreen from '../screens/WelcomeScreen.js';
import Onboarding from '../screens/Onboarding.js';
import checkIfFirstLaunch from '../components/checkLaunch';
export default class Home extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({tintColor}) => (
<Image
source={require('../images/home.png')}
style={{width: 22, height: 22, tintColor: 'white'}}>
</Image>
)
}
constructor(props) {
super(props);
this.state = {
isFirstLaunch: false,
hasCheckedAsyncStorage: false,
};
}
async componentWillMount() {
const isFirstLaunch = await checkIfFirstLaunch();
this.setState({ isFirstLaunch, hasCheckedAsyncStorage: true });
}
render() {
const { hasCheckedAsyncStorage, isFirstLaunch } = this.state;
const { navigate } = this.props.navigation;
if (!hasCheckedAsyncStorage) {
return null;
}
return isFirstLaunch ?
<Onboarding /> :
<View style={styles.container}>
<TouchableOpacity
style={{ flex: 1,
alignItems: 'center',
justifyContent: 'center', }}
onPress={
() => navigate('Kategorien', {})
}
>
<Image
style={{ width: 230, height: 230, borderWidth: 3, marginTop: 30}}
source={require('../images/final-course-categories.jpg')}
>
</Image>
</TouchableOpacity>
<TouchableOpacity
style={{ flex: 1,
alignItems: 'center',
justifyContent: 'center', }}
onPress={
() => navigate('Rad', {})
}
>
<Image
style={{ width: 230, height: 230, borderWidth: 3}}
source={require('../images/fortuneWheel.png')}
>
</Image>
</TouchableOpacity>
</View>
;
}
}
const styles = {
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {
flex: 1
}
};
Onboarding component:
import React from 'react';
import { StyleSheet } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
const styles = StyleSheet.create({
image: {
width: 100,
height: 100,
}
});
const slides = [
{
key: 'somethun',
title: 'Achtung',
text: 'Die Strafen in dieser App sind nur als Spaß gedacht.\nBitte nicht ernst nehmen.',
image: require('../images/warning.png'),
imageStyle: styles.image,
backgroundColor: '#59b2ab',
},
{
key: 'somethun-do',
title: 'Title 2',
text: 'Other cool stuff',
backgroundColor: '#febe29',
},
{
key: 'somethun1',
title: 'Rocket guy',
text: 'Lorem ipsum',
image: require('../images/home.png'),
imageStyle: styles.image,
backgroundColor: '#22bcb5',
}
];
export default class App extends React.Component {
_onDone = () => {
}
static navigatorStyle = {
navBarHidden: true
};
render() {
return (
<AppIntroSlider
slides={slides}
onDone={this._onDone}
/>
);
}
}
How can i even tell my App which screen it should use as the initial screen?
Thanks.