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

@@ -0,0 +1,27 @@
+name: Release
+on:
+  push:
+    branches:
+      - master
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Install dependencies
+        run: yarn
+      - name: Type check
+        run: npm run type-check
+      - name: Lint
+        run: npm run lint
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.releaserc.json

@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    "@semantic-release/npm",
+    "@semantic-release/github"
+  ]
+}

CHANGELOG.md

@@ -0,0 +1 @@
+# Changelog

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

@@ -4,12 +4,11 @@ import {
   ActionSheetProvider,
   connectActionSheet,
   ActionSheetOptions,
+  ActionSheetProps,
 } from '@expo/react-native-action-sheet';
 import ShowActionSheetButton from './ShowActionSheetButton';
 
-interface Props {
-  showActionSheetWithOptions: (options: ActionSheetOptions, callback: (i: number) => void) => void;
-}
+type Props = ActionSheetProps;
 
 interface State {
   selectedIndex: number | null;
@@ -63,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

package.json

@@ -14,7 +14,8 @@
     "build": "bob build",
     "type-check": "tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx --fix",
-    "fmt": "prettier --write \"{src,example}/**/*.{ts,tsx}\""
+    "fmt": "prettier --write \"{src,example}/**/*.{ts,tsx}\"",
+    "semantic-release": "semantic-release"
   },
   "repository": {
     "type": "git",
@@ -34,6 +35,7 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.6.1",
     "@react-native-community/eslint-config": "^0.0.5",
+    "@semantic-release/changelog": "^3.0.5",
     "@types/react": "^16.8.23",
     "@types/react-native": "^0.57.65",
     "@typescript-eslint/eslint-plugin": "^1.12.0",
@@ -46,6 +48,7 @@
     "prettier": "^1.18.2",
     "react": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "semantic-release": "^15.13.28",
     "typescript": "^3.5.3"
   },
   "peerDependencies": {

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/connectActionSheet.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { Consumer, Context } from './context';
+import { Consumer } from './context';
 import hoistNonReactStatic from 'hoist-non-react-statics';
+import { ActionSheetProps } from './types';
 
 export default function connectActionSheet<OwnProps = any>(
-  WrappedComponent: React.ComponentType<OwnProps & Context>
+  WrappedComponent: React.ComponentType<OwnProps & ActionSheetProps>
 ) {
   const ConnectedActionSheet = (props: OwnProps) => {
     return (

src/context.ts

@@ -1,11 +1,7 @@
 import * as React from 'react';
-import { ActionSheetOptions } from './types';
+import { ActionSheetOptions, ActionSheetProps } from './types';
 
-export interface Context {
-  showActionSheetWithOptions: (options: ActionSheetOptions, callback: (i: number) => void) => void;
-}
-
-const context = React.createContext<Context>({
+const context = React.createContext<ActionSheetProps>({
   showActionSheetWithOptions: (options: ActionSheetOptions, callback: (i: number) => void) => {},
 });
 

src/types.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 
+export interface ActionSheetProps {
+  showActionSheetWithOptions: (options: ActionSheetOptions, callback: (i: number) => void) => void;
+}
+
 // for iOS
 export interface ActionSheetIOSOptions {
   options: string[];
@@ -19,5 +23,6 @@ export interface ActionSheetOptions extends ActionSheetIOSOptions {
   titleTextStyle?: TextStyle;
   messageTextStyle?: TextStyle;
   showSeparators?: boolean;
+  containerStyle?: ViewStyle;
   separatorStyle?: ViewStyle;
 }

yarn.lock

@@ -1893,14 +1893,16 @@ eslint-scope@^4.0.0, eslint-scope@^4.0.3:
     estraverse "^4.1.1"
 
 eslint-utils@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.3.1.tgz#9a851ba89ee7c460346f97cf8939c7298827e512"
-  integrity sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
+  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
 
-eslint-visitor-keys@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
-  integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
+eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
+  integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
 eslint@^6.0.1:
   version "6.0.1"