CODEWITHSUNDEEP
react-nativereact-navigation
Ali Raza
Ali Raza

Reputation: 83

React native navigationOptions calling function error

Got an error when call a function inside navigationOptions.

static navigationOptions = {
    tabBarIcon: ({ tintColor })=> (
      <Icon name='ios-add-circle' style={{ color: tintColor}} />
    ),
    tabBarOnPress: () => {
      this.callingFun();
    },
  }

  callingFun = ()=> {
    console.log('tabBarOnPress:');
  }

Error:

error image

Upvotes: 3

Views: 4571

Answers (4)

Waqar UlHaq
Waqar UlHaq

Reputation: 6422

I've resolved the issue be the following way:

static navigationOptions = ({ navigation }) => {
    return {
        headerRight: () => (

            <TouchableOpacity
                onPress={navigation.getParam('onPressSyncButton')}>
                <Text>Sync</Text>
            </TouchableOpacity>
        ),
    };
};

componentDidMount() {
    this.props.navigation.setParams({ onPressSyncButton: this._onPressSyncButton });
}

_onPressSyncButton = () => {
     console.log("function called");
}

Upvotes: 3

Ali Raza
Ali Raza

Reputation: 83

Static method calls are made on the class, not on the instance. There is no way to reference this in static method. Can only reach a static method using the name of the class. 

export default class MediaTab extends React.Component {
  static navigationOptions = {
    tabBarIcon: ({ tintColor })=> (
      <Icon name='ios-add-circle' style={{ color: tintColor}} />
    ),
    tabBarOnPress: () => {
      MediaTab.callingFun();
    },
  }

  static callingFun = () => {
    console.log('tabBarOnPress:');
  }
}

Upvotes: 3

Muhammad Shaheem
Muhammad Shaheem

Reputation: 665

const BottomTab = createMaterialTopTabNavigator({
Active:OnlineStack
}, {

    tabBarPosition: 'top',
    tabBarOptions: {
        activeTintColor: 'gray',
        inactiveTintColor: 'white',
        labelStyle: {
            fontSize: 12,
            fontFamily: "Choco_Cooky"
          }, 
        style: {
            backgroundColor: 'black',
            borderWidth: 1,
            borderBottomWidth:0,
            borderColor: 'gray',
          },
    }
    /* Other configuration remains unchanged */
 }
);


 OnlineStack.navigationOptions = ({navigation})=>{
        let { routeName } = navigation.state.routes[navigation.state.index];
        let navigationOptions = {};
        header: null;
        if (routeName === 'Home') {
        navigationOptions.tabBarVisible = false;
        }
        return navigationOptions;
        }

Upvotes: 0

Tiniki
Tiniki

Reputation: 131

You can not call callingFun in static object property. I think that you want this

static navigationOptions = ({navigation}) => {
    return {
        tabBarIcon: ({ tintColor }) => (
            <Icon name='ios-add-circle' style={{ color: tintColor }} />
        ),
        tabBarOnPress: () => {
            navigation.getParam('callingFun')();
        },
    }
}

callingFun = () => {
    console.log('tabBarOnPress:');
}

componentDidMount() {
    const { navigation } = this.props
    navigation.setParams({
        callingFun: this.callingFun,
    })
}

Upvotes: 12

Related Questions