ActionSheet Provider

<ActionSheetProvider /> is a Context Provider that enables the usage of a cross-platform <ActionSheet /> component anywhere in your application.

• On iOS, defaults to the native ActionSheetIOS, but you can opt-in for a software pixel perfect implementation if you need more customization.

• On android, uses a custom software implementation that aims to blend nicely with the OS interface.

It is built upon the <ModalDialog /> component.

Preview

iOS	Android

Usage

Required setup

As this component leverages a backdrop, you also need to wrap your application with a <BackdropProvider /> component. You usually want to wrap it as high as possible in your tree so that the backdrop properly covers the whole screen.

// App.jsx

import React from 'react';
import {ActionSheetProvider, BackdropProvider} from 'react-native-propel-kit';

const App = () => {
  return (
    <BackdropProvider>
      <ActionSheetProvider>
        <RootNavigator />
      </ActionSheetProvider>
    </BackdropProvider>
  );
};

export default App;

Usage with context

Easiest way to use the backdrop in a component is to use react useContext hook

// MyComponent.jsx

import React from 'react';
import {Button} from 'react-native';
import {ActionSheetContext} from 'react-native-propel-kit';

const MyComponent = () => {
  const actionSheet = useContext(ActionSheetContext);
  const handlePress = useCallback(() => {
    actionSheet.showWithOptions(
      {
        title: 'Are you sure?',
        message: 'Please confirm the removal',
        options: ['Cancel', 'Remove'],
        destructiveButtonIndex: 1,
        cancelButtonIndex: 0
      },
      buttonIndex => {
        console.warn('onButtonPress', {buttonIndex});
      }
    );
  }, [actionSheet]);
  return <Button onPress={handlePress} title="Show ActionSheet" />;
};

export default MyComponent;

Usage with consumer

An alternative way to use the backdrop is to use the <ActionSheetContext.Consumer /> component as a higher order component providing the actionSheet context API.

// MyComponent.jsx

import React from 'react';
import {Button} from 'react-native';
import {ActionSheetContext} from 'react-native-propel-kit';

const MyComponent = () => {
  return (
    <ActionSheetContext.Consumer>
      {actionSheet => (
        <Button
          onPress={() => {
            actionSheet.showWithOptions(
              {
                title: 'Are you sure?',
                message: 'Please confirm the removal',
                options: ['Cancel', 'Remove'],
                destructiveButtonIndex: 1,
                cancelButtonIndex: 0
              },
              buttonIndex => {
                console.warn('onButtonPress', {buttonIndex});
              }
            );
          }}
          title="Open"
        />
      )}
    </ActionSheetContext.Consumer>
  );
};

export default MyComponent;

Props

ActionSheet

export type Props = Pick<ScrollViewProps, 'scrollEnabled'> &
  Omit<ModalDialogProps, 'onConfirm' | 'confirmTitle' | 'confirmStyle'> &
  ActionSheetIOSOptions & {
    defaultStyles?: typeof defaultStyles;
    optionStyle?: StyleProp<TextStyle>;
    lastOptionExtraStyle?: StyleProp<TextStyle>;
    destructiveButtonColor?: string;
    onButtonPress: (buttonIndex: number) => void;
    onCancel: () => void;
  };

Defaults

export const defaultProps = {
  backgroundColor: 'white',
  cancelTitle: 'Cancel',
  destructiveButtonColor: Platform.select({
    ios: '#ff3b30', // iOS.systemRed (@see https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/)
    android: '#f44336' // android.red500 (@see https://material.io/design/color/the-color-system.html)
  })
};

ActionSheetProvider

export type Props = Omit<ActionSheetProps, 'options'> & {
  native?: boolean;
};

Styles

export const defaultStyles = {
  modal: Platform.select<ViewStyle>({
    ios: {flex: 1, justifyContent: 'flex-end'},
    android: {flex: 1, justifyContent: 'center'}
  }),
  container: Platform.select<ViewStyle>({
    ios: {margin: 8, maxHeight: WINDOW_HEIGHT - 8 * 2},
    android: {
      flexDirection: 'column',
      alignItems: 'stretch',
      // marginHorizontal: 82, // timepicker/spinner
      margin: 24,
      maxHeight: WINDOW_HEIGHT - 24 * 2,
      elevation: 4
    }
  }),
  header: Platform.select<ViewStyle>({
    ios: {
      alignItems: 'center',
      padding: 16,
      borderTopLeftRadius: 12,
      borderTopRightRadius: 12,
      opacity: IOS_OPACITY
    },
    android: {alignItems: 'flex-start', paddingVertical: 24, paddingHorizontal: 32}
  }),
  body: Platform.select<ViewStyle>({
    ios: {
      flexShrink: 1,
      flexDirection: 'column',
      backgroundColor: 'transparent',
      opacity: IOS_OPACITY,
      borderBottomStartRadius: 12,
      borderBottomEndRadius: 12
    },
    android: {
      flexShrink: 1,
      flexDirection: 'column',
      backgroundColor: 'transparent'
    }
  }),
  footer: Platform.select<TextStyle>({
    ios: {}, // @NOTE we don't have a footer on iOS
    android: {
      flexDirection: 'row',
      justifyContent: 'flex-end',
      borderBottomLeftRadius: 2,
      borderBottomRightRadius: 2,
      padding: 8
    }
  }),
  title: Platform.select<TextStyle>({
    ios: {paddingBottom: 12, fontSize: 14, fontWeight: '500', textAlign: 'center', color: '#888'},
    android: {
      paddingBottom: 12,
      fontSize: 20,
      fontWeight: '500',
      textAlign: 'left',
      color: '#333'
    }
  }),
  message: Platform.select<TextStyle>({
    ios: {paddingBottom: 12, fontSize: 13, fontWeight: '400', textAlign: 'center', color: '#888'},
    android: {paddingBottom: 12, fontSize: 18, fontWeight: '400', color: '#666'}
  }),
  cancel: Platform.select<TextStyle>({
    ios: {marginTop: 8, borderRadius: 12, fontWeight: '600'},
    android: {}
  }),
  confirm: Platform.select<TextStyle>({
    ios: {}, // @NOTE we don't have a confirm on iOS
    android: {}
  }),
  option: Platform.select<TextStyle>({
    ios: {
      marginTop: StyleSheet.hairlineWidth
    },
    android: {
      marginTop: StyleSheet.hairlineWidth
    }
  }),
  lastOptionExtra: Platform.select<TextStyle>({
    ios: {
      borderBottomLeftRadius: 12,
      borderBottomRightRadius: 12
    },
    android: {
      marginBottom: StyleSheet.hairlineWidth
    }
  })
};