Skip to content

KeyboardAvoidingView flickers + layout jumps when navigating into screen via expo-router #1215

@rhinck

Description

@rhinck

Describe the bug

On iOS 26.x, when navigating into a screen using expo-router that contains a KeyboardAvoidingView, the keyboard and layout animate incorrectly.

  • The keyboard initially appears in a darker gray system color
  • The layout is shifted into the wrong vertical position
  • After ~1 second, the keyboard switches to the correct color and the layout snaps into place

This only happens when navigating into the screen (initial push).
It does not occur when the screen is used as a root route.
It does not occur on iOS 18.x or Android.

The issue is intermittent but easy to reproduce.

To Reproduce

  1. Clone the repo below
  2. Launch the app on iOS 26.1+
  3. From the index route, tap “KeyboardAvoidingView issue”
  4. Observe the keyboard appear dark gray and the layout shift upward incorrectly
  5. After ~1 second, both the keyboard and layout snap to their correct positions
  6. Repeat if needed (intermittent)

Reproduction repo
https://github.com/rhinck/keyboard-example

Code snippet

export default function KeyboardAvoidingViewIssueScreen() { const [feedback, setFeedback] = useState(""); const headerHeight = useHeaderHeight(); return ( <Pressable style={styles.screen} onPress={Keyboard.dismiss}> <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={Platform.OS === "ios" ? headerHeight : 0} style={{ flex: 1 }} > <View style={styles.content}> <View> <Text style={styles.title}> Help us shape upcoming features—what would make your experience better? </Text> <Text style={styles.subtitle}> Tell us the idea so we can prioritize it for future releases. </Text> </View> <View style={styles.form}> <TextInput autoFocus multiline value={feedback} onChangeText={setFeedback} placeholder="Your feedback..." placeholderTextColor="#A3A3A3" textAlignVertical="top" style={styles.input} /> <Pressable style={styles.submitButton} onPress={() => { alert("Thank you for your feedback!"); Keyboard.dismiss(); }} > <Text style={styles.submitButtonText}>Submit</Text> </Pressable> </View> </View> </KeyboardAvoidingView> </Pressable> ); }

Expected behavior

The keyboard should:
• Appear with the correct system color immediately
• Animate smoothly with the layout
• Not cause shifting, jumping, flickering, or delayed snapping

Screenshots

iOS 26.1 (bug)

ios_26.1_bug.mp4

iOS 18.6 (works correctly)

ios_18.6_working.mp4

Smartphone
• Device: iPhone 17 Pro (simulator)
• OS: iOS 26.1.1
• React Native version: 0.81.5
• Architecture: Fabric
• JS engine: Hermes
• Library version: 1.19.6

Desktop
• OS: macOS Tahoe 26.1

Metadata

Metadata

Assignees

Labels

KeyboardAvoidingView 🧪Anything related to KeyboardAvoidingView component🐛 bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions