0

I wish to create Header for my Notes Storage App on React Native. I have Tried using stackNavigator till now but I am caught up on how to add menu icon which onPres will open the Drawer. I tried using HeaderLeft in stackDesignHead but it gives an error. Also using a FAB is not recommended.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import HomePage from './src/HomePage/HomePage';
import NotesFolder from './src/notes';
import CreateNewFolder from './src/CreateNewFolder';
import Icon from 'react-native-vector-icons/Ionicons';
import Constants from 'expo-constants';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const stackDesignHead = {
          title: "Notes Classifier", 

          headerTintColor:"white", 
          headerStyle:{ 
            backgroundColor:"#fcba03"

            },
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerTitleAlign: 'center'
}
function LeftDrawer () {
  return(


          <Stack.Navigator>
          <Stack.Screen 
          name="HomePage"
          component={HomePage} 
          options={stackDesignHead}
          />
          <Stack.Screen 
          name="NotesFolder"
          component={NotesFolder} 
          options={{...stackDesignHead,title:"Notes"}}
          />
          <Stack.Screen 
          name="CreateNewFolder"
          component={CreateNewFolder} 
          options={{...stackDesignHead,title:"+ new Folder"}}
          />

          </Stack.Navigator>
  )
}

const menuDesignHead = {
  title: "Notes Classifier",

  headerTintColor:"white",
  headerStyle:{
    backgroundColor:"#fcba03"

    },
  headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerTitleAlign: 'center'

}

function App () {

  return(
        <View style={styles.container}>
          <Drawer.Navigator initialRouteName="Home">
              <Drawer.Screen 
              name="Home"
              component={LeftDrawer} 
              options={{menuDesignHead}}
              />
              </Drawer.Navigator>
        </View>
  );
}
export default()=>{
  return(
    <NavigationContainer>
      <App/>

    </NavigationContainer>
  )
}

I am new to react native and unaware of various ways to create header.

Rajan
  • 1,512
  • 2
  • 14
  • 18
Gaurav kumar
  • 21
  • 6

1 Answers1

0

Provides a way to create your own custom headers in React-navigation documents.

Replacing the title with a custom component

Sometimes you need more control than just changing the text and styles of your title -- for example, you may want to render an image in place of the title, or make the title into a button. In these cases you can completely override the component used for the title and provide your own.

Example

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}
hong developer
  • 13,291
  • 4
  • 38
  • 68