How to use hook with SwitchNavigator

Question

I'm trying to use https://github.com/expo/react-native-action-sheet with switch navigator.

I'm not sure how to do the basic setup as the example in the readme is different than my App.js. I'm using react 16.8 so I should be able to use hooks.

My App.js

import { useActionSheet } from '@expo/react-native-action-sheet'
const AuthStack = createStackNavigator(
    { Signup: SignupScreen, Login: LoginScreen }
    );

const navigator = createBottomTabNavigator(
{
        Feed: {
            screen: FeedScreen,
            navigationOptions: {
                tabBarIcon: tabBarIcon('home'),
            },
        },
        Profile: {
            screen: ProfileScreen,
            navigationOptions: {
                tabBarIcon: tabBarIcon('home'),
            },
        },
    },

    );

const stackNavigator = createStackNavigator(
{
    Main: {
        screen: navigator,
            // Set the title for our app when the tab bar screen is present
            navigationOptions: { title: 'Test' },
        },

        // This screen will not have a tab bar
        NewPost: NewPostScreen,
    },
    {
        cardStyle: { backgroundColor: 'white' },
    },
    );

export default createAppContainer(
    createSwitchNavigator(
        {
            AuthLoading: AuthLoadingScreen,
            App: stackNavigator,
            Auth: AuthStack,
        },
        {
            initialRouteName: 'AuthLoading',
        }
    );

    const { showActionSheetWithOptions } = useActionSheet();
);

Update, I'm getting this error when calling the showActionSheetWithOptions inside my component:

Hooks can only be called inside the body of a function component. invalid hook call

This is my code:

import React, { Component } from 'react';
import { useActionSheet } from '@expo/react-native-action-sheet'
export default class NewPostScreen extends Component {

    _onOpenActionSheet = () => {
        const options = ['Delete', 'Save', 'Cancel'];
        const destructiveButtonIndex = 0;
        const cancelButtonIndex = 2;
        const { showActionSheetWithOptions } = useActionSheet();
        showActionSheetWithOptions(
        {
            options,
            cancelButtonIndex,
            destructiveButtonIndex,
        },
        buttonIndex => {
            console.log(buttonIndex);
        },
        );
    };

    render () {
        return (
                <View>
                    <Button title="Test" onPress={this._onOpenActionSheet} />
                </View>
         )
    }
}

update 2

I also tried using a functional component, but the actionsheet does not open (console does print "pressed")

// ActionSheet.js
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { useActionSheet } from '@expo/react-native-action-sheet'

export default function ActionSheet () {
    const { showActionSheetWithOptions } = useActionSheet();
    const _onOpenActionSheet = () => {
        console.log("pressed");
        const options = ['Delete', 'Save', 'Cancel'];
        const destructiveButtonIndex = 0;
        const cancelButtonIndex = 2;
        showActionSheetWithOptions(
            {
              options,
              cancelButtonIndex,
              destructiveButtonIndex,
            },
            (buttonIndex) => {
                console.log(buttonIndex);
            },
        );
    };

    return (
        <TouchableOpacity onPress={_onOpenActionSheet} style={{height: 100,}}>
            <Text>Click here</Text>
        </TouchableOpacity>
    );
};

Answer 1

Problem

As you can see here. You are not connecting your application root component.

Solution

import connectActionSheet from @expo/react-native-action-sheet and connect your application root component to the action sheet. Simply modify your App.js to reflect the following:

// ... Other imports
import { connectActionSheet } from '@expo/react-native-action-sheet'

const AuthStack = createStackNavigator({
    Signup: SignupScreen,
    Login: LoginScreen
});

const navigator = createBottomTabNavigator({
    Feed: {
        screen: FeedScreen,
        navigationOptions: {
            tabBarIcon: tabBarIcon('home'),
        },
    },
    Profile: {
        screen: ProfileScreen,
        navigationOptions: {
            tabBarIcon: tabBarIcon('home'),
        },
    },
});

const stackNavigator = createStackNavigator({
    Main: {
        screen: navigator,
        // Set the title for our app when the tab bar screen is present
        navigationOptions: { title: 'Test' },
    },

    // This screen will not have a tab bar
    NewPost: NewPostScreen,
}, {
    cardStyle: { backgroundColor: 'white' },
});

const appContianer = createAppContainer(
    createSwitchNavigator({
        AuthLoading: AuthLoadingScreen,
        App: stackNavigator,
        Auth: AuthStack,
    }, {
        initialRouteName: 'AuthLoading',
    })
);

const ConnectApp = connectActionSheet(appContianer);

export default ConnectApp;

Now on any of your application screens (i.e. Feed, Profile, Main, etc.) you can access the action sheet as follows:

If Stateless Component

// ... Other imports
import { useActionSheet } from '@expo/react-native-action-sheet'

export default function Profile () {
  const { showActionSheetWithOptions } = useActionSheet();
  /* ... */
}

If Statefull Component

// ... Other imports
import React from 'react'
import { useActionSheet } from '@expo/react-native-action-sheet'

export default Profile extends React.Component {
  const { showActionSheetWithOptions } = useActionSheet();
  /* ... */
}

Note: You can also access the action sheet as stated below from the docs

App component can access the actionSheet method as this.props.showActionSheetWithOptions