How to move react navigation Stack header to bottom of the screen in React native?

Question

I want to show stack header in top for **mobile device** & in bottom of the screen for Tablet screen . So I tried to move header to bottom of the screen with bellow code . but no luck . Any pointer would be appreciated .

         <Stack.Screen
            name="addBusiness"
            component={BusinessScreen}
            options={{
              title: 'My home',
              header: (navigationOptions) => (
                <View
                  style={{
                    position: 'relative',
                    bottom: 0,
                    height: 80,
                    width: '100%',
                    backgroundColor: '#dbdbdb',
                  }}
                >
                  <Text>HOME</Text>
                </View>
              ),
            }}
       /> 

Answer 1

You can do something like this:

import {isTablet} from 'react-native-device-info';
// ...

const headerStyles = () => {
  if (isTablet()) {
    return {
      header: () => (
        <View
          style={{
            position: 'absolute',
            top: Dimensions.get('window').height - 60,
            left: 0,
            right: 0,
            height: 60,
            borderWidth: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>HOME</Text>
        </View>
      ),
    };
  }
}

headerStyles can then be used like this:

options={{
  title: 'My home',
  ...headerStyles(),
}}

So you need to import Dimensions from react-native and isTablet from react-native-device-info.

---

This implementation uses the default react navigation header if the device is not a tablet. So if you also want to have a custom header on mobile you similarly need to return a header component in an else statement or after the if statement.