[React Native] Enable scrolling of the thumbnails

react/features/filmStrip/components/FilmStrip.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { ScrollView } from 'react-native';
 
 import { Container } from '../../base/react';
 
@@ -22,14 +23,34 @@ class FilmStrip extends Component {
             <Container
                 style = { styles.filmStrip }
                 visible = { this.props.visible }>
-                {
+                <ScrollView
-                    this.props.participants
+
-                        .sort((a, b) => b.local - a.local)
+                    // eslint-disable-next-line react/jsx-curly-spacing
-                        .map(p =>
+                    contentContainerStyle = {
-                            <Thumbnail
+                        styles.filmStripScrollViewContentContainer
-                                key = { p.id }
+                    } // eslint-disable-line react/jsx-curly-spacing
-                                participant = { p } />)
+                    horizontal = { true }
-                }
+                    showsHorizontalScrollIndicator = { false }
+                    showsVerticalScrollIndicator = { false }>
+                    {
+                        this.props.participants
+
+                            // Group the remote participants so that the local
+                            // participant does not appear in between remote
+                            // participants.
+                            .sort((a, b) => b.local - a.local)
+
+                            // Have the local participant at the rightmost side.
+                            // Then have the remote participants from right to
+                            // left with the newest added/joined to the leftmost
+                            // side.
+                            .reverse()
+                            .map(p =>
+                                <Thumbnail
+                                    key = { p.id }
+                                    participant = { p } />)
+                    }
+                </ScrollView>
             </Container>
         );
     }

react/features/filmStrip/components/styles.js

@@ -36,15 +36,26 @@ export const styles = {
     },
 
     /**
-     * Participants container style.
+     * The style of the Container which represents the very film strip.
      */
     filmStrip: {
+        alignItems: 'flex-end',
         alignSelf: 'stretch',
         bottom: 10,
         flex: 1,
-        flexDirection: 'row',
+        flexDirection: 'column',
+        left: 0,
         position: 'absolute',
-        right: 5
+        right: 0
+    },
+
+    /**
+     * The style of the content container of the ScrollView which is placed
+     * inside filmStrip and which contains the participants' thumbnails in order
+     * to allow scrolling through them if they do not fit within the display.
+     */
+    filmStripScrollViewContentContainer: {
+        paddingHorizontal: 10
     },
 
     /**