@expo/react-native-action-sheet - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

ActionSheet.android.js

@@ -9,3 +9,2 @@ // @flow
   Easing,
-  PixelRatio,
   Platform,
@@ -55,4 +54,6 @@ StyleSheet,
 
-const OPACITY_ANIMATION_TIME = 150;
-const PIXEL = 1 / PixelRatio.get();
+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)
 
@@ -91,5 +92,5 @@ class ActionGroup extends React.Component {
     for (let i = startIndex; i < startIndex + length; i++) {
-      let color = '#444444';
+      let color = '#212121';
       if (i === destructiveButtonIndex) {
-        color = '#ff3b30';
+        color = '#d32f2f';
       }
@@ -100,3 +101,7 @@
       if (icons && icons[i]) {
-        iconElement = <Image source={icons[i]} style={styles.icon} />;
+        const iconStyle = [styles.icon]
+        if (textStyle.color !== undefined && textStyle.color !== null) {
+          iconStyle.push({ tintColor: textStyle.color })
+        }
+        iconElement = <Image source={icons[i]} resizeMode="contain" style={iconStyle} />;
       }
@@ -132,2 +137,3 @@
   props: ActionSheetProps;
+  _actionSheetHeight = 360;
   _animateOutCallback: ?() => void = null;
@@ -185,5 +191,5 @@
                 {
-                  scale: this.state.sheetOpacity.interpolate({
-                    inputRange: [0, 0.5, 1],
-                    outputRange: [0.6, 1, 1],
+                  translateY: this.state.sheetOpacity.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [this._actionSheetHeight, 0],
                   }),
@@ -194,3 +200,4 @@ },
           ]}>
-          <View style={styles.sheet}>
+          <View style={styles.sheet}
+            onLayout={(event) => { this._actionSheetHeight = event.nativeEvent.layout.height }}>
             <ActionGroup
@@ -232,5 +239,5 @@ options={this.state.options.options}
       Animated.timing(this.state.overlayOpacity, {
-        toValue: 0.5,
-        easing: Easing.in(Easing.linear),
-        duration: OPACITY_ANIMATION_TIME,
+        toValue: 0.2,
+        easing: EASING_OUT,
+        duration: OPACITY_ANIMATION_IN_TIME,
         useNativeDriver: this.props.useNativeDriver,
@@ -240,4 +247,4 @@ }),
         toValue: 1,
-        easing: Easing.in(Easing.linear),
-        duration: OPACITY_ANIMATION_TIME,
+        easing: EASING_OUT,
+        duration: OPACITY_ANIMATION_IN_TIME,
         useNativeDriver: this.props.useNativeDriver,
@@ -299,4 +306,4 @@ }),
         toValue: 0,
-        easing: Easing.in(Easing.linear),
-        duration: OPACITY_ANIMATION_TIME,
+        easing: EASING_IN,
+        duration: OPACITY_ANIMATION_OUT_TIME,
         useNativeDriver: this.props.useNativeDriver,
@@ -306,4 +313,4 @@ }),
         toValue: 0,
-        easing: Easing.in(Easing.linear),
-        duration: OPACITY_ANIMATION_TIME,
+        easing: EASING_IN,
+        duration: OPACITY_ANIMATION_OUT_TIME,
         useNativeDriver: this.props.useNativeDriver,
@@ -363,8 +370,6 @@ }),
     backgroundColor: '#fefefe',
-    borderRadius: 4,
-    borderColor: '#cbcbcb',
-    borderWidth: PIXEL,
+    borderColor: '#ffffff',
+    borderTopWidth: StyleSheet.hairlineWidth,
     overflow: 'hidden',
-    marginHorizontal: 16,
-    marginBottom: 8,
+    paddingVertical: 8,
   },
@@ -375,11 +380,12 @@ button: {
     flexDirection: 'row',
-    height: 50,
+    height: 48,
     paddingHorizontal: 16,
   },
   icon: {
-    marginRight: 15,
+    width: 24,
+    height: 24,
+    marginRight: 32,
   },
   text: {
-    fontSize: 17,
-    fontWeight: '700',
+    fontSize: 16,
     textAlignVertical: 'center',
@@ -407,3 +413,3 @@ },
     backgroundColor: 'transparent',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     justifyContent: 'center',
@@ -410,0 +416,0 @@ flexDirection: 'row',

package.json

 {
   "name": "@expo/react-native-action-sheet",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A cross-platform ActionSheet for React Native",
@@ -36,2 +36,4 @@ "main": "index.js",
   "devDependencies": {
+    "@types/react": "^16.4.6",
+    "@types/react-native": "^0.56.0",
     "flow-bin": "^0.26.0",
@@ -38,0 +40,0 @@ "react": "^15.6.1",

README.md

@@ -10,5 +10,56 @@ # react-native-action-sheet [![Slack](https://slack.expo.io/badge.svg)](https://slack.expo.io)
 
+## A basic ActionSheet Setup
+
+import ActionSheetProvider & connectActionSheet
+
+```es6
+import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet';
+```
+
+wrap your top-level component with `<ActionSheetProvider />`
+
+```es6
+class AppContainer extends React.Component {
+  render() {
+    return (
+      <ActionSheetProvider>
+        <App />
+      </ActionSheetProvider>
+    );
+  }
+}
+```
+
+decorate the component you want to use the action sheet with `@connectActionSheet`
+
+```es6
+@connectActionSheet
+class App extends React.Component { /* ... */ }
+```
+
+access actionSheet method as `this.props.showActionSheetWithOptions`
+
+```es6
+_onOpenActionSheet = () => {
+  // Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
+  let options = ['Delete', 'Save', 'Cancel'];
+  let destructiveButtonIndex = 0;
+  let cancelButtonIndex = 2;
+  
+  this.props.showActionSheetWithOptions({
+    options,
+    cancelButtonIndex,
+    destructiveButtonIndex,
+  },
+  (buttonIndex) => {
+    // Do something here depending on the button index selected
+  });
+
+}
+```
+
+
 ## Try it out
 
-Try it with Expo: https://expo.io/@community/react-native-action-sheet-example
+Try it in Expo: https://expo.io/@community/react-native-action-sheet-example
 
@@ -15,0 +66,0 @@ ## Usage

No alert changes

Improved metrics

Total package byte prevSize

15562

increased by10.95%

Lines of code

416

increased by1.46%

Number of lines in readme file

68

increased by300%

Worsened metrics

Dev dependency count

5

increased by66.67%

No dependency changes