Fix a performance issue with some lists

Closes #3103

Both FlatList and SectionList offer as the main performance benefit
rendering a 'window' and not their whole contents. Sometimes in the
past, by mistake, we have rendered one of these in full height but
scrollable thanks to the ScrollView they are inside.

By analyzing all of our usage, I pinpointed the only major problem
we have, that resulted in a performance issues in the Emoji picker
and the `UsersScreen` (when one searches the 'all users' list),
which manifested as the list updating too infrequently during search.

Our default `Screen` behavior is to be 'scrollable' by default.
We should consider changing the default behavior. In the meantime
any screen that has a `FlatList` or `SectionList` directly inside
should switch to `contentScrollable={false}`.

Author: borisyankov

src/chat/GroupDetailsScreen.js

@@ -33,7 +33,7 @@ class GroupDetailsScreen extends PureComponent<Props> {
     const { recipients } = navigation.state.params;
 
     return (
-      <Screen title="Recipients">
+      <Screen title="Recipients" scrollEnabled={false}>
         <FlatList
           initialNumToRender={10}
           data={recipients}

src/diagnostics/NotificationDiagScreen.js

@@ -25,7 +25,7 @@ class NotificationDiagScreen extends PureComponent<Props> {
       'Initial notification': JSON.stringify(config.startup.notification),
     };
     return (
-      <Screen title="Notification Diagnostics">
+      <Screen title="Notification Diagnostics" scrollEnabled={false}>
         <FlatList
           data={Object.keys(variables)}
           keyExtractor={item => item}

src/diagnostics/StorageScreen.js

@@ -28,7 +28,7 @@ class StorageScreen extends PureComponent<Props> {
     const storageSizes = calculateKeyStorageSizes(state);
 
     return (
-      <Screen title="Storage">
+      <Screen title="Storage" scrollEnabled={false}>
         <FlatList
           data={storageSizes}
           keyExtractor={item => item.key}

src/diagnostics/TimingScreen.js

@@ -9,7 +9,7 @@ import timing from '../utils/timing';
 export default class TimingScreen extends PureComponent<{}> {
   render() {
     return (
-      <Screen title="Timing">
+      <Screen title="Timing" scrollEnabled={false}>
         <FlatList
           data={timing.log}
           keyExtractor={(item, index) => index.toString()}

src/diagnostics/VariablesScreen.js

@@ -17,7 +17,7 @@ export default class VariablesScreen extends PureComponent<{}> {
     };
 
     return (
-      <Screen title="Variables">
+      <Screen title="Variables" scrollEnabled={false}>
         <FlatList
           data={Object.keys(variables)}
           keyExtractor={item => item}

src/emoji/EmojiPickerScreen.js

@@ -59,7 +59,7 @@ class EmojiPickerScreen extends PureComponent<Props, State> {
     const emojis = getFilteredEmojiList(filter, realmEmoji);
 
     return (
-      <Screen search searchBarOnChange={this.handleInputChange}>
+      <Screen search scrollEnabled={false} searchBarOnChange={this.handleInputChange}>
         <FlatList
           keyboardShouldPersistTaps="always"
           initialNumToRender={20}

src/settings/LanguageScreen.js

@@ -26,7 +26,7 @@ class LanguageScreen extends PureComponent<Props> {
     const { locale } = this.props;
 
     return (
-      <Screen title="Language">
+      <Screen title="Language" scrollEnabled={false}>
         <LanguagePicker value={locale} onValueChange={this.handleLocaleChange} />
       </Screen>
     );

src/users/UsersScreen.js

@@ -21,7 +21,7 @@ export default class UsersScreen extends PureComponent<Props, State> {
     const { filter } = this.state;
 
     return (
-      <Screen search autoFocus searchBarOnChange={this.handleFilterChange}>
+      <Screen search autoFocus scrollEnabled={false} searchBarOnChange={this.handleFilterChange}>
         <UsersCard filter={filter} />
       </Screen>
     );