I'm diving into the world of React and decided to use Expo for building an app. I went with the TypeScript setup that comes with pre-implemented tabs and navigator by running "expo init newApp". Now, I just need a transition screen to display briefly before moving on to the main part of the app, which includes components like tabonescreen.tsx and tabtwoscreen.tsx provided by Expo.
I'm a bit unsure about creating a new stack navigator as I feel it might be unnecessary for this scenario.
Any suggestions on how I can proceed? How can I navigate to the root after showing the transition?
App.tsx
import React, { useState } from 'react';
import useCachedResources from './hooks/useCachedResources';
import TransitionScreen from './screens/TransitionScreen';
// A root stack navigator is often used for displaying modals on top of all other content
export default function App() {
const isLoadingComplete = useCachedResources();
if (!isLoadingComplete) {
return null;
} else {
return (
<TransitionScreen/>
);
}
}
TransitionScreen.tsx
import React from 'react';
import {StyleSheet, View, Image } from 'react-native';
export default function TransitionScreen() {
return(
<View style={styles.container}>
<Image
style={styles.calpalLogo}
source={require('../assets/images/calpal.png')}
/>
{
setTimeout(() => {
//GO TO tabonescreen.tsx/root of the app
}, 5000)
}
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FAFAFA',
alignItems: 'center',
justifyContent: 'center',
},
calpalLogo: {
width:'100%',
height:'60%',
}
});