logo
Tags down

shadow

Remove Header React Navigation v5


By : Pau Lopez
Date : August 01 2020, 05:00 PM
Hope this helps In your scenario, you have two options. Either you can disable header for all screens or you can disable header for the selected screen only.
For disable header for all-around your application edit your app.js like this
code :
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import BottomTabNavigator from './navigation/BottomTabNavigator';
import useLinking from './navigation/useLinking';

const Stack = createStackNavigator();

........

<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
  <Stack.Navigator screenOptions={{headerShown: false,}}>
    <Stack.Screen name="root" component={BottomTabNavigator}/>
  </Stack.Navigator>
</NavigationContainer>
<Stack.Navigator ...>
 ...
  <Stack.Screen
    name="Landing"
    component={LandingScreen}
    options={{
      headerShown: false, // change this to `false`
    }}
  />
...
</Stack.Navigator>


Share : facebook icon twitter icon

Remove the navigation header from the react-native screen - stack navigation


By : Lobolofi
Date : March 29 2020, 07:55 AM
this one helps. Did you already modify your FamilyMembersStack inside HomeScreenStack like this?
code :
    const HomeScreenStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  },

  // modify this Stack

  FamilyMembersStack:{
    screen: FamilyMembersStack,
    navigationOptions: ({ navigation }) => {
      return {
        header: null
      }
    }
  }
  AttendanceHistory: {
    screen: AttendanceHistory,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Attendance history"
      }
    }
  },
  OrderHistory: {
    screen: OrderHistory,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Order history"
      }
    }
  }
});
 export default class SingleContact extends Component {
    static navigationOptions = {

        header: null, // remove this
    }
    constructor(props) {
        super(props);
        this.state = { userName: "", contacts: [], userID: "", cookie: null, memberShips: [] };
    }
    async componentDidMount() {

    }
    onDataLoaded(result, userName) {

    }
    render() {
const FamilyMembersStack  = createStackNavigator({
  FamilyMembers: {
    screen: FamilyMembers,
    navigationOptions: ({ navigation }) => {     
      return {
        headerTitle: "Family members",
        header:null        
      }
    }
  },
  SingleContact: {
    screen: SingleContact,
    navigationOptions: ({ navigation }) => {     
      return {
        headerTitle: "Contact",
        header:null // and remove this        
      }
    }
  },
});

Use 'navigation' and 'route' inside header present in class - React-navigation v5


By : user3698726
Date : March 29 2020, 07:55 AM
Any of those help Ok, so each time the same, I try many days solving my problem, and when I finally decide to post on stack, I find a solution :).
So, if there's some performance issue or other you may see by looking at my code, do not hesitate to correct me. I just found that this solution solved my problem.
code :
function App() {
    return(
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home"
                component={Home} 
                options={({route, navigation}) => (
                    {headerTitle: 'Home Page', 
                    route: {route}, 
                    navigation: {navigation}}
                )}
                />
            </Stack.Navigator>
        </NavigatorContainer>
)}
navigation.setOptions({
            headerRight: () => <TouchableOpacity style={styles.settings_touchable_headerrightbutton}
                            onPress={() => route.params.goToSettings()}>
                            <Image style={styles.settings_image}
                            source={require('../assets/ic_settings.png')} />
            </TouchableOpacity>
        })

Screen Navigation Header wont display in stacked Drawer Navigation ....React Navigation V2


By : Cruze
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Navigation options can only be configured its direct parent in version 2.
Create individual stack for your each screen. And then you can configure the navigation options of createStackNavigator at respective screen.

Remove navigation header on screen for react native app


By : Tai Tanaka
Date : March 29 2020, 07:55 AM
wish helps you I want to remove header from my screen where I use bottom tab navigator. ,
You can use this instead of above
code :
    export class Home extends Component {
       static navigationOptions = {
            header: {
              visible: false,
            }
          }
      render() {
        return <ProductList />;
      }
    }

    export class Settings extends Component {
      render() {
        return <Chat />;
      }
    }

    const Main = createBottomTabNavigator({
      Home: {
        screen: Home
      },
      Settings: {
        screen: Settings,
      },
    }, 
    { 
        headerMode: 'screen' 
    });

How to change navigation header button style based on a state property in React Native using React Navigation?


By : Mar'Quh Sanayon Odin
Date : March 29 2020, 07:55 AM
I hope this helps you . when ever you change value of state also change navigation param too.see example
code :
export class Example extends Component {
  static navigationOptions = ({ navigation }) => {
        const showModal = get(navigation, 'state.params.showModal');

        return {
          headerTitle: <Header
            showModal={showModal}
            backIcon />,
          headerStyle: HeaderStyle,
          headerLeft: null,
        };
      };

  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    };
  }

  componentDidMount = () => {
    this.props.navigation.setParams({
      showModal: this.state.showModal,

    });
  }

  handleModal=(value)=>{
    this.setState({showModal:value});
    this.props.navigation.setParams({
      showModal: this.state.showModal,
    });
}

render() {
return null;
}
}
shadow
Privacy Policy - Terms - Contact Us © voile276.org