Home / Questions / 268645
Accepted
Noob Dev
Asked: 2020-06-01 15:13:08 +0800 CST 2020-06-01 15:13:08 +0800 CST

Header disappears from some screens with React Native and Expo

  • 772

I have a problem with one of my applications developed with React Nativeand Expo.

The problem is that the header is not being displayed.

This is my code:

import React from 'react';

import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TouchableHighlight
} from 'react-native';

export default class NoticePrivacyScreen extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: ('',
        <Text style={styles.headerHeader}> Aviso de privacidad </Text>
      ),

      headerLeft: (
        <TouchableHighlight onPress={navigation.getParam('Menu')}>
          <Image style={{ width: 30, height: 30 }}
            source={require('../images/backButton.png')}
          />
        </TouchableHighlight>
      )
    }
  }

  componentDidMount() {
    this.props.navigation.setParams({ Menu: this._goMenu });
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View>
          <Text style={styles.headerPrivacy}>
            Mi texto
          </Text>
        </View>
      </ScrollView>
    )
  }
  _goMenu = async () => {
    this.props.navigation.navigate('Menu');
  }
}

On my Home Screen I have a header that is displayed correctly.

So to see if it was something I couldn't see in my code, I made a copy of that screen that did show it and redirected the button to that clone. And I was very surprised that a clone of the one that works, the header was not shown.

I show you:

Here is the header, all good header

When navigating to a screen that is a clone of the one above, the header disappears no header

Does anyone know what could be going on? Thank you

react-native

2 Answers

  1. I would need to see all your code to give you an exact answer to your problem. But from what I can see you're using a DrawerNavigatorfor the side menu, the problem is that DrawerNavigatorit doesn't have any header.

    If you want a header to appear on each page with a side menu, you would have to plan the navigation of your app well, for example, for each screen that you call in the side menu, you would have to create aStackNavigator

    You can do it as follows

        const stackPantalla1 = createDrawerNavigator(
      {
        root: RootScreen,
        one: SoneScreen, 
      }
    )

    const stackPantalla2 = createDrawerNavigator(
      {
        root2: RootScreen,
        one2: SoneScreen, 
      }
    )

   const Drawer = createDrawerNavigator(
      {
        stack1: { screen: stackPantalla1 },
        stack2: { screen: stackPantalla2 }
      },
      {
        initialRouteName: "stack1"
      }
   );
    • 0
  2. Best Answer

    In case the “normal” header implementation fails in Expo, my best recommendation is to install the react-native-elements package. It has a very simple implementation for the header. In addition to having icons and other complex UI elements to make the application interface more fluid, easier to implement and more attractive to the user

    • 0