React native navigationOptions calling function error - react-native

Question

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:

Answer 1

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,
})
}

Answer 2

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:');
}
}

Answer 3

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");
}

Answer 4

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;
}