Skip to content
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

Top margin not working on some android devices on expo (pixel 4a) #265

Closed
dannyhw opened this issue Sep 13, 2021 · 9 comments
Closed

Top margin not working on some android devices on expo (pixel 4a) #265

dannyhw opened this issue Sep 13, 2021 · 9 comments
Labels
v7 we're so back

Comments

@dannyhw
Copy link
Member

dannyhw commented Sep 13, 2021

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. run the expo script from the v6readme
  2. setup pixel 4a emulator
  3. run yarn android
  4. preview is partly covered by the notch

Expected behavior

Top margin should make all of the preview visible

Screenshots

image

Code snippets

changing the app.tsx to the following is a workaround

import React from "react";
import { StatusBar, StyleSheet, View } from "react-native";
import StorybookUIRoot from "./.storybook/Storybook";

export default () => (
  <View
    style={[
      StyleSheet.absoluteFillObject,
        { marginTop: StatusBar.currentHeight },
    ]}
  >
    <StorybookUIRoot />
  </View>
);
@dannyhw dannyhw added this to the v6 alpha 4 milestone Sep 13, 2021
@dannyhw dannyhw added 6.5 good first issue Good for newcomers labels Sep 13, 2021
@jorgearuv
Copy link
Contributor

I can take this task @dannyhw

@dannyhw
Copy link
Member Author

dannyhw commented Feb 8, 2022

Hey @jorgeruvalcaba are you still looking at this?

@jorgearuv
Copy link
Contributor

Hey @dannyhw, sorry; I've been absent here the last few months. But yeah, I'm still looking at it.

@wilkuintheair
Copy link

I think this is no longer valid:
https://github.com/storybookjs/react-native/blob/next-6.0/app/react-native/src/preview/components/OnDeviceUI/OnDeviceUI.tsx#L40
In my case the problem exists and I'm on Expo project (dev-client) and global.Expo, global.__expo, global.__exponent are all undefined.

I think maybe we can just ignore the exports.IS_EXPO condition and set the padding for all the Android devices?

And, since on Android the SafeAreaView is just a wrapper around the View, I guess the issue should be happening on all of the Android devices, right? Are we able to confirm it's just some devices that are affected?

@jorgearuv
Copy link
Contributor

I haven't been able to finish with this, feel free to open a PR @wilkuintheair

@jorgearuv jorgearuv removed their assignment Sep 30, 2022
@dannyhw
Copy link
Member Author

dannyhw commented Oct 1, 2022

Well there were actually changes around safe area in this project so this would need to be tested again.

@dannyhw
Copy link
Member Author

dannyhw commented Oct 4, 2022

@wilkuintheair the problem is that atleast at the time of creating the issue this would only happen on expo so adding the extra padding on android always would cause issues on android (non expo)

@dannyhw dannyhw changed the title [6.0] Top margin not working on some android devices on expo (pixel 4a) Top margin not working on some android devices on expo (pixel 4a) Mar 1, 2023
@dannyhw dannyhw modified the milestones: 6.5 release, 6.6 Mar 1, 2023
@dannyhw dannyhw added v7 we're so back and removed good first issue Good for newcomers 6.5 labels Oct 22, 2023
@dannyhw dannyhw removed this from the 6.6 milestone Oct 22, 2023
@fabioatcorreia
Copy link
Contributor

Is this still an issue?
Wasn't able to replicate it on my end.

@dannyhw
Copy link
Member Author

dannyhw commented Aug 31, 2024

@fabioatcorreia yeah think this is outdated, thanks for checking 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v7 we're so back
Projects
None yet
Development

No branches or pull requests

4 participants