How to hide Header Bar border and add curved Body using React Native & React Navigation

Hint: 8 lines of code

Subscribe to my newsletter and never miss my upcoming articles

So you are setting up your React Native project and the UX team wants to customize the App Header bar and the body style?

Simple, follow this short post on how to do so.

First: Setup Stack Navigation from React Navigation

npm install @react-navigation/native

After setting up, initialize the Stack Navigator and add your components

import { createStackNavigator } from '@react-navigation/stack';
import Home from "./components/Home"
import Volunteer from "./components/Volunteer"

// initialize Stack Navigator
const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Volunteer" component={Volunteer} />
    </Stack.Navigator>
  );
}

Awesome, now the Header should look something like this:

Screen Shot 2021-02-19 at 6.56.03 PM.png

So the Header works, but how do we remove the Header bottom border?

Add a screenOptions property with these lines of code inside of <Stack.Navigator> and it should be working ASAP.

<Stack.Navigator
        screenOptions={{
          headerStyle: {
            // elevation works on Android
            elevation: 0,

            // shadowColor works on iOS
            shadowColor: "transparent",
          },
        }}
      >

Ctrl + S and now check again in the emulator

Screen Shot 2021-02-19 at 7.11.23 PM.png

Magic huh? The bottom border has disappeared. Hooray! Now the last step is to add a curved app body

How to setup a curved body

A way to get around this (not the great way ever) is to add a DefaultTheme that has the same color as the Stack Navigation Header and add borderTopLeftRadius, borderTopRightRadius and backgroundColor to the top <View> in your app body

Adding DefaultTheme

import { DefaultTheme, NavigationContainer } from "@react-navigation/native";

const navTheme = DefaultTheme;
// setup nav theme with the same color as your header
navTheme.colors.background = "#53BE77";

Curve the top <View> with borderTopLeftRadius and borderTopRightRadius. After that add backgroundColor

function Volunteer(){
 return (
// link the style to the View
    <SafeAreaView style={styles.body}>

    </SafeAreaView>
)
}

export default Volunteer;

// at the bottom of the file, add the styles
const styles = StyleSheet.create({
  body: {
    flex: 1,
// Curve the left and right of the View
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,

    backgroundColor: "#FFFFFF",

// Optional, to add shadow to your body
    marginTop: 10,
    shadowColor: "#000",
    shadowOpacity: 0.2,
    shadowRadius: 3,
    elevation: 3,
  },
})

Results should look like this, with body curved, no header bottom border and a nice shadow in the View. Just what your Design team needs

Screen Shot 2021-02-19 at 7.30.21 PM.png

If you have any questions, please comment below and I'll be going over them ASAP :)

No Comments Yet