How to call a alert from bottom tab navigator in react navigation v4

Question

For calling a stackNavigator we use props.navigation.navigate('home').

But how to call for alert when i clicked on a bottom tab navigation icon.

Answer 1

You can use tabBarOnPress in navigationOptions as below

CreatePostt: {
    screen: createStackNavigator(
        {
            CreatePost: {
                screen: CreatePost,
                navigationOptions: {
                    // header: null
                }
            },

            PostExpanded: {
                screen: PostExpanded,
                navigationOptions: {
                    title: "Upload Post",
                    headerStyle: {
                        elevation: 1
                    },
                }
            },


        },
        {
            defaultNavigationOptions: {
                headerTitleStyle: {
                    fontWeight: "bold"
                }
            }
        }
    ),
        navigationOptions: {
        tabBarOptions: {
            showIcon: true,
                showLabel: false
        },
        tabBarVisible: false,
            labelStyle: { margin: 0, padding: 0 },
        title: "",
            tabBarIcon: ({ focused }) => <BtnPost style={{ marginTop: 15 }} />,
                tabBarOnPress: ({ navigation, defaultHandler }) => {

                }
    }
},

Answer 2

thanks.. it is working.....

const AlertStack = createStackNavigator(
  {
    Alert: AlertScreen

  },
);

AlertStack.navigationOptions = {
  tabBarOnPress: () => {
 alert('Hello');
  },
  };