Skip to content

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

Closed
wants to merge 1 commit into from

Conversation

cortinico
Copy link
Contributor

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

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Facebook Partner: Facebook Partner labels May 1, 2025
@facebook-github-bot
Copy link
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 cortinico force-pushed the export-D73948178 branch from ab44331 to 2247f5a Compare May 1, 2025 14:48
@facebook-github-bot
Copy link
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 cortinico force-pushed the export-D73948178 branch from 2247f5a to c931481 Compare May 1, 2025 14:48
@facebook-github-bot
Copy link
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 cortinico force-pushed the export-D73948178 branch from c931481 to f39e549 Compare May 1, 2025 14:52
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
@AndreiCalazans
Copy link
Contributor

Hey @cortinico any next steps to know when this can land in main?

@cortinico
Copy link
Contributor Author

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

@facebook-github-bot
Copy link
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 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
@facebook-github-bot
Copy link
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
@facebook-github-bot
Copy link
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 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
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
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D73948178

@react-native-bot
Copy link
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?

@facebook-github-bot
Copy link
Contributor

This pull request has been merged in b950fa2.

@react-native-bot react-native-bot added the Merged This PR has been merged. label Jun 19, 2025
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
@react-native-bot
Copy link
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
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported Merged This PR has been merged. p: Facebook Partner: Facebook Partner
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Modal's children are rendered in the top left corner for the first few frames when it's opened (Android)
4 participants