tweak values after testing on the Android device

packages/rn-tester/js/RNTesterAppShared.js

@@ -13,7 +13,7 @@ import type {RNTesterModuleInfo, ScreenTypes} from './types/RNTesterTypes';
 import ReportFullyDrawnView from '../ReportFullyDrawnView/ReportFullyDrawnView';
 import RNTesterModuleContainer from './components/RNTesterModuleContainer';
 import RNTesterModuleList from './components/RNTesterModuleList';
-import RNTesterNavBar, {navBarHeight} from './components/RNTesterNavbar';
+import RNTesterNavBar from './components/RNTesterNavbar';
 import {RNTesterThemeContext, themes} from './components/RNTesterTheme';
 import RNTTitleBar from './components/RNTTitleBar';
 import {title as PlaygroundTitle} from './examples/Playground/PlaygroundExample';
@@ -330,7 +330,10 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   bottomNavbar: {
-    height: navBarHeight,
+    height: Platform.select({
+      android: 56,
+      ios: 68,
+    }),
   },
   hidden: {
     display: 'none',

packages/rn-tester/js/components/RNTesterNavbar.js

@@ -9,12 +9,11 @@
  */
 
 import type {ScreenTypes} from '../types/RNTesterTypes';
-import type {RNTesterTheme} from './RNTesterTheme';
 
 import {RNTesterThemeContext} from './RNTesterTheme';
 import * as React from 'react';
-import {useContext} from 'react';
-import {Image, Pressable, StyleSheet, Text, View} from 'react-native';
+import {useContext, useState} from 'react';
+import {Image, Platform, Pressable, StyleSheet, Text, View} from 'react-native';
 
 type NavBarOnPressHandler = ({screen: ScreenTypes}) => void;
 
@@ -22,99 +21,43 @@ type NavBarOnPressHandler = ({screen: ScreenTypes}) => void;
  * LTI update could not be added via codemod */
 const NavbarButton = ({
   testID,
-  theme,
   isActive,
-  activeImage,
-  inactiveImage,
+  icon,
   label,
   handlePress,
   iconStyle,
-}) => (
-  <Pressable
-    testID={testID}
-    onPress={handlePress}
-    style={[styles.navButton, {backgroundColor: theme.BackgroundColor}]}>
-    <View
-      style={[styles.pressableContent, isActive ? styles.activeBar : null]}
-      collapsable={false}>
-      <Image
-        style={iconStyle}
-        source={isActive ? activeImage : inactiveImage}
-      />
-      <Text
-        style={{
-          color: isActive
-            ? theme.NavBarLabelActiveColor
-            : theme.NavBarLabelInactiveColor,
-        }}>
-        {label}
-      </Text>
-    </View>
-  </Pressable>
-);
+}): React.Node => {
+  const theme = useContext(RNTesterThemeContext);
+  const [isPressed, setPressed] = useState(false);
 
-const ComponentTab = ({
-  isComponentActive,
-  handleNavBarPress,
-  theme,
-}: $ReadOnly<{
-  handleNavBarPress: NavBarOnPressHandler,
-  isComponentActive: boolean,
-  theme: RNTesterTheme,
-}>) => (
-  <NavbarButton
-    testID="components-tab"
-    label="Components"
-    handlePress={() => handleNavBarPress({screen: 'components'})}
-    activeImage={theme.NavBarComponentsActiveIcon}
-    inactiveImage={theme.NavBarComponentsInactiveIcon}
-    isActive={isComponentActive}
-    theme={theme}
-    iconStyle={styles.componentIcon}
-  />
-);
-
-const PlaygroundTab = ({
-  isComponentActive,
-  handleNavBarPress,
-  theme,
-}: $ReadOnly<{
-  handleNavBarPress: NavBarOnPressHandler,
-  isComponentActive: boolean,
-  theme: RNTesterTheme,
-}>) => (
-  <NavbarButton
-    testID="playground-tab"
-    label="Playground"
-    handlePress={() => handleNavBarPress({screen: 'playgrounds'})}
-    activeImage={theme.NavBarPlaygroundActiveIcon}
-    inactiveImage={theme.NavBarPlaygroundInactiveIcon}
-    isActive={isComponentActive}
-    theme={theme}
-    iconStyle={styles.componentIcon}
-  />
-);
-
-const APITab = ({
-  isAPIActive,
-  handleNavBarPress,
-  theme,
-}: $ReadOnly<{
-  handleNavBarPress: NavBarOnPressHandler,
-  isAPIActive: boolean,
-  theme: RNTesterTheme,
-}>) => (
-  <NavbarButton
-    testID="apis-tab"
-    label="APIs"
-    handlePress={() => handleNavBarPress({screen: 'apis'})}
-    activeImage={theme.NavBarAPIsActiveIcon}
-    inactiveImage={theme.NavBarAPIsInactiveIcon}
-    isActive={isAPIActive}
-    theme={theme}
-    iconStyle={styles.apiIcon}
-  />
-);
+  return (
+    <Pressable
+      testID={testID}
+      onPress={handlePress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[styles.navButton, {backgroundColor: theme.BackgroundColor}]}>
+      <View
+        style={[
+          styles.pressableContent,
+          isPressed && {transform: 'scale(1.025)'},
+        ]}
+        collapsable={false}>
+        <Image
+          style={[styles.icon, iconStyle]}
+          tintColor={isActive ? theme.BrandColor : theme.TertiaryLabelColor}
+          source={icon}
+        />
+        <Text
+          style={{
+            color: isActive ? theme.LabelColor : theme.SecondaryLabelColor,
+          }}>
+          {label}
+        </Text>
+      </View>
+    </Pressable>
+  );
+};
 
 type Props = $ReadOnly<{
   handleNavBarPress: NavBarOnPressHandler,
@@ -134,60 +77,70 @@ const RNTesterNavbar = ({
   const isPlaygroundActive = screen === 'playgrounds';
 
   return (
-    <View>
-      <View style={styles.buttonContainer}>
-        <ComponentTab
-          isComponentActive={isComponentActive}
-          handleNavBarPress={handleNavBarPress}
-          theme={theme}
-        />
-        <PlaygroundTab
-          isComponentActive={isPlaygroundActive}
-          handleNavBarPress={handleNavBarPress}
-          theme={theme}
-        />
-        <APITab
-          isAPIActive={isAPIActive}
-          handleNavBarPress={handleNavBarPress}
-          theme={theme}
-        />
-      </View>
+    <View
+      style={[
+        styles.buttonContainer,
+        {borderTopColor: theme.QuaternaryLabelColor},
+      ]}>
+      <NavbarButton
+        testID="components-tab"
+        label="Components"
+        handlePress={() => handleNavBarPress({screen: 'components'})}
+        icon={require('../assets/bottom-nav-components-icon.png')}
+        isActive={isComponentActive}
+      />
+      <NavbarButton
+        testID="apis-tab"
+        label="APIs"
+        handlePress={() => handleNavBarPress({screen: 'apis'})}
+        icon={require('../assets/bottom-nav-apis-icon.png')}
+        isActive={isAPIActive}
+        iconStyle={styles.apiIcon}
+      />
+      <NavbarButton
+        testID="playground-tab"
+        label="Playground"
+        handlePress={() => handleNavBarPress({screen: 'playgrounds'})}
+        icon={require('../assets/bottom-nav-playgrounds-icon.png')}
+        isActive={isPlaygroundActive}
+      />
     </View>
   );
 };
 
-export const navBarHeight = 65;
-
 const styles = StyleSheet.create({
   buttonContainer: {
     flex: 1,
     flexDirection: 'row',
+    borderTopWidth: StyleSheet.hairlineWidth,
   },
-  componentIcon: {
+  icon: {
     width: 20,
-    height: 20,
+    height: 21,
     alignSelf: 'center',
   },
   apiIcon: {
     width: 30,
-    height: 20,
-    alignSelf: 'center',
-  },
-  activeBar: {
-    borderTopWidth: 2,
-    borderColor: '#005DFF',
   },
   navButton: {
     flex: 1,
-    height: navBarHeight,
     justifyContent: 'center',
     alignItems: 'center',
+    paddingTop: Platform.select({
+      android: 10,
+      ios: 0,
+    }),
+    paddingBottom: Platform.select({
+      android: 0,
+      ios: 10,
+    }),
   },
   pressableContent: {
     flex: 1,
     alignSelf: 'stretch',
     justifyContent: 'center',
     alignItems: 'center',
+    rowGap: 4,
   },
 });
 

packages/rn-tester/js/components/RNTesterTheme.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {ColorValue, ImageSource} from 'react-native';
+import type {ColorValue} from 'react-native';
 
 import * as React from 'react';
 import {createContext} from 'react';
@@ -16,6 +16,8 @@ import {use} from 'react';
 import {Appearance} from 'react-native';
 
 export type RNTesterTheme = $ReadOnly<{
+  BrandColor: ColorValue,
+
   LabelColor: ColorValue,
   SecondaryLabelColor: ColorValue,
   TertiaryLabelColor: ColorValue,
@@ -44,19 +46,12 @@ export type RNTesterTheme = $ReadOnly<{
   ToolbarColor: ColorValue,
   BackgroundColor: ColorValue,
   BorderColor: ColorValue,
-
-  NavBarLabelActiveColor: ColorValue,
-  NavBarLabelInactiveColor: ColorValue,
-  NavBarComponentsActiveIcon: ImageSource,
-  NavBarComponentsInactiveIcon: ImageSource,
-  NavBarAPIsActiveIcon: ImageSource,
-  NavBarAPIsInactiveIcon: ImageSource,
-  NavBarPlaygroundActiveIcon: ImageSource,
-  NavBarPlaygroundInactiveIcon: ImageSource,
   ...
 }>;
 
 export const RNTesterLightTheme = {
+  BrandColor: '#087ea4ff',
+
   LabelColor: '#000000ff',
   SecondaryLabelColor: '#3c3c4399',
   TertiaryLabelColor: '#3c3c434c',
@@ -86,18 +81,11 @@ export const RNTesterLightTheme = {
   ToolbarColor: '#e9eaedff',
   BackgroundColor: '#f3f8ffff',
   BorderColor: '#005dffff',
-
-  NavBarLabelActiveColor: '#5e5f62ff',
-  NavBarLabelInactiveColor: '#b1b4baff',
-  NavBarComponentsActiveIcon: require('./../assets/bottom-nav-components-icon-dark.png'),
-  NavBarComponentsInactiveIcon: require('./../assets/bottom-nav-components-icon-light.png'),
-  NavBarAPIsActiveIcon: require('./../assets/bottom-nav-apis-icon-dark.png'),
-  NavBarAPIsInactiveIcon: require('./../assets/bottom-nav-apis-icon-light.png'),
-  NavBarPlaygroundActiveIcon: require('./../assets/bottom-nav-playgrounds-icon-dark.png'),
-  NavBarPlaygroundInactiveIcon: require('./../assets/bottom-nav-playgrounds-icon-light.png'),
 };
 
 export const RNTesterDarkTheme = {
+  BrandColor: '#58c4dcff',
+
   LabelColor: '#ffffffff',
   SecondaryLabelColor: '#ebebf599',
   TertiaryLabelColor: '#ebebf54c',
@@ -127,15 +115,6 @@ export const RNTesterDarkTheme = {
   ToolbarColor: '#3c3c43ff',
   BackgroundColor: '#0c0700ff',
   BorderColor: '#005dffff',
-
-  NavBarLabelActiveColor: '#b1b4baff',
-  NavBarLabelInactiveColor: '#5e5f62ff',
-  NavBarComponentsActiveIcon: require('./../assets/bottom-nav-components-icon-light.png'),
-  NavBarComponentsInactiveIcon: require('./../assets/bottom-nav-components-icon-dark.png'),
-  NavBarAPIsActiveIcon: require('./../assets/bottom-nav-apis-icon-light.png'),
-  NavBarAPIsInactiveIcon: require('./../assets/bottom-nav-apis-icon-dark.png'),
-  NavBarPlaygroundActiveIcon: require('./../assets/bottom-nav-playgrounds-icon-light.png'),
-  NavBarPlaygroundInactiveIcon: require('./../assets/bottom-nav-playgrounds-icon-dark.png'),
 };
 
 export const themes = {light: RNTesterLightTheme, dark: RNTesterDarkTheme};