Set no header for all components React-Native

Question

I have 4 components which all have static navigationOptions = {header: null} defined. But that it's very time-consuming when you define that in each component. So I define {header: null} in createStackNavigator but the header still appears at the top of the component.

Can you guys help ?

import { createStackNavigator } from 'react-navigation';
import Home from './Components/Home';
import Main from './Components/Main';
import SubjectDetail from './Components/AnimalSubject';
import Lesson from "./Components/Lesson";

const App = createStackNavigator({
     First: { screen: Home },
     Second: { screen: Main },
     Third: { screen: SubjectDetail },
     Four: {screen: Lesson},
//Route name with specified component
},
{
     transitionConfig: () => ({ screenInterpolator: () => null }),
//remove transition config
},
{
     initialRouteName: 'First',
//the component name 'Home' will be initiated first
},
{
     header: null
//defined header: nul
}
);

export default App;

my evironment

"react": "16.3.1",
"react-native": "~0.55.2",
"react-navigation": "^2.2.5",
"node": "v8.11.2"
"npm": "v6.1.0"

can you try the accepted answer mentioned here https://stackoverflow.com/questions/44701245/hide-header-in-stack-navigator-react-navigation — Aravind S, Jun 25 '18 at 06:29
@AravindS nothing change, the header still appears on the top :( — STEPHEN bui, Jun 25 '18 at 06:35
can you try `navigationOptions: { header: null }` in route name as a prop...like `screen: Home, navigationOptions: { header: null }` — Aravind S, Jun 25 '18 at 06:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173735/discussion-between-aravind-s-and-stephen-bui). — Aravind S, Jun 25 '18 at 06:45

score 3 · Accepted Answer · answered Jun 25 '18 at 13:52

Probably this code should works for you (based on Stack navigator docs)

const App = createStackNavigator({
     First: { screen: Home },
     Second: { screen: Main },
     Third: { screen: SubjectDetail },
     Four: {screen: Lesson},
},
{
     headerMode: 'none',
     transitionConfig: () => ({ screenInterpolator: () => null }),
     initialRouteName: 'First',
},
);

You should pass the object with routes as a first parameter and common options as second.

Set no header for all components React-Native

1 Answers1