Merge pull request #3020 from BlueWallet/contentinsetr

REF: Use automatic content insets for list.

screen/settings/about.js

@@ -5,15 +5,7 @@ import { Icon } from 'react-native-elements';
 import { getApplicationName, getVersion, getBundleId, getBuildNumber, getUniqueId } from 'react-native-device-info';
 import Rate, { AndroidMarket } from 'react-native-rate';
 
-import {
-  BlueButton,
-  BlueCard,
-  BlueListItem,
-  BlueSpacing20,
-  BlueTextCentered,
-  SafeBlueArea,
-  BlueCopyToClipboardButton,
-} from '../../BlueComponents';
+import { BlueButton, BlueCard, BlueListItem, BlueSpacing20, BlueTextCentered, BlueCopyToClipboardButton } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import loc from '../../loc';
 
@@ -114,113 +106,111 @@ const About = () => {
   };
 
   return (
-    <SafeBlueArea>
-      <ScrollView testID="AboutScrollView">
-        <BlueCard>
-          <View style={styles.center}>
-            <Image style={styles.logo} source={require('../../img/bluebeast.png')} />
-            <Text style={styles.textFree}>{loc.settings.about_free}</Text>
-            <Text style={styles.textBackup}>{loc.settings.about_backup}</Text>
-            <BlueButton onPress={handleOnRatePress} title={loc.settings.about_review + ' ⭐🙏'} />
-          </View>
-        </BlueCard>
-        <BlueListItem
-          leftIcon={{
-            name: 'twitter',
-            type: 'font-awesome',
-            color: '#1da1f2',
-          }}
-          onPress={handleOnTwitterPress}
-          title={loc.settings.about_sm_twitter}
-        />
-        <BlueListItem
-          leftIcon={{
-            name: 'telegram',
-            type: 'font-awesome',
-            color: '#0088cc',
-          }}
-          onPress={handleOnTelegramPress}
-          title={loc.settings.about_sm_telegram}
-        />
-        <BlueListItem
-          leftIcon={{
-            name: 'discord',
-            type: 'font-awesome-5',
-            color: '#7289da',
-          }}
-          onPress={handleOnDiscordPress}
-          title={loc.settings.about_sm_discord}
-        />
-        <BlueCard>
-          <View style={styles.buildWith}>
-            <BlueSpacing20 />
-
-            <BlueTextCentered>{loc.settings.about_awesome} 👍</BlueTextCentered>
-            <BlueSpacing20 />
-            <BlueTextCentered>React Native</BlueTextCentered>
-            <BlueTextCentered>bitcoinjs-lib</BlueTextCentered>
-            <BlueTextCentered>Nodejs</BlueTextCentered>
-            <BlueTextCentered>Electrum server</BlueTextCentered>
-            <BlueSpacing20 />
-
-            <TouchableOpacity onPress={handleOnGithubPress} style={styles.buttonLink}>
-              <Icon size={22} name="github" type="font-awesome-5" color={colors.foregroundColor} />
-              <Text style={styles.textLink}>{loc.settings.about_sm_github}</Text>
-            </TouchableOpacity>
-          </View>
-        </BlueCard>
-        <BlueListItem
-          leftIcon={{
-            name: 'book',
-            type: 'font-awesome',
-            color: '#9AA0AA',
-          }}
-          chevron
-          onPress={handleOnReleaseNotesPress}
-          title={loc.settings.about_release_notes}
-        />
-        <BlueListItem
-          leftIcon={{
-            name: 'law',
-            type: 'octicon',
-            color: colors.foregroundColor,
-          }}
-          chevron
-          onPress={handleOnLicensingPress}
-          title={loc.settings.about_license}
-        />
-        <BlueListItem
-          leftIcon={{
-            name: 'flask',
-            type: 'font-awesome',
-            color: '#FC0D44',
-          }}
-          chevron
-          onPress={handleOnSelfTestPress}
-          testID="RunSelfTestButton"
-          title={loc.settings.about_selftest}
-        />
-        <BlueSpacing20 />
-        <BlueSpacing20 />
-        <BlueTextCentered>
-          {getApplicationName()} ver {getVersion()} (build {getBuildNumber()})
-        </BlueTextCentered>
-        <BlueTextCentered>{new Date(getBuildNumber() * 1000).toGMTString()}</BlueTextCentered>
-        <BlueTextCentered>{getBundleId()}</BlueTextCentered>
-        <BlueTextCentered>
-          w, h = {width}, {height}
-        </BlueTextCentered>
-        <BlueTextCentered>Unique ID: {getUniqueId()}</BlueTextCentered>
-        <View style={styles.copyToClipboard}>
-          <BlueCopyToClipboardButton
-            stringToCopy={(Platform.OS === 'android' ? 'user.id:' : 'app.device:') + getUniqueId()}
-            displayText={loc.transactions.details_copy}
-          />
+    <ScrollView testID="AboutScrollView" contentInsetAdjustmentBehavior="automatic">
+      <BlueCard>
+        <View style={styles.center}>
+          <Image style={styles.logo} source={require('../../img/bluebeast.png')} />
+          <Text style={styles.textFree}>{loc.settings.about_free}</Text>
+          <Text style={styles.textBackup}>{loc.settings.about_backup}</Text>
+          <BlueButton onPress={handleOnRatePress} title={loc.settings.about_review + ' ⭐🙏'} />
         </View>
-        <BlueSpacing20 />
-        <BlueSpacing20 />
-      </ScrollView>
-    </SafeBlueArea>
+      </BlueCard>
+      <BlueListItem
+        leftIcon={{
+          name: 'twitter',
+          type: 'font-awesome',
+          color: '#1da1f2',
+        }}
+        onPress={handleOnTwitterPress}
+        title={loc.settings.about_sm_twitter}
+      />
+      <BlueListItem
+        leftIcon={{
+          name: 'telegram',
+          type: 'font-awesome',
+          color: '#0088cc',
+        }}
+        onPress={handleOnTelegramPress}
+        title={loc.settings.about_sm_telegram}
+      />
+      <BlueListItem
+        leftIcon={{
+          name: 'discord',
+          type: 'font-awesome-5',
+          color: '#7289da',
+        }}
+        onPress={handleOnDiscordPress}
+        title={loc.settings.about_sm_discord}
+      />
+      <BlueCard>
+        <View style={styles.buildWith}>
+          <BlueSpacing20 />
+
+          <BlueTextCentered>{loc.settings.about_awesome} 👍</BlueTextCentered>
+          <BlueSpacing20 />
+          <BlueTextCentered>React Native</BlueTextCentered>
+          <BlueTextCentered>bitcoinjs-lib</BlueTextCentered>
+          <BlueTextCentered>Nodejs</BlueTextCentered>
+          <BlueTextCentered>Electrum server</BlueTextCentered>
+          <BlueSpacing20 />
+
+          <TouchableOpacity onPress={handleOnGithubPress} style={styles.buttonLink}>
+            <Icon size={22} name="github" type="font-awesome-5" color={colors.foregroundColor} />
+            <Text style={styles.textLink}>{loc.settings.about_sm_github}</Text>
+          </TouchableOpacity>
+        </View>
+      </BlueCard>
+      <BlueListItem
+        leftIcon={{
+          name: 'book',
+          type: 'font-awesome',
+          color: '#9AA0AA',
+        }}
+        chevron
+        onPress={handleOnReleaseNotesPress}
+        title={loc.settings.about_release_notes}
+      />
+      <BlueListItem
+        leftIcon={{
+          name: 'law',
+          type: 'octicon',
+          color: colors.foregroundColor,
+        }}
+        chevron
+        onPress={handleOnLicensingPress}
+        title={loc.settings.about_license}
+      />
+      <BlueListItem
+        leftIcon={{
+          name: 'flask',
+          type: 'font-awesome',
+          color: '#FC0D44',
+        }}
+        chevron
+        onPress={handleOnSelfTestPress}
+        testID="RunSelfTestButton"
+        title={loc.settings.about_selftest}
+      />
+      <BlueSpacing20 />
+      <BlueSpacing20 />
+      <BlueTextCentered>
+        {getApplicationName()} ver {getVersion()} (build {getBuildNumber()})
+      </BlueTextCentered>
+      <BlueTextCentered>{new Date(getBuildNumber() * 1000).toGMTString()}</BlueTextCentered>
+      <BlueTextCentered>{getBundleId()}</BlueTextCentered>
+      <BlueTextCentered>
+        w, h = {width}, {height}
+      </BlueTextCentered>
+      <BlueTextCentered>Unique ID: {getUniqueId()}</BlueTextCentered>
+      <View style={styles.copyToClipboard}>
+        <BlueCopyToClipboardButton
+          stringToCopy={(Platform.OS === 'android' ? 'user.id:' : 'app.device:') + getUniqueId()}
+          displayText={loc.transactions.details_copy}
+        />
+      </View>
+      <BlueSpacing20 />
+      <BlueSpacing20 />
+    </ScrollView>
   );
 };
 

