chore(release): 3.12.0 [skip ci]

# [3.12.0](https://github.com/expo/react-native-action-sheet/compare/v3.11.0...v3.12.0) (2021-10-14) ### Bug Fixes * use correct callback type allowing for undefined `i` ([#239](https://github.com/expo/react-native-action-sheet/issues/239)) ([b54b9f1](https://github.com/expo/react-native-action-sheet/commit/b54b9f16c251cb2ca5f1bd41ca7cc41b1393c6b3)) ### Features * adds support for disabledButtonIndicies ([#246](https://github.com/expo/react-native-action-sheet/issues/246)) ([feed1f7](https://github.com/expo/react-native-action-sheet/commit/feed1f78b4c85855d48c1742fe9f8a67c0604609)), closes [#224](https://github.com/expo/react-native-action-sheet/issues/224)
feat: adds support for disabledButtonIndicies (#246 )
2026-11-15 09:18:06 -10:00 · 2021-10-14 15:15:36 -05:00 · 2021-10-14 14:54:53 -05:00 · 2021-09-21 08:12:43 -05:00 · 2021-09-21 08:12:30 -05:00 · 2021-09-21 08:11:43 -05:00
41 changed files with 15063 additions and 6945 deletions
@@ -0,0 +1,4 @@
+node_modules
+
+# generated by bob
+lib/
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['universe/native', 'universe/web'],
+};
@@ -1,99 +0,0 @@
-[ignore]
-
-# We fork some components by platform.
-.*/*.web.js
-.*/node_modules/.*/*.android.js
-
-# Some modules have their own node_modules with overlap
-.*/node_modules/node-haste/.*
-
-# Ugh
-.*/node_modules/babel.*
-.*/node_modules/babylon.*
-.*/node_modules/invariant.*
-
-# Ignore react and fbjs where there are overlaps, but don't ignore
-# anything that react-native relies on
-.*/node_modules/fbjs/lib/Map.js
-.*/node_modules/fbjs/lib/ErrorUtils.js
-
-# Flow has a built-in definition for the 'react' module which we prefer to use
-# over the currently-untyped source
-.*/node_modules/react/react.js
-.*/node_modules/react/lib/React.js
-.*/node_modules/react/lib/ReactDOM.js
-
-.*/__mocks__/.*
-.*/__tests__/.*
-
-.*/commoner/test/source/widget/share.js
-
-# Ignore commoner tests
-.*/node_modules/commoner/test/.*
-
-# See https://github.com/facebook/flow/issues/442
-.*/react-tools/node_modules/commoner/lib/reader.js
-
-# Ignore jest
-.*/node_modules/jest-cli/.*
-
-# Ignore Website
-.*/website/.*
-
-# Ignore generators
-.*/local-cli/generator.*
-
-# Ignore BUCK generated folders
-.*\.buckd/
-
-# Ignore RNPM
-.*/local-cli/rnpm/.*
-
-.*/node_modules/is-my-json-valid/test/.*\.json
-.*/node_modules/iconv-lite/encodings/tables/.*\.json
-.*/node_modules/y18n/test/.*\.json
-.*/node_modules/spdx-license-ids/spdx-license-ids.json
-.*/node_modules/spdx-exceptions/index.json
-.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
-.*/node_modules/resolve/lib/core.json
-.*/node_modules/jsonparse/samplejson/.*\.json
-.*/node_modules/json5/test/.*\.json
-.*/node_modules/ua-parser-js/test/.*\.json
-.*/node_modules/builtin-modules/builtin-modules.json
-.*/node_modules/binary-extensions/binary-extensions.json
-.*/node_modules/url-regex/tlds.json
-.*/node_modules/joi/.*\.json
-.*/node_modules/isemail/.*\.json
-.*/node_modules/tr46/.*\.json
-
-
-[include]
-
-[libs]
-node_modules/react-native/Libraries/react-native/react-native-interface.js
-node_modules/react-native/flow
-flow/
-
-[options]
-module.system=haste
-
-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
-
-experimental.strict_type_args=true
-
-munge_underscores=true
-
-module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
-
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FixMe
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-6]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-6]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-
-[version]
-^0.26.0
@@ -35,6 +35,7 @@ local.properties
 #
 node_modules/
 npm-debug.log
+yarn-error.log

 # BUCK
 buck-out/
@@ -43,3 +44,6 @@ android/app/libs
 android/keystores/debug.keystore

 coverage
