Navigation container disappears after splash screen - reactjs

I implemented a splash screen last night and this morning I noticed it was taking away my bottom tab navigator. I recreated the problem here
In the snack, originally you will see the bottom tab navigator. If you go into App.js and uncomment the call to the splashscreen, you will see what I am talking about.
Does anyone know how I could go about making sure this does not happen?
The splash screen is a little extra in itself so if you guys think it would be best to scratch this one and go for something else I am open to suggestions!
Thank you for anything, I appreciate it more than you know.

The reason you are not seeing the Bottom Tab is because you are not rendering that part of the app anymore. You were simply rendering the <Home/> component inside the SplashScreen, which is not really the bottom tab screen, but a screen that is part of the whole bottom tab.
To make it work, You can do the following,
inside App.js, export your MyTabs function.
export function MyTabs() {
// all the previous stuff
}
Then import it inside SplashScreen like below,
import {MyTabs} from '../App'
Now replace <Home></Home> with <MyTabs/>.
Here's the Snack
Not totally sure if this is a good practice, will have to dig up some docs, But will work for your use case.

Related

How to destroy current screen and navigate to another screen ? so that on back press that previous screen doesn't appear

Hello everyone i am new to react-native and stuck in a navigation problem. i have crawled through every question about this but found nothing helpful.
I have Navigation structure like this
Tab Navigator
HomeStack [mainScreen,Screen2]
PostStack[cameraScreen,UploadPostScreen]
Now i want to navigate to MainScreen of HomeStack after uploading the Post and along with that i want to remove these post and upload screen so that i can not go back by pressing back button.
You need to use replace method in that case, take a look here:
https://reactnavigation.org/docs/stack-actions/#replace

Combine SimpleBar + Drawer (MaterialUI) in reactjs

I'm trying to have a simple bar in which I will put a logo, and below, a drawer. The problem is when I open the drawer, the simple bar moves with it. Besides, I can see the logo text is hidden by drawer.
I've tried to add zIndex to the simpleBar but it doesn't work. I'm really not familiar with react and material ui so don't see how to fix my problem.
Here's my codesandbox https://codesandbox.io/embed/sharp-browser-lsolr?fontsize=14 , if anyone can help.
I'm sorry, when clicking on my codesandbox, you'll see an error I don't get 'cause my code comes from material-ui and I don't see what the problem is.. Just click on the cross to close it.
Many thanks in advance !
Try this: https://codesandbox.io/s/sad-matsumoto-c84r8
The SimpleAppBar component was removed, and the MiniDrawer component which already has an AppBar has been modified so that everything looks right and you can put your logo where you want it.

Why are there two <Toolbar/> components needed to render correctly in the Material-UI example documentation for scrolling app bars?

I'm trying to better understand how Material-UI works, and I was confused why I need to use the Toolbar component twice to get my scrolling toolbar to render properly as in this example code.
If I don't include the second Toolbar after the ElevationScroll, the menu I want to place below the app bar is rendered underneath the app bar. If I include it, my menu is pushed down and renders nicely. This works great, but I don't understand why I need to include an extra in my jsx in order to get things to look right, like in this simplified example:
function SettingsMenu() {
return (
<ElevationScroll>
<AppBar>
<Toolbar>
<Typography>
Settings
</Typography>
</Toolbar>
</AppBar>
</ElevationScroll>
<Toolbar/>
<MyMenu/>
);
}
I've checked in Google Devtools to figure out why this is happening, the second toolbar is rendered as a div with nearly identical css styles but with no child elements. When I delete it manually in Devtools, the menu gets pushed back up behind the app bar as before. Thanks for any help!
It's because AppBar have positon: fixed; which means it wont take space on the screen so you but another Toolbar which will be underneath the AppBar to push the content down and take the same space the Toolbar should take.

React-navigation tutorial missing back button

I am new to react native and I am following this tutorial from the official react-navigation docs on auth flow.
https://reactnavigation.org/docs/en/auth-flow.html
They have a really nice live example: https://snack.expo.io/#react-navigation/auth-flow-v3
After sign in, when you click on Show me more of the app from the home screen, it takes you to a page with a back button. Just from looking at the code, I can't figure out how they are able to produce this back button.
Maybe the code is not complete?
I understand that one way to a back button on the nav bar is to do something like:
headerLeft: (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
but this is missing from the code displayed?
React Navigation has by default provided Back button to navigate to the previous screen.
Because ios do not have a hardware back button all they have is a gesture with which they can go back. and if it is disabled then there is no way to go to the previous screen.
So default back button for stack navigator must be there and we have it.
So when there is a previous screen available back button will be there and if screen if first of its stack there will be no back button.
Let say we have one switch navigator for authentication screens like signIn, signUp etc. and one stack navigator for all other screens.
So here switch navigator by default has only one screen in its stack so none of these screens will have back button because you can't go back from here there is a dead end.
and for stack navigator, your first screen in the stack that renders before all other screens will not have a back button but all screens after that will be having back button because from there you can go back right.
React Navigation already have default Header with back button when you create switch or stack navigator. the headerLeft property is only used if you want to override the default back button. :D
Edit:
to clear things out.
The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away. -switch navigator
where stack navigator purposely create screen on top of a stack (if you have initial screen). initial screen wont have header with back button because it doesn't know where return to. thats why when you navigate to "OtherStack" it creates new screen named "OtherStack" place on the top of "HomeScreen". newly created screens have default header with back button so you can go back to initial stack.
const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });

NavBar and StatusBar in iOS7 acts strange

If I have an "old" app with a NavBar and build it with iOS7, the StatusBar is visible together with the NavBar and it looks like a mess! And if I have a flip view (TransitionStyleFlipHorizontal), that TopBar is placed below the StatusBar and when turning back the view the window jumps up in an ugly way to cover the StausBar again. Do I have to reconstruct everything from scratch to make it look good. Just to make the StausBar stay on top of the NavBar? It must a simple way to fix that but how?
Write below code in your .m file.
It basically help you to change location of navigation bar.
-(void) viewDidLayoutSubviews
{
CGRect tmpFram = self.navigationController.navigationBar.frame;
tmpFram.origin.y += 20;
self.navigationController.navigationBar.frame = tmpFram;
}

Resources