-
Notifications
You must be signed in to change notification settings - Fork 24.8k
Fix Modal first frame being rendered on top-left corner (#50704) #51048
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
This pull request was exported from Phabricator. Differential Revision: D73948178 |
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
ab44331
to
2247f5a
Compare
This pull request was exported from Phabricator. Differential Revision: D73948178 |
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
2247f5a
to
c931481
Compare
This pull request was exported from Phabricator. Differential Revision: D73948178 |
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
c931481
to
f39e549
Compare
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
Hey @cortinico any next steps to know when this can land in main? |
We're still discussing internally on a couple of edge case to handle. I'll get back to you once we find an agreement |
This pull request was exported from Phabricator. Differential Revision: D73948178 |
f39e549
to
2c1fe34
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 Differential Revision: D73948178
This pull request was exported from Phabricator. Differential Revision: D73948178 |
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
2c1fe34
to
010ff1c
Compare
This pull request was exported from Phabricator. Differential Revision: D73948178 |
010ff1c
to
fcce3b3
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
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
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
This pull request was exported from Phabricator. Differential Revision: D73948178 |
ef6acf9
to
cf5b1b8
Compare
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? |
This pull request has been merged in b950fa2. |
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
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
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? |
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
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