Merge pull request #52 from wsxyeah/master

Add material design style for Android

ActionSheet.android.js

@@ -6,7 +6,6 @@ import {
   Animated,
   BackHandler,
   Easing,
-  PixelRatio,
   Platform,
   StyleSheet,
   Text,
@@ -51,8 +50,10 @@ type ActionSheetProps = {
   useNativeDriver: ?boolean,
 };
 
-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)
 
 class ActionGroup extends React.Component {
   props: ActionGroupProps;
@@ -86,15 +87,19 @@ 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';
       }
 
       let iconElement = undefined;
 
       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} />;
       }
 
       optionViews.push(
@@ -125,6 +130,7 @@ class ActionGroup extends React.Component {
 // 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 = {
@@ -177,15 +183,16 @@ export default class ActionSheet extends React.Component {
               opacity: this.state.sheetOpacity,
               transform: [
                 {
-                  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],
                   }),
                 },
               ],
             },
           ]}>
-          <View style={styles.sheet}>
+          <View style={styles.sheet}
+            onLayout={(event) => { this._actionSheetHeight = event.nativeEvent.layout.height }}>
             <ActionGroup
               options={this.state.options.options}
               icons={this.state.options.icons}
@@ -222,15 +229,15 @@ export default class ActionSheet extends React.Component {
 
     Animated.parallel([
       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,
       }),
       Animated.timing(this.state.sheetOpacity, {
         toValue: 1,
-        easing: Easing.in(Easing.linear),
-        duration: OPACITY_ANIMATION_TIME,
+        easing: EASING_OUT,
+        duration: OPACITY_ANIMATION_IN_TIME,
         useNativeDriver: this.props.useNativeDriver,
       }),
     ]).start(result => {
@@ -287,14 +294,14 @@ export default class ActionSheet extends React.Component {
     Animated.parallel([
       Animated.timing(this.state.overlayOpacity, {
         toValue: 0,
-        easing: Easing.in(Easing.linear),
-        duration: OPACITY_ANIMATION_TIME,
+        easing: EASING_IN,
+        duration: OPACITY_ANIMATION_OUT_TIME,
         useNativeDriver: this.props.useNativeDriver,
       }),
       Animated.timing(this.state.sheetOpacity, {
         toValue: 0,
-        easing: Easing.in(Easing.linear),
-        duration: OPACITY_ANIMATION_TIME,
+        easing: EASING_IN,
+        duration: OPACITY_ANIMATION_OUT_TIME,
         useNativeDriver: this.props.useNativeDriver,
       }),
     ]).start(result => {
@@ -349,26 +356,25 @@ class TouchableNativeFeedbackSafe extends React.Component {
 let styles = StyleSheet.create({
   groupContainer: {
     backgroundColor: '#fefefe',
-    borderRadius: 4,
-    borderColor: '#cbcbcb',
-    borderWidth: PIXEL,
+    borderColor: '#ffffff',
+    borderTopWidth: StyleSheet.hairlineWidth,
     overflow: 'hidden',
-    marginHorizontal: 16,
-    marginBottom: 8,
+    paddingVertical: 8,
   },
   button: {
     justifyContent: 'flex-start',
     alignItems: 'center',
     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',
   },
   rowSeparator: {
@@ -391,7 +397,7 @@ let styles = StyleSheet.create({
     bottom: 0,
     top: 0,
     backgroundColor: 'transparent',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     justifyContent: 'center',
     flexDirection: 'row',
   },