ava-labs · bogdandobritoiu · May 19, 2025 · May 16, 2025 · May 16, 2025 · May 16, 2025
@@ -7,6 +7,8 @@
     "orientation": "portrait",
     "userInterfaceStyle": "automatic",
     "plugins": [
+      "./plugins/useWithAndroidNightTheme.js",
+      ["@vonovak/react-native-theme-control"],
       [
         "react-native-edge-to-edge",
         {

@@ -105,7 +105,7 @@ export function DropdownMenu({
       onPressAction,
       theme.colors?.$textDanger,
       theme.colors?.$textPrimary,
-      theme?.isDark
+      theme.isDark
     ]
   )
 

@@ -7,6 +7,7 @@ import BackDark from '../../assets/icons/menu/arrow_back.png'
 import BackDisabledDark from '../../assets/icons/menu/arrow_back_disabled.png'
 import ForwardDark from '../../assets/icons/menu/arrow_forward.png'
 import ForwardDisabledDark from '../../assets/icons/menu/arrow_forward_disabled.png'
+import CheckDark from '../../assets/icons/menu/check.png'
 import CloseDark from '../../assets/icons/menu/close.png'
 import CloseDestructive from '../../assets/icons/menu/close_destructive.png'
 import FavoriteOnDark from '../../assets/icons/menu/favorite_off.png'
@@ -15,22 +16,21 @@ import HistoryDark from '../../assets/icons/menu/history.png'
 import RefreshDark from '../../assets/icons/menu/refresh.png'
 import RefreshDisabledDark from '../../assets/icons/menu/refresh_disabled.png'
 import ShareDark from '../../assets/icons/menu/share.png'
-import CheckDark from '../../assets/icons/menu/check.png'
 
 // Light
 import AddLight from '../../assets/icons/menu/add_light.png'
 import BackLight from '../../assets/icons/menu/arrow_back_light.png'
 import BackDisabledLight from '../../assets/icons/menu/arrow_back_light_disabled.png'
 import ForwardLight from '../../assets/icons/menu/arrow_forward_light.png'
 import ForwardDisabledLight from '../../assets/icons/menu/arrow_forward_light_disabled.png'
+import CheckLight from '../../assets/icons/menu/check_light.png'
 import CloseLight from '../../assets/icons/menu/close_light.png'
 import FavoriteOffLight from '../../assets/icons/menu/favorite_off_light.png'
 import FavoriteOnLight from '../../assets/icons/menu/favorite_on_light.png'
 import HistoryLight from '../../assets/icons/menu/history_light.png'
 import RefreshLight from '../../assets/icons/menu/refresh_light.png'
 import RefreshDisabledLight from '../../assets/icons/menu/refresh_light_disabled.png'
 import ShareLight from '../../assets/icons/menu/share_light.png'
-import CheckLight from '../../assets/icons/menu/check_light.png'
 
 // icon names are 1 to 1 with the filenames in the android/ios drawable folders
 export enum DropdownMenuIcon {

@@ -1,5 +1,6 @@
 import { showAlert, useTheme, View } from '@avalabs/k2-alpine'
 import { ErrorState } from 'common/components/ErrorState'
+import { LoadingState } from 'common/components/LoadingState'
 import { useDeeplink } from 'contexts/DeeplinkContext/DeeplinkContext'
 import { DeepLink, DeepLinkOrigin } from 'contexts/DeeplinkContext/types'
 import { Image } from 'expo-image'
@@ -293,6 +294,23 @@ export const BrowserTab = forwardRef<BrowserTabRef, { tabId: string }>(
       setError(event.nativeEvent)
     }
 
+    const renderLoading = (): JSX.Element => {
+      return (
+        <LoadingState
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            paddingTop: insets.top,
+            paddingBottom: insets.bottom,
+            backgroundColor: theme.colors.$surfacePrimary
+          }}
+        />
+      )
+    }
+
     return (
       <View style={{ flex: 1 }}>
         {/* Main content */}
@@ -332,6 +350,7 @@ export const BrowserTab = forwardRef<BrowserTabRef, { tabId: string }>(
             style={{
               backgroundColor
             }}
+            renderLoading={renderLoading}
             containerStyle={{
               paddingTop: insets.top
             }}

@@ -1,4 +1,5 @@
 import { AnimatedPressable, Text, useTheme, View } from '@avalabs/k2-alpine'
+
 import { ScrollScreen } from 'common/components/ScrollScreen'
 import React, { FC } from 'react'
 import { SvgProps } from 'react-native-svg'
@@ -16,6 +17,10 @@ const SelectAppearanceScreen = (): JSX.Element => {
   const selectedAppearance = useSelector(selectSelectedAppearance)
   const dispatch = useDispatch()
 
+  const handleAppearancePress = (appearance: Appearance): void => {
+    dispatch(setSelectedAppearance(appearance))
+  }
+
   return (
     <ScrollScreen
       title={`Customize the\napp appearance`}
@@ -35,19 +40,19 @@ const SelectAppearanceScreen = (): JSX.Element => {
         <AppearanceComponent
           isSelected={selectedAppearance === Appearance.System}
           appearance="System"
-           => dispatch(setSelectedAppearance(Appearance.System))}
+           => handleAppearancePress(Appearance.System)}
           Icon={SystemAppearanceIcon}
         />
         <AppearanceComponent
           isSelected={selectedAppearance === Appearance.Light}
           appearance="Light"
-           => dispatch(setSelectedAppearance(Appearance.Light))}
+           => handleAppearancePress(Appearance.Light)}
           Icon={LightAppearanceIcon}
         />
         <AppearanceComponent
           isSelected={selectedAppearance === Appearance.Dark}
           appearance="Dark"
-           => dispatch(setSelectedAppearance(Appearance.Dark))}
+           => handleAppearancePress(Appearance.Dark)}
           Icon={DarkAppearanceIcon}
         />
       </View>

@@ -1,7 +1,8 @@
-import { AppListenerEffectAPI, AppStartListening } from 'store/types'
 import { AnyAction, isAnyOf } from '@reduxjs/toolkit'
+import { setThemePreference } from '@vonovak/react-native-theme-control'
 import { Appearance as RnAppearance } from 'react-native'
 import { onRehydrationComplete } from 'store/app'
+import { AppListenerEffectAPI, AppStartListening } from 'store/types'
 import { selectIsDeveloperMode, toggleDeveloperMode } from '../advanced'
 import {
   selectSelectedAppearance,
@@ -17,6 +18,7 @@ const handleAppearanceChange = (
 ): void => {
   const { getState, dispatch } = listenerApi
   const state = getState()
+
   const isDeveloperMode = selectIsDeveloperMode(state)
   const appearance = selectSelectedAppearance(state)
   const currentColorScheme = selectSelectedColorScheme(state)
@@ -27,8 +29,21 @@ const handleAppearanceChange = (
       ? 'light'
       : (RnAppearance.getColorScheme() as ColorSchemeName)
 
-  currentColorScheme !== colorScheme &&
+  switch (appearance) {
+    case Appearance.System:
+      setThemePreference('system')
+      break
+    case Appearance.Dark:
+      setThemePreference('dark')
+      break
+    case Appearance.Light:
+      setThemePreference('light')
+      break
+  }
+
+  if (currentColorScheme !== colorScheme) {
     dispatch(setSelectedColorScheme(colorScheme))
+  }
 }
 
 export const addAppearanceListeners = (

@@ -2146,6 +2146,27 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-theme-control (6.1.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.10.14.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-view-shot (4.0.3):
     - DoubleConversion
     - glog
@@ -3073,6 +3094,7 @@ DEPENDENCIES:
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "react-native-skia (from `../node_modules/@shopify/react-native-skia`)"
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
+  - "react-native-theme-control (from `../node_modules/@vonovak/react-native-theme-control`)"
   - react-native-view-shot (from `../node_modules/react-native-view-shot`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
@@ -3349,6 +3371,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@shopify/react-native-skia"
   react-native-slider:
     :path: "../node_modules/@react-native-community/slider"
+  react-native-theme-control:
+    :path: "../node_modules/@vonovak/react-native-theme-control"
   react-native-view-shot:
     :path: "../node_modules/react-native-view-shot"
   react-native-webview:
@@ -3590,6 +3614,7 @@ SPEC CHECKSUMS:
   react-native-safe-area-context: ac66ae671d8110cf9fecd766ece62b80f8e4d792
   react-native-skia: bb9f430440dac522381ffbb0535349886dd53a28
   react-native-slider: e500e3bac6ce86f2368bfc376e260a1957f6f5d9
+  react-native-theme-control: ad027b8e134660a1151ce412cf9718f786e7ee3f
   react-native-view-shot: 122943472b0b17ccab997d1caedbb4e83b80787f
   react-native-webview: 66c39306310ecea6d6ab193759f217eed3837faa
   React-nativeconfig: 8efdb1ef1e9158c77098a93085438f7e7b463678

@@ -83,6 +83,7 @@
     "@tanstack/react-query": "5.59.8",
     "@tanstack/react-query-persist-client": "5.59.6",
     "@tradle/react-native-http": "2.0.1",
+    "@vonovak/react-native-theme-control": "6.1.0",
     "@walletconnect/react-native-compat": "2.11.0",
     "@walletconnect/types": "2.17.2",
     "@walletconnect/utils": "2.17.2",

@@ -0,0 +1,24 @@
+diff --git a/node_modules/react-native/Libraries/AppDelegate/RCTAppDelegate.mm b/node_modules/react-native/Libraries/AppDelegate/RCTAppDelegate.mm
+index 31b8889..a9a9da4 100644
+--- a/node_modules/react-native/Libraries/AppDelegate/RCTAppDelegate.mm
++++ b/node_modules/react-native/Libraries/AppDelegate/RCTAppDelegate.mm
+@@ -33,6 +33,11 @@
+ #import <ReactCommon/RCTJscInstance.h>
+ #endif
+ #import <react/nativemodule/defaults/DefaultTurboModules.h>
++#if __has_include(<RNThemeControl.h>)
++#import <RNThemeControl.h>
++#else
++#import "RNThemeControl.h"
++#endif
+
+ @interface RCTAppDelegate () <RCTComponentViewFactoryComponentProvider, RCTHostDelegate>
+ @end
+@@ -63,6 +68,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
+   if (self.automaticallyLoadReactNativeWindow) {
+     [self loadReactNativeWindow:launchOptions];
+   }
++  [RNThemeControl recoverApplicationTheme];
+
+   return YES;
+ }
@@ -0,0 +1,49 @@
+/**
+ * @typedef {import("expo/config-plugins").ConfigPlugin} ConfigPlugin
+ */
+
+const { withAndroidStyles } = require('expo/config-plugins')
+
+/**
+ * A config plugin that modifies Android styles to use DayNight theme
+ * @type {ConfigPlugin}
+ */
+const withAndroidDayNightTheme = initialConfig =>
+  withAndroidStyles(initialConfig, newConfig => {
+    const { style = [] } = newConfig.modResults.resources
+    if (!style.length) {
+      return newConfig
+    }
+
+    newConfig.modResults.resources.style = style
+      .map(styleItem => {
+        if (styleItem.$ && styleItem.$.name === 'AppTheme') {
+          // We remove color hardcoding that would break day/night
+          // but keep existing parent theme to avoid conflict with rn-edge-to-edge
+          const excludedAttributes = ['android:textColor']
+
+          styleItem.item = styleItem.item.filter(
+            ({ $ }) => !excludedAttributes.includes($.name)
+          )
+        }
+
+        // Remove hardcoded styles in ResetEditText style too
+        if (styleItem.$ && styleItem.$.name === 'ResetEditText') {
+          const excludedAttributes = [
+            'android:textColor',
+            'android:textColorHint'
+          ]
+
+          styleItem.item = styleItem.item.filter(
+            ({ $ }) => !excludedAttributes.includes($.name)
+          )
+        }
+
+        return styleItem
+      })
+      .filter(s => s !== null)
+
+    return newConfig
+  })
+
+module.exports = withAndroidDayNightTheme
@@ -283,6 +283,7 @@ __metadata:
     "@types/react-dom": 18.3.1
     "@types/react-test-renderer": 18.3.0
     "@types/semver": 7.5.4
+    "@vonovak/react-native-theme-control": 6.1.0
     "@walletconnect/react-native-compat": 2.11.0
     "@walletconnect/types": 2.17.2
     "@walletconnect/utils": 2.17.2
@@ -13156,6 +13157,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vonovak/react-native-theme-control@npm:6.1.0":
+  version: 6.1.0
+  resolution: "@vonovak/react-native-theme-control@npm:6.1.0"
+  peerDependencies:
+    expo: ">=49.0.0"
+    react: "*"
+    react-native: ">=0.72.0"
854C
;
+  peerDependenciesMeta:
+    expo:
+      optional: true
+  checksum: 63c39ffaff4188317ea572c7fb6abe4c11e66a7bcda06df33d7d8ab7372d702d7e67db5f24fa3cd5091f2fe40a2785981911c1ca5dd0a1c080ea65e78cdae029
+  languageName: node
+  linkType: hard
+
 "@walletconnect/core@npm:2.16.1":
   version: 2.16.1
   resolution: "@walletconnect/core@npm:2.16.1"
@@ -27517,7 +27532,7 @@ react-native-webview@ava-labs/react-native-webview:
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: ae658f8c94177d1b419ffb73d26bd70474b6c688af507daaabc11451f983f77a906b2aafcdfdd09c96cab846d9722dcaf26a7c22ee7d19fb4cf70578c8812ac5
+  checksum: f7ac158dbe58d410185c45bcdd1ae1bbdab3d3548940e2e1e1ef792a33996713d40bb4ee7c7420f078f013954c78d43b11eb5884ab0d786da781936be78a41cd
   languageName: node
   linkType: hard