screen/settings/language.js

@@ -4,7 +4,7 @@ import { FlatList, StyleSheet } from 'react-native';
 import { useNavigation, useTheme } from '@react-navigation/native';
 
 import navigationStyle from '../../components/navigationStyle';
-import { SafeBlueArea, BlueListItem, BlueLoading } from '../../BlueComponents';
+import { BlueListItem } from '../../BlueComponents';
 import loc from '../../loc';
 import { AvailableLanguages } from '../../loc/languages';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -17,7 +17,6 @@ const styles = StyleSheet.create({
 
 const Language = () => {
   const { setLanguage, language } = useContext(BlueStorageContext);
-  const [isLoading, setIsLoading] = useState(true);
   const [selectedLanguage, setSelectedLanguage] = useState(loc.getLanguage());
   const { setOptions } = useNavigation();
   const { colors } = useTheme();
@@ -26,9 +25,6 @@ const Language = () => {
       backgroundColor: colors.background,
     },
   });
-  useEffect(() => {
-    setIsLoading(false);
-  }, []);
 
   useEffect(() => {
     setOptions({ title: loc.settings.language });
@@ -54,18 +50,15 @@ const Language = () => {
     );
   };
 
-  return isLoading ? (
-    <BlueLoading />
-  ) : (
-    <SafeBlueArea>
-      <FlatList
-        style={[styles.flex, stylesHook.flex]}
-        keyExtractor={(_item, index) => `${index}`}
-        data={AvailableLanguages}
-        renderItem={renderItem}
-        initialNumToRender={25}
-      />
-    </SafeBlueArea>
+  return (
+    <FlatList
+      style={[styles.flex, stylesHook.flex]}
+      keyExtractor={(_item, index) => `${index}`}
+      data={AvailableLanguages}
+      renderItem={renderItem}
+      initialNumToRender={25}
+      contentInsetAdjustmentBehavior="automatic"
+    />
   );
 };