chore(release): 3.4.1 [skip ci]

## [3.4.1](https://github.com/expo/react-native-action-sheet/compare/v3.4.0...v3.4.1) (2019-12-13)

### Bug Fixes

* **iOS:** crash when using Android only options ([#144](https://github.com/expo/react-native-action-sheet/issues/144)) ([8016008](https://github.com/expo/react-native-action-sheet/commit/8016008781cbe418dc03f04a324d5e5ef5bcdaa7))

.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,21 @@
+{
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogFile": "CHANGELOG.md",
+        "changelogTitle": "Changelog"
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["CHANGELOG.md"]
+      }
+    ],
+    "@semantic-release/npm",
+    "@semantic-release/github"
+  ]
+}

CHANGELOG.md

@@ -0,0 +1,18 @@
+Changelog
+
+## [3.4.1](https://github.com/expo/react-native-action-sheet/compare/v3.4.0...v3.4.1) (2019-12-13)
+
+
+### Bug Fixes
+
+* **iOS:** crash when using Android only options ([#144](https://github.com/expo/react-native-action-sheet/issues/144)) ([8016008](https://github.com/expo/react-native-action-sheet/commit/8016008781cbe418dc03f04a324d5e5ef5bcdaa7))
+
+# Changelog
+
+# [3.4.0](https://github.com/expo/react-native-action-sheet/compare/v3.3.2...v3.4.0) (2019-11-19)
+
+
+### Features
+
+* **android:** allow customizing container styles ([#142](https://github.com/expo/react-native-action-sheet/issues/142)) ([39fc431](https://github.com/expo/react-native-action-sheet/commit/39fc431c97cb0ec03ab2a8386bd1b836d9f1cd2f))
+* Allow pointerEvents prop to pass through to containing view ([#124](https://github.com/expo/react-native-action-sheet/issues/124)) ([76397fa](https://github.com/expo/react-native-action-sheet/commit/76397fa7c4bff7318780ac72600156d753fad3f0))

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,8 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.6.1",
     "@react-native-community/eslint-config": "^0.0.5",
+    "@semantic-release/changelog": "^3.0.5",
+    "@semantic-release/git": "^7.0.18",
     "@types/react": "^16.8.23",
     "@types/react-native": "^0.57.65",
     "@typescript-eslint/eslint-plugin": "^1.12.0",
@@ -46,6 +49,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,24 +1,36 @@
 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) {
+  showActionSheetWithOptions(dataOptions: ActionSheetIOSOptions, onSelect: onSelect) {
+    // ...dataOptions include other keys which use in android and web, thats why `Android-Only options` Crash on IOS
+    const { cancelButtonIndex, destructiveButtonIndex, options, tintColor } = dataOptions;
     const iosOptions: ActionSheetIOSOptions = {
-      ...options,
+      cancelButtonIndex,
+      destructiveButtonIndex,
+      options,
+      tintColor,
       // A null title or message on iOS causes a crash
-      title: options.title || undefined,
-      message: options.message || undefined,
+      title: dataOptions.title || undefined,
+      message: dataOptions.message || undefined,
     };
     ActionSheetIOS.showActionSheetWithOptions(iosOptions, 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;
 }