search

GeekyAnts / NativeBase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
https://nativebase.io/
MIT License
20.17k stars 2.39k forks source link

Header glitches with react navigation 5 #3121

Closed anam-hossain closed 2 years ago

anam-hossain commented 4 years ago

Hi guys, Nativebase header is glitching with the latest version of react-navigation (v5.3.1). I have attached a gif file to demonstrate the glitch.

react_navigation_5_header_glitch

I am using a native base header with a custom component.

The code looks like the following:

class HomeHeader extends React.PureComponent {
  render() {
    return (
      <StyleProvider style={getTheme(platform)}>
        <Header>
          <Left />
          <Body>
            <Title>DuaCollection</Title>
          </Body>
        </Header>
      </StyleProvider>
    );
  }
}
function HomeStack() {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      headerMode="screen"
    >
      <Stack.Screen
        name="Home"
        component={HomeSreenContainer}
        options={{ 
          header: ({ navigation }) => <HomeHeader navigation={navigation}/>
        }}
      />
      <Stack.Screen
        name="List"
        component={ListScreen}
        options={{ 
          header: ({ navigation }) => <ListHeader navigation={navigation}/>
        }}
      />
    </Stack.Navigator>
  );
}
function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeTab" component={HomeStack} />
    </Tab.Navigator>
  );
}
function AppNavigator() {
  return (
    <Stack.Navigator
      initialRouteName="Main"
      mode="modal"
      headerMode="none"
      screenOptions={{
        cardStyle: { backgroundColor: 'transparent' }
      }}
    >
      <Stack.Screen
        name="Main"
        component={TabNavigator}
      />
    </Stack.Navigator>
  );
}

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

node: v10.18.0 react-native: 0.61.5 react 16.9.0 native-base: 2.13.12 xcode 11.3

sergchernata commented 4 years ago

If you replace the header element with view, the error goes away. There's something wrong with header element but I don't know what it is yet.

hanykumar commented 4 years ago

HI @anam-hossain , can you provide minimal code reproduction on snack for the same?

romonsalve commented 4 years ago

I'm having a similar issue only in iOS when i upgrade from 2.13.8 to 2.13.12 Reverting the version resolve the problem for me.

Im Using header in a custom component only 

const AppHeader = ({
  left,
  body,
  right,
}) => (
  <Header
    iosBarStyle="light-content"
    style={styles.header}
  >
    <Left style={styles.left}>
      {left}
    </Left>
    <Body style={styles.body}>
      {body}
    </Body>
    <Right style={styles.right}>
      {right}
    </Right>
  </Header>
);

const styles = StyleSheet.create({
  header: {
    justifyContent: 'space-between',
    backgroundColor: Colors.primaryLayout,
    alignItems: 'center',
  },
  left: {
    flex: 0.5,
    // marginLeft: Spacing.SPACING_S,
  },
  body: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center',
  },
  right: {
    flex: 0.5,
    // marginRight: Spacing.SPACING_S,
  },
});
anam-hossain commented 4 years ago

@hanykumar I am usually using React native CLI and have very little experience with Expo. So, It will be difficult for me to set up a demo with Expo.

I think @romonsalve have found the problem. Could you able to check what changes in v2.13.12?

Aung-Myint-Thein commented 4 years ago

Having the same issue on iOS only. I feel like the header is a bit tall. I didn't change any config of the header.

EricBuntain commented 4 years ago

@hanykumar I'm having a similar issue as @anam-hossain, my header kind of bounces when navigating to it.

Here is a expo example https://snack.expo.io/@eric_vesst/header-glitch Only happens with iOS.

If I use the headerLeft/headerRight that react-navigation has, there is not glitch like that.

bhaskardabhi commented 4 years ago

Finally I debugged more and fond that its happening when we are loading headers based on scene.

"native-base": "^2.13.12",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "~1.6.0",
"react-native-reanimated": "~1.9.0",
"react-native-router-flux": "^4.2.0",

Code like below:

App.js

<Router>
    <Stack key="root">
        <Scene openDrawer={this.openDrawer} initial navBar={HomeHeader} key="home" component={Home} />}
        <Scene openDrawer={this.openDrawer} navBar={Header} key="profile" component={User} />
        <Scene openDrawer={this.openDrawer} navBar={Header} path="/support" key="support" component={Support} />
    </Stack>
</Router>

HomeHeader:

<HeaderBase>

            <Left>
                <Button onPress={() => Actions.pop()} transparent>
                    <Icon name='arrow-back' />
                </Button>
            </Left>
            <Body>
                <Title onPress={() => Actions.support()}>HeaderBase</Title>
            </Body>
            <Right>
                <Button transparent>
                    <Icon name='menu' />
                </Button>
            </Right>
        </HeaderBase>

Header:

        <Left>
                <Button onPress={() => Actions.pop()} transparent>
                    <Icon name='arrow-back' />
                </Button>
            </Left>
            <Body>
                <Title onPress={() => Actions.support()}>HeaderBase</Title>
            </Body>
            <Right>
                <Button transparent>
                    <Icon name='menu' />
                </Button>
            </Right>
        </HeaderBase>

If I change <Scene openDrawer={this.openDrawer} initial navBar={HomeHeader} key="home" component={Home} />} to <Scene openDrawer={this.openDrawer} initial navBar={Header} key="home" component={Home} />} (make header same for all scene) works.

hanykumar commented 3 years ago

duplicate #3236

apgsn commented 3 years ago

FYI the same bouncy effect happens when you show/hide the Footer component.

angelxmoreno commented 3 years ago

Do we have a solution for this?

siarheipashkevich commented 2 years ago

Any updates?

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.