-
- Notifications
You must be signed in to change notification settings - Fork 129
Description
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
- Clone the repo below
- Launch the app on iOS 26.1+
- From the index route, tap “KeyboardAvoidingView issue”
- Observe the keyboard appear dark gray and the layout shift upward incorrectly
- After ~1 second, both the keyboard and layout snap to their correct positions
- 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