[MM-38683] Android Initialisation Bug + BottomSheet Correction (#5685)

* Fixes various init bugs for android

* Ignores Type Error

* MM-38683: Removes 'cancel' button.

* MM-38683: Removes some 'hideCancel' props.

* Android bottom margin

* Update options modal style

Co-authored-by: Martin Kraft <martin@upspin.org>
Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

app/components/post_list/post/body/body.tsx

@@ -178,6 +178,8 @@ const Body = ({
             {body}
             {post.failed &&
             <Failed
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 post={post}
                 theme={theme}
             />

app/components/post_list/post/body/failed/failed.tsx

@@ -2,20 +2,21 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback} from 'react';
-import {StyleSheet} from 'react-native';
+import {intlShape, injectIntl} from 'react-intl';
+import {Keyboard, StyleSheet} from 'react-native';
 
 import {showModalOverCurrentContext} from '@actions/navigation';
 import CompassIcon from '@components/compass_icon';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
 import NavigationTypes from '@constants/navigation';
 import EventEmitter from '@mm-redux/utils/event_emitter';
-import {t} from '@utils/i18n';
 
 import type {Post} from '@mm-redux/types/posts';
 import type {Theme} from '@mm-redux/types/theme';
 
 type FailedProps = {
     createPost: (post: Post) => void;
+    intl: typeof intlShape;
     post: Post;
     removePost: (post: Post) => void;
     theme: Theme;
@@ -28,38 +29,39 @@ const styles = StyleSheet.create({
     },
 });
 
-const Failed = ({createPost, post, removePost, theme}: FailedProps) => {
+const Failed = ({createPost, intl, post, removePost, theme}: FailedProps) => {
     const onPress = useCallback(() => {
         const screen = 'OptionsModal';
         const passProps = {
-            title: {
-                id: t('mobile.post.failed_title'),
+            title: intl.formatMessage({
+                id: 'mobile.post.failed_title',
                 defaultMessage: 'Unable to send your message:',
-            },
+            }),
             items: [{
                 action: () => {
                     EventEmitter.emit(NavigationTypes.NAVIGATION_CLOSE_MODAL);
                     createPost(post);
                 },
-                text: {
-                    id: t('mobile.post.failed_retry'),
+                text: intl.formatMessage({
+                    id: 'mobile.post.failed_retry',
                     defaultMessage: 'Try Again',
-                },
+                }),
             }, {
                 action: () => {
                     EventEmitter.emit(NavigationTypes.NAVIGATION_CLOSE_MODAL);
                     removePost(post);
                 },
-                text: {
-                    id: t('mobile.post.failed_delete'),
+                text: intl.formatMessage({
+                    id: 'mobile.post.failed_delete',
                     defaultMessage: 'Delete Message',
-                },
+                }),
                 textStyle: {
                     color: '#CC3239',
                 },
             }],
         };
 
+        Keyboard.dismiss();
         showModalOverCurrentContext(screen, passProps);
     }, []);
 
@@ -77,5 +79,4 @@ const Failed = ({createPost, post, removePost, theme}: FailedProps) => {
         </TouchableWithFeedback>
     );
 };
-
-export default Failed;
+export default injectIntl(Failed);

app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap

@@ -16,7 +16,6 @@ exports[`ChannelsList List should match snapshot 1`] = `
     maxToRenderPerBatch={10}
     onScrollBeginDrag={[Function]}
     onViewableItemsChanged={[Function]}
-    removeClippedSubviews={false}
     renderItem={[Function]}
     renderSectionHeader={[Function]}
     sections={Array []}
@@ -49,7 +48,6 @@ exports[`ChannelsList List should match snapshot with collapsed threads enabled
     maxToRenderPerBatch={10}
     onScrollBeginDrag={[Function]}
     onViewableItemsChanged={[Function]}
-    removeClippedSubviews={false}
     renderItem={[Function]}
     renderSectionHeader={[Function]}
     sections={Array []}
@@ -122,7 +120,6 @@ exports[`ChannelsList List should match snapshot with unreads not on top 1`] = `
     maxToRenderPerBatch={10}
     onScrollBeginDrag={[Function]}
     onViewableItemsChanged={[Function]}
-    removeClippedSubviews={false}
     renderItem={[Function]}
     renderSectionHeader={[Function]}
     sections={Array []}

app/components/sidebars/main/channels_list/list/list.js

@@ -557,7 +557,6 @@ export default class List extends PureComponent {
                     ref={this.setListRef}
                     sections={showLegacySidebar ? sections : categorySections}
                     contentContainerStyle={{paddingBottom}}
-                    removeClippedSubviews={Platform.OS === 'android'}
                     renderItem={showLegacySidebar ? this.renderItem : this.renderCategoryItem}
                     renderSectionHeader={showLegacySidebar ? this.renderSectionHeader : this.renderCategoryHeader}
                     keyboardShouldPersistTaps={'always'}

app/screens/options_modal/__snapshots__/options_modal_list.test.js.snap

@@ -5,8 +5,10 @@ exports[`OptionModalList should match snapshot 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "flex": 1,
+      "bottom": 0,
+      "height": "100%",
       "justifyContent": "flex-end",
+      "width": "100%",
     }
   }
 >
@@ -27,7 +29,7 @@ exports[`OptionModalList should match snapshot 1`] = `
             "borderTopLeftRadius": 12,
             "borderTopRightRadius": 12,
             "paddingBottom": 25,
-            "paddingVertical": 10,
+            "paddingTop": 10,
           },
         ]
       }

app/screens/options_modal/options_modal.js

@@ -92,7 +92,7 @@ export default class OptionsModal extends PureComponent {
         return (
             <TouchableWithoutFeedback onPress={this.handleCancel}>
                 <View style={style.wrapper}>
-                    <AnimatedView style={{height: this.props.deviceHeight, left: 0, top: this.state.top, width: this.props.deviceWidth}}>
+                    <AnimatedView style={{top: this.state.top}}>
                         <OptionsModalList
                             items={items}
                             onCancelPress={this.handleCancel}

app/screens/options_modal/options_modal_list.js

@@ -4,7 +4,6 @@
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import {
-    Platform,
     StyleSheet,
     Text,
     TouchableOpacity,
@@ -157,16 +156,8 @@ const style = StyleSheet.create({
         backgroundColor: 'white',
         borderTopLeftRadius: 12,
         borderTopRightRadius: 12,
-        paddingVertical: 10,
-        ...Platform.select({
-            ios: {
-                paddingBottom: 25,
-            },
-            android: {
-                marginBottom: -10,
-            },
-        }),
-
+        paddingTop: 10,
+        paddingBottom: 25,
     },
     optionIcon: {
         color: 'rgba(61, 60, 64, 0.64)',
@@ -197,9 +188,11 @@ const style = StyleSheet.create({
         paddingBottom: 10,
     },
     container: {
-        flex: 1,
         alignItems: 'center',
         justifyContent: 'flex-end',
+        bottom: 0,
+        height: '100%',
+        width: '100%',
     },
     wrapper: {
         maxWidth: 450,

app/utils/bottom_sheet/bottom_sheet.ts

@@ -17,6 +17,10 @@ export default {
             icon: typeof o === 'string' ? null : o.icon,
         }));
 
-        showModalOverCurrentContext('OptionsModal', {title: options.title || '', items, subtitle: options.subtitle});
+        showModalOverCurrentContext('OptionsModal', {
+            title: options.title || '',
+            items,
+            subtitle: options.subtitle,
+        });
     },
 };