0

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.

Justin Priede
  • 444
  • 6
  • 30

1 Answers1

1

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.

nithinpp
  • 1,785
  • 12
  • 24
  • Were you able to implement that into the example and get it to work? I get an error when doing that about a nested navigation container. – Justin Priede Aug 19 '21 at 14:44
  • Yes, I've posted the snack link above. https://snack.expo.dev/@nithinpp69/splash-animation. I'll check one more time – nithinpp Aug 19 '21 at 14:47
  • I did checked again, seems like it's working. Can you please share the error you are facing?. – nithinpp Aug 19 '21 at 14:57
  • Hmm so weird. Yours works. What is the difference between yours and this one? Mine will not render. https://snack.expo.dev/@priedejm/30cbce For some reason I get the error "Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them." – Justin Priede Aug 19 '21 at 15:12
  • I get a different error when adding the brackets around MyTabs in the import as well – Justin Priede Aug 19 '21 at 15:14
  • I got it. The function MyTabs was not being exported in mine. Thank you for the solution! – Justin Priede Aug 19 '21 at 15:39
  • 1
    Cool. Now to clarify on your previous comment `I get a different error when adding the brackets around MyTabs in the import as well`. We need to import it inside the brackets because the function `MyTabs` is not a default export from `App.js`. If you do the import without the brackets, it will import the default item from `App.js`, which in our case the function `App()`. – nithinpp Aug 19 '21 at 15:42
  • 1
    One more thing, since you tried the import without the brackets, it imported the `App()` which has the ``. Now the error above makes sense coz now you are rendering the whole `App.js` again. Which is why the error about nested navigation container. :) – nithinpp Aug 19 '21 at 15:48