feat(android): allow customizing container styles (#142)

* Android: container style configurable (background)
* Add containerStyle prop description to readme
* Add containerStyle prop to example app

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
         with:
           node-version: 12
       - name: Install dependencies
-        run: npm ci
+        run: yarn
       - name: Type check
         run: npm run type-check
       - name: Lint

README.md

@@ -109,6 +109,7 @@ The below props allow modification of the Android ActionSheet. They have no effe
 | titleTextStyle   | TextStyle                         | No       |         |
 | messageTextStyle | TextStyle                         | No       |         |
 | showSeparators   | boolean                           | No       |  false  |
+| containerStyle   | ViewStyle                         | No       |         |
 | separatorStyle   | ViewStyle                         | No       |         |
 
 #### `icons` (optional)
@@ -130,6 +131,9 @@ Apply any text style props to the message if present.
 #### `showSeparators`: (optional)
 Show separators between items. On iOS, separators always show so this prop has no effect.
 
+#### `containerStyle`: (optional)
+Apply any view style props to the container rather than use the default look (e.g. dark mode).
+
 #### `separatorStyle`: (optional)
 Modify the look of the separators rather than use the default look.
 

example/App.tsx

@@ -62,6 +62,22 @@ class App extends React.Component<Props, State> {
           onSelection={this._updateSelectionText}
           showActionSheetWithOptions={showActionSheetWithOptions}
         />
+        <ShowActionSheetButton
+          title="Nested Action Sheets"
+          onSelection={index => {
+            if (index < 3) {
+              showActionSheetWithOptions(
+                {
+                  title: 'Sub Action Sheet',
+                  options: ['One', 'Two', 'Three', 'Done'],
+                  cancelButtonIndex: 3,
+                },
+                this._updateSelectionText
+              );
+            }
+          }}
+          showActionSheetWithOptions={showActionSheetWithOptions}
+        />
         {this._renderSectionHeader('Android-Only Options')}
         <ShowActionSheetButton
           title="Icons"

example/ShowActionSheetButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, View, TextStyle } from 'react-native';
+import { Text, View, TextStyle, ViewStyle } from 'react-native';
 import { MaterialIcons, Entypo } from '@expo/vector-icons';
 import { ActionSheetOptions } from '@expo/react-native-action-sheet';
 
@@ -74,6 +74,12 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
           textAlign: 'right',
         }
       : undefined;
+    const containerStyle: ViewStyle | undefined = withCustomStyles
+      ? {
+          backgroundColor: 'lightgrey',
+        }
+      : undefined;
+
     showActionSheetWithOptions(
       {
         options,
@@ -91,7 +97,9 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
         // Android only
         titleTextStyle,
         // Android only
-        messageTextStyle, // Android only
+        messageTextStyle,
+        // Android only,
+        containerStyle,
       },
       buttonIndex => {
         // Do something here depending on the button index selected

src/ActionSheet/ActionGroup.tsx

@@ -25,7 +25,7 @@ export default class ActionGroup extends React.Component<Props> {
 
   render() {
     return (
-      <View style={styles.groupContainer}>
+      <View style={[styles.groupContainer, this.props.containerStyle]}>
         {this._renderTitleContent()}
         <ScrollView>{this._renderOptionViews()}</ScrollView>
       </View>

src/ActionSheet/index.ios.tsx

@@ -1,16 +1,21 @@
 import * as React from 'react';
-import { ActionSheetIOS, View } from 'react-native';
+import { ActionSheetIOS, View, ViewProps } from 'react-native';
 import { ActionSheetIOSOptions } from '../types';
 
 interface Props {
   readonly children: React.ReactNode;
+  readonly pointerEvents?: ViewProps['pointerEvents'];
 }
 
 type onSelect = (buttonIndex: number) => void;
 
 export default class ActionSheet extends React.Component<Props> {
   render() {
-    return <View style={{ flex: 1 }}>{React.Children.only(this.props.children)}</View>;
+    return (
+      <View pointerEvents={this.props.pointerEvents} style={{ flex: 1 }}>
+        {React.Children.only(this.props.children)}
+      </View>
+    );
   }
 
   showActionSheetWithOptions(options: ActionSheetIOSOptions, onSelect: onSelect) {

src/ActionSheet/index.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
   View,
+  ViewProps,
 } from 'react-native';
 import ActionGroup from './ActionGroup';
 import { ActionSheetOptions } from '../types';
@@ -21,6 +22,7 @@ interface State {
 
 interface Props {
   readonly useNativeDriver: boolean | undefined;
+  readonly pointerEvents?: ViewProps['pointerEvents'];
 }
 
 const OPACITY_ANIMATION_IN_TIME = 225;
@@ -64,6 +66,7 @@ export default class ActionSheet extends React.Component<Props, State> {
     ) : null;
     return (
       <View
+        pointerEvents={this.props.pointerEvents}
         style={{
           flex: 1,
         }}>
@@ -93,6 +96,7 @@ export default class ActionSheet extends React.Component<Props, State> {
       message,
       messageTextStyle,
       showSeparators,
+      containerStyle,
       separatorStyle,
     } = options;
     return (
@@ -129,6 +133,7 @@ export default class ActionSheet extends React.Component<Props, State> {
               message={message || undefined}
               messageTextStyle={messageTextStyle}
               showSeparators={showSeparators}
+              containerStyle={containerStyle}
               separatorStyle={separatorStyle}
             />
           </View>
@@ -140,12 +145,8 @@ export default class ActionSheet extends React.Component<Props, State> {
   showActionSheetWithOptions = (options: ActionSheetOptions, onSelect: (i: number) => void) => {
     const { isVisible, isAnimating, overlayOpacity, sheetOpacity } = this.state;
 
-    if (isVisible && isAnimating) {
-      this._deferNextShow = this.showActionSheetWithOptions.bind(this, options, onSelect);
-      return;
-    }
-
     if (isVisible) {
+      this._deferNextShow = this.showActionSheetWithOptions.bind(this, options, onSelect);
       return;
     }
 

src/types.ts

@@ -23,5 +23,6 @@ export interface ActionSheetOptions extends ActionSheetIOSOptions {
   titleTextStyle?: TextStyle;
   messageTextStyle?: TextStyle;
   showSeparators?: boolean;
+  containerStyle?: ViewStyle;
   separatorStyle?: ViewStyle;
 }