+
+# generated by bob
+lib/
@@ -1,27 +0,0 @@
-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
-node_modules
@@ -0,0 +1,4 @@
+node_modules
+
+# generated by bob
+lib/
@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSameLine": true,
+  "trailingComma": "es5"
+}
@@ -0,0 +1,24 @@
+{
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogFile": "CHANGELOG.md",
+        "changelogTitle": "# Changelog"
+      }
+    ],
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json"
+        ]
+      }
+    ],
+    "@semantic-release/github"
+  ]
+}
@@ -1,22 +0,0 @@
-'use strict';
-
-import React from 'react';
-import { ActionSheetIOS, View } from 'react-native';
-
-export default class ActionSheet extends React.Component {
-  render() {
-    return <View style={{ flex: 1 }}>{React.Children.only(this.props.children)}</View>;
-  }
-
-  showActionSheetWithOptions(options, onSelect) {
-    const iosOptions = {
-      ...options,
-      // A null title or message on iOS causes a crash
-      title: options.title || undefined,
-      message: options.message || undefined,
-      icons: undefined,
-    };
-
-    ActionSheetIOS.showActionSheetWithOptions(iosOptions, onSelect);
-  }
-}
@@ -1,519 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Animated,
-  BackHandler,
-  Easing,
-  Platform,
-  StyleSheet,
-  Text,
-  Image,
-  TouchableOpacity,
-  TouchableNativeFeedback,
-  TouchableWithoutFeedback,
-  View,
-  ScrollView,
-} from 'react-native';
-
-type ActionSheetOptions = {
-  options: Array<string>,
-  icons?: ?Array<number | React.Node>,
-  tintIcons?: ?boolean,
-  destructiveButtonIndex?: ?number,
-  cancelButtonIndex?: ?number,
-  textStyle?: ?any,
-  tintColor?: ?string,
-  title?: ?string,
-  titleTextStyle?: ?any,
-  message?: ?string,
-  messageTextStyle?: ?any,
-  showSeparators?: ?boolean,
-  separatorStyle?: ?any,
-};
-
-type ActionGroupProps = {
-  options: Array<string>,
-  icons: ?Array<number | React.Node>,
-  tintIcons: ?boolean,
-  destructiveButtonIndex: ?number,
-  onSelect: (i: number) => boolean,
-  startIndex: number,
-  length: number,
-  textStyle: ?any,
-  tintColor: ?string,
-  title: ?string,
-  titleTextStyle: ?any,
-  message: ?string,
-  messageTextStyle: ?any,
-  showSeparators: ?boolean,
-  separatorStyle: ?any,
-};
-
-type ActionSheetState = {
-  isVisible: boolean,
-  isAnimating: boolean,
-  options: ?ActionSheetOptions,
-  onSelect: ?(i: number) => void,
-  overlayOpacity: any,
-  sheetOpacity: any,
-};
-
-type ActionSheetProps = {
-  children: ?any,
-  useNativeDriver: ?boolean,
-};
-
-const OPACITY_ANIMATION_IN_TIME = 225;
-const OPACITY_ANIMATION_OUT_TIME = 195;
-const EASING_OUT = Easing.bezier(0.25, 0.46, 0.45, 0.94);
-const EASING_IN = Easing.out(EASING_OUT);
-const BLACK_54PC_TRANSPARENT = '#0000008a';
-const BLACK_87PC_TRANSPARENT = '#000000de';
-const DESTRUCTIVE_COLOR = '#d32f2f';
-
-class ActionGroup extends React.Component {
-  props: ActionGroupProps;
-
-  render() {
-    let {
-      options,
-      icons,
-      tintIcons,
-      destructiveButtonIndex,
-      onSelect,
-      startIndex,
-      length,
-      textStyle,
-      tintColor,
-      showSeparators,
-    } = this.props;
-
-    let optionViews = [];
-
-    let nativeFeedbackBackground = TouchableNativeFeedbackSafe.Ripple(
-      'rgba(180, 180, 180, 1)',
-      false
-    );
-
-    for (let i = startIndex; i < startIndex + length; i++) {
-      const defaultColor = tintColor
-        ? tintColor
-        : (textStyle || {}).color || BLACK_87PC_TRANSPARENT;
-      const color = i === destructiveButtonIndex ? DESTRUCTIVE_COLOR : defaultColor;
-      const iconSource = icons != null && icons[i];
-      let iconElement = undefined;
-
-      if (iconSource) {
-        if (typeof iconSource === 'number') {
-          const iconStyle = [styles.icon, { tintColor: tintIcons ? color : null }];
-          iconElement = <Image
-            fadeDuration={0}
-            source={iconSource}
-            resizeMode="contain"
-            style={iconStyle}/>;
-        } else {
-          iconElement = <View style={styles.icon}>{iconSource}</View>;
-        }
-      }
-
-      optionViews.push(
-        <TouchableNativeFeedbackSafe
-          key={i}
-          pressInDelay={0}
-          background={nativeFeedbackBackground}
-          onPress={() => onSelect(i)}
-          style={styles.button}>
-          {iconElement}
-          <Text style={[styles.text, textStyle, { color }]}>{options[i]}</Text>
-        </TouchableNativeFeedbackSafe>
-      );
-
-      if (showSeparators && i < startIndex + length - 1) {
-        optionViews.push(this._renderRowSeparator(i));
-      }
-    }
-
-    return (
-      <View style={styles.groupContainer}>
-        {this._renderTitleContent()}
-        <ScrollView>{optionViews}</ScrollView>
-      </View>
-    );
-  }
-
-  _renderRowSeparator(key) {
-    return <View key={key ? `separator-${key}` : null} style={[styles.rowSeparator, this.props.separatorStyle]} />;
-  }
-
-  _renderTitleContent()  {
-    const { title, titleTextStyle, message, messageTextStyle, showSeparators } = this.props;
-
-    if (!title && !message) {
-      return null;
-    }
-
-    return (
-      <View>
-        <View style={[styles.titleContainer, { paddingBottom: showSeparators ? 24 : 16 }]}>
-          {!!title && <Text style={[styles.title, titleTextStyle]}>{title}</Text>}
-          {!!message && <Text style={[styles.message, messageTextStyle]}>{message}</Text>}
-        </View>
-        {!!showSeparators && this._renderRowSeparator('title')}
-      </View>
-    )
-  }
-}
-
-ActionGroup.propTypes = {
-  options: PropTypes.array.isRequired,
-  icons: PropTypes.array,
-  tintIcons: PropTypes.bool,
-  destructiveButtonIndex: PropTypes.number,
-  onSelect: PropTypes.func.isRequired,
-  startIndex: PropTypes.number.isRequired,
-  length: PropTypes.number.isRequired,
-  textStyle: Text.propTypes.style,
-  tintColor: PropTypes.string,
-  title: PropTypes.string,
-  titleTextStyle: Text.propTypes.style,
-  message: PropTypes.string,
-  messageTextStyle: Text.propTypes.style,
-  showSeparators: PropTypes.bool,
-  separatorStyle: PropTypes.object,
-};
-
-ActionGroup.defaultProps = {
-  title: null,
-  message: null,
-  showSeparators: false,
-  tintIcons: true,
-  textStyle: {},
-};
-
-// Has same API as https://facebook.github.io/react-native/docs/actionsheetios.html
-export default class ActionSheet extends React.Component {
-  props: ActionSheetProps;
-
-  _actionSheetHeight = 360;
-  _animateOutCallback: ?() => void = null;
-
-  state: ActionSheetState = {
-    isVisible: false,
-    isAnimating: false,
-    options: null,
-    onSelect: null,
-    overlayOpacity: new Animated.Value(0),
-    sheetOpacity: new Animated.Value(0),
-  };
-
-  _setActionSheetHeight = ({ nativeEvent }) =>
-    this._actionSheetHeight = nativeEvent.layout.height;
-
-  render() {
-    const { isVisible, overlayOpacity } = this.state;
-    const overlay = !!isVisible && (
-      <Animated.View
-        style={[
-          styles.overlay,
-          {
-            opacity: overlayOpacity,
-          },
-        ]}
-      />
-    );
-
-    return (
-      <View style={{ flex: 1 }}>
-        {React.Children.only(this.props.children)}
-        {overlay}
-        {!!isVisible && this._renderSheet()}
-      </View>
-    );
-  }
-
-  _renderSheet() {
-    const { options, isAnimating, sheetOpacity } = this.state;
-
-    if (!options) {
-      return null;
-    }
-
-    const {
-      options: optionsArray,
-      icons,
-      tintIcons,
-      destructiveButtonIndex,
-      textStyle,
-      tintColor,
-      title,
-      titleTextStyle,
-      message,
-      messageTextStyle,
-      showSeparators,
-      separatorStyle,
-    } = options;
-
-    return (
-      <TouchableWithoutFeedback onPress={this._selectCancelButton}>
-        <Animated.View
-          needsOffscreenAlphaCompositing={isAnimating}
-          style={[
-            styles.sheetContainer,
-            {
-              opacity: sheetOpacity,
-              transform: [
-                {
-                  translateY: sheetOpacity.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [this._actionSheetHeight, 0],
-                  }),
-                },
-              ],
-            },
-          ]}>
-          <View style={styles.sheet} onLayout={this._setActionSheetHeight}>
-            <ActionGroup
-              options={optionsArray}
-              icons={icons}
-              tintIcons={tintIcons === undefined ? true : tintIcons}
-              destructiveButtonIndex={destructiveButtonIndex}
-              onSelect={this._onSelect}
-              startIndex={0}
-              length={optionsArray.length}
-              textStyle={textStyle || {}}
-              tintColor={tintColor}
-              title={title || null}
-              titleTextStyle={titleTextStyle}
-              message={message || null}
-              messageTextStyle={messageTextStyle}
-              showSeparators={showSeparators}
-              separatorStyle={separatorStyle}
-            />
-          </View>
-        </Animated.View>
-      </TouchableWithoutFeedback>
-    );
-  }
-
-  showActionSheetWithOptions(
-    options: ActionSheetOptions,
-    onSelect: (i: number) => void,
-    onAnimateOut: () => void
-  ) {
-    const { isVisible, overlayOpacity, sheetOpacity } = this.state;
-
-    if (isVisible) {
-      return;
-    }
-
-    this.setState({
-      options,
-      onSelect,
-      isVisible: true,
-      isAnimating: true,
-    });
-
-    overlayOpacity.setValue(0);
-    sheetOpacity.setValue(0);
-
-    Animated.parallel([
-      Animated.timing(overlayOpacity, {
-        toValue: 0.32,
-        easing: EASING_OUT,
-        duration: OPACITY_ANIMATION_IN_TIME,
-        useNativeDriver: this.props.useNativeDriver,
-      }),
-      Animated.timing(sheetOpacity, {
-        toValue: 1,
-        easing: EASING_OUT,
-        duration: OPACITY_ANIMATION_IN_TIME,
-        useNativeDriver: this.props.useNativeDriver,
-      }),
-    ]).start(result => {
-      if (result.finished) {
-        this.setState({
-          isAnimating: false,
-        });
-      }
-    });
-
-    this._animateOutCallback = onAnimateOut;
-
-    BackHandler.addEventListener(
-      'actionSheetHardwareBackPress',
-      this._selectCancelButton
-    );
-  }
-
-  _selectCancelButton = () => {
-    const { options } = this.state;
-    if (!options) {
-      return false;
-    }
-
-    if (typeof options.cancelButtonIndex === 'number') {
-      return this._onSelect(options.cancelButtonIndex);
-    } else {
-      return this._animateOut();
-    }
-  };
-
-  _onSelect = (index: number): boolean => {
-    const { isAnimating, onSelect } = this.state;
-
-    if (isAnimating) {
-      return false;
-    }
-
-    onSelect && onSelect(index);
-    return this._animateOut();
-  };
-
-  _animateOut = (): boolean => {
-    const { isAnimating, overlayOpacity, sheetOpacity } = this.state;
-
-    if (isAnimating) {
-      return false;
-    }
-
-    BackHandler.removeEventListener(
-      'actionSheetHardwareBackPress',
-      this._selectCancelButton
-    );
-
-    this.setState({
-      isAnimating: true,
-    });
-
-    Animated.parallel([
-      Animated.timing(overlayOpacity, {
-        toValue: 0,
-        easing: EASING_IN,
-        duration: OPACITY_ANIMATION_OUT_TIME,
-        useNativeDriver: this.props.useNativeDriver,
-      }),
-      Animated.timing(sheetOpacity, {
-        toValue: 0,
-        easing: EASING_IN,
-        duration: OPACITY_ANIMATION_OUT_TIME,
-        useNativeDriver: this.props.useNativeDriver,
-      }),
-    ]).start(result => {
-      if (result.finished) {
-        this.setState({
-          isVisible: false,
-          isAnimating: false,
-        });
-        if (typeof this._animateOutCallback === 'function') {
-          this._animateOutCallback();
-          this._animateOutCallback = null;
-        }
-      }
-    });
-
-    return true;
-  };
-}
-
-ActionSheet.defaultProps = {
-  useNativeDriver: true,
-};
-
-let TouchableComponent = Platform.select({
-  web: TouchableOpacity,
-  default: Platform.Version <= 20 ? TouchableOpacity : TouchableNativeFeedback,
-});
-
-if (TouchableComponent !== TouchableNativeFeedback) {
-  TouchableComponent.SelectableBackground = () => ({});
-  TouchableComponent.SelectableBackgroundBorderless = () => ({});
-  TouchableComponent.Ripple = (color, borderless) => ({});
-}
-
-class TouchableNativeFeedbackSafe extends React.Component {
-  static SelectableBackground = TouchableComponent.SelectableBackground;
-  static SelectableBackgroundBorderless = TouchableComponent.SelectableBackgroundBorderless;
-  static Ripple = TouchableComponent.Ripple;
-
-  render() {
-    if (TouchableComponent === TouchableNativeFeedback) {
-      return (
-        <TouchableComponent {...this.props} style={{}}>
-          <View style={this.props.style}>{this.props.children}</View>
-        </TouchableComponent>
-      );
-    } else {
-      return <TouchableComponent {...this.props}>{this.props.children}</TouchableComponent>;
-    }
-  }
-}
-
-const styles = StyleSheet.create({
-  groupContainer: {
-    backgroundColor: '#ffffff',
-    overflow: 'hidden',
-  },
-  button: {
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    flexDirection: 'row',
-    height: 56,
-    paddingHorizontal: 16,
-  },
-  icon: {
-    width: 24,
-    height: 24,
-    marginRight: 32,
-  },
-  text: {
-    fontSize: 16,
-    color: BLACK_87PC_TRANSPARENT,
-    textAlignVertical: 'center',
-  },
-  rowSeparator: {
-    backgroundColor: '#dddddd',
-    height: 1,
-    width: '100%',
-  },
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    backgroundColor: 'black',
-  },
-  sheetContainer: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    top: 0,
-    backgroundColor: 'transparent',
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-    flexDirection: 'row',
-  },
-  sheet: {
-    flex: 1,
-    backgroundColor: 'transparent',
-  },
-  titleContainer: {
-    alignItems: 'flex-start',
-    padding: 16,
-    paddingTop: 24,
-  },
-  title: {
-    fontSize: 16,
-    color: BLACK_54PC_TRANSPARENT,
-    textAlignVertical: 'center',
-  },
-  message: {
-    marginTop: 12,
-    fontSize: 14,
-    color: BLACK_54PC_TRANSPARENT,
-    textAlignVertical: 'center',
-  },
-});
@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ActionSheet from './ActionSheet';
-
-export default class ActionSheetProvider extends React.Component {
-  static propTypes = {
-    textStyle: PropTypes.object,
-    tintIcons: PropTypes.bool,
-    tintColor: PropTypes.string,
-    titleTextStyle: PropTypes.object,
-    messageTextStyle: PropTypes.object,
-    showSeparators: PropTypes.bool,
-    separatorStyle: PropTypes.object,
-    children: PropTypes.any.isRequired,
-  };
-
-  static childContextTypes = {
-    showActionSheetWithOptions: PropTypes.func,
-  };
-
-  static defaultProps = {
-    textStyle: {},
-    tintIcons: true,
-    titleTextStyle: {},
-    messageTextStyle: {},
-    showSeparators: false,
-    separatorStyle: {},
-  };
-
-  getNextValue = (config, propKey) => config[propKey] !== undefined ? config[propKey] : this.props[propKey];
-
-  getNextObject = (config, propKey) => ({...this.props[propKey], ...config[propKey]});
-
-  getChildContext() {
-    return {
-      showActionSheetWithOptions: (...args) => {
-        const [config, ...rest] = args;
-        const nextConfig = {
-          ...config,
-          textStyle: this.getNextObject(config, 'textStyle'),
-          tintIcons: this.getNextValue(config, 'tintIcons'),
-          tintColor: this.getNextValue(config, 'tintColor'),
-          titleTextStyle: this.getNextObject(config, 'titleTextStyle'),
-          messageTextStyle: this.getNextObject(config, 'messageTextStyle'),
-          showSeparators: this.getNextValue(config, 'showSeparators'),
-          separatorStyle: this.getNextObject(config, 'separatorStyle'),
-        };
-
-        this._actionSheetRef.showActionSheetWithOptions(nextConfig, ...rest);
-      },
-    };
-  }
-
-  render() {
-    return (
-      <ActionSheet ref={component => (this._actionSheetRef = component)}>
-        {React.Children.only(this.props.children)}
-      </ActionSheet>
-    );
-  }
-}
@@ -0,0 +1,92 @@
+# Changelog
+
+# [3.12.0](https://github.com/expo/react-native-action-sheet/compare/v3.11.0...v3.12.0) (2021-10-14)
+
+
+### Bug Fixes
+
+* use correct callback type allowing for undefined `i` ([#239](https://github.com/expo/react-native-action-sheet/issues/239)) ([b54b9f1](https://github.com/expo/react-native-action-sheet/commit/b54b9f16c251cb2ca5f1bd41ca7cc41b1393c6b3))
+
+
+### Features
+
+* adds support for disabledButtonIndicies ([#246](https://github.com/expo/react-native-action-sheet/issues/246)) ([feed1f7](https://github.com/expo/react-native-action-sheet/commit/feed1f78b4c85855d48c1742fe9f8a67c0604609)), closes [#224](https://github.com/expo/react-native-action-sheet/issues/224)
+
+# [3.11.0](https://github.com/expo/react-native-action-sheet/compare/v3.10.0...v3.11.0) (2021-09-07)
+
+
+### Bug Fixes
+
+* yarn lock issues ([#238](https://github.com/expo/react-native-action-sheet/issues/238)) ([22fc214](https://github.com/expo/react-native-action-sheet/commit/22fc2144b3ce3b5fc1892eefd86f484dc1af58e9))
+
+
+### Features
+
+* default useModal to true when autoFocus is set ([688fd47](https://github.com/expo/react-native-action-sheet/commit/688fd47227dab6994b59ed85af622cb04ebed220))
+
+# [3.10.0](https://github.com/expo/react-native-action-sheet/compare/v3.8.0...v3.10.0) (2021-08-09)
+
+### Features
+* Allow multiple destructive indices ([#210](https://github.com/expo/react-native-action-sheet/issues/210)) ([81112b9](https://github.com/expo/react-native-action-sheet/commit/81112b9553dc34725e2708b02b64b7a5e5c57509))
+
+# [3.9.0](https://github.com/expo/react-native-action-sheet/compare/v3.8.0...v3.9.0) (2021-03-12)
+
+
+### Bug Fixes
+
+* allow callback to be async ([#183](https://github.com/expo/react-native-action-sheet/issues/183)) ([d0d5182](https://github.com/expo/react-native-action-sheet/commit/d0d518278028556a80deec3d9b57c332b82ba28d))
+* center icons with titles ([#188](https://github.com/expo/react-native-action-sheet/issues/188)) ([d48c323](https://github.com/expo/react-native-action-sheet/commit/d48c323e4563363c8683c427d1803e1ff4cddcb5))
+
+
+### Features
+
+* add `userInterfaceStyle` option for iOS ([#206](https://github.com/expo/react-native-action-sheet/issues/206)) ([735cfa5](https://github.com/expo/react-native-action-sheet/commit/735cfa54ba1bfd90139671489aca525fdbd59626))
+
+# [3.8.0](https://github.com/expo/react-native-action-sheet/compare/v3.7.0...v3.8.0) (2020-05-19)
+
+
+### Features
+
+* Add destructiveColor option ([#171](https://github.com/expo/react-native-action-sheet/issues/171)) ([5549e36](https://github.com/expo/react-native-action-sheet/commit/5549e36a92d8afcc0ce2bf6a601e83209b5ce080))
+* Improvements to Android accessibility ([#168](https://github.com/expo/react-native-action-sheet/issues/168)) ([b605fb8](https://github.com/expo/react-native-action-sheet/commit/b605fb8a3b6421c244f7f18d934bb5ea0753d461))
+
+# [3.7.0](https://github.com/expo/react-native-action-sheet/compare/v3.6.0...v3.7.0) (2020-05-06)
+
+
+### Features
+
+* adds `useModal` prop wrap action sheet in a modal ([9ed955d](https://github.com/expo/react-native-action-sheet/commit/9ed955dbba7259cbcf5e31ef3d4ed091ae4a3145)), closes [#169](https://github.com/expo/react-native-action-sheet/issues/169)
+
+# [3.6.0](https://github.com/expo/react-native-action-sheet/compare/v3.5.0...v3.6.0) (2020-03-30)
+
+
+### Bug Fixes
+
+* Android 'Super expression must either be null or a function' ([37156da](https://github.com/expo/react-native-action-sheet/commit/37156dacf114aa5146da153db9ee00c1aea8eaca))
+
+
+### Features
+
+* Add accessibility label to Action options ([#158](https://github.com/expo/react-native-action-sheet/issues/158)) ([bc3c27d](https://github.com/expo/react-native-action-sheet/commit/bc3c27d767a5657032b73f70aa1aacfea0481f66))
+
+# [3.5.0](https://github.com/expo/react-native-action-sheet/compare/v3.4.1...v3.5.0) (2020-02-04)
+
+
+### Features
+
+* add anchor option for iPads ([#155](https://github.com/expo/react-native-action-sheet/issues/155)) ([370e6e8](https://github.com/expo/react-native-action-sheet/commit/370e6e855fbacbfc683cc6ab16304f26c159e6b5))
+
+## [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))
+
+# [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))
@@ -1,48 +1,60 @@
-# react-native-action-sheet [![Slack](https://slack.expo.io/badge.svg)](https://slack.expo.io)
+# react-native-action-sheet
+
+[![npm](https://img.shields.io/npm/v/@expo/react-native-action-sheet.svg?style=flat-square)](https://www.npmjs.com/package/@expo/react-native-action-sheet)
+[![License: MIT](https://img.shields.io/github/license/nd-02110114/goofi-mobile.svg)](https://opensource.org/licenses/MIT)
+[![Discord](https://img.shields.io/badge/discord-expo-green?style=flat-square&logo=discord)](https://discord.gg/4gtbPAdpaE)

 ActionSheet is a cross-platform React Native component that uses the native UIActionSheet on iOS and a JS implementation on Android. Almost a drop in replacement for [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios.html) except it cannot be called statically.

+| iOS                                                                                                                        | Android                                                                                                                        | Web                                                                                                                        |
+| -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| <img  src="https://raw.githubusercontent.com/expo/react-native-action-sheet/master/gif/ios.gif" width="200" height="400"/> | <img  src="https://raw.githubusercontent.com/expo/react-native-action-sheet/master/gif/android.gif" width="200" height="400"/> | <img  src="https://raw.githubusercontent.com/expo/react-native-action-sheet/master/gif/web.gif" width="400" height="400"/> |
+
 ## Installation

 ```
-npm install @expo/react-native-action-sheet
+$ npm install @expo/react-native-action-sheet -S
+```
+
+or
+
+```
+$ yarn add @expo/react-native-action-sheet
 ```

 ## A basic ActionSheet Setup

-import ActionSheetProvider & connectActionSheet
+### 1. Wrap your top-level component with `<ActionSheetProvider />`

 ```es6
-import {
-  ActionSheetProvider,
-  connectActionSheet,
-} from '@expo/react-native-action-sheet';
-```
+import { ActionSheetProvider } from '@expo/react-native-action-sheet';

-wrap your top-level component with `<ActionSheetProvider />`
-
-```es6
 class AppContainer extends React.Component {
  render() {
    return (
      <ActionSheetProvider>
-        <App />
+        <ConnectedApp />
      </ActionSheetProvider>
    );
  }
 }
 ```

-decorate the component you want to use the action sheet with `@connectActionSheet`
+### 2. Connect your component which uses showActionSheetWithOptions.

 ```es6
-@connectActionSheet
+import { connectActionSheet } from '@expo/react-native-action-sheet';
+
 class App extends React.Component {
  /* ... */
 }
+
+const ConnectedApp = connectActionSheet(App);
+
+export default ConnectedApp;
 ```

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

 ```es6
 _onOpenActionSheet = () => {
@@ -57,39 +69,166 @@ _onOpenActionSheet = () => {
      cancelButtonIndex,
      destructiveButtonIndex,
    },
-    buttonIndex => {
+    (buttonIndex) => {
      // Do something here depending on the button index selected
-    },
+    }
  );
 };
 ```

+You can use a hook instead of the higher order component if you are on React 16.8 or newer.
+
+```es6
+import { useActionSheet } from '@expo/react-native-action-sheet';
+
+export default function App() {
+  const { showActionSheetWithOptions } = useActionSheet();
+  /* ... */
+}
+```
+
 ## Options

 The goal of this library is to mimic the native iOS and Android ActionSheets as closely as possible.

-This library can also be used with on web with Expo.
+This library can also be used in the browser with Expo for web.

 ### Universal Props

-The same options available on React Native's [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios.html#showactionsheetwithoptions) component exist for both iOS and Android in this library.
+The same options available on React Native's [ActionSheetIOS](https://reactnative.dev/docs/0.64/actionsheetios#showactionsheetwithoptions) component exist for both iOS and Android in this library. Note: `disabledButtonIndicies` is only available for iOS in Expo 43+ or RN 0.64.0+.

-### Android-Only Props
+### iOS Only Props
+
+| Name               | Type   | Required | Default |
+| ------------------ | ------ | -------- | ------- |
+| anchor             | number | No       |         |
+| userInterfaceStyle | string | No       |         |
+
+#### `anchor` (optional)
+
+iPad only option that allows for docking the action sheet to a node. See [ShowActionSheetButton.tsx](/example/ShowActionSheetButton.tsx) for an example on how to implement this.
+
+#### `userInterfaceStyle` (optional)
+
+The interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used.
+
+### Android/Web-Only Props

 The below props allow modification of the Android ActionSheet. They have no effect on the look on iOS as the native iOS Action Sheet does not have options for modifying these options.

- `icons` (array of required images or icons; optional): Show icons to go along with each option. If image source paths are provided via `require`, images will be rendered for you. Alternatively, you can provide an array of elements such as vector icons, pre-rendered Images, etc.
- `tintIcons` (boolean; optional; default: `true`): Icons by default will be tinted to match the text color. When set to false, the icons will be the color of the source image. This is useful if you want to use multicolor icons. If you provide your own nodes/pre-rendered icons rather than required images in the `icons` array, you will need to tint them appropriately before providing them in the array of `icons`; `tintColor` will not be applied to icons unless they are images from a required source.
- `textStyle` (Text.propTypes.style; optional): Apply any text style props to the options. If the `tintColor` option is provided, it takes precedence over a color text style prop.
- `titleTextStyle` (Text.propTypes.style; optional): Apply any text style props to the title if present.
- `messageTextStyle` (Text.propTypes.style; optional): Apply any text style props to the message if present.
- `showSeparators`: (boolean; optional; default: false): Show separators between items. On iOS, separators always show so this prop has no effect.
- `separatorStyle`: (View.propTypes.style; optional): Modify the look of the separators rather than use the default look.
+| Name             | Type                              | Required | Default                           |
+| ---------------- | --------------------------------- | -------- | --------------------------------- |
+| icons            | array of required images or icons | No       |                                   |
+| tintIcons        | boolean                           | No       | true                              |
+| textStyle        | TextStyle                         | No       |                                   |
+| titleTextStyle   | TextStyle                         | No       |                                   |
+| messageTextStyle | TextStyle                         | No       |                                   |
+| autoFocus        | boolean                           | No       | false                             |
+| showSeparators   | boolean                           | No       | false                             |
+| containerStyle   | ViewStyle                         | No       |                                   |
+| separatorStyle   | ViewStyle                         | No       |                                   |
+| useModal         | boolean                           | No       | false (true if autoFocus is true) |
+| destructiveColor | string                            | No       | #d32f2f                           |
+
+#### `icons` (optional)
+
+Show icons to go along with each option. If image source paths are provided via `require`, images will be rendered for you. Alternatively, you can provide an array of elements such as vector icons, pre-rendered Images, etc.
+
+#### `tintIcons` (optional)
+
+Icons by default will be tinted to match the text color. When set to false, the icons will be the color of the source image. This is useful if you want to use multicolor icons. If you provide your own nodes/pre-rendered icons rather than required images in the `icons` array, you will need to tint them appropriately before providing them in the array of `icons`; `tintColor` will not be applied to icons unless they are images from a required source.
+
+#### `textStyle` (optional)
+
+Apply any text style props to the options. If the `tintColor` option is provided, it takes precedence over a color text style prop.
+
+#### `titleTextStyle` (optional)
+
+Apply any text style props to the title if present.
+
+#### `messageTextStyle` (optional)
+
+Apply any text style props to the message if present.
+
+#### `autoFocus`: (optional)
+
+If true, will give the first option screen reader focus automatically when the action sheet becomes visible.
+On iOS, this is the default behavior of the native action sheet.
+
+#### `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.
+
+#### `useModal`: (optional)
+
+Wrap the ActionSheet with a Modal, in order to show in front of other Modals that were already opened ([issue reference](https://github.com/expo/react-native-action-sheet/issues/164)).
+
+#### `destructiveColor`: (optional)
+
+Modify color for text of destructive option.
+
+## ActionSheetProvider Props
+
+The following props can be set directly on the `ActionSheetProvider`
+
+#### `useNativeDriver` (optional)
+
+Windows only option that provides the option to disable the [native animation](https://reactnative.dev/docs/animated#using-the-native-driver) driver for React Native Windows projects targeting _Windows 10 Version-1809 ; Build-10.0.17763.0_ and earlier. `useNativeDriver` is [supported in Version-1903 and later](https://microsoft.github.io/react-native-windows/docs/win10-compat) so if your project is targeting that, you don't need to set this prop.

 ## Try it out

 Try it in Expo: https://expo.io/@community/react-native-action-sheet-example

-## Usage
+## Example

-See the [example app](https://github.com/expo/react-native-action-sheet/tree/master/example) for examples of how to apply different options.
+See the [example app](https://github.com/expo/react-native-action-sheet/tree/master/example).
+
+### Usage
+
+```
+$ cd example
+$ yarn
+
+// build simulator
+$ yarn ios
+$ yarn android
+
+// web
+$ yarn web
+```
+
+## Development
+
+### Setup
+
+```
+$ git clone [email protected]:expo/react-native-action-sheet.git
+$ cd react-native-action-sheet
+$ yarn
+```
+
+### Build
+
+We use [bob](https://github.com/react-native-community/bob).
+
+```
+$ yarn build
+```
+
+### Lint & Format
+
+```
+// tsc
+$ yarn type-check
+
+// ESLint + Prettier
+$ yarn lint
+```
@@ -1,20 +0,0 @@
-import hoistStatics from 'hoist-non-react-statics';
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default function connectActionSheet(WrappedComponent) {
-  const ConnectedActionSheet = (props, context) => {
-    return (
-      <WrappedComponent
-        {...props}
-        showActionSheetWithOptions={context.showActionSheetWithOptions}
-      />
-    );
-  };
-
-  ConnectedActionSheet.contextTypes = {
-    showActionSheetWithOptions: PropTypes.func,
-  };
-
-  return hoistStatics(ConnectedActionSheet, WrappedComponent);
-}
@@ -1,8 +0,0 @@
-{
-  "presets": ["babel-preset-expo"],
-  "env": {
-    "development": {
-      "plugins": ["transform-react-jsx-source"]
-    }
-  }
-}
@@ -1,82 +1,127 @@
-import Expo from 'expo';
-import React from 'react';
-import { StyleSheet, Text, View, ScrollView, SafeAreaView } from 'react-native';
-import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet';
+import {
+  ActionSheetProvider,
+  connectActionSheet,
+  ActionSheetProps,
+} from '@expo/react-native-action-sheet';
+import * as React from 'react';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  SafeAreaView,
+  TouchableOpacity,
+} from 'react-native';
+
 import ShowActionSheetButton from './ShowActionSheetButton';

-export default class AppContainer extends React.Component {
-  render() {
-    return (
-      <ActionSheetProvider>
-        <App />
-      </ActionSheetProvider>
-    );
-  }
+type Props = ActionSheetProps;
+
+interface State {
+  selectedIndex: number | null;
+  isModalOpen: boolean;
 }

-@connectActionSheet
-class App extends React.Component {
-  state = {
+class App extends React.Component<Props, State> {
+  state: State = {
    selectedIndex: null,
+    isModalOpen: false,
  };

-  _updateSelectionText = (selectedIndex) => {
-    this.setState({ selectedIndex });
+  _updateSelectionText = (selectedIndex: number) => {
+    this.setState({
+      selectedIndex,
+    });
  };

-  _renderSelectionText() {
+  _renderSelectionText = () => {
    const { selectedIndex } = this.state;
-    const text = selectedIndex === null
-      ? 'No Option Selected'
-      : `Option #${selectedIndex + 1} Selected`;
+    const text =
+      selectedIndex === null ? 'No Option Selected' : `Option #${selectedIndex + 1} Selected`;
+    return <Text style={styles.selectionText}>{text}</Text>;
+  };

-    return <Text style={styles.selectionText}>{text}</Text>
-  }
-
-  _renderSectionHeader(text) {
+  _renderSectionHeader = (text: string) => {
    return <Text style={styles.sectionHeaderText}>{text}</Text>;
-  }
+  };
+
+  _toggleModal = () => {
+    this.setState((prevState) => ({ isModalOpen: !prevState.isModalOpen }));
+  };

  _renderButtons() {
    const { showActionSheetWithOptions } = this.props;
    return (
-      <View style={{ alignItems: 'center' }}>
+      <View
+        style={{
+          alignItems: 'center',
+        }}>
        {this._renderSectionHeader('Universal Options')}
        <ShowActionSheetButton
          title="Options Only"
          onSelection={this._updateSelectionText}
-          showActionSheetWithOptions={showActionSheetWithOptions} />
+          showActionSheetWithOptions={showActionSheetWithOptions}
+        />
        <ShowActionSheetButton
          title="Title"
          withTitle
          onSelection={this._updateSelectionText}
-          showActionSheetWithOptions={showActionSheetWithOptions} />
+          showActionSheetWithOptions={showActionSheetWithOptions}
+        />
        <ShowActionSheetButton
          title="Title & Message"
          withTitle
          withMessage
          onSelection={this._updateSelectionText}
-          showActionSheetWithOptions={showActionSheetWithOptions} />
+          showActionSheetWithOptions={showActionSheetWithOptions}
+        />
+        <ShowActionSheetButton
+          title="iPad Anchor"
+          withAnchor
+          withTitle
+          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"
          withIcons
          onSelection={this._updateSelectionText}
-          showActionSheetWithOptions={showActionSheetWithOptions} />
+          showActionSheetWithOptions={showActionSheetWithOptions}
+        />
        <ShowActionSheetButton
          title="Title, Message, & Icons"
          withTitle
          withMessage
          withIcons
          onSelection={this._updateSelectionText}
-          showActionSheetWithOptions={showActionSheetWithOptions} />
+          showActionSheetWithOptions={showActionSheetWithOptions}
+        />
        <ShowActionSheetButton
          title="Use Separators"
          withTitle
          withIcons
          withSeparators
          onSelection={this._updateSelectionText}
-          showActionSheetWithOptions={showActionSheetWithOptions} />
+          showActionSheetWithOptions={showActionSheetWithOptions}
+        />
        <ShowActionSheetButton
          title="Custom Styles"
          withTitle
@@ -84,9 +129,30 @@ class App extends React.Component {
          withIcons
          withCustomStyles
          onSelection={this._updateSelectionText}
-          showActionSheetWithOptions={showActionSheetWithOptions} />
+          showActionSheetWithOptions={showActionSheetWithOptions}
+        />
+        {this._renderSectionHeader('Special Cases')}
+        <TouchableOpacity onPress={this._toggleModal}>
+          <Text style={styles.link}>Open Modal</Text>
+        </TouchableOpacity>
+        {this.state.isModalOpen && (
+          <Modal>
+            <View style={{ flex: 1, padding: 30 }}>
+              <ShowActionSheetButton
+                useModal
+                title="Options Only"
+                onSelection={this._updateSelectionText}
+                showActionSheetWithOptions={showActionSheetWithOptions}
+              />
+
+              <TouchableOpacity onPress={this._toggleModal}>
+                <Text style={styles.link}>Close Modal</Text>
+              </TouchableOpacity>
+            </View>
+          </Modal>
+        )}
      </View>
-    )
+    );
  }

  render() {
@@ -94,12 +160,15 @@ class App extends React.Component {
      <SafeAreaView style={styles.flex}>
        <ScrollView style={styles.flex} contentContainerStyle={styles.contentContainer}>
          <Text style={styles.headerText}>
-            {"Hello!\n\nThis is a simple example app to demonstrate @expo/react-native-action-sheet."}
+            {
+              'Hello!\n\nThis is a simple example app to demonstrate @expo/react-native-action-sheet.'
+            }
          </Text>
          {this._renderButtons()}
          {this._renderSelectionText()}
          <Text style={styles.notes}>
-            Note: Icons and custom text styles are only available on Android. Separators can only be toggled on Android; they always show on iOS.
+            Note: Icons and custom text styles are only available on Android. Separators can only be
+            toggled on Android; they always show on iOS.
          </Text>
        </ScrollView>
      </SafeAreaView>
@@ -107,6 +176,18 @@ class App extends React.Component {
  }
 }

+const ConnectedApp = connectActionSheet<object>(App);
+
+export default class AppContainer extends React.Component {
+  render() {
+    return (
+      <ActionSheetProvider>
+        <ConnectedApp />
+      </ActionSheetProvider>
+    );
+  }
+}
+
 const styles = StyleSheet.create({
  flex: {
    flex: 1,
@@ -137,4 +218,8 @@ const styles = StyleSheet.create({
    fontSize: 16,
    marginTop: 20,
  },
+  link: {
+    fontSize: 15,
+    textDecorationLine: 'underline',
+  },
 });
@@ -1,90 +0,0 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { MaterialIcons, Entypo } from '@expo/vector-icons';
-
-const icon = (name) => <MaterialIcons key={name} name={name} size={24} />;
-
-// A custom button that shows examples of different share sheet configurations
-class ShowActionSheetButton extends React.PureComponent {
-  _showActionSheet = () => {
-    const {
-      withTitle,
-      withMessage,
-      withIcons,
-      withSeparators,
-      withCustomStyles,
-      onSelection,
-      showActionSheetWithOptions,
-    } = this.props;
-    // Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
-    const options = ['Delete', 'Save', 'Share', 'Cancel'];
-    const icons = withIcons ? [icon('delete'), icon('save'), icon('share'), icon('cancel')] : null;
-    const title = withTitle ? 'Choose An Action' : null;
-    const message = withMessage ? 'This library tries to mimic the native share sheets as close as possible.' : null;
-    const destructiveButtonIndex = 0;
-    const cancelButtonIndex = 3;
-    const textStyle = withCustomStyles ? { fontSize: 20, fontWeight: '500', color: 'blue' } : null;
-    const titleTextStyle = withCustomStyles ? { fontSize: 24, textAlign: 'center', fontWeight: '700', color: 'orange' } : null;
-    const messageTextStyle = withCustomStyles ? { fontSize: 12, color: 'purple', textAlign: 'right' } : null;
-
-    showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex,
-        destructiveButtonIndex,
-        title,
-        message,
-        icons, // Android only
-        tintIcons: true, // Android only; default is true
-        showSeparators: withSeparators, // Affects Android only; default is false
-        textStyle, // Android only
-        titleTextStyle, // Android only
-        messageTextStyle, // Android only
-      },
-      buttonIndex => {
-        // Do something here depending on the button index selected
-        onSelection(buttonIndex);
-      }
-    );
-  };
-
-  render() {
-    const { title } = this.props;
-    return (
-      <View style={{ margin: 6 }}>
-        <Entypo.Button
-          name="code"
-          backgroundColor="#3e3e3e"
-          onPress={this._showActionSheet}>
-          <Text style={{
-            fontSize: 15,
-            color: '#fff'
-          }}>{title}</Text>
-        </Entypo.Button>
-      </View>
-    );
-  }
-}
-
-ShowActionSheetButton.propTypes = {
-  title: PropTypes.string.isRequired,
-  onSelection: PropTypes.func,
-  showActionSheetWithOptions: PropTypes.func.isRequired,
-  withTitle: PropTypes.bool,
-  withMessage: PropTypes.bool,
-  withIcons: PropTypes.bool,
-  withSeparators: PropTypes.bool,
-  withCustomStyles: PropTypes.bool,
-};
-
-ShowActionSheetButton.defaultProps = {
-  withTitle: false,
-  withMessage: false,
-  withIcons: false,
-  withSeparators: false,
-  withCustomStyles: false,
-  onSelection: null,
-};
-
-export default ShowActionSheetButton;
@@ -0,0 +1,153 @@
+import { ActionSheetOptions } from '@expo/react-native-action-sheet';
+import { MaterialIcons, Entypo } from '@expo/vector-icons';
+import * as React from 'react';
+import { Text, View, TextStyle, ViewStyle, findNodeHandle } from 'react-native';
+
+const icon = (name: React.ComponentProps<typeof MaterialIcons>['name']) => (
+  <MaterialIcons key={name} name={name} size={24} />
+);
+
+interface Props {
+  title: string;
+  showActionSheetWithOptions: (
+    options: ActionSheetOptions,
+    callback: (buttonIndex: number) => void
+  ) => void;
+  onSelection: (index: number) => void;
+  withTitle?: boolean;
+  withMessage?: boolean;
+  withIcons?: boolean;
+  withSeparators?: boolean;
+  withCustomStyles?: boolean;
+  withAnchor?: boolean;
+  useModal?: boolean;
+}
+
+// A custom button that shows examples of different share sheet configurations
+export default class ShowActionSheetButton extends React.PureComponent<Props> {
+  static defaultProps = {
+    withTitle: false,
+    withMessage: false,
+    withIcons: false,
+    withSeparators: false,
+    withCustomStyles: false,
+    withAnchor: false,
+    onSelection: null,
+    useModal: false,
+  };
+
+  _anchorRef = React.createRef<any>();
+
+  _showActionSheet = () => {
+    const {
+      withAnchor,
+      withTitle,
+      withMessage,
+      withIcons,
+      withSeparators,
+      withCustomStyles,
+      onSelection,
+      showActionSheetWithOptions,
+      useModal,
+    } = this.props;
+
+    // Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
+    const options = ['Delete', 'Disabled', 'Save', 'Share', 'Cancel'];
+    const icons = withIcons
+      ? [icon('delete'), icon('save'), icon('share'), icon('cancel')]
+      : undefined;
+    const title = withTitle ? 'Choose An Action' : undefined;
+    const message = withMessage
+      ? 'This library tries to mimic the native share sheets as close as possible.'
+      : undefined;
+    const destructiveButtonIndex = 0;
+    const disabledButtonIndices = [1];
+    const cancelButtonIndex = 4;
+    const textStyle: TextStyle | undefined = withCustomStyles
+      ? {
+          fontSize: 20,
+          fontWeight: '500',
+          color: 'blue',
+        }
+      : undefined;
+    const titleTextStyle: TextStyle | undefined = withCustomStyles
+      ? {
+          fontSize: 24,
+          textAlign: 'center',
+          fontWeight: '700',
+          color: 'orange',
+        }
+      : undefined;
+    const messageTextStyle: TextStyle | undefined = withCustomStyles
+      ? {
+          fontSize: 12,
+          color: 'purple',
+          textAlign: 'right',
+        }
+      : undefined;
+    const containerStyle: ViewStyle | undefined = withCustomStyles
+      ? {
+          backgroundColor: 'lightgrey',
+        }
+      : undefined;
+    const anchor: number | null = this._anchorRef.current
+      ? findNodeHandle(this._anchorRef.current)
+      : null;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+        destructiveButtonIndex,
+        disabledButtonIndices,
+        title,
+        message,
+        icons,
+        //iPad only
+        anchor: withAnchor && anchor ? anchor : undefined,
+        // Android only
+        tintIcons: true,
+        // Android only; default is true
+        showSeparators: withSeparators,
+        // Affects Android only; default is false
+        textStyle,
+        // Android only
+        titleTextStyle,
+        // Android only
+        messageTextStyle,
+        // Android only,
+        containerStyle,
+        // Android only,
+        useModal,
+      },
+      (buttonIndex: number) => {
+        // Do something here depending on the button index selected
+        onSelection(buttonIndex);
+      }
+    );
+  };
+
+  render() {
+    const { title } = this.props;
+    return (
+      <View
+        style={{
+          margin: 6,
+        }}>
+        <Entypo.Button
+          name="code"
+          backgroundColor="#3e3e3e"
+          onPress={this._showActionSheet}
+          ref={this._anchorRef}>
+          <Text
+            style={{
+              fontSize: 15,
+              color: '#fff',
+            }}>
+            {title}
+          </Text>
+        </Entypo.Button>
+      </View>
+    );
+  }
+}
@@ -4,13 +4,14 @@
    "description": "A cross-platform ActionSheet component. https://github.com/expo/react-native-action-sheet",
    "slug": "react-native-action-sheet-example",
    "privacy": "public",
-    "sdkVersion": "25.0.0",
-    "version": "1.0.0",
+    "version": "3.0.0",
    "orientation": "portrait",
    "primaryColor": "#cccccc",
    "icon": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
-    "packagerOpts": {
-      "assetExts": ["ttf", "mp4"]
-    }
+    "platforms": [
+      "android",
+      "ios",
+      "web"
+    ]
  }
 }
@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};
@@ -1,14 +1,30 @@
 {
  "name": "example",
-  "version": "0.0.0",
-  "description": "Hello Expo!",
-  "author": "[email protected]",
+  "version": "3.0.0",
+  "description": "Hello react native action sheet!!",
  "private": true,
  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "ios": "expo start --ios",
+    "android": "expo start --android",
+    "web": "expo start --web",
+    "type-check": "tsc --noEmit"
+  },
  "dependencies": {
-    "@expo/react-native-action-sheet": "../",
-    "expo": "^25.0.0",
-    "react": "16.2.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz"
+    "@expo/react-native-action-sheet": "../src",
+    "@expo/vector-icons": "^12.0.0",
+    "expo": "^43.0.0-beta.3",
+    "hoist-non-react-statics": "^3.3.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.2",
+    "react-native-web": "0.17.1"
+  },
+  "devDependencies": {
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.64.12",
+    "babel-preset-expo": "8.5.1",
+    "typescript": "~4.3.5"
  }
 }
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react-native",
+    "lib": [
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
+    "typeRoots": [
+      "./node_modules/@types"
+    ]
+  },
+  "include": [
+    "./**.tsx"
+  ],
+  "extends": "expo/tsconfig.base"
+}
@@ -1,14 +0,0 @@
-import { ActionSheetIOSOptions } from 'react-native';
-
-export interface ActionSheetProps {
-  showActionSheetWithOptions: (
-    options: ActionSheetIOSOptions,
-    callback: (buttonIndex: number) => void,
-  ) => void;
-}
-
-export function connectActionSheet<T>(
-  WrappedComponent: React.ComponentType<T & ActionSheetProps>,
-): React.ComponentClass<T>;
-
-export const ActionSheetProvider: React.ComponentClass;
@@ -1,4 +0,0 @@
-module.exports = require('./ActionSheet');
-
-module.exports.ActionSheetProvider = require('./ActionSheetProvider').default;
-module.exports.connectActionSheet = require('./connectActionSheet').default;
@@ -1,43 +1,77 @@
 {
  "name": "@expo/react-native-action-sheet",
-  "version": "2.0.1",
+  "version": "3.12.0",
  "description": "A cross-platform ActionSheet for React Native",
-  "main": "index.js",
+  "react-native": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "files": [
+    "lib"
+  ],
  "scripts": {
-    "flow": "flow; test $? -eq 0 -o $? -eq 2"
+    "prepare": "bob build",
+    "build": "bob build",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint . --fix",
+    "semantic-release": "semantic-release"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/expo/react-native-action-sheet.git"
  },
  "keywords": [
+    "expo",
    "react-native",
    "action-sheet"
  ],
-  "files": [
-    "ActionSheet.js",
-    "ActionSheet.ios.js",
-    "ActionSheetProvider.js",
-    "connectActionSheet.js",
-    "index.js",
-    "index.d.ts",
-    "README.md"
-  ],
  "author": "Jesse Ruder <[email protected]>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/expo/react-native-action-sheet/issues"
  },
  "homepage": "https://github.com/expo/react-native-action-sheet",
-  "dependencies": {
-    "hoist-non-react-statics": "^2.2.2",
-    "prop-types": "^15.5.10"
-  },
  "devDependencies": {
-    "@types/react": "^16.4.6",
-    "@types/react-native": "^0.56.0",
-    "flow-bin": "^0.26.0",
-    "react": "^15.6.1",
-    "react-native": "^0.28.0"
+    "@react-native-community/bob": "^0.6.1",
+    "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@types/react": "^16.8.23",
+    "@types/react-native": "^0.57.65",
+    "eslint": "^7.32.0",
+    "eslint-config-universe": "^8.0.0",
+    "husky": "^3.0.0",
+    "lint-staged": "^9.2.0",
+    "prettier": "^2.3.2",
+    "react": "^16.8.6",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "semantic-release": "^17.4.4",
+    "typescript": "^3.5.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.3.0"
+  },
+  "@react-native-community/bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": [
+      "yarn lint",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "hoist-non-react-statics": "^3.3.0"
  }
 }
@@ -0,0 +1,219 @@
+import * as React from 'react';
+import {
+  AccessibilityInfo,
+  findNodeHandle,
+  Image,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  UIManager,
+  View,
+} from 'react-native';
+
+import { ActionSheetOptions } from '../types';
+import TouchableNativeFeedbackSafe from './TouchableNativeFeedbackSafe';
+
+type Props = ActionSheetOptions & {
+  tintIcons: boolean | null;
+  onSelect: (i: number) => boolean;
+  startIndex: number;
+  length: number;
+};
+
+const BLACK_54PC_TRANSPARENT = '#0000008a';
+const BLACK_87PC_TRANSPARENT = '#000000de';
+const DESTRUCTIVE_COLOR = '#d32f2f';
+
+/**
+ * Can be used as a React ref for a component to auto-focus for accessibility on render.
+ * @param ref The component to auto-focus
+ */
+const focusViewOnRender = (ref: React.Component | null) => {
+  if (ref) {
+    const reactTag = findNodeHandle(ref);
+    if (reactTag) {
+      if (Platform.OS === 'android') {
+        // @ts-ignore: sendAccessibilityEvent is missing from @types/react-native
+        UIManager.sendAccessibilityEvent(
+          reactTag,
+          // @ts-ignore: AccessibilityEventTypes is missing from @types/react-native
+          UIManager.AccessibilityEventTypes.typeViewFocused
+        );
+      } else {
+        AccessibilityInfo.setAccessibilityFocus(reactTag);
+      }
+    }
+  }
+};
+
+const isIndexDestructive = (index: number, destructiveIndex?: number | number[]) => {
+  if (Array.isArray(destructiveIndex)) {
+    return destructiveIndex.includes(index);
+  }
+
+  return index === destructiveIndex;
+};
+
+const isIndexDisabled = (index: number, disabledButtonIndices: number[] = []) => {
+  return disabledButtonIndices.includes(index);
+};
+
+export default class ActionGroup extends React.Component<Props> {
+  static defaultProps = {
+    title: null,
+    message: null,
+    showSeparators: false,
+    tintIcons: true,
+    textStyle: {},
+  };
+
+  render() {
+    return (
+      <View style={[styles.groupContainer, this.props.containerStyle]}>
+        {this._renderTitleContent()}
+        <ScrollView>{this._renderOptionViews()}</ScrollView>
+      </View>
+    );
+  }
+
+  _renderRowSeparator = (key: string | number) => {
+    return (
+      <View key={`separator-${key}`} style={[styles.rowSeparator, this.props.separatorStyle]} />
+    );
+  };
+
+  _renderTitleContent = () => {
+    const { title, titleTextStyle, message, messageTextStyle, showSeparators } = this.props;
+
+    if (!title && !message) {
+      return null;
+    }
+
+    return (
+      <View>
+        <View style={[styles.titleContainer, { paddingBottom: showSeparators ? 24 : 16 }]}>
+          {!!title && <Text style={[styles.title, titleTextStyle]}>{title}</Text>}
+          {!!message && <Text style={[styles.message, messageTextStyle]}>{message}</Text>}
+        </View>
+        {!!showSeparators && this._renderRowSeparator('title')}
+      </View>
+    );
+  };
+
+  _renderIconElement = (iconSource: React.ReactNode | null, color: string) => {
+    const { tintIcons } = this.props;
+    if (!iconSource) {
+      return null;
+    }
+
+    if (typeof iconSource === 'number') {
+      const iconStyle = [styles.icon, { tintColor: tintIcons ? color : undefined }];
+      return <Image fadeDuration={0} source={iconSource} resizeMode="contain" style={iconStyle} />;
+    } else {
+      return <View style={styles.icon}>{iconSource}</View>;
+    }
+  };
+
+  _renderOptionViews = () => {
+    const {
+      options,
+      icons,
+      destructiveButtonIndex,
+      disabledButtonIndices,
+      destructiveColor = DESTRUCTIVE_COLOR,
+      onSelect,
+      startIndex,
+      length,
+      textStyle,
+      tintColor,
+      autoFocus,
+      showSeparators,
+    } = this.props;
+    const optionViews: React.ReactNode[] = [];
+    const nativeFeedbackBackground = TouchableNativeFeedbackSafe.Ripple(
+      'rgba(180, 180, 180, 1)',
+      false
+    );
+
+    for (let i = startIndex; i < startIndex + length; i++) {
+      const defaultColor = tintColor
+        ? tintColor
+        : (textStyle || {}).color || BLACK_87PC_TRANSPARENT;
+      const disabled = isIndexDisabled(i, disabledButtonIndices);
+      const color = isIndexDestructive(i, destructiveButtonIndex) ? destructiveColor : defaultColor;
+      const iconSource = icons != null ? icons[i] : null;
+
+      optionViews.push(
+        <TouchableNativeFeedbackSafe
+          ref={autoFocus && i === 0 ? focusViewOnRender : undefined}
+          key={i}
+          pressInDelay={0}
+          background={nativeFeedbackBackground}
+          disabled={disabled}
+          onPress={() => onSelect(i)}
+          style={[styles.button, disabled && styles.disabledButton]}
+          accessibilityRole="button"
+          accessibilityLabel={options[i]}>
+          {this._renderIconElement(iconSource, color)}
+          <Text style={[styles.text, textStyle, { color }]}>{options[i]}</Text>
+        </TouchableNativeFeedbackSafe>
+      );
+
+      if (showSeparators && i < startIndex + length - 1) {
+        optionViews.push(this._renderRowSeparator(i));
+      }
+    }
+
+    return optionViews;
+  };
+}
+
+const styles = StyleSheet.create({
+  button: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 56,
+    paddingHorizontal: 16,
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+  groupContainer: {
+    backgroundColor: '#ffffff',
+    overflow: 'hidden',
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    marginRight: 32,
+    justifyContent: 'center',
+  },
+  message: {
+    marginTop: 12,
+    fontSize: 14,
+    color: BLACK_54PC_TRANSPARENT,
+    textAlignVertical: 'center',
+  },
+  rowSeparator: {
+    backgroundColor: '#dddddd',
+    height: 1,
+    width: '100%',
+  },
+  text: {
+    fontSize: 16,
+    color: BLACK_87PC_TRANSPARENT,
+    textAlignVertical: 'center',
+  },
+  title: {
+    fontSize: 16,
+    color: BLACK_54PC_TRANSPARENT,
+    textAlignVertical: 'center',
+  },
+  titleContainer: {
+    alignItems: 'flex-start',
+    padding: 16,
+    paddingTop: 24,
+  },
+});
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {
+  Platform,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  View,
+  TouchableWithoutFeedbackProps,
+} from 'react-native';
+
+// This TouchableOpacity has the same staic method of TouchableNativeFeedback
+class CustomTouchableOpacity extends React.Component {
+  static SelectableBackground = () => ({});
+  static SelectableBackgroundBorderless = () => ({});
+  static Ripple = (color: string, borderless?: boolean) => ({});
+
+  render() {
+    return <TouchableOpacity {...this.props}>{this.props.children}</TouchableOpacity>;
+  }
+}
+
+const TouchableComponent = Platform.select({
+  web: CustomTouchableOpacity,
+  default: Platform.Version <= 20 ? CustomTouchableOpacity : TouchableNativeFeedback,
+});
+
+type Props = TouchableWithoutFeedbackProps & {
+  pressInDelay: number;
+  background: any;
+};
+
+export default class TouchableNativeFeedbackSafe extends React.Component<Props> {
+  static SelectableBackground = TouchableComponent.SelectableBackground;
+  static SelectableBackgroundBorderless = TouchableComponent.SelectableBackgroundBorderless;
+  static Ripple = TouchableComponent.Ripple;
+
+  render() {
+    if (TouchableComponent === TouchableNativeFeedback) {
+      return (
+        <TouchableComponent {...this.props} style={{}}>
+          <View style={this.props.style}>{this.props.children}</View>
+        </TouchableComponent>
+      );
+    }
+
+    // @ts-ignore: JSX element type 'TouchableComponent' does not have any construct or call signatures
+    return <TouchableComponent {...this.props}>{this.props.children}</TouchableComponent>;
+  }
+}
@@ -0,0 +1,41 @@
+import * as React from 'react';
+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 pointerEvents={this.props.pointerEvents} style={{ flex: 1 }}>
+        {React.Children.only(this.props.children)}
+      </View>
+    );
+  }
+
+  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, disabledButtonIndices } =
+      dataOptions;
+    const iosOptions: ActionSheetIOSOptions = {
+      cancelButtonIndex,
+      destructiveButtonIndex,
+      options,
+      tintColor,
+      disabledButtonIndices,
+      // A null title or message on iOS causes a crash
+      title: dataOptions.title || undefined,
+      message: dataOptions.message || undefined,
+      anchor: dataOptions.anchor || undefined,
+      userInterfaceStyle: dataOptions.userInterfaceStyle || undefined,
+    };
+    // @ts-ignore: Even though ActionSheetIOS supports array of numbers for `destructiveIndex` the types are not yet updated. See https://github.com/facebook/react-native/pull/18254.
+    ActionSheetIOS.showActionSheetWithOptions(iosOptions, onSelect);
+  }
+}
@@ -0,0 +1,306 @@
+import * as React from 'react';
+import {
+  Animated,
+  BackHandler,
+  Easing,
+  Modal,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  ViewProps,
+} from 'react-native';
+
+import { ActionSheetOptions } from '../types';
+import ActionGroup from './ActionGroup';
+
+interface State {
+  isVisible: boolean;
+  isAnimating: boolean;
+  options: ActionSheetOptions | null;
+  onSelect: ((i: number) => void) | null;
+  overlayOpacity: any;
+  sheetOpacity: any;
+}
+
+interface Props {
+  readonly useNativeDriver: boolean | undefined;
+  readonly pointerEvents?: ViewProps['pointerEvents'];
+}
+
+const OPACITY_ANIMATION_IN_TIME = 225;
+const OPACITY_ANIMATION_OUT_TIME = 195;
+const EASING_OUT = Easing.bezier(0.25, 0.46, 0.45, 0.94);
+const EASING_IN = Easing.out(EASING_OUT);
+
+// Has same API as https://facebook.github.io/react-native/docs/actionsheetios.html
+export default class ActionSheet extends React.Component<Props, State> {
+  static defaultProps = {
+    useNativeDriver: true,
+  };
+
+  _actionSheetHeight = 360;
+
+  state: State = {
+    isVisible: false,
+    isAnimating: false,
+    options: null,
+    onSelect: null,
+    overlayOpacity: new Animated.Value(0),
+    sheetOpacity: new Animated.Value(0),
+  };
+
+  _deferNextShow?: () => void = undefined;
+
+  _setActionSheetHeight = ({ nativeEvent }: any) =>
+    (this._actionSheetHeight = nativeEvent.layout.height);
+
+  render() {
+    const { isVisible, overlayOpacity, options } = this.state;
+    const useModal = options ? options.autoFocus || options.useModal === true : false;
+    const overlay = isVisible ? (
+      <Animated.View
+        style={[
+          styles.overlay,
+          {
+            opacity: overlayOpacity,
+          },
+        ]}
+      />
+    ) : null;
+
+    // While the sheet is visible, hide the rest of the app's content from screen readers.
+    const appContent = (
+      <View
+        style={styles.flexContainer}
+        importantForAccessibility={isVisible ? 'no-hide-descendants' : 'auto'}>
+        {React.Children.only(this.props.children)}
+      </View>
+    );
+
+    return (
+      <View pointerEvents={this.props.pointerEvents} style={styles.flexContainer}>
+        {appContent}
+        {isVisible && !useModal && (
+          <>
+            {overlay}
+            {this._renderSheet()}
+          </>
+        )}
+        {isVisible && useModal && (
+          <Modal animationType="none" transparent onRequestClose={this._selectCancelButton}>
+            {overlay}
+            {this._renderSheet()}
+          </Modal>
+        )}
+      </View>
+    );
+  }
+
+  _renderSheet() {
+    const { options, isAnimating, sheetOpacity } = this.state;
+
+    if (!options) {
+      return null;
+    }
+
+    const {
+      options: optionsArray,
+      icons,
+      tintIcons,
+      destructiveButtonIndex,
+      disabledButtonIndices,
+      destructiveColor,
+      textStyle,
+      tintColor,
+      title,
+      titleTextStyle,
+      message,
+      messageTextStyle,
+      autoFocus,
+      showSeparators,
+      containerStyle,
+      separatorStyle,
+    } = options;
+    return (
+      <TouchableWithoutFeedback importantForAccessibility="yes" onPress={this._selectCancelButton}>
+        <Animated.View
+          needsOffscreenAlphaCompositing={isAnimating}
+          style={[
+            styles.sheetContainer,
+            {
+              opacity: sheetOpacity,
+              transform: [
+                {
+                  translateY: sheetOpacity.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [this._actionSheetHeight, 0],
+                  }),
+                },
+              ],
+            },
+          ]}>
+          <View style={styles.sheet} onLayout={this._setActionSheetHeight}>
+            <ActionGroup
+              options={optionsArray}
+              icons={icons}
+              tintIcons={tintIcons === undefined ? true : tintIcons}
+              destructiveButtonIndex={destructiveButtonIndex}
+              destructiveColor={destructiveColor}
+              disabledButtonIndices={disabledButtonIndices}
+              onSelect={this._onSelect}
+              startIndex={0}
+              length={optionsArray.length}
+              textStyle={textStyle || {}}
+              tintColor={tintColor}
+              title={title || undefined}
+              titleTextStyle={titleTextStyle}
+              message={message || undefined}
+              messageTextStyle={messageTextStyle}
+              autoFocus={autoFocus}
+              showSeparators={showSeparators}
+              containerStyle={containerStyle}
+              separatorStyle={separatorStyle}
+            />
+          </View>
+        </Animated.View>
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  showActionSheetWithOptions = (options: ActionSheetOptions, onSelect: (i: number) => void) => {
+    const { isVisible, overlayOpacity, sheetOpacity } = this.state;
+
+    if (isVisible) {
+      this._deferNextShow = this.showActionSheetWithOptions.bind(this, options, onSelect);
+      return;
+    }
+
+    this.setState({
+      options,
+      onSelect,
+      isVisible: true,
+      isAnimating: true,
+    });
+    overlayOpacity.setValue(0);
+    sheetOpacity.setValue(0);
+    Animated.parallel([
+      Animated.timing(overlayOpacity, {
+        toValue: 0.32,
+        easing: EASING_OUT,
+        duration: OPACITY_ANIMATION_IN_TIME,
+        useNativeDriver: this.props.useNativeDriver,
+      }),
+      Animated.timing(sheetOpacity, {
+        toValue: 1,
+        easing: EASING_OUT,
+        duration: OPACITY_ANIMATION_IN_TIME,
+        useNativeDriver: this.props.useNativeDriver,
+      }),
+    ]).start((result) => {
+      if (result.finished) {
+        this.setState({
+          isAnimating: false,
+        });
+        this._deferNextShow = undefined;
+      }
+    });
+    // @ts-ignore: Argument of type '"actionSheetHardwareBackPress"' is not assignable to parameter of type '"hardwareBackPress"'
+    BackHandler.addEventListener('actionSheetHardwareBackPress', this._selectCancelButton);
+  };
+
+  _selectCancelButton = () => {
+    const { options } = this.state;
+
+    if (!options) {
+      return false;
+    }
+
+    if (typeof options.cancelButtonIndex === 'undefined') {
+      return false;
+    } else if (typeof options.cancelButtonIndex === 'number') {
+      return this._onSelect(options.cancelButtonIndex);
+    } else {
+      return this._animateOut();
+    }
+  };
+
+  _onSelect = (index: number): boolean => {
+    const { isAnimating, onSelect } = this.state;
+
+    if (isAnimating) {
+      return false;
+    }
+
+    onSelect && onSelect(index);
+    return this._animateOut();
+  };
+
+  _animateOut = (): boolean => {
+    const { isAnimating, overlayOpacity, sheetOpacity } = this.state;
+
+    if (isAnimating) {
+      return false;
+    }
+
+    // @ts-ignore: Argument of type '"actionSheetHardwareBackPress"' is not assignable to parameter of type '"hardwareBackPress"'
+    BackHandler.removeEventListener('actionSheetHardwareBackPress', this._selectCancelButton);
+    this.setState({
+      isAnimating: true,
+    });
+    Animated.parallel([
+      Animated.timing(overlayOpacity, {
+        toValue: 0,
+        easing: EASING_IN,
+        duration: OPACITY_ANIMATION_OUT_TIME,
+        useNativeDriver: this.props.useNativeDriver,
+      }),
+      Animated.timing(sheetOpacity, {
+        toValue: 0,
+        easing: EASING_IN,
+        duration: OPACITY_ANIMATION_OUT_TIME,
+        useNativeDriver: this.props.useNativeDriver,
+      }),
+    ]).start((result) => {
+      if (result.finished) {
+        this.setState({
+          isVisible: false,
+          isAnimating: false,
+        });
+
+        if (this._deferNextShow) {
+          this._deferNextShow();
+        }
+      }
+    });
+    return true;
+  };
+}
+
+const styles = StyleSheet.create({
+  flexContainer: {
+    flex: 1,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: 'black',
+  },
+  sheetContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    backgroundColor: 'transparent',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  sheet: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+});
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import ActionSheet from './ActionSheet';
+import { Provider } from './context';
+import { ActionSheetOptions } from './types';
+
+interface Props {
+  children: React.ReactNode;
+  useNativeDriver?: boolean;
+}
+
+export default class ActionSheetProvider extends React.Component<Props> {
+  _actionSheetRef: React.RefObject<ActionSheet>;
+
+  constructor(props: Props) {
+    super(props);
+    this._actionSheetRef = React.createRef();
+  }
+
+  getContext = () => {
+    return {
+      showActionSheetWithOptions: (options: ActionSheetOptions, callback: (i: number) => void) => {
+        this._actionSheetRef.current !== null &&
+          this._actionSheetRef.current.showActionSheetWithOptions(options, callback);
+      },
+    };
+  };
+
+  render() {
+    return (
+      <Provider value={this.getContext()}>
+        <ActionSheet ref={this._actionSheetRef} useNativeDriver={this.props.useNativeDriver}>
+          {React.Children.only(this.props.children)}
+        </ActionSheet>
+      </Provider>
+    );
+  }
+}
@@ -0,0 +1,23 @@
+import hoistNonReactStatic from 'hoist-non-react-statics';
+import * as React from 'react';
+
+import { Consumer } from './context';
+import { ActionSheetProps } from './types';
+
+export default function connectActionSheet<OwnProps = any>(
+  WrappedComponent: React.ComponentType<OwnProps & ActionSheetProps>
+) {
+  const ConnectedActionSheet = (props: OwnProps) => {
+    return (
+      <Consumer>
+        {({ showActionSheetWithOptions }) => {
+          return (
+            <WrappedComponent {...props} showActionSheetWithOptions={showActionSheetWithOptions} />
+          );
+        }}
+      </Consumer>
+    );
+  };
+
+  return hoistNonReactStatic(ConnectedActionSheet, WrappedComponent);
+}
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { ActionSheetOptions, ActionSheetProps } from './types';
+
+const context = React.createContext<ActionSheetProps>({
+  showActionSheetWithOptions: (options: ActionSheetOptions, callback: (i: number) => void) => {},
+});
+
+export function useActionSheet() {
+  return React.useContext(context);
+}
+
+const { Provider, Consumer } = context;
+
+export { Provider, Consumer };
@@ -0,0 +1,4 @@
+export { default as ActionSheetProvider } from './ActionSheetProvider';
+export { default as connectActionSheet } from './connectActionSheet';
+export { useActionSheet } from './context';
+export * from './types';
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+
+export interface ActionSheetProps {
+  showActionSheetWithOptions: (
+    options: ActionSheetOptions,
+    callback: (i?: number) => void | Promise<void>
+  ) => void;
+}
+
+// for iOS
+export interface ActionSheetIOSOptions {
+  options: string[];
+  title?: string;
+  message?: string;
+  tintColor?: string;
+  cancelButtonIndex?: number;
+  destructiveButtonIndex?: number | number[];
+  anchor?: number;
+  userInterfaceStyle?: 'light' | 'dark';
+  disabledButtonIndices?: number[];
+}
+
+// for Android or Web
+export interface ActionSheetOptions extends ActionSheetIOSOptions {
+  icons?: React.ReactNode[];
+  tintIcons?: boolean;
+  textStyle?: TextStyle;
+  titleTextStyle?: TextStyle;
+  messageTextStyle?: TextStyle;
+  autoFocus?: boolean;
+  showSeparators?: boolean;
+  containerStyle?: ViewStyle;
+  separatorStyle?: ViewStyle;
+  useModal?: boolean;
+  destructiveColor?: string;
+}
@@ -0,0 +1,13 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "strict": true,
+    "moduleResolution": "node",
+    "lib": ["es2015", "es2016", "esnext"],
+    "jsx": "react-native",
+    "esModuleInterop": true
+  },
+  "exclude": ["node_modules"]
+}
@@ -1,39 +0,0 @@
-import {
-  ActionSheetProps,
-  ActionSheetProvider,
-  connectActionSheet
-} from "./index";
-import * as React from "react";
-
-interface ChildOwnProps {
-  name: string;
-}
-
-type ChildProps = ChildOwnProps & ActionSheetProps;
-
-class Child extends React.Component<ChildProps> {
-  showMore = () => {
-    this.props.showActionSheetWithOptions(
-      { options: ["Delete"] },
-      buttonIndex => {
-        console.log(buttonIndex);
-      }
-    );
-  };
-
-  render() {
-    return this.props.name;
-  }
-}
-
-const EnhancedChild = connectActionSheet(Child);
-
-class App extends React.Component {
-  render() {
-    return (
-      <ActionSheetProvider>
-        <EnhancedChild name="lool" />
-      </ActionSheetProvider>
-    );
-  }
-}