MM-28602 Fix announcement banner crash if it includes a hashtag (#4808)

* MM-28602 Fix announcement banner with hashtag crash

* Fix expanded announcement banner layout

* Fix announcement banner animation

app/components/announcement_banner/__snapshots__/announcement_banner.test.js.snap

@@ -61,4 +61,63 @@ exports[`AnnouncementBanner should match snapshot 1`] = `
 </ForwardRef(AnimatedComponentWrapper)>
 `;
 
-exports[`AnnouncementBanner should match snapshot 2`] = `null`;
+exports[`AnnouncementBanner should match snapshot 2`] = `
+<ForwardRef(AnimatedComponentWrapper)
+  style={
+    Array [
+      Object {
+        "overflow": "hidden",
+        "paddingHorizontal": 10,
+        "position": "absolute",
+        "top": 0,
+        "width": "100%",
+      },
+      Object {
+        "backgroundColor": "#ddd",
+        "height": 0,
+      },
+    ]
+  }
+>
+  <ForwardRef
+    onPress={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+        },
+        null,
+      ]
+    }
+  >
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "fontSize": 14,
+            "marginRight": 5,
+          },
+          Object {
+            "color": "#fff",
+          },
+        ]
+      }
+    >
+      <RemoveMarkdown
+        value="Banner Text"
+      />
+    </Text>
+    <Icon
+      allowFontScaling={false}
+      color="#fff"
+      name="info"
+      size={16}
+    />
+  </ForwardRef>
+</ForwardRef(AnimatedComponentWrapper)>
+`;

app/components/announcement_banner/announcement_banner.js

@@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
     Animated,
+    InteractionManager,
     StyleSheet,
     Text,
     TouchableOpacity,
@@ -67,15 +68,25 @@ export default class AnnouncementBanner extends PureComponent {
 
     toggleBanner = (show = true) => {
         const value = show ? 38 : 0;
-        Animated.timing(this.state.bannerHeight, {
-            toValue: value,
-            duration: 350,
-            useNativeDriver: false,
-        }).start();
+        if (show && !this.state.visible) {
+            this.setState({visible: show});
+        }
+
+        InteractionManager.runAfterInteractions(() => {
+            Animated.timing(this.state.bannerHeight, {
+                toValue: value,
+                duration: 350,
+                useNativeDriver: false,
+            }).start(() => {
+                if (this.state.visible !== show) {
+                    this.setState({visible: show});
+                }
+            });
+        });
     };
 
     render() {
-        if (!this.props.bannerEnabled) {
+        if (!this.state.visible) {
             return null;
         }
 

app/components/remove_markdown.js

@@ -33,9 +33,11 @@ export default class RemoveMarkdown extends React.PureComponent {
                 del: Renderer.forwardChildren,
                 code: Renderer.forwardChildren,
                 link: Renderer.forwardChildren,
+                image: this.renderNull,
                 atMention: Renderer.forwardChildren,
                 channelLink: Renderer.forwardChildren,
                 emoji: this.renderNull,
+                hashtag: Renderer.forwardChildren,
 
                 paragraph: Renderer.forwardChildren,
                 heading: Renderer.forwardChildren,
@@ -55,6 +57,9 @@ export default class RemoveMarkdown extends React.PureComponent {
                 table: this.renderNull,
                 table_row: this.renderNull,
                 table_cell: this.renderNull,
+
+                mention_highlight: Renderer.forwardChildren,
+                editedIndicator: Renderer.forwardChildren,
             },
         });
     };

app/screens/expanded_announcement_banner/expanded_announcement_banner.js

@@ -6,12 +6,12 @@ import React from 'react';
 import {ScrollView, View} from 'react-native';
 import Button from 'react-native-button';
 
-import FormattedText from 'app/components/formatted_text';
-import Markdown from 'app/components/markdown';
-import SafeAreaView from 'app/components/safe_area_view';
-import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
-import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
-import {popTopScreen} from 'app/actions/navigation';
+import {popTopScreen} from '@actions/navigation';
+import FormattedText from '@components/formatted_text';
+import Markdown from '@components/markdown';
+import SafeAreaView from '@components/safe_area_view';
+import {getMarkdownTextStyles, getMarkdownBlockStyles} from '@utils/markdown';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 export default class ExpandedAnnouncementBanner extends React.PureComponent {
     static propTypes = {
@@ -20,6 +20,7 @@ export default class ExpandedAnnouncementBanner extends React.PureComponent {
         }).isRequired,
         allowDismissal: PropTypes.bool.isRequired,
         bannerText: PropTypes.string.isRequired,
+        isLandscape: PropTypes.bool,
         theme: PropTypes.object.isRequired,
     }
 
@@ -38,10 +39,11 @@ export default class ExpandedAnnouncementBanner extends React.PureComponent {
     };
 
     render() {
-        const style = getStyleSheet(this.props.theme);
+        const {allowDismissal, isLandscape, theme} = this.props;
+        const style = getStyleSheet(theme);
 
         let dismissButton = null;
-        if (this.props.allowDismissal) {
+        if (allowDismissal) {
             dismissButton = (
                 <View style={style.dismissContainer}>
                     <Button
@@ -59,7 +61,10 @@ export default class ExpandedAnnouncementBanner extends React.PureComponent {
         }
 
         return (
-            <SafeAreaView useLandscapeMargin={true}>
+            <SafeAreaView
+                excludeHeader={true}
+                useLandscapeMargin={isLandscape}
+            >
                 <View style={style.container}>
                     <ScrollView
                         style={style.scrollContainer}
@@ -67,9 +72,9 @@ export default class ExpandedAnnouncementBanner extends React.PureComponent {
                     >
                         <Markdown
                             baseTextStyle={style.baseTextStyle}
-                            blockStyles={getMarkdownBlockStyles(this.props.theme)}
+                            blockStyles={getMarkdownBlockStyles(theme)}
                             onChannelLinkPress={this.handleChannelLinkPress}
-                            textStyles={getMarkdownTextStyles(this.props.theme)}
+                            textStyles={getMarkdownTextStyles(theme)}
                             value={this.props.bannerText}
                         />
                     </ScrollView>

app/screens/expanded_announcement_banner/index.js

@@ -4,10 +4,10 @@
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 
+import {dismissBanner} from '@actions/views/announcement';
 import {getConfig} from '@mm-redux/selectors/entities/general';
 import {getTheme} from '@mm-redux/selectors/entities/preferences';
-
-import {dismissBanner} from 'app/actions/views/announcement';
+import {isLandscape} from '@selectors/device';
 
 import ExpandedAnnouncementBanner from './expanded_announcement_banner';
 
@@ -17,6 +17,7 @@ function mapStateToProps(state) {
     return {
         allowDismissal: config.AllowBannerDismissal === 'true',
         bannerText: config.BannerText,
+        isLandscape: isLandscape(state),
         theme: getTheme(state),
     };
 }