Nativebase: Header and Footer on iPhone XR and XS Max wrong SafeArea

[benzman81]

Issue Description

Header and Footer currently do not work on iPhone XR and XS Max as the SafeArea does seem to be wrong. iPhone X and XS works well.

node, npm, react-native, react and native-base version, expo version if used

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 25.59 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.3 - /usr/local/bin/node
npm: 5.6.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
IDEs:
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.0 => 0.57.0
npmGlobalPackages:
react-native-app-id: 0.0.5
react-native-cli: 2.0.1

"native-base": "^2.8.0",

Expected behaviour

Should respect correct SafeArea and display nicely.

Actual behaviour

Header and Footer are within SafeArea.

Steps to reproduce

• react-native init my app
• install nativebase
• add header and footer to app.js
• start with iPhone XR or XS Max

Is the bug present in both iOS and Android or in any one of them?

iOS only issue

Any other additional info which would help us debug the issue quicker.

maybe #2283 fixes it, so it should be merged and a release should be pushed to fix this.

[msnow345]

Any update on this? Still seems broken.

I can put together a PR to fix this if the one above doesn't but I'm not sure how quickly they're being merged.

[adierker]

Also experiencing this issue, resorted to model-specific padding in the meantime (ew).

[jorgebaralt]

I am also experiencing this issue on Iphone XS Max, but only with the header. seems like the height is wrong for this device. Tested both on emulator and real device.

[ducpt2]

+1 i facing same issue, when iphoneX safearea is work.

[hohien]

so what is solution to resolve now?

[kimkong88]

any solution yet?

[alexisbronchart]

See my comment https://github.com/GeekyAnts/NativeBase/pull/2283#issuecomment-428102438 it's quite easy to fix by yourself if you can't wait for the PR to be merged.

[jorgebaralt]

@alexisbronchart when I add the changes on #2283 to my code (in node_modules and native base) for some reason it still does not work

[alexisbronchart]

@jorgebaralt since this is a direct change in node_modules, did you change the main property in package.json to src/index.js to avoid using the transpiled code?

[ducpt2]

@alexisbronchart follow your guild it working now :) Thanks alot.

[ghost]

@jorgebaralt since this is a direct change in node_modules, did you change the main property in package.json to src/index.js to avoid using the transpiled code?

Hi could you explain me what is the action to do because I didn't get it and what happen in production ?

[egold]

Here's what I did to workaround this issue until the maintainers fix this.

1. Made a component called CommonHeader that wraps the native base Header
2. Added react-native-device-info package -- needed for the hasNotch() and getModel() functions
3. Added a helper function to see if the current device is one that happens to work correctly on native-base (2.8.1 as of this comment)
4. Made the following helper function:

  nativeBaseDoesHeaderCorrectlyAlready() {
    if (!DeviceInfo.hasNotch()) {
      return true
    }
    const model = DeviceInfo.getModel()
    switch (model) {
      case "iPhone X":
      case "iPhone XS":
        return true
    }
    return false
  }

1. Added a style function to add padding to top if it's one of the devices for which native-base 💩the 🛏

  getContainerStyles() {
    const defaultStyles = {
      backgroundColor: "#ffffff",
    }
    if (!this.nativeBaseDoesHeaderCorrectlyAlready()) {
      return {
        ...defaultStyles,
        paddingTop: 40,
        height: 100,
      }
    }
    return defaultStyles
  }

There's probably all sorts of issues with this, and devices this doesn't quite work on, but this is a temporary workaround for these specific devices (iPhone XR, XS Max)

I also don't like how it relies on DeviceInfo.getModel() -- it just feels hacky. But this is the world we temporarily live in 🤷‍♂️

Hopefully this works well for others. Works for my needs for now, but looking forward to a real fix!

[SupriyaKalghatgi]

Released 2.9.2

[benzman81]

@SupriyaKalghatgi working now, thanks

[lebreRafael]

It seems that this problem is back.

[email protected]

[email protected]

[email protected]

Device: Iphone XS Max

[Hraph]

It seems that this problem is back.

[email protected]

[email protected]

[email protected]

Device: Iphone XS Max

Facing same problem. It appeared between version 2.11.0 and 2.12.0.

[andrewhamill]

Reproduced the problem as well on the versions stated above. Reverted to 2.11.0 for now as 2.12.1 has the issue.

[ansarikhurshid786]

I am also facing misalignment of header issue in iphone x

[RobertSasak]

@lebreRafael @Hraph @andrewhamill
I faced similar issue and then I realise that perhaps I need to eject and update theme. It seems like that there was some refactoring done in last versions.

node node_modules/native-base/ejectTheme.js

[lebreRafael]

@RobertSasak Thank's for sharing that! I will try it soon and tell here if it worked.

[lebreRafael]

It worked!

[hossamnasser938]

I'm experiencing a similar issue with the footer. On iPhone Xr, it is pushed above a little bit while it works on iPhone 8.

