virtuoztm/transition-keyboard-demo

This is a small demo app built with Expo, a toolkit for building mobile apps with React Native, that focuses on one specific and easy to get wrong detail: when should the on-screen keyboard pop up after you navigate to a one-time-code, or OTP, entry screen. The project shows the difference between a naive approach and a more careful one for handling this single moment in a mobile app. The problem it demonstrates is that if you tell the code entry field to grab keyboard focus the instant it is created, the keyboard can start sliding up while the screen itself is still sliding into view from the navigation transition, so the user sees two things moving on screen at the same time, which tends to feel janky, especially on Android phones. The fix shown here is to wait until the new screen is fully in view and settled, and only then bring up the keyboard, so the two animations happen one after another instead of on top of each other. The demo app has two screens you can navigate to from its home screen: one using the recommended, careful approach, and one deliberately using the naive shortcut, so you can compare how each one feels. The careful version preloads the keyboard controller before navigating, waits for the new screen to register as focused, waits two animation frames plus a short platform-specific pause, around 400 milliseconds on Android and 500 on iOS, and only then focuses the code input, cleaning up any pending timers if the user navigates away before that happens. The README backs up its recommendation with links to the official documentation for Expo Router, React Navigation, React Native's TextInput and animation APIs, and a keyboard-handling library called react-native-keyboard-controller, along with a real bug report describing this exact kind of timing problem happening to other developers. The project is built with Expo, Expo Router, HeroUI Native's InputOTP component, Uniwind, and react-native-keyboard-controller. The full README is longer than what was shown.