Fix Modal first frame being rendered on top-left corner (#50704) #51048
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
facebook-github-bot added CLA Signed 
Contributor
| This pull request was exported from Phabricator. Differential Revision: D73948178 |
cortinico added a commit to cortinico/react-native that referenced this pull request May 1, 2025
Summary: Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
cortinico force-pushed the export-D73948178 branch from ab44331 to 2247f5a Compare Contributor
| This pull request was exported from Phabricator. Differential Revision: D73948178 |
cortinico added a commit to cortinico/react-native that referenced this pull request May 1, 2025
Summary: Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
cortinico force-pushed the export-D73948178 branch from 2247f5a to c931481 Compare Contributor
| This pull request was exported from Phabricator. Differential Revision: D73948178 |
cortinico added a commit to cortinico/react-native that referenced this pull request May 1, 2025
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
cortinico force-pushed the export-D73948178 branch from c931481 to f39e549 Compare cortinico added a commit to cortinico/react-native that referenced this pull request May 2, 2025
Summary: Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
Contributor
| Hey @cortinico any next steps to know when this can land in main? |
Contributor Author
We're still discussing internally on a couple of edge case to handle. I'll get back to you once we find an agreement |
Contributor
| This pull request was exported from Phabricator. Differential Revision: D73948178 |
cortinico force-pushed the export-D73948178 branch from f39e549 to 2c1fe34 Compare cortinico added a commit to cortinico/react-native that referenced this pull request Jun 17, 2025
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Differential Revision: D73948178
Contributor
| This pull request was exported from Phabricator. Differential Revision: D73948178 |
cortinico added a commit to cortinico/react-native that referenced this pull request Jun 18, 2025
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178
cortinico force-pushed the export-D73948178 branch from 2c1fe34 to 010ff1c Compare Contributor
| This pull request was exported from Phabricator. Differential Revision: D73948178 |
cortinico force-pushed the export-D73948178 branch from 010ff1c to fcce3b3 Compare cortinico added a commit to cortinico/react-native that referenced this pull request Jun 18, 2025
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178
cortinico added a commit to cortinico/react-native that referenced this pull request Jun 19, 2025
Summary: Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178
cortinico force-pushed the export-D73948178 branch from fcce3b3 to ef6acf9 Compare 
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178
Contributor
| This pull request was exported from Phabricator. Differential Revision: D73948178 |
cortinico force-pushed the export-D73948178 branch from ef6acf9 to cf5b1b8 Compare 
Collaborator
| This pull request was successfully merged by @cortinico in b950fa2 When will my fix make it into a release? | How to file a pick request? |
Contributor
| This pull request has been merged in b950fa2. |
linhandev pushed a commit to linhandev/ohos_react_native that referenced this pull request Jul 4, 2025
Co-authored-by: Przemysław Sosna<przemyslaw.sosna@swmansion.com> # message auto-generated for no-merge-commit merge: merge @sosen/modal-host-view-state into 0.77.1-rc.1-ohos Fix: KeyboardAvoidingView jitters in modals without set height Created-by: PrzemekSosna Commit-by: Przemysław Sosna Merged-by: huangyouhua Description: ## Description ModalHostViewState was previously initialized with height and width {0,0}. This would cause the first onLayout events to return the wrong height. KeyboardAvoidingView uses the first onLayout to set initialFrameHeight, which is then used to calculate the height of the components. This would lead to negative values being calculated for the height causing jittering etc. This is the PR in the core RN repo for reference: facebook/react-native#51048 ## Changes - fixed KeyboardAvoidingView jittering by initializing ModalHostViewState with sensible values. ## Test Plan 1. Run the below snippet and focus the TextInput. You shouldn't see any jittering. ```ts import React, {useState} from 'react'; import { View, Text, TextInput, Pressable, StyleSheet, Modal, KeyboardAvoidingView, } from 'react-native'; const App = () => { const [modalOpen, setModalOpen] = useState(false); return ( <View style={styles.outerContainer} onLayout={layoutEvent => { console.log('Outer container layout:', layoutEvent.nativeEvent.layout); }}> <Modal animationType="fade" visible={modalOpen} onLayout={layoutEvent => { console.log('modal layout:', layoutEvent.nativeEvent.layout); }}> <KeyboardAvoidingView behavior="height" style={styles.container}> <View style={[styles.closeView, {marginHorizontal: 25}]}> <Pressable onPress={() => setModalOpen(false)} style={styles.closeButton}> <Text>Close</Text> </Pressable> </View> <TextInput placeholder="TextInput" style={styles.textInput} /> </KeyboardAvoidingView> </Modal> <Pressable onPress={() => setModalOpen(true)} style={styles.launchButton}> <Text>Open Example</Text> </Pressable> </View> ); }; const styles = StyleSheet.create({ outerContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'cyan', }, container: { flex: 1, justifyContent: 'center', paddingHorizontal: 20, paddingTop: 20, backgroundColor: 'red', alignItems: 'center', }, textInput: { borderRadius: 5, borderWidth: 1, height: 44, width: 300, paddingHorizontal: 10, }, closeView: { alignSelf: 'stretch', }, closeButton: { alignSelf: 'flex-end', }, launchButton: { padding: 10, backgroundColor: '#eee', borderRadius: 5, }, }); export default App; ``` ## Checklist - [x] Does not involve incompatible changes; if involved, has been reviewed accordingly. - [x] Does not impact performance, or performance testing has been conducted without degradation. - [x] Complies with the relevant coding standards. - [x] Does not involve documentation updates, or the documentation has been updated. - [x] Meets testability requirements with necessary self-test cases, appropriate logging, or trace information added. - [x] No illegal file inclusions exist, such as images or code. See merge request: openharmony-sig/ohos_react_native!1184 robhogan pushed a commit to robhogan/react-native that referenced this pull request Jul 17, 2025
Summary: Pull Request resolved: facebook#51048 Fixes facebook#50442 Closes facebook#50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178 fbshipit-source-id: 055c12aa62d70acc1e4c5a2a5c4ea0c5608e22c7
Collaborator
| This pull request was successfully merged by @cortinico in 710d499 When will my fix make it into a release? | How to file a pick request? |
cipolleschi pushed a commit that referenced this pull request Aug 13, 2025
Summary: Pull Request resolved: #51048 Fixes #50442 Closes #50704 Users reported that Modals on Android are first renderer anchored in 0,0. That results in them being on the top left corner of the screen for some seconds. This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback. I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size Changelog: [Android] [Fixed] - Fix Modal first frame being rendered on top-left corner Reviewed By: javache Differential Revision: D73948178 fbshipit-source-id: 055c12aa62d70acc1e4c5a2a5c4ea0c5608e22c7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
Summary:
Fixes #50442
Closes #50704
Users reported that Modals on Android are first renderer anchored in 0,0.
That results in them being on the top left corner of the screen for some seconds.
This is happening because the native state of the Modal on Android as width/height set at 0,0 - which we then update in a subsequent callback.
I'm fixing this by making sure we render the Modal the first time with the right screen size - the status bar size
Changelog:
[Android] [Fixed] - Fix Modal first frame being rendered on top-left corner
Differential Revision: D73948178