Small screens UI fix

Author: hmziqrs

app/components/PageView/index.js

@@ -40,7 +40,11 @@ function PageView({
 
   const child = (
     <>
-      <SafeAreaView {...baseProps} style={[styles.base].concat([baseStyle])}>
+      <SafeAreaView
+        {...baseProps}
+        style={[styles.base].concat([baseStyle])}
+        forceInset={{ top: type !== 'scroll' ? 'always' : 'never' }}
+      >
         {afterRender}
         {header ? <Header {...header} /> : null}
         <Comp

app/screens/AboutApp/index.js

@@ -13,7 +13,12 @@ import { links } from './data';
 function AboutAppScreen({ navigation }) {
   const styles = useDynamicStyleSheet(rawStyles);
   return (
-    <PageView navigation={navigation} style={styles.container} baseStyle={styles.screen}>
+    <PageView
+      type="scroll"
+      navigation={navigation}
+      style={styles.container}
+      baseStyle={styles.screen}
+    >
       <Text style={styles.title}>About App</Text>
       <Text style={styles.description}>React Native Loop is just a fun experimint of mine.</Text>
       <Text style={styles.description2}>

app/screens/AboutDeveloper/index.js

@@ -16,15 +16,7 @@ import styles from './styles';
 
 function AboutDeveloperScreen({ navigation }) {
   return (
-    <PageView
-      disableMaxContainer
-      type="scroll"
-      navigation={navigation}
-      baseStyle={styles.page}
-      baseProps={{
-        forceInset: { bottom: false },
-      }}
-    >
+    <PageView type="scroll" disableMaxContainer navigation={navigation} baseStyle={styles.page}>
       <View style={styles.header}>
         <TouchNative style={styles.backButtonBase} onPress={() => navigation.pop()}>
           <Icon name="chevron-left" style={styles.backButtonIcon} />

app/screens/AboutDeveloper/styles.js

@@ -11,10 +11,6 @@ const AVATAR_TOP_OFFSET = RED_SECTION_HEIGHT - AVATAR_BORDER_WIDTH - AVATAR_SIZE
 const AVATAR_LEFT_OFFSET = dimensions.width / 2 - AVATAR_SIZE / 2;
 
 const styles = StyleSheet.create({
-  background: {
-    flex: 1,
-    backgroundColor: colors.primary,
-  },
   page: {
     backgroundColor: colors.primary,
   },

app/screens/Level/index.js

@@ -1,7 +1,6 @@
 import React, { useRef, useContext, useEffect } from 'react';
 import { View, StatusBar, Animated } from 'react-native';
 import PropTypes from 'prop-types';
-import { useDarkMode } from 'react-native-dark-mode';
 import { TouchNative } from 'rn-hgl';
 
 import { SettingsContext } from 'contexts/Settings';

app/screens/Levels/index.js

@@ -13,7 +13,7 @@ import rawStyles from './styles';
 function HomeScreen({ navigation }) {
   const styles = useDynamicStyleSheet(rawStyles);
   return (
-    <PageView navigation={navigation} baseStyle={styles.screen}>
+    <PageView type="scroll" navigation={navigation} baseStyle={styles.screen}>
       <Text style={styles.title}>Levels</Text>
       <View style={styles.levelsHolder}>
         {Object.keys(levels).map((level) => (

app/screens/Settings/index.js

@@ -30,7 +30,12 @@ function SettingsScreen({ navigation }) {
   }, [volume]);
 
   return (
-    <PageView navigation={navigation} style={styles.container} baseStyle={styles.screen}>
+    <PageView
+      type="scroll"
+      navigation={navigation}
+      style={styles.container}
+      baseStyle={styles.screen}
+    >
       <Text style={styles.title}>Settings</Text>
       <Text style={styles.heading}>Volume: {parseInt(volume * 100, 10)}</Text>
       <View>

package.json

@@ -71,7 +71,7 @@
     "redux-immutable": "4.0.0",
     "redux-saga": "1.1.3",
     "reselect": "4.0.0",
-    "rn-hgl": "0.6.4"
+    "rn-hgl": "0.6.5"
   },
   "devDependencies": {
     "@babel/cli": "7.7.5",