feat(chat/native) fixed scroll inside chat room

react/features/chat/components/native/ChatMessageGroup.js

@@ -6,7 +6,6 @@ import { FlatList } from 'react-native';
 import { MESSAGE_TYPE_LOCAL, MESSAGE_TYPE_REMOTE } from '../../constants';
 
 import ChatMessage from './ChatMessage';
-import styles from './styles';
 
 type Props = {
 
@@ -43,8 +42,7 @@ export default class ChatMessageGroup extends Component<Props> {
                 data = { this.props.messages }
                 inverted = { true }
                 keyExtractor = { this._keyExtractor }
-                renderItem = { this._renderMessage }
-                style = { styles.messageContainer } />
+                renderItem = { this._renderMessage } />
         );
     }
 

react/features/chat/components/native/MessageContainer.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { FlatList, Text, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { translate } from '../../../base/i18n';
@@ -54,6 +55,7 @@ class MessageContainer extends AbstractMessageContainer<Props> {
         return (
             <FlatList
                 ListEmptyComponent = { this._renderListEmptyComponent }
+                bounces = { false }
                 data = { data }
 
                 // Workaround for RN bug:
@@ -61,8 +63,7 @@ class MessageContainer extends AbstractMessageContainer<Props> {
                 inverted = { Boolean(data.length) }
                 keyExtractor = { this._keyExtractor }
                 keyboardShouldPersistTaps = 'always'
-                renderItem = { this._renderMessageGroup }
-                style = { styles.messageContainer } />
+                renderItem = { this._renderMessageGroup } />
         );
     }
 
@@ -110,7 +111,11 @@ class MessageContainer extends AbstractMessageContainer<Props> {
      * @returns {React$Element<*>}
      */
     _renderMessageGroup({ item: messages }) {
-        return <ChatMessageGroup messages = { messages } />;
+        return (
+            <ScrollView>
+                <ChatMessageGroup messages = { messages } />
+            </ScrollView>
+        );
     }
 }
 

react/features/chat/components/native/styles.js

@@ -71,10 +71,6 @@ export default {
         flexDirection: 'row'
     },
 
-    messageContainer: {
-        flex: 1
-    },
-
     /**
      * Wrapper View for the entire block.
      */