[michaelVictoriaDev]

I have the same issue in iphone x and up

I have the screenshot in iphone 6 plus - react-native-modal for pop up

My code looks like this

<Modal isVisible={this.state.isModalVisible} backdropColor={'rgba(0,0,0,.4)'} backdropOpacity={1} animationIn={'zoomInDown'} animationOut={'zoomOutUp'}
        animationInTiming={1000} animationOutTiming={1000} backdropTransitionInTiming={1000} backdropTransitionOutTiming={1000}
        onBackdropPress={() => {
          this.closeModal();
        }}
        onRequestClose={() => {
          this.closeModal();
        }}
        style={{ justifyContent: 'center', zIndex: 2 }} >
        <Content  >

          {/* End of Header Modal */}
          <View style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 10, backgroundColor: '#3F71D7',paddingHorizontal: 20 }}>
            <View style={{ alignSelf: 'flex-start'}}>
             <Text style={{ fontSize: pRatioToFontSize() > 20 ? 20 : pRatioToFontSize(), color: 'white' }}>
              Filter Leads
                        </Text>

            </View>

            <Button transparent style={{ position: 'absolute', right: 0, marginRight: 20, }}
              onPress={() => {
                this.setState({ showFilterHeader: false }, () => {
                  this.closeModal();
                });
              }}>
              <Ionicons name='md-close' size={25} color='white' />
            </Button>

          </View>

          <Content style={{ backgroundColor: colors.WHITE, paddingHorizontal: 20 }} >
              <Text style={{ fontSize: 14, paddingTop: 6 }}>Filter By</Text>
              <Row>
                <Col size={50}>
                <ListItem style={{ marginLeft: 0, borderBottomWidth: 0 }}>
                  <CheckBox checked={this.state.checkBoxLeadStatus} onPress={(e) => this.checkBoxLeadStatus()} />
                  <Body>
                    <Text style={{ fontSize: 14 }}>Lead Status</Text>
                  </Body>
                </ListItem>
                <ListItem style={{ marginLeft: 0, borderBottomWidth: 0 }}>
                  <CheckBox checked={this.state.checkBoxLeadSource} onPress={(e) => this.checkBoxLeadSource()} />
                  <Body>
                    <Text style={{ fontSize: 14 }}>Lead Source</Text>
                  </Body>
                </ListItem>
                <ListItem style={{ marginLeft: 0, borderBottomWidth: 0 }}>
                  <CheckBox checked={this.state.checkBoxChooseDate} onPress={(e) => this.checkBoxChooseDate()} />
                  <Body>
                    <Text style={{ fontSize: 14 }}>Choose Date</Text>
                  </Body>
                </ListItem>
                </Col>

              <Col size={50}>
                <ListItem style={{ marginLeft: 0, borderBottomWidth: 0 }}>
                  <CheckBox checked={this.state.checkBoxRating} onPress={(e) => this.checkBoxRating()} />
                  <Body>
                    <Text style={{ fontSize: 14 }}>Rating</Text>
                  </Body>
                </ListItem>
                <ListItem style={{ marginLeft: 0, borderBottomWidth: 0 }}>
                  <CheckBox checked={this.state.checkBoxPriority} onPress={(e) => this.checkBoxPriority()} />
                  <Body>
                    <Text style={{ fontSize: 14 }}>Priority</Text>
                  </Body>
                </ListItem>
                <ListItem style={{ marginLeft: 0, borderBottomWidth: 0 }}>
                  <CheckBox checked={this.state.checkBoxTags} onPress={(e) => this.checkBoxTags()} />
                  <Body>
                    <Text style={{ fontSize: 14 }}>Tags</Text>
                  </Body>
                </ListItem>
              </Col>

              </Row>
            <View >
              <ListItem icon style={{ marginLeft: 0, borderBottomWidth: 0 }}>
                <Left>
                  <Text>Include Shared Leads</Text>
                </Left>
                <Body style={{ borderBottomWidth: 0}} />
                <Right style={{ borderBottomWidth: 0 }}>
                  <Switch value={this.state.sharedLead} onValueChange={() => this.setState({ sharedLead: !this.state.sharedLead})} />
                </Right>
              </ListItem>
            </View>
          </Content>
          <Footer >
            <FooterTab style={{ backgroundColor: "#FFF"}}>
              <Button light full
                onPress={() => {
                    console.log(Clear All)
                }}>
                <Text >
                  Clear All
                                </Text>
              </Button>
              <Button full
                style={{ backgroundColor: '#2ca84f', borderRadius: 0}}
                onPress={() => {
                  console.log(apply)
                }}>
                <Text style={{ color: 'white' }}>
                  Apply
                                </Text>
              </Button>
            </FooterTab>
          </Footer>
        </Content>
      </Modal>;

But in iphone x and up the footer height is not responsive or there's a big gap on the buttons
I hope someone help me on this sort of problem.