CODEWITHSUNDEEP
react-nativenavigation
Erik Galler
Erik Galler

Reputation: 83

React Native Navigation setOptions issue

I keep getting this weird error even when i try using the code directly from the navigation docs, so i think there is something wrong with my navigation stack... The error i keep getting is:

TypeError: undefined is not a function (near '...navigation.setOptions...')

Here is my navigation stack:

import { createStackNavigator } from 'react-navigation-stack'; 
import { createAppContainer } from 'react-navigation';
import React from 'react';
import MainScreen from '../screens/MainScreen';

const screens = {
    Main: {
        screen: MainScreen,
        navigationOptions: ({ navigation }) => ({
            title: 'GRØFTA',
            headerStyle: { backgroundColor: colour.blue, height: 150 },
            headerTintColor: '#fff',
            headerTitleStyle: { fontWeight: 'bold', fontSize: 40 },
            headerTitleAlign: 'center',
            headerLeft: () => <Icon
                name='settings'
                color='white'
                size={30}
                onPress={() => navigation.navigate("wouldYouRather")}
                containerStyle={style = { paddingBottom: 70, paddingLeft: 8 }} />,

        })
    }, //And all my other screens
}

const MainStack = createStackNavigator(screens);

export default createAppContainer(
    MainStack
)

And this is my mains screen where the error occurs:

import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text, Dimensions } from 'react-native';
import { useState, useEffect, useLayoutEffect } from 'react';
import { Icon } from 'react-native-elements'

export function MainScreen({ navigation }) {

  const [showInfo, setShowInfo] = useState(false)

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Icon
          name='more'
          color='white'
          size={30}
          onPress={() => setShowInfo(!showInfo)}
          containerStyle={style = { paddingBottom: 70, paddingRight: 8 }} />
      ),
    });
  }, [navigation]);

  return ...
}

Btw When i remove the useLayoutEffect everything works perfectly fine:)

Upvotes: 3

Views: 6971

Answers (2)

Adam Grabherr
Adam Grabherr

Reputation: 1

You just have to attach 'React' to the 'UseLayoutEffect' hook.

React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Icon
          name='more'
          color='white'
          size={30}
          onPress={() => setShowInfo(!showInfo)}
          containerStyle={style = { paddingBottom: 70, paddingRight: 8 }} />
      ),
    });
  }, [navigation]);

Upvotes: -1

Waheed Akhtar
Waheed Akhtar

Reputation: 3187

As your code suggests that you are using react-navigation v4 but you are following the docs of react-navigation v5 and the reason is you getting this error because setOptions do not exist in react-navigation v4.

Follow this doc of react-navigation v4

https://reactnavigation.org/docs/4.x/getting-started

Upvotes: 2

Related Questions