scroll view and safe area for homescreen. BottomNavBar font resize.

BesLogic · May 23, 2024 · d147bc1 · d147bc1
1 parent d610cf8
commit d147bc1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 26 deletions.
diff --git a/apps/releaf/mobile/src/app/home/Home.tsx b/apps/releaf/mobile/src/app/home/Home.tsx
@@ -1,5 +1,6 @@
-import { View, Text } from 'react-native';
+import { View, Text, ScrollView } from 'react-native';
 import { TreeStateCard } from './components/TreeStateCard';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export class TreeState {
   name = '';
@@ -31,27 +32,31 @@ const trees = [
 
 export const Home = () => {
   return (
-    <View style={{ backgroundColor: '#ffffff' }}>
-      <View
-        style={{
-          margin: 10,
-        }}
-      >
-        <Text>Home</Text>
-      </View>
+    <SafeAreaView>
+      <ScrollView>
+        <View style={{ backgroundColor: '#ffffff' }}>
+          <View
+            style={{
+              margin: 10,
+            }}
+          >
+            <Text>Home</Text>
+          </View>
 
-      {trees.map((tree, index) => (
-        <View
-          key={index}
-          style={{
-            marginBottom: index !== trees.length - 1 ? 15 : 0,
-            marginLeft: 20,
-            marginRight: 20,
-          }}
-        >
-          <TreeStateCard treeState={tree}></TreeStateCard>
+          {trees.map((tree, index) => (
+            <View
+              key={index}
+              style={{
+                marginBottom: index !== trees.length - 1 ? 15 : 0,
+                marginLeft: 20,
+                marginRight: 20,
+              }}
+            >
+              <TreeStateCard treeState={tree}></TreeStateCard>
+            </View>
+          ))}
         </View>
-      ))}
-    </View >
+      </ScrollView>
+    </SafeAreaView>
   );
 };
diff --git a/apps/releaf/mobile/src/app/navigation/components/Icons.tsx b/apps/releaf/mobile/src/app/navigation/components/Icons.tsx
@@ -39,6 +39,8 @@ export const Icons = (props: { type: IconType; isSelected: boolean }) => {
 
   let color = '#FFFFFF';
 
+  const fontSize = 12;
+
   if (props.isSelected) {
     componentStyles = [styles.circle, styles.center];
     color = '#009959';
@@ -51,21 +53,25 @@ export const Icons = (props: { type: IconType; isSelected: boolean }) => {
     return (
       <View style={componentStyles}>
         <StoreFront fill={color} />
-        <Text style={{ color: color }}>{!props.isSelected ? 'Order' : ''}</Text>
+        <Text style={{ fontSize: fontSize, color: color }}>
+          {!props.isSelected ? 'Order' : ''}
+        </Text>
       </View>
     );
   } else if (props.type === IconType.Face) {
     return (
       <View style={componentStyles}>
         <Face fill={color} />
-        <Text style={{ color: color }}>{!props.isSelected ? 'Me' : ''}</Text>
+        <Text style={{ fontSize: fontSize, color: color }}>
+          {!props.isSelected ? 'Me' : ''}
+        </Text>
       </View>
     );
   } else if (props.type === IconType.MenuBook) {
     return (
       <View style={componentStyles}>
         <MenuBook fill={color} />
-        <Text style={{ color: color }}>
+        <Text style={{ fontSize: fontSize, color: color }}>
           {!props.isSelected ? 'Knowledge' : ''}
         </Text>
       </View>
@@ -74,7 +80,7 @@ export const Icons = (props: { type: IconType; isSelected: boolean }) => {
     return (
       <View style={componentStyles}>
         <Notification fill={color} />
-        <Text style={{ color: color }}>
+        <Text style={{ fontSize: fontSize, color: color }}>
           {!props.isSelected ? 'Notification' : ''}
         </Text>
       </View>
@@ -83,7 +89,7 @@ export const Icons = (props: { type: IconType; isSelected: boolean }) => {
     return (
       <View style={componentStyles}>
         <PottedPlant fill={color} />
-        <Text style={{ color: color }}>
+        <Text style={{ fontSize: fontSize, color: color }}>
           {!props.isSelected ? 'Details' : ''}
         </Text>
       </View>