Fix Post and network indicator Layouts (#2382)

* Fix post layout that caused text cutoff

* Fix network indicator layout on non iPhone X devices

app/components/emoji/emoji.js

@@ -110,16 +110,6 @@ export default class Emoji extends React.PureComponent {
         const width = size;
         const height = size;
 
-        let marginTop = 0;
-        if (textStyle) {
-            // hack to get the vertical alignment looking better
-            if (fontSize > 16) {
-                marginTop -= 2;
-            } else if (fontSize <= 16) {
-                marginTop += 1;
-            }
-        }
-
         // Android can't change the size of an image after its first render, so
         // force a new image to be rendered when the size changes
         const key = Platform.OS === 'android' ? (height + '-' + width) : null;
@@ -128,7 +118,7 @@ export default class Emoji extends React.PureComponent {
             return (
                 <Image
                     key={key}
-                    style={{width, height, marginTop}}
+                    style={{width, height}}
                 />
             );
         }
@@ -136,7 +126,7 @@ export default class Emoji extends React.PureComponent {
         return (
             <Image
                 key={key}
-                style={{width, height, marginTop}}
+                style={{width, height}}
                 source={{uri: imageUrl}}
                 onError={this.onError}
             />

app/components/file_attachment_list/file_attachment_list.js

@@ -8,7 +8,6 @@ import {
     Platform,
     ScrollView,
     StyleSheet,
-    View,
 } from 'react-native';
 
 import {Client4} from 'mattermost-redux/client';
@@ -167,23 +166,18 @@ export default class FileAttachmentList extends Component {
         const {fileIds, isFailed} = this.props;
 
         return (
-            <View style={styles.flex}>
-                <ScrollView
-                    horizontal={true}
-                    scrollEnabled={fileIds.length > 1}
-                    style={[styles.flex, (isFailed && styles.failed)]}
-                >
-                    {this.renderItems()}
-                </ScrollView>
-            </View>
+            <ScrollView
+                horizontal={true}
+                scrollEnabled={fileIds.length > 1}
+                style={[(isFailed && styles.failed)]}
+            >
+                {this.renderItems()}
+            </ScrollView>
         );
     }
 }
 
 const styles = StyleSheet.create({
-    flex: {
-        flex: 1,
-    },
     failed: {
         opacity: 0.5,
     },

app/components/network_indicator/network_indicator.js

@@ -36,7 +36,6 @@ const {
     IOS_TOP_LANDSCAPE,
     IOS_TOP_PORTRAIT,
     IOSX_TOP_PORTRAIT,
-    STATUS_BAR_HEIGHT,
 } = ViewTypes;
 
 export default class NetworkIndicator extends PureComponent {
@@ -70,6 +69,7 @@ export default class NetworkIndicator extends PureComponent {
 
         const navBar = this.getNavBarHeight(props.isLandscape);
         this.top = new Animated.Value(navBar - HEIGHT);
+        this.opacity = 0;
 
         this.backgroundColor = new Animated.Value(0);
         this.firstRun = true;
@@ -169,6 +169,7 @@ export default class NetworkIndicator extends PureComponent {
             ),
         ]).start(() => {
             this.backgroundColor.setValue(0);
+            this.opacity = 0;
         });
     };
 
@@ -188,7 +189,7 @@ export default class NetworkIndicator extends PureComponent {
         } else if (isX) {
             return IOSX_TOP_PORTRAIT;
         } else if (isLandscape) {
-            return IOS_TOP_LANDSCAPE + STATUS_BAR_HEIGHT;
+            return IOS_TOP_LANDSCAPE;
         }
 
         return IOS_TOP_PORTRAIT;
@@ -299,6 +300,8 @@ export default class NetworkIndicator extends PureComponent {
     };
 
     show = () => {
+        this.opacity = 1;
+
         Animated.timing(
             this.top, {
                 toValue: this.getNavBarHeight(),
@@ -318,7 +321,6 @@ export default class NetworkIndicator extends PureComponent {
 
         let i18nId;
         let defaultMessage;
-        let values;
         let action;
 
         if (isOnline) {
@@ -358,12 +360,11 @@ export default class NetworkIndicator extends PureComponent {
         }
 
         return (
-            <Animated.View style={[styles.container, {top: this.top, backgroundColor: background}]}>
+            <Animated.View style={[styles.container, {top: this.top, backgroundColor: background, opacity: this.opacity}]}>
                 <Animated.View style={styles.wrapper}>
                     <FormattedText
                         defaultMessage={defaultMessage}
                         id={i18nId}
-                        values={values}
                         style={styles.message}
                     />
                     {action}
@@ -394,12 +395,6 @@ const styles = StyleSheet.create({
         fontWeight: '600',
         flex: 1,
     },
-    actionButton: {
-        alignItems: 'center',
-        borderWidth: 1,
-        borderColor: '#FFFFFF',
-        paddingRight: 0,
-    },
     actionContainer: {
         alignItems: 'flex-end',
         height: 24,

app/components/post/post.js

@@ -311,7 +311,7 @@ export default class Post extends PureComponent {
 
         return (
             <TouchableHighlight
-                style={highlighted}
+                style={[style.postStyle, highlighted]}
                 onPress={this.handlePress}
                 onLongPress={this.showPostOptions}
                 underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
@@ -358,9 +358,11 @@ export default class Post extends PureComponent {
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     return {
+        postStyle: {
+            overflow: 'hidden',
+        },
         container: {
             flexDirection: 'row',
-            overflow: 'hidden',
         },
         pendingPost: {
             opacity: 0.5,
@@ -379,13 +381,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             marginLeft: 47,
             marginTop: 10,
         },
-        consecutivePostWithFlag: {
-            width: 11,
-            height: 11,
-            position: 'absolute',
-            top: -6,
-            left: -11,
-        },
         profilePictureContainer: {
             marginBottom: 5,
             marginRight: 10,

app/components/post_body/post_body.js

@@ -190,17 +190,15 @@ export default class PostBody extends PureComponent {
 
         return (
             <View style={style.row}>
-                <View style={style.flex}>
-                    <PostAddChannelMember
-                        baseTextStyle={messageStyle}
-                        navigator={navigator}
-                        onPostPress={onPress}
-                        textStyles={textStyles}
-                        postId={postProps.add_channel_member.post_id}
-                        userIds={postProps.add_channel_member.user_ids}
-                        usernames={postProps.add_channel_member.usernames}
-                    />
-                </View>
+                <PostAddChannelMember
+                    baseTextStyle={messageStyle}
+                    navigator={navigator}
+                    onPostPress={onPress}
+                    textStyles={textStyles}
+                    postId={postProps.add_channel_member.post_id}
+                    userIds={postProps.add_channel_member.user_ids}
+                    usernames={postProps.add_channel_member.usernames}
+                />
             </View>
         );
     };
@@ -341,17 +339,15 @@ export default class PostBody extends PureComponent {
             const {allUserIds, allUsernames, messageData} = postProps.user_activity;
             messageComponent = (
                 <View style={style.row}>
-                    <View style={style.flex}>
-                        <CombinedSystemMessage
-                            allUserIds={allUserIds}
-                            allUsernames={allUsernames}
-                            linkStyle={textStyles.link}
-                            messageData={messageData}
-                            navigator={navigator}
-                            textStyles={textStyles}
-                            theme={theme}
-                        />
-                    </View>
+                    <CombinedSystemMessage
+                        allUserIds={allUserIds}
+                        allUsernames={allUsernames}
+                        linkStyle={textStyles.link}
+                        messageData={messageData}
+                        navigator={navigator}
+                        textStyles={textStyles}
+                        theme={theme}
+                    />
                 </View>
             );
         } else if (isEmojiOnly) {
@@ -369,7 +365,7 @@ export default class PostBody extends PureComponent {
             messageComponent = (
                 <View style={style.row}>
                     <View
-                        style={[style.flex, (isPendingOrFailedPost && style.pendingPost), (isLongPost && {maxHeight})]}
+                        style={[(isPendingOrFailedPost && style.pendingPost), (isLongPost && {maxHeight})]}
                         removeClippedSubviews={isLongPost}
                     >
                         <Markdown
@@ -413,10 +409,8 @@ export default class PostBody extends PureComponent {
         return (
             <View style={style.messageContainerWithReplyBar}>
                 <View style={replyBarStyle}/>
-                <View style={[style.flex, style.row]}>
-                    <View style={style.flex}>
-                        {body}
-                    </View>
+                <View style={[style.row]}>
+                    {body}
                     {isFailed &&
                         <TouchableOpacity
                             onPress={onFailedPostPress}
@@ -437,10 +431,6 @@ export default class PostBody extends PureComponent {
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     return {
-        flex: {
-            flex: 1,
-            overflow: 'hidden',
-        },
         row: {
             flexDirection: 'row',
         },
@@ -459,7 +449,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         messageContainerWithReplyBar: {
             flexDirection: 'row',
-            flex: 1,
         },
         pendingPost: {
             opacity: 0.5,

app/components/post_body_additional_content/post_body_additional_content.js

@@ -506,7 +506,6 @@ export default class PostBodyAdditionalContent extends PureComponent {
 const styles = StyleSheet.create({
     imageContainer: {
         alignItems: 'flex-start',
-        flex: 1,
         justifyContent: 'flex-start',
         marginBottom: 6,
         marginTop: 10,

app/components/reactions/reactions.js

@@ -7,7 +7,6 @@ import {
     Image,
     ScrollView,
     TouchableOpacity,
-    View,
 } from 'react-native';
 import {intlShape} from 'react-intl';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
@@ -168,24 +167,19 @@ export default class Reactions extends PureComponent {
         }
 
         return (
-            <View style={styles.container}>
-                <ScrollView
-                    alwaysBounceHorizontal={false}
-                    horizontal={true}
-                    overScrollMode='never'
-                >
-                    {reactionElements}
-                </ScrollView>
-            </View>
+            <ScrollView
+                alwaysBounceHorizontal={false}
+                horizontal={true}
+                overScrollMode='never'
+            >
+                {reactionElements}
+            </ScrollView>
         );
     }
 }
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     return {
-        container: {
-            flex: 1,
-        },
         addReaction: {
             tintColor: changeOpacity(theme.centerChannelColor, 0.5),
             width: 23,