@chem-po/react-native 0.0.48 → 0.0.50

package/src/components/button/DeleteButton.tsx

@@ -4,6 +4,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { ActivityIndicator, StyleSheet, View } from 'react-native'
 import { Pressable } from 'react-native-gesture-handler'
 import { Modal, Portal } from 'react-native-paper'
+import { useFontScale } from '../../store/useFontScale'
 import { Txt } from '../text/Txt'
 import { ActionButton, ActionButtonProps } from './ActionButton'
 import { ButtonText } from './ButtonText'
@@ -32,10 +33,11 @@ export const DeleteConfirmAlert = ({
   itemName: string
 }) => {
   const backgroundColor = useBackgroundColor(100)
+  const fontScale = useFontScale(s => s.fontScale)
   return (
     <Portal>
       <Modal style={styles.modal} visible={confirmActive} onDismiss={onCancel}>
-        <View style={[styles.alertContainer, { backgroundColor }]}>
+        <View style={[styles.alertContainer, { backgroundColor, maxWidth: 300 * fontScale }]}>
           <Txt style={styles.alertTitle}>
             {actionName} {itemName}?
           </Txt>
@@ -49,7 +51,7 @@ export const DeleteConfirmAlert = ({
               onPress={onConfirm}
               disabled={actionLoading}>
               {actionLoading ? (
-                <ActivityIndicator color="#fff" />
+                <ActivityIndicator size={20 * fontScale} color="#fff" />
               ) : (
                 <Txt style={[styles.buttonText, styles.confirmButtonText]}>
                   {actionName.toUpperCase()}
@@ -95,7 +97,7 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
   const isMounted = useRef(true)
   const defaultColor = useColorModeValue('#dd4444', '#ff4444')
   const color = colorProp ?? defaultColor
-
+  const fontScale = useFontScale(s => s.fontScale)
   useEffect(() => {
     isMounted.current = true
 
@@ -145,7 +147,7 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
         <View style={styles.contentContainer}>
           <Ionicons
             name="trash"
-            size={iconSize}
+            size={iconSize * fontScale}
             color={variant === 'solid' ? 'white' : color}
             {...iconProps}
             style={[variant === 'solid' ? styles.shadow : {}, iconProps?.style]}

package/src/components/form/Form.tsx

@@ -22,6 +22,7 @@ import React, { FC, useMemo, useState } from 'react'
 import { useFieldArray, useFormContext } from 'react-hook-form'
 import { StyleSheet, Text, View } from 'react-native'
 import { Pressable } from 'react-native-gesture-handler'
+import { useFontScale } from '../../store/useFontScale'
 import { Expandable } from '../box/Expandable'
 import { DeleteButton } from '../button/DeleteButton'
 import { Condition } from './Condition'
@@ -85,8 +86,8 @@ const styles = StyleSheet.create({
   },
   formElementContainer: {
     width: '100%',
-    paddingVertical: 5,
-    gap: 5,
+    // paddingVertical: 5,
+    // gap: 5,
   },
   dataViewHeader: {
     flexDirection: 'row',
@@ -190,6 +191,7 @@ export const FormElement = ({
   name: string
   size: InputSize
 }) => {
+  const fontScale = useFontScale(s => s.fontScale)
   const fields = useMemo<Array<{ name: string; field: IFormElement }>>(() => {
     if (isField(field) || isListField(field)) return [{ name: 'value', field }]
 
@@ -200,7 +202,8 @@ export const FormElement = ({
   }, [field, name])
 
   return (
-    <View style={styles.formElementContainer}>
+    <View
+      style={[styles.formElementContainer, { gap: fontScale * 5, paddingVertical: fontScale * 5 }]}>
       {fields.map(f => {
         if (isListField(f.field)) {
           const b = <ListFieldInput key={f.name} name={f.name} field={f.field} size={size} />

package/src/components/form/input/Editable.tsx

@@ -12,6 +12,7 @@ import { Ionicons } from '@expo/vector-icons'
 import React, { ForwardedRef, useCallback, useEffect } from 'react'
 import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
 import { Pressable } from 'react-native-gesture-handler'
+import { useFontScale } from '../../../store/useFontScale'
 import { CustomInputProps } from '../../../types/forms'
 import { LoadingOverlay } from '../../loading/LoadingOverlay'
 import { UploadProgress } from '../UploadProgress'
@@ -55,6 +56,7 @@ export const Editable = <T extends Field>({
     onEditClose,
     ref,
   })
+  const fontScale = useFontScale(s => s.fontScale)
 
   useEffect(() => {
     if (isEditing) {
@@ -120,19 +122,34 @@ export const Editable = <T extends Field>({
                   onPress={() => {
                     handleEditClose()
                   }}
-                  style={[styles.submitButton, { borderColor: iconColor, borderWidth: 1 }]}
+                  style={[
+                    styles.submitButton,
+                    {
+                      borderColor: iconColor,
+                      borderWidth: 1,
+                      width: 28 * fontScale,
+                      height: 28 * fontScale,
+                    },
+                  ]}
                   onPressIn={() => setEditHovered(true)}
                   onPressOut={() => setEditHovered(false)}>
-                  <Ionicons name="close-outline" size={20} color={iconColor} />
+                  <Ionicons name="close-outline" size={20 * fontScale} color={iconColor} />
                 </Pressable>
                 <Pressable
                   onPress={() => {
                     submit()
                   }}
-                  style={[styles.submitButton, { backgroundColor: submitBackgroundColor }]}
+                  style={[
+                    styles.submitButton,
+                    {
+                      backgroundColor: submitBackgroundColor,
+                      width: 28 * fontScale,
+                      height: 28 * fontScale,
+                    },
+                  ]}
                   onPressIn={() => setEditHovered(true)}
                   onPressOut={() => setEditHovered(false)}>
-                  <Ionicons color="white" name="checkmark-outline" size={20} />
+                  <Ionicons color="white" name="checkmark-outline" size={20 * fontScale} />
                 </Pressable>
               </>
             ) : (
@@ -140,10 +157,10 @@ export const Editable = <T extends Field>({
                 onPress={() => {
                   handleEditOpen()
                 }}
-                style={styles.submitButton}
+                style={[styles.submitButton, { width: 28 * fontScale, height: 28 * fontScale }]}
                 onPressIn={() => setEditHovered(true)}
                 onPressOut={() => setEditHovered(false)}>
-                <Ionicons name="create-outline" size={20} color={iconColor} />
+                <Ionicons name="create-outline" size={20 * fontScale} color={iconColor} />
               </Pressable>
             )}
           </View>

package/src/components/form/input/boolean/index.tsx

@@ -1,7 +1,8 @@
 import { InputRef } from '@chem-po/core'
 import { BooleanField, useBooleanFieldText } from '@chem-po/react'
 import React, { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
-import { Switch, Text, View } from 'react-native'
+import { Switch, View } from 'react-native'
+import { Txt } from '../../../text/Txt'
 import { FieldProps } from '../../types'
 
 const BaseCheckboxComponent = (
@@ -16,7 +17,7 @@ const BaseCheckboxComponent = (
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
       <Switch value={value} onValueChange={onChange} {...input} />
-      <Text style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>{text}</Text>
+      <Txt style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>{text}</Txt>
     </View>
   )
 }
@@ -37,7 +38,7 @@ const BaseSwitchComponent = (
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
       <Switch value={value} onValueChange={onChange} {...input} />
-      <Text style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>{text}</Text>
+      <Txt style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>{text}</Txt>
     </View>
   )
 }

package/src/components/form/input/file/index.tsx

@@ -15,6 +15,7 @@ import * as ImagePicker from 'expo-image-picker'
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react'
 import { Platform, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
 import { Pressable } from 'react-native-gesture-handler'
+import { useFontScale } from '../../../../store/useFontScale'
 import { downloadFile } from '../../../../utils/downloadFile'
 import { LoadingImage } from '../../../loading/LoadingImage'
 import { FieldProps } from '../../types'
@@ -38,12 +39,13 @@ const NoFileView = ({ hasUpload, onPress }: { hasUpload?: boolean; onPress?: ()
   const textColor = useTextColor()
   const iconColor = useIconColor()
   const borderColor = useBorderColor()
+  const fontScale = useFontScale(s => s.fontScale)
   return (
     <Pressable style={[styles.noFileContainer, { borderColor }]} onPress={onPress}>
       <Text style={[styles.noFileText, { color: textColor }]}>
         {hasUpload ? 'Tap to upload file' : 'No file uploaded'}
       </Text>
-      <Ionicons name="cloud-upload" size={24} color={iconColor} />
+      <Ionicons name="cloud-upload" size={24 * fontScale} color={iconColor} />
     </Pressable>
   )
 }

package/src/components/loading/LoadingOverlay.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react'
 import { Animated, StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import { FadeInOptions, useFadeIn } from '../../hooks/useFadeIn'
+import { useFontScale } from '../../store/useFontScale'
 import { CircularProgress, CircularProgressProps } from './CircularProgress'
-
 const loadingFadeInProps: FadeInOptions = {
   activeOpacity: 0.8,
   duration: 100,
@@ -22,10 +22,11 @@ export const LoadingOverlay = ({
   const opts = useMemo(() => ({ ...loadingFadeInProps, ...fadeOptions }), [fadeOptions])
   const opacity = useFadeIn(loading, opts)
 
+  const fontScale = useFontScale(s => s.fontScale)
   return (
     <Animated.View
       style={[styles.overlay, style, { opacity, pointerEvents: loading ? 'auto' : 'none' }]}>
-      <CircularProgress {...indicatorProps} />
+      <CircularProgress size={indicatorProps?.size ?? 20 * fontScale} {...indicatorProps} />
     </Animated.View>
   )
 }

package/src/components/text/AnimatedText.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, useEffect, useMemo, useRef } from 'react'
 import { Animated, StyleProp, TextStyle } from 'react-native'
+import { useFontScale } from '../../store/useFontScale'
 
 export interface AnimatedTextProps {
   show: boolean
@@ -10,6 +11,7 @@ export interface AnimatedTextProps {
 }
 const useAnimatedText = (show: boolean, color: string, height: number, marginBottom: number) => {
   const placeholderAnim = useRef(new Animated.Value(0)).current
+  const fontScale = useFontScale(s => s.fontScale)
 
   useEffect(() => {
     Animated.timing(placeholderAnim, {
@@ -33,14 +35,14 @@ const useAnimatedText = (show: boolean, color: string, height: number, marginBot
       ],
       height: placeholderAnim.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, height],
+        outputRange: [0, height * fontScale],
       }),
       marginBottom: placeholderAnim.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, marginBottom],
+        outputRange: [0, marginBottom * fontScale],
       }),
     }),
-    [color, height, marginBottom, placeholderAnim],
+    [color, height, marginBottom, placeholderAnim, fontScale],
   )
 }
 

package/src/contexts/root.tsx

@@ -13,6 +13,7 @@ import { en, registerTranslation } from 'react-native-paper-dates'
 import { MD3Type, MD3Typescale, ThemeProp } from 'react-native-paper/lib/typescript/types'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { nativeToast } from '../constants/toast'
+import { useRefreshFontScale } from '../hooks/useRefreshFontScale'
 import { UseThemeProps, useThemeState } from '../hooks/useThemeState'
 import { initializeScreen } from '../store/useScreen'
 import { ChempoFontsProvider } from './fonts'
@@ -30,6 +31,7 @@ export interface ChempoNativeProviderProps<
   colorModeProp?: string
   middlewareProvider?: MiddlewareProvider
   insetNotifier?: boolean
+  disableFontScaling?: boolean
 }
 const createPaperTheme = (
   themeConfig: Theme,
@@ -149,6 +151,7 @@ export const ChempoNativeProvider = <BackendAdapter extends BackendAdapterInterf
   colorModeProp,
   middlewareProvider: Middleware,
   insetNotifier,
+  disableFontScaling,
   ...props
 }: ChempoNativeProviderProps<BackendAdapter>) => {
   const useThemeProps = useMemo<UseThemeProps>(
@@ -156,6 +159,7 @@ export const ChempoNativeProvider = <BackendAdapter extends BackendAdapterInterf
     [themeProp, initialColorMode, colorModeProp],
   )
   const theme = useThemeState(useThemeProps)
+  useRefreshFontScale(disableFontScaling)
 
   const { theme: paperTheme, fonts } = useMemo(
     () => createPaperTheme(theme.theme ?? defaultTheme, fontConfig, theme.colorMode),

package/src/hooks/useRefreshFontScale.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+import { AppState, PixelRatio } from 'react-native'
+import { useFontScale } from '../store/useFontScale'
+
+/**
+ * Subscribes to app state and refreshes the global font scale when the app
+ * becomes active (cold start or returning from background). Call once near the
+ * root of the app (e.g. in _layout).
+ */
+export function useRefreshFontScale(disableFontScaling = false) {
+  useEffect(() => {
+    if (disableFontScaling) {
+      useFontScale.setState({ fontScale: 1 })
+      return () => {}
+    }
+    const refresh = () => useFontScale.setState({ fontScale: PixelRatio.getFontScale() ?? 1 })
+
+    refresh()
+
+    const sub = AppState.addEventListener('change', nextState => {
+      if (nextState === 'active') refresh()
+    })
+
+    return () => sub.remove()
+  }, [disableFontScaling])
+}

package/src/store/index.ts

@@ -1 +1,2 @@
+export * from './useFontScale'
 export * from './useScreen'

package/src/store/useFontScale.ts

@@ -0,0 +1,8 @@
+import { PixelRatio } from 'react-native'
+import { create } from 'zustand'
+
+// export const normalizeFontScale = (fontScale: number) =>
+//   fontScale > 1 ? (fontScale - 1) * 0.5 + 1 : fontScale
+export const useFontScale = create<{ fontScale: number }>(() => ({
+  fontScale: PixelRatio.getFontScale() ?? 1,
+}))