Fix post menu touchables (#2385)

app/screens/post_options/post_option.js

@@ -7,7 +7,9 @@ import {
     Image,
     StyleSheet,
     Text,
+    Platform,
     TouchableHighlight,
+    TouchableNativeFeedback,
     View,
 } from 'react-native';
 
@@ -41,12 +43,28 @@ export default class PostOption extends PureComponent {
         const {destructive, icon, onPress, text} = this.props;
         const image = icons[icon];
 
+        const Touchable = Platform.select({
+            ios: TouchableHighlight,
+            android: TouchableNativeFeedback,
+        });
+
+        const touchableProps = Platform.select({
+            ios: {
+                underlayColor: 'rgba(0, 0, 0, 0.05)',
+            },
+            android: {
+                background: TouchableNativeFeedback.Ripple( //eslint-disable-line new-cap
+                    'rgba(0, 0, 0, 0.05)',
+                    true,
+                ),
+            },
+        });
+
         return (
             <View style={style.container} >
-                <TouchableHighlight
-                    onPress={onPress}
-                    underlayColor='rgba(0, 0, 0, 0.05)'
-                    style={style.flex}
+                <Touchable
+                    onPressOut={onPress}
+                    {...touchableProps}
                 >
                     <View style={style.row}>
                         <View style={style.icon}>
@@ -58,7 +76,7 @@ export default class PostOption extends PureComponent {
                             </Text>
                         </View>
                     </View>
-                </TouchableHighlight>
+                </Touchable>
                 <View style={style.footer}/>
             </View>
         );
@@ -70,9 +88,6 @@ const style = StyleSheet.create({
         height: 51,
         width: '100%',
     },
-    flex: {
-        flex: 1,
-    },
     destructive: {
         color: '#D0021B',
     },

app/screens/post_options/post_options.js

@@ -13,7 +13,6 @@ import {BOTTOM_MARGIN} from 'app/components/slide_up_panel/slide_up_panel';
 import PostOption from './post_option';
 
 const OPTION_HEIGHT = 50;
-const INITIAL_OPTION_COUNT = 6;
 
 export default class PostOptions extends PureComponent {
     static propTypes = {
@@ -294,15 +293,19 @@ export default class PostOptions extends PureComponent {
     handleFlagPost = () => {
         const {actions, post} = this.props;
 
-        actions.flagPost(post.id);
         this.closeWithAnimation();
+        requestAnimationFrame(() => {
+            actions.flagPost(post.id);
+        });
     };
 
     handlePinPost = () => {
         const {actions, post} = this.props;
 
-        actions.pinPost(post.id);
         this.closeWithAnimation();
+        requestAnimationFrame(() => {
+            actions.pinPost(post.id);
+        });
     };
 
     handlePostDelete = () => {
@@ -361,15 +364,19 @@ export default class PostOptions extends PureComponent {
     handleUnflagPost = () => {
         const {actions, post} = this.props;
 
-        actions.unflagPost(post.id);
         this.closeWithAnimation();
+        requestAnimationFrame(() => {
+            actions.unflagPost(post.id);
+        });
     };
 
     handleUnpinPost = () => {
         const {actions, post} = this.props;
 
-        actions.unpinPost(post.id);
         this.closeWithAnimation();
+        requestAnimationFrame(() => {
+            actions.unpinPost(post.id);
+        });
     };
 
     refSlideUpPanel = (r) => {
@@ -379,7 +386,7 @@ export default class PostOptions extends PureComponent {
     render() {
         const {deviceHeight} = this.props;
         const options = this.getPostOptions();
-        const initialPosition = (INITIAL_OPTION_COUNT + 1) * OPTION_HEIGHT;
+        const initialPosition = (options.length + 1) * OPTION_HEIGHT;
         const marginFromTop = deviceHeight - BOTTOM_MARGIN - ((options.length + 1) * OPTION_HEIGHT);
 
         return (