Simplify tab-bar style, fix bottom bar styling

android/app/build.gradle

@@ -119,8 +119,8 @@ android {
         applicationId "arcade.labs.arc"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1030
-        versionName "0.1.3"
+        versionCode 1032
+        versionName "0.2.0"
     }
 
     splits {

app/components/Screen.tsx

@@ -36,6 +36,10 @@ interface BaseScreenProps {
    * Background color
    */
   backgroundColor?: string
+  /**
+   * Background color of the safe area
+   */
+  safeAreaBackgroundColor?: string
   /**
    * Status bar setting. Defaults to dark.
    */
@@ -195,26 +199,39 @@ export function Screen(props: ScreenProps) {
     safeAreaEdges,
     StatusBarProps,
     statusBarStyle = "light",
+    safeAreaBackgroundColor = "black",
   } = props
 
   const $containerInsets = useSafeAreaInsetsStyle(safeAreaEdges)
 
   return (
-    <View style={[$containerStyle, { backgroundColor }, $containerInsets]}>
-      <StatusBar style={statusBarStyle} {...StatusBarProps} />
-
-      <KeyboardAvoidingView
-        behavior={isIos ? "padding" : undefined}
-        keyboardVerticalOffset={keyboardOffset}
-        {...KeyboardAvoidingViewProps}
-        style={[$keyboardAvoidingViewStyle, KeyboardAvoidingViewProps?.style]}
+    <View style={[$containerStyle, { backgroundColor: colors.black }]}>
+      <View
+        style={[
+          $containerInsets,
+          $keyboardAvoidingViewStyle,
+          { backgroundColor: safeAreaBackgroundColor },
+        ]}
       >
-        {isNonScrolling(props.preset) ? (
-          <ScreenWithoutScrolling {...props} />
-        ) : (
-          <ScreenWithScrolling {...props} />
-        )}
-      </KeyboardAvoidingView>
+        <StatusBar style={statusBarStyle} {...StatusBarProps} />
+
+        <KeyboardAvoidingView
+          behavior={isIos ? "padding" : undefined}
+          keyboardVerticalOffset={keyboardOffset}
+          {...KeyboardAvoidingViewProps}
+          style={[
+            $keyboardAvoidingViewStyle,
+            KeyboardAvoidingViewProps?.style,
+            { backgroundColor },
+          ]}
+        >
+          {isNonScrolling(props.preset) ? (
+            <ScreenWithoutScrolling {...props} />
+          ) : (
+            <ScreenWithScrolling {...props} />
+          )}
+        </KeyboardAvoidingView>
+      </View>
     </View>
   )
 }

app/navigators/TabNavigator.tsx

@@ -1,14 +1,14 @@
-import React from "react"
-import { StyleSheet } from "react-native"
 import { BottomTabScreenProps, createBottomTabNavigator } from "@react-navigation/bottom-tabs"
 import { CompositeScreenProps } from "@react-navigation/native"
+import React from "react"
 import Chat from "app/components/icons/chat.svg"
 import Profile from "app/components/icons/profile.svg"
 import Settings from "app/components/icons/settings.svg"
-import { ContactsScreen, HomeMessagesScreen, ProfileScreen } from "app/screens"
-import { colors } from "app/theme"
+import { StyleSheet, TextStyle, ViewStyle } from "react-native"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { ContactsScreen, HomeMessagesScreen, ProfileScreen } from "../screens"
+import { colors, spacing, typography } from "../theme"
 import { AppStackParamList, AppStackScreenProps } from "./AppNavigator"
-import { TabBar } from "./TabBar"
 
 const logoSize = 30
 
@@ -22,6 +22,7 @@ export type DemoTabParamList = {
 
 /**
  * Helper for automatically generating navigation prop types for each route.
+ *
  * More info: https://reactnavigation.org/docs/typescript/#organizing-types
  */
 export type DemoTabScreenProps<T extends keyof DemoTabParamList> = CompositeScreenProps<
@@ -34,14 +35,23 @@ const Tab = createBottomTabNavigator<DemoTabParamList>()
 const inactiveIconColor = colors.palette.cyan800
 
 export function TabNavigator() {
+  const { bottom } = useSafeAreaInsets()
+
   return (
     <Tab.Navigator
       screenOptions={{
         headerShown: false,
         tabBarHideOnKeyboard: true,
+        tabBarStyle: [
+          $tabBar,
+          { height: bottom + 40, borderTopWidth: 1, borderColor: colors.palette.cyan800 },
+        ],
+        tabBarActiveTintColor: colors.text,
+        tabBarInactiveTintColor: colors.text,
+        tabBarLabelStyle: $tabBarLabel,
+        tabBarItemStyle: $tabBarItem,
+        tabBarShowLabel: false,
       }}
-      tabBar={(props) => <TabBar {...props} />}
-      initialRouteName="Home"
     >
       <Tab.Screen
         name="Contacts"
@@ -89,7 +99,46 @@ export function TabNavigator() {
   )
 }
 
+const $tabBar: ViewStyle = {
+  backgroundColor: colors.background,
+  borderTopColor: colors.separator, // colors.transparent,
+}
+
+const $tabBarItem: ViewStyle = {
+  paddingTop: spacing.medium,
+}
+
+const $tabBarLabel: TextStyle = {
+  fontSize: 12,
+  fontFamily: typography.primary.medium,
+  lineHeight: 16,
+  flex: 1,
+}
+
 const styles = StyleSheet.create({
+  // bottomBar: {
+  //   alignItems: "center",
+  //   backgroundColor: colors2.bottomBarBackground,
+  //   borderColor: colors2.bottomBarBorder,
+  //   borderRadius: 15,
+  //   borderWidth: 1,
+  //   flexDirection: "row",
+  //   height: 60,
+  //   justifyContent: "space-around",
+  //   left: "5%",
+  //   position: "absolute",
+  //   width: "90%",
+  // },
+  // container: {
+  //   backgroundColor: colors.black,
+  //   flex: 1,
+  // },
+  // list: {
+  //   flex: 1,
+  //   marginTop: 40,
+  //   paddingHorizontal: 2,
+  //   paddingVertical: 10,
+  // },
   logo: { color: inactiveIconColor },
   logoActive: { color: colors.tint },
 })

app/screens/ChatScreen.tsx

@@ -193,6 +193,7 @@ export const ChatScreen: FC<ChatScreenProps> = observer(function ChatScreen({
         safeAreaEdges={["bottom"]}
         KeyboardAvoidingViewProps={{ behavior: Platform.OS === "ios" ? "padding" : "height" }}
         keyboardOffset={104}
+        safeAreaBackgroundColor={colors.palette.overlay20}
       >
         <View style={$container}>
           <View style={$main}>

app/screens/DirectMessageScreen.tsx

@@ -142,6 +142,7 @@ export const DirectMessageScreen: FC<DirectMessageScreenProps> = observer(
         safeAreaEdges={["bottom"]}
         KeyboardAvoidingViewProps={{ behavior: Platform.OS === "ios" ? "padding" : "height" }}
         keyboardOffset={104}
+        safeAreaBackgroundColor={colors.palette.overlay20}
       >
         <View style={$container}>
           <View style={$main}>

app/screens/ProfileScreen.tsx

@@ -54,7 +54,7 @@ export const ProfileScreen: FC<ProfileScreenProps> = observer(function ProfileSc
   )
 
   return (
-    <Screen style={$root} preset="scroll" safeAreaEdges={["bottom"]}>
+    <Screen style={$root} preset="scroll">
       <View style={$cover}>
         <AutoImage
           source={{

app/utils/storage/storage.test.ts

@@ -1,8 +1,7 @@
 import { load, loadString, save, saveString, clear, remove } from "./storage"
 
 delete global.crypto
-global.crypto = require('crypto').webcrypto
-
+global.crypto = require("crypto").webcrypto
 
 test("storage: save/load val", async () => {
   await save("some1", { a: 2 })

ios/arcade/Info.plist

@@ -17,11 +17,11 @@
     <key>CFBundlePackageType</key>
     <string>APPL</string>
     <key>CFBundleShortVersionString</key>
-    <string>0.1.3</string>
+    <string>0.2.0</string>
     <key>CFBundleSignature</key>
     <string>????</string>
     <key>CFBundleVersion</key>
-    <string>2</string>
+    <string>1</string>
     <key>ITSAppUsesNonExemptEncryption</key>
     <false />
     <key>LSRequiresIPhoneOS</key>

yarn.lock

@@ -5420,9 +5420,9 @@ electron-to-chromium@^1.4.411:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.417.tgz#a0c7eb992e68287fa50c8da5a5238b01f20b9a82"
   integrity sha512-8rY8HdCxuSVY8wku3i/eDac4g1b4cSbruzocenrqBlzqruAZYHjQCHIjC66dLR9DXhEHTojsC4EjhZ8KmzwXqA==
 
-"elliptic@git+https://github.com/mahrud/elliptic.git":
+"elliptic@https://github.com/mahrud/elliptic":
   version "6.5.0"
-  resolved "git+https://github.com/mahrud/elliptic.git#75637c76678e83c31682fd967c2fa9ff4761b3fc"
+  resolved "https://github.com/mahrud/elliptic#75637c76678e83c31682fd967c2fa9ff4761b3fc"
   dependencies:
     bn.js "^4.4.0"
     brorand "^1.0.1"