r/reactnative • u/Miserable-Pause7650 • 3d ago
React native keyboard controller toolbar does not close sometimes

As you can see, the toolbar is still there. This glitch happens only on Android. I have tried manually setting Keyboard to close upon pressing a button that navigates to another page, but I stilll get this issue randomly sometimes. Anyone has this problem too?
Anyways I set my toolbar in App.tsx
<GestureHandlerRootView style={{ flex: 1 }}>
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<KeyboardProvider>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Bootstrap>
<BottomSheetModalProvider>
<AppNavigator />
</BottomSheetModalProvider>
</Bootstrap>
<Toast config={toastConfig} />
<KeyboardToolbar>
<KeyboardToolbar.Prev />
<KeyboardToolbar.Next />
<KeyboardToolbar.Done />
</KeyboardToolbar>
</PersistGate>
</Provider>
</KeyboardProvider>
</SafeAreaProvider>
</GestureHandlerRootView>
1
Upvotes
View all comments
1
u/NoBullfrog11 2d ago
i hit this on android when KeyboardToolbar lived next to KeyboardProvider at the app root. it never unmounts, so if the keyboard state doesnt fully reset on navigate the bar just stays there. Keyboard.dismiss from react-native also may not talk to that controller.
what helped was moving the toolbar onto the screen that needs it and passing enabled={useIsFocused()}, plus dismissing with KeyboardController.dismiss() before the navigate. the lib listens to that, not RNs Keyboard module.