@chem-po/react-native 0.0.35 → 0.0.37

package/lib/typescript/components/button/LoadingButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/LoadingButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAqD,MAAM,OAAO,CAAA;AAC3F,OAAO,EAGL,SAAS,EAGT,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAA;AAGrB,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;QACnD,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmGtD,CAAA"}
+{"version":3,"file":"LoadingButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/LoadingButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAqD,MAAM,OAAO,CAAA;AAC3F,OAAO,EAGL,SAAS,EAGT,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAA;AAGrB,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;QACnD,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;CAClD;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsHtD,CAAA"}

package/lib/typescript/contexts/root.d.ts

@@ -1,12 +1,15 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core';
 import { ChempoProps } from '@chem-po/react';
-import React, { PropsWithChildren } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 import { MD3Type, MD3TypescaleKey } from 'react-native-paper/lib/typescript/types';
 export type FontConfig = Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>;
+export type MiddlewareProvider = FC<PropsWithChildren>;
 export interface ChempoNativeProviderProps<BackendAdapter extends BackendAdapterInterface> extends PropsWithChildren<Pick<ChempoProps<BackendAdapter>, 'backendAdapter' | 'assets'>> {
     theme?: Theme;
     fonts?: FontConfig;
     initialColorMode?: ColorMode;
+    colorModeProp?: string;
+    middlewareProvider?: MiddlewareProvider;
 }
-export declare const ChempoNativeProvider: <BackendAdapter extends BackendAdapterInterface>({ theme: themeProp, initialColorMode, children, fonts, ...props }: ChempoNativeProviderProps<BackendAdapter>) => React.JSX.Element;
+export declare const ChempoNativeProvider: <BackendAdapter extends BackendAdapterInterface>({ theme: themeProp, initialColorMode, children, fonts, colorModeProp, middlewareProvider: Middleware, ...props }: ChempoNativeProviderProps<BackendAdapter>) => React.JSX.Element;
 //# sourceMappingURL=root.d.ts.map

package/lib/typescript/contexts/root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/contexts/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAA4B,MAAM,gBAAgB,CAAA;AACtE,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAIzD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAA;AAOlF,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAC3E,MAAM,WAAW,yBAAyB,CAAC,cAAc,SAAS,uBAAuB,CACvF,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE,gBAAgB,GAAG,QAAQ,CAAC,CAAC;IACzF,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AA4FD,eAAO,MAAM,oBAAoB,GAAI,cAAc,SAAS,uBAAuB,EAAE,mEAMlF,yBAAyB,CAAC,cAAc,CAAC,sBAiB3C,CAAA"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/contexts/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAA4B,MAAM,gBAAgB,CAAA;AACtE,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAK7D,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAA;AAQlF,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAC3E,MAAM,MAAM,kBAAkB,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAA;AACtD,MAAM,WAAW,yBAAyB,CAAC,cAAc,SAAS,uBAAuB,CACvF,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE,gBAAgB,GAAG,QAAQ,CAAC,CAAC;IACzF,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;CACxC;AA4FD,eAAO,MAAM,oBAAoB,GAAI,cAAc,SAAS,uBAAuB,EAAE,kHAQlF,yBAAyB,CAAC,cAAc,CAAC,sBA0B3C,CAAA"}

package/lib/typescript/hooks/useThemeState.d.ts

@@ -1,8 +1,9 @@
 import { ColorMode, Theme } from '@chem-po/core';
 import { ThemeProps } from '@chem-po/react';
 export interface UseThemeProps {
-    initialColorMode?: ColorMode;
+    colorModeProp?: string;
     theme?: Theme;
+    initialColorMode?: ColorMode;
 }
 export declare const useThemeState: (props?: UseThemeProps) => ThemeProps;
 //# sourceMappingURL=useThemeState.d.ts.map

