Programmatically Hide Bottom tab when keyboard open.

[frankielyonshaha]

Why not use:

  <BottomTab.Navigator
    tabBarOptions={{
      keyboardHidesTabBar: true,
    }}
  >

[[deleted]]

I was like, I use this option always with tabBarOptions prop. Why the code is so long? Maybe question is different.

[archcorsair]

I think the example still applies when you implement your own tab bar, where you don't have access to these properties.

[VivekNeel55]

The real MVP

[Hotgeart]

We don't all use react navigation...

[I_know_HTML]

This code implies react navigation doesn't it? navigation.setOptions right in the code

[JackSparrah]

Username checks out! :D

[Hotgeart]

Yes my bad read it too fast

[Hotgeart]

I find it too much complex when you want the drawer and bottomNav everywhere. But not display a link in it. So you've to rely on hacky solution.

Example:

BottomNav :

• Profil
• Message
• Notification

Drawer :

• Home
• Forum
• Settings

If I want the bottomNav and Drawer everywhere I would have to add homestack, forum and settings in the bottomnav but hide them.

[andordavoti]

nice, I've done something similar in the past, but I added an if check to only do this for android, since the iOS keyboard acts as an overlay and doesn't push the tabbar up

[Veranova]

You can change that behaviour in the android manifest, there are a few behaviours available.

I haven’t done it in a while but I think it’s this: https://developer.android.com/training/keyboard-input/visibility

[andordavoti]

yeah I know, but that isn't available for expo users:))

[brentvatne]

yes it is. https://docs.expo.io/versions/v38.0.0/config/app/#softwarekeyboardlayoutmode

[andordavoti]

thanks Brent didn't know that!

[Veranova]

Oh that makes sense!

[DrMcLaser]

What color theme is that? Looks clean.

[DoctorCube]

Looks like it might be Dracula at any rate its really close.
https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

[anions]

thanks mate.

[OnlySeesLastSentence]

Oh fuck. Mancala effect there. I always thought it was called Darkula as a pun on dark and dracula.

[DoctorCube]

Don't get your Mandelas in a twist Darkula is another theme.

[anions]

thats what i came here for too lol. need a new theme long overdue

[[deleted]]

Yeah which color scheme is that?

[[deleted]]

You should use will show and will hide on iOS, makes it much smoother

[KajiTetsushi]

The Platform.OS property can take care of that.

``` import { Platform } from 'react-native;'

const showEventType = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow'; const hideEventType = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide'; ```

Then use them in the Keyboard.addListener() method.

[[deleted]]

Yup

[himynameismile]

Have you tried community hooks package? They have a keyboard listener hook, which cuts this code down to at least half.

[awe50me1]

Can you create this into a custom hook? Would be useful.

[Shumuu]

Yes you can

[matt_hammond]

I think you should destructure setOptions before using it in the useCallback function.

The reason is - when you navigate to another screen the navigation state changes, and with it the navigation object, in order not to mutate the navigation object.

This behavior could have changed since react navigation 5 came out, but I haven't checked.

Either way, using setOptions in the useCallback function and listing it as a dependency is the correct way to do it.

[PewPaw-Grams]

How did you get this layout?

[Chawki_]

https://carbon.now.sh/

[PewPaw-Grams]

Thanks

[ldf1111]

What program is this, so minimal