package/lib/typescript/hooks/useThemeState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemeState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useThemeState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAG3C,MAAM,WAAW,aAAa;IAC5B,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,eAAO,MAAM,aAAa,GAAI,QAAQ,aAAa,eAQlD,CAAA"}
+{"version":3,"file":"useThemeState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useThemeState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAI3C,MAAM,WAAW,aAAa;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,KAAK,CAAA;IAEb,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AAED,eAAO,MAAM,aAAa,GAAI,QAAQ,aAAa,eA8BlD,CAAA"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@chem-po/react-native",
   "author": "Elan Canfield",
   "license": "MIT",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
@@ -46,14 +46,15 @@
     "react-native": "0.79.5",
     "react-native-element-dropdown": "^2.12.4",
     "react-native-gesture-handler": "~2.24.0",
+    "react-native-safe-area-context": "5.4.0",
     "react-native-reanimated": "~3.17.4",
     "react-native-notifier": "^2.0.0",
     "react-native-paper": "^5.14.3",
     "react-native-paper-dates": "^0.22.42",
     "react-native-svg": "15.11.2",
     "zustand": "^4.3.3",
-    "@chem-po/react": "0.0.35",
-    "@chem-po/core": "0.0.35"
+    "@chem-po/core": "0.0.37",
+    "@chem-po/react": "0.0.37"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package/src/components/button/DeleteButton.tsx

@@ -1,8 +1,9 @@
-import { useToast } from '@chem-po/react'
+import { useBackgroundColor, useColorModeValue, useToast } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
-import { ActivityIndicator, Animated, Modal, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ActivityIndicator, Animated, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { Pressable } from 'react-native-gesture-handler'
+import { Modal, Portal } from 'react-native-paper'
 import { Txt } from '../text/Txt'
 
 const defaultAlertBodyText = "Are you sure? You can't undo this action afterwards."
@@ -15,42 +16,48 @@ export const DeleteConfirmAlert = ({
   actionName = 'Delete',
   actionLoading,
   itemName,
+  color,
+  cancelText = 'CANCEL',
 }: {
   confirmActive: boolean
   onCancel: () => void
   onConfirm: () => void
   body?: string | ReactNode
   actionLoading?: boolean
+  color: string
   actionName?: string
+  cancelText?: string
   itemName: string
 }) => {
+  const backgroundColor = useBackgroundColor(100)
   return (
-    <Modal
-      transparent={true}
-      visible={confirmActive}
-      onRequestClose={onCancel}
-      animationType="fade">
-      <View style={styles.overlay}>
-        <View style={styles.alertContainer}>
+    <Portal>
+      <Modal style={styles.modal} visible={confirmActive} onDismiss={onCancel}>
+        <View style={[styles.alertContainer, { backgroundColor }]}>
           <Txt style={styles.alertTitle}>
             {actionName} {itemName}?
           </Txt>
           {typeof body === 'string' ? <Txt style={styles.alertBody}>{body}</Txt> : body}
           <View style={styles.buttonContainer}>
             <Pressable style={styles.cancelButton} onPress={onCancel}>
-              <Txt style={styles.cancelText}>Cancel</Txt>
+              <Txt style={styles.cancelText}>{cancelText}</Txt>
             </Pressable>
-            <Pressable style={styles.confirmButton} onPress={onConfirm} disabled={actionLoading}>
+            <Pressable
+              style={[styles.confirmButton, { backgroundColor: color }]}
+              onPress={onConfirm}
+              disabled={actionLoading}>
               {actionLoading ? (
                 <ActivityIndicator color="#fff" />
               ) : (
-                <Txt style={[styles.buttonText, styles.confirmButtonText]}>{actionName}</Txt>
+                <Txt style={[styles.buttonText, styles.confirmButtonText]}>
+                  {actionName.toUpperCase()}
+                </Txt>
               )}
             </Pressable>
           </View>
         </View>
-      </View>
-    </Modal>
+      </Modal>
+    </Portal>
   )
 }
 
@@ -62,7 +69,23 @@ export const DeleteButton: React.FC<{
   text?: string
   alertBody?: string | ReactNode
   style?: ViewStyle
-}> = ({ onDelete, itemName, noConfirm, alertBody, text, actionName = 'Delete', style }) => {
+  color?: string
+  variant?: 'outline' | 'solid'
+  iconSize?: number
+  iconProps?: React.ComponentProps<typeof Ionicons>
+}> = ({
+  onDelete,
+  itemName,
+  noConfirm,
+  alertBody,
+  text,
+  actionName = 'Delete',
+  style,
+  color: colorProp,
+  variant = 'outline',
+  iconSize = 18,
+  iconProps,
+}) => {
   const { showError } = useToast()
   const [deleteLoading, setDeleteLoading] = useState(false)
   const [confirmActive, setConfirmActive] = useState(false)
@@ -70,6 +93,10 @@ export const DeleteButton: React.FC<{
   const isMounted = useRef(true)
   const contentOpacity = useRef(new Animated.Value(1)).current
   const loaderOpacity = useRef(new Animated.Value(0)).current
+  const defaultColor = useColorModeValue('#dd2222', '#ff7777')
+  const color = colorProp ?? defaultColor
+
+  const textColor = useMemo(() => (variant === 'solid' ? 'white' : color), [variant, color])
 
   useEffect(() => {
     isMounted.current = true
@@ -122,7 +149,15 @@ export const DeleteButton: React.FC<{
     <>
       {text ? (
         <Pressable
-          style={[styles.button, style]}
+          style={[
+            styles.button,
+            {
+              borderColor: color,
+              backgroundColor: variant === 'solid' ? color : 'transparent',
+              borderWidth: variant === 'outline' ? 1 : 0,
+            },
+            style,
+          ]}
           onPress={() => {
             if (noConfirm) handleDelete()
             else setConfirmActive(true)
@@ -130,30 +165,55 @@ export const DeleteButton: React.FC<{
           disabled={deleteLoading}>
           <View style={styles.buttonContent}>
             <Animated.View style={[styles.contentContainer, { opacity: contentOpacity }]}>
-              <Ionicons name="trash" size={20} color="red" />
-              <Text style={styles.buttonText}>{text}</Text>
+              <Ionicons
+                name="trash"
+                size={iconSize}
+                color={textColor}
+                {...iconProps}
+                style={[variant === 'solid' ? styles.shadow : {}, iconProps?.style]}
+              />
+              <Text
+                style={[
+                  styles.buttonText,
+                  { color: textColor },
+                  variant === 'solid' ? styles.shadow : undefined,
+                ]}>
+                {text}
+              </Text>
             </Animated.View>
-
             <Animated.View style={[styles.loaderContainer, { opacity: loaderOpacity }]}>
-              <ActivityIndicator color="#ff0000" size="small" />
+              <ActivityIndicator color={textColor} size="small" />
             </Animated.View>
           </View>
         </Pressable>
       ) : (
         <Pressable
-          style={[styles.iconButton, style]}
+          style={[
+            styles.iconButton,
+            {
+              borderColor: color,
+              borderWidth: variant === 'outline' ? 1 : 0,
+              backgroundColor: variant === 'solid' ? color : 'transparent',
+            },
+            style,
+          ]}
           onPress={() => {
             if (noConfirm) handleDelete()
             else setConfirmActive(true)
           }}
           disabled={deleteLoading}>
-          <View style={styles.buttonContent}>
+          <View style={styles.iconButtonContent}>
             <Animated.View style={[styles.contentContainer, { opacity: contentOpacity }]}>
-              <Ionicons name="trash" size={24} color="#ee0000" />
+              <Ionicons
+                name="trash"
+                size={iconSize}
+                color={textColor}
+                {...iconProps}
+                style={[variant === 'solid' ? styles.shadow : {}, iconProps?.style]}
+              />
             </Animated.View>
-
             <Animated.View style={[styles.loaderContainer, { opacity: loaderOpacity }]}>
-              <ActivityIndicator color="#ff0000" size="small" />
+              <ActivityIndicator color={textColor} size="small" />
             </Animated.View>
           </View>
         </Pressable>
@@ -169,6 +229,7 @@ export const DeleteButton: React.FC<{
           actionName={actionName}
           body={alertBody}
           itemName={itemName}
+          color={color}
         />
       )}
     </>
@@ -176,18 +237,16 @@ export const DeleteButton: React.FC<{
 }
 
 const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
   alertContainer: {
-    width: '80%',
-    maxWidth: 400,
     backgroundColor: 'white',
     borderRadius: 10,
     padding: 20,
+    maxWidth: 300,
+    alignItems: 'center',
+  },
+  modal: {
+    flex: 1,
+    justifyContent: 'center',
     alignItems: 'center',
   },
   alertTitle: {
@@ -198,6 +257,7 @@ const styles = StyleSheet.create({
   alertBody: {
     fontSize: 16,
     marginBottom: 20,
+    textAlign: 'center',
   },
   buttonContainer: {
     flexDirection: 'row',
@@ -226,7 +286,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   buttonText: {
-    color: 'red',
     fontWeight: 'bold',
   },
   confirmButtonText: {
@@ -238,14 +297,11 @@ const styles = StyleSheet.create({
   button: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 10,
-    backgroundColor: 'transparent',
+    borderRadius: 4,
   },
   buttonContent: {
     flexDirection: 'row',
     gap: 3,
-    borderWidth: 1,
-    borderColor: 'red',
     paddingHorizontal: 13,
     paddingVertical: 5,
     borderRadius: 4,
@@ -265,9 +321,24 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  shadow: {
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 4,
+  },
   iconButton: {
-    padding: 10,
     backgroundColor: 'transparent',
+    borderRadius: 4,
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconButtonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 3,
   },
   loading: {
     position: 'absolute',

package/src/components/button/LoadingButton.tsx

@@ -1,4 +1,4 @@
-import { useBorderColor, useTextColor, useToast } from '@chem-po/react'
+import { useTextColor, useToast } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -20,11 +20,13 @@ export interface LoadingButtonProps {
   contentStyle?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
   color?: string
+  variant?: 'outline' | 'solid'
   icon?: {
     name: React.ComponentProps<typeof Ionicons>['name']
     size?: number
   }
   disabled?: boolean
+  iconProps?: React.ComponentProps<typeof Ionicons>
 }
 
 export const LoadingButton: React.FC<LoadingButtonProps> = ({
@@ -34,8 +36,10 @@ export const LoadingButton: React.FC<LoadingButtonProps> = ({
   contentStyle,
   textStyle,
   color: colorProp,
+  variant = 'outline',
   icon,
   disabled = false,
+  iconProps,
 }) => {
   const [loading, setLoading] = useState(false)
   const isMounted = useRef(true)
@@ -89,12 +93,21 @@ export const LoadingButton: React.FC<LoadingButtonProps> = ({
 
   const fallbackColor = useTextColor()
   const color = useMemo(() => colorProp ?? fallbackColor, [colorProp, fallbackColor])
-  const borderColor = useBorderColor()
+  const textColor = useMemo(() => (variant === 'solid' ? 'white' : color), [variant, color])
+  const backgroundColor = useMemo(
+    () => (variant === 'solid' ? color : 'transparent'),
+    [variant, color],
+  )
   return (
     <Pressable
       style={[
         styles.button,
-        { borderColor: color, backgroundColor: disabled ? '#f0f0f0' : 'transparent' },
+        {
+          opacity: disabled ? 0.6 : 1,
+          borderColor: color,
+          borderWidth: variant === 'outline' ? 1 : 0,
+          backgroundColor,
+        },
         style,
       ]}
       onPress={() => {
@@ -102,17 +115,25 @@ export const LoadingButton: React.FC<LoadingButtonProps> = ({
       }}
       disabled={loading || disabled}>
       <View
-        style={[
-          styles.buttonContent,
-          { borderColor: disabled ? '#ccc' : borderColor },
-          contentStyle,
-        ]}>
+        style={[styles.buttonContent, { borderColor: disabled ? '#ccc' : color }, contentStyle]}>
         <Animated.View style={[styles.contentContainer, { opacity: contentOpacity }]}>
           {icon && (
-            <Ionicons name={icon.name} size={icon.size ?? 20} color={disabled ? '#ccc' : color} />
+            <Ionicons
+              name={icon.name}
+              size={icon.size ?? 20}
+              color={textColor}
+              {...iconProps}
+              style={[variant === 'solid' ? styles.shadow : {}, iconProps?.style]}
+            />
           )}
           {typeof children === 'string' ? (
-            <Text style={[styles.buttonText, { color: disabled ? '#ccc' : color }, textStyle]}>
+            <Text
+              style={[
+                styles.buttonText,
+                { color: textColor },
+                variant === 'solid' ? styles.shadow : {},
+                textStyle,
+              ]}>
               {children}
             </Text>
           ) : (
@@ -121,7 +142,7 @@ export const LoadingButton: React.FC<LoadingButtonProps> = ({
         </Animated.View>
 
         <Animated.View style={[styles.loaderContainer, { opacity: loaderOpacity }]}>
-          <ActivityIndicator color={color} size="small" />
+          <ActivityIndicator color={textColor} size="small" />
         </Animated.View>
       </View>
     </Pressable>
@@ -133,24 +154,20 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: 'transparent',
+    borderRadius: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
   },
   buttonContent: {
-    flexDirection: 'row',
-    gap: 8,
-    borderWidth: 1,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 4,
     alignItems: 'center',
     justifyContent: 'center',
-    minHeight: 40,
     position: 'relative',
   },
   contentContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 8,
+    gap: 4,
   },
   loaderContainer: {
     ...StyleSheet.absoluteFillObject,
@@ -160,4 +177,9 @@ const styles = StyleSheet.create({
   buttonText: {
     fontWeight: 'bold',
   },
+  shadow: {
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 4,
+  },
 })

package/src/components/theme/colorMode/DarkModeToggle.tsx

@@ -38,8 +38,8 @@ const styles = StyleSheet.create({
     right: 12,
   },
   button: {
-    width: 25,
-    height: 25,
+    width: 32,
+    height: 32,
     borderRadius: 16,
     justifyContent: 'center',
     alignItems: 'center',

package/src/contexts/root.tsx

@@ -1,22 +1,27 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core'
 import { ChempoProps, ChempoProvider, useTheme } from '@chem-po/react'
-import React, { PropsWithChildren, useMemo } from 'react'
+import React, { FC, PropsWithChildren, useMemo } from 'react'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { NotifierWrapper } from 'react-native-notifier'
 import { configureFonts, PaperProvider, Props as PaperProviderProps } from 'react-native-paper'
 import { en, registerTranslation } from 'react-native-paper-dates'
 import { MD3Type, MD3TypescaleKey } from 'react-native-paper/lib/typescript/types'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { nativeToast } from '../constants/toast'
-import { useThemeState } from '../hooks/useThemeState'
+import { UseThemeProps, useThemeState } from '../hooks/useThemeState'
 import { initializeScreen } from '../store/useScreen'
 
 registerTranslation('en', en)
 
 export type FontConfig = Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>
+export type MiddlewareProvider = FC<PropsWithChildren>
 export interface ChempoNativeProviderProps<BackendAdapter extends BackendAdapterInterface>
   extends PropsWithChildren<Pick<ChempoProps<BackendAdapter>, 'backendAdapter' | 'assets'>> {
   theme?: Theme
   fonts?: FontConfig
   initialColorMode?: ColorMode
+  colorModeProp?: string
+  middlewareProvider?: MiddlewareProvider
 }
 const createPaperTheme = (
   theme: Theme,
@@ -114,22 +119,33 @@ export const ChempoNativeProvider = <BackendAdapter extends BackendAdapterInterf
   initialColorMode,
   children,
   fonts,
+  colorModeProp,
+  middlewareProvider: Middleware,
   ...props
 }: ChempoNativeProviderProps<BackendAdapter>) => {
-  const useThemeProps = useMemo(
-    () => ({ theme: themeProp, initialColorMode }),
-    [themeProp, initialColorMode],
+  const useThemeProps = useMemo<UseThemeProps>(
+    () => ({ theme: themeProp, initialColorMode, colorModeProp }),
+    [themeProp, initialColorMode, colorModeProp],
   )
   const theme = useThemeState(useThemeProps)
+
+  const body = (
+    <ChempoPaperProvider fonts={fonts}>
+      <NotifierWrapper>{children}</NotifierWrapper>
+    </ChempoPaperProvider>
+  )
+
   return (
-    <NotifierWrapper>
-      <ChempoProvider
-        toast={nativeToast}
-        theme={theme}
-        initializeScreen={initializeScreen}
-        {...props}>
-        <ChempoPaperProvider fonts={fonts}>{children}</ChempoPaperProvider>
-      </ChempoProvider>
-    </NotifierWrapper>
+    <ChempoProvider
+      toast={nativeToast}
+      theme={theme}
+      initializeScreen={initializeScreen}
+      {...props}>
+      <SafeAreaProvider>
+        <GestureHandlerRootView>
+          {Middleware ? <Middleware>{body}</Middleware> : body}
+        </GestureHandlerRootView>
+      </SafeAreaProvider>
+    </ChempoProvider>
   )
 }

package/src/hooks/useThemeState.ts

@@ -1,18 +1,43 @@
 import { ColorMode, Theme } from '@chem-po/core'
 import { ThemeProps } from '@chem-po/react'
-import { useMemo, useState } from 'react'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 export interface UseThemeProps {
-  initialColorMode?: ColorMode
+  colorModeProp?: string
   theme?: Theme
+  // deprecated - using AsyncStorage instead
+  initialColorMode?: ColorMode
 }
 
 export const useThemeState = (props?: UseThemeProps) => {
-  const { initialColorMode, theme } = props ?? {}
-  const [colorMode, setColorMode] = useState<ColorMode>(initialColorMode ?? 'light')
+  const { initialColorMode, theme, colorModeProp = 'chempoColorMode' } = props ?? {}
+  const [initialized, setInitialized] = useState(false)
+
+  const [colorMode, setColorModeState] = useState<ColorMode>(initialColorMode ?? 'light')
+
+  useEffect(() => {
+    if (initialized) return
+
+    const initialize = async () => {
+      const storedColorMode = await AsyncStorage.getItem(colorModeProp)
+      if (storedColorMode) setColorModeState(storedColorMode as ColorMode)
+      else AsyncStorage.setItem(colorModeProp, initialColorMode ?? 'light')
+      setInitialized(true)
+    }
+    initialize()
+  }, [initialized, colorModeProp, initialColorMode])
+
+  const setColorMode = useCallback(
+    (colorMode: ColorMode) => {
+      setColorModeState(colorMode)
+      AsyncStorage.setItem(colorModeProp, colorMode)
+    },
+    [colorModeProp],
+  )
 
   return useMemo<ThemeProps>(
-    () => ({ colorMode, setColorMode, theme }),
-    [colorMode, setColorMode, theme],
+    () => ({ colorMode, setColorMode, theme, colorModeProp, initialized }),
+    [colorMode, setColorMode, theme, colorModeProp, initialized],
   )
 }