@oxyhq/services 6.9.46 → 6.10.2

package/src/ui/components/BottomSheet.tsx

@@ -1,447 +1,48 @@
-import type React from 'react';
-import { forwardRef, useImperativeHandle, useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { forwardRef } from 'react';
 import {
-    View,
-    StyleSheet,
-    Modal,
-    Pressable,
-    Dimensions,
-    Platform,
-    type ViewStyle,
-    type StyleProp,
-} from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, {
-    interpolate,
-    runOnJS,
-    useAnimatedScrollHandler,
-    useAnimatedStyle,
-    useSharedValue,
-    withSpring,
-    withTiming,
-} from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from '@oxyhq/bloom/theme';
-
-// Keyboard handler — only on native platforms. On web, keyboard events are handled by the browser.
-const noopKeyboardHandler = (_handlers: Record<string, (e: { height: number }) => void>, _deps: unknown[]) => {};
-let useKeyboardHandler: (handlers: Record<string, (e: { height: number }) => void>, deps: unknown[]) => void = noopKeyboardHandler;
-if (Platform.OS !== 'web') {
-    try {
-        useKeyboardHandler = require('react-native-keyboard-controller').useKeyboardHandler;
-    } catch {
-        // Keyboard controller not available
-    }
-}
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
-
-const SPRING_CONFIG = {
-    damping: 25,
-    stiffness: 300,
-    mass: 0.8,
-};
-
-export interface BottomSheetRef {
-    present: () => void;
-    dismiss: () => void;
-    close: () => void;
-    expand: () => void;
-    collapse: () => void;
-    scrollTo: (y: number, animated?: boolean) => void;
-}
-
-export interface BottomSheetProps {
-    children: React.ReactNode;
-    onDismiss?: () => void;
-    enablePanDownToClose?: boolean;
-    backgroundComponent?: (props: { style?: StyleProp<ViewStyle> }) => React.ReactElement | null;
-    backdropComponent?: (props: { style?: StyleProp<ViewStyle>; onPress?: () => void }) => React.ReactElement | null;
-    style?: StyleProp<ViewStyle>;
-    enableHandlePanningGesture?: boolean;
-    onDismissAttempt?: () => boolean;
-    detached?: boolean; // If true, shows with margins and rounded corners. If false, full width with rounded top only.
-}
-
-const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef<BottomSheetRef>) => {
-    const {
-        children,
-        onDismiss,
-        enablePanDownToClose = true,
-        backgroundComponent,
-        backdropComponent,
-        style,
-        enableHandlePanningGesture = true,
-        onDismissAttempt,
-        detached = false,
-    } = props;
-
-    const insets = useSafeAreaInsets();
-    const theme = useTheme();
-    const [visible, setVisible] = useState(false);
-    const [rendered, setRendered] = useState(false); // keep mounted for exit animation
-    const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const hasClosedRef = useRef(false);
-    const scrollViewRef = useRef<Animated.ScrollView>(null);
-
-    const translateY = useSharedValue(SCREEN_HEIGHT);
-    const opacity = useSharedValue(0);
-    const scrollOffsetY = useSharedValue(0);
-    const isScrollAtTop = useSharedValue(true);
-    const allowPanClose = useSharedValue(true);
-    const keyboardHeight = useSharedValue(0);
-    const context = useSharedValue({ y: 0 });
-
-    useKeyboardHandler({
-        onMove: (e) => {
-            'worklet';
-            keyboardHeight.value = e.height;
-        },
-        onEnd: (e) => {
-            'worklet';
-            keyboardHeight.value = e.height;
-        },
-    }, []);
-
-    // Dismiss callbacks
-    const safeClose = useCallback(() => {
-        if (onDismissAttempt?.()) {
-            onDismiss?.();
-        } else if (!onDismissAttempt) {
-            onDismiss?.();
-        }
-    }, [onDismiss, onDismissAttempt]);
-
-    const finishClose = useCallback(() => {
-        if (hasClosedRef.current) return;
-        hasClosedRef.current = true;
-        safeClose();
-        setRendered(false);
-    }, [safeClose]);
-
-    // biome-ignore lint/correctness/useExhaustiveDependencies: opacity and translateY are Reanimated SharedValues (stable refs) that should not be listed as dependencies
-    useEffect(() => {
-        if (visible) {
-            if (closeTimeoutRef.current) {
-                clearTimeout(closeTimeoutRef.current);
-                closeTimeoutRef.current = null;
-            }
-            hasClosedRef.current = false;
-            opacity.value = withTiming(1, { duration: 250 });
-            translateY.value = withSpring(0, SPRING_CONFIG);
-        } else if (rendered) {
-            opacity.value = withTiming(0, { duration: 250 }, (finished) => {
-                if (finished) {
-                    runOnJS(finishClose)();
-                }
-            });
-            translateY.value = withSpring(SCREEN_HEIGHT, { ...SPRING_CONFIG, stiffness: 250 });
-
-            // Fallback timer to ensure close completes (especially on web)
-            if (closeTimeoutRef.current) {
-                clearTimeout(closeTimeoutRef.current);
-            }
-            closeTimeoutRef.current = setTimeout(() => {
-                finishClose();
-                closeTimeoutRef.current = null;
-            }, 300);
-        }
-    }, [visible, rendered, finishClose]);
-
-    // Clear pending timeout on unmount
-    useEffect(() => () => {
-        if (closeTimeoutRef.current) {
-            clearTimeout(closeTimeoutRef.current);
-            closeTimeoutRef.current = null;
-        }
-    }, []);
-
-    // Apply web scrollbar styles when colors change
-    useEffect(() => {
-        if (Platform.OS === 'web') {
-            createWebScrollbarStyle(theme.colors.border);
-        }
-    }, [theme.colors.border]);
-
-    const present = useCallback(() => {
-        setRendered(true);
-        setVisible(true);
-    }, []);
-    const dismiss = useCallback(() => {
-        setVisible(false);
-    }, []);
-
-    const scrollTo = useCallback((y: number, animated = true) => {
-        scrollViewRef.current?.scrollTo({ y, animated });
-    }, []);
-
-    useImperativeHandle(ref, () => ({
-        present,
-        dismiss,
-        close: dismiss,
-        expand: present,
-        collapse: dismiss,
-        scrollTo,
-    }), [present, dismiss, scrollTo]);
-
-    const nativeGesture = useMemo(() => Gesture.Native(), []);
-
-    const panGesture = Gesture.Pan()
-        .enabled(enablePanDownToClose)
-        .simultaneousWithExternalGesture(nativeGesture)
-        .onStart(() => {
-            'worklet';
-            context.value = { y: translateY.value };
-            allowPanClose.value = scrollOffsetY.value <= 8;
-        })
-        .onUpdate((event) => {
-            'worklet';
-            if (!allowPanClose.value) {
-                return;
-            }
-            const newTranslateY = context.value.y + event.translationY;
-            // If user is scrolling down while content isn't at (or near) the top, let ScrollView handle it
-            const atTopOrNearTop = scrollOffsetY.value <= 8; // slightly larger tolerance for smoother handoff
-            if (event.translationY > 0 && !atTopOrNearTop) {
-                return;
-            }
-            if (newTranslateY >= 0) {
-                translateY.value = newTranslateY;
-            } else if (detached) {
-                // Only allow overdrag (pulling up beyond top) when detached
-                translateY.value = newTranslateY * 0.3;
-            } else {
-                // In normal mode, prevent overdrag - clamp to 0
-                translateY.value = 0;
-            }
-        })
-        .onEnd((event) => {
-            'worklet';
-            if (!allowPanClose.value) {
-                return;
-            }
-            const velocity = event.velocityY;
-            const distance = translateY.value;
-            // Require a deeper pull to close (more like native bottom sheets)
-            const closeThreshold = Math.max(140, SCREEN_HEIGHT * 0.25);
-            const fastSwipeThreshold = 900;
-            const shouldClose =
-                velocity > fastSwipeThreshold ||
-                (distance > closeThreshold && velocity > -300);
-
-            if (shouldClose) {
-                translateY.value = withSpring(SCREEN_HEIGHT, {
-                    ...SPRING_CONFIG,
-                    velocity: velocity,
-                });
-                opacity.value = withTiming(0, { duration: 250 }, (finished) => {
-                    if (finished) {
-                        runOnJS(finishClose)();
-                    }
-                });
-            } else {
-                translateY.value = withSpring(0, {
-                    ...SPRING_CONFIG,
-                    velocity: velocity,
-                });
-            }
-        });
-
-    const backdropStyle = useAnimatedStyle(() => ({
-        opacity: opacity.value,
-    }));
-
-    const sheetStyle = useAnimatedStyle(() => {
-        const scale = interpolate(translateY.value, [0, SCREEN_HEIGHT], [1, 0.95]);
-        return {
-            transform: [
-                { translateY: translateY.value - keyboardHeight.value },
-                { scale },
-            ],
-        };
-    });
-
-    const sheetHeightStyle = useAnimatedStyle(() => ({
-        maxHeight: SCREEN_HEIGHT - keyboardHeight.value - insets.top - (detached ? insets.bottom + 16 : 0),
-    }), [insets.top, insets.bottom, detached]);
-
-    const sheetMarginStyle = useAnimatedStyle(() => {
-        // Only add margin when detached, otherwise extend behind safe area
-        if (detached) {
-            return {
-                marginBottom: keyboardHeight.value > 0 ? 16 : insets.bottom + 16,
-            };
-        }
-        return {
-            marginBottom: 0,
-        };
-    }, [insets.bottom, detached]);
-
-    const handleBackdropPress = useCallback(() => {
-        // Always animate close on backdrop press
-        if (onDismissAttempt && !onDismissAttempt()) {
-            return;
-        }
-        dismiss();
-    }, [onDismissAttempt, dismiss]);
-
-    const scrollHandler = useAnimatedScrollHandler({
-        onScroll: (event) => {
-            scrollOffsetY.value = event.contentOffset.y;
-            isScrollAtTop.value = event.contentOffset.y <= 0;
-        },
-    });
-
-    const dynamicStyles = useMemo(() => {
-        return StyleSheet.create({
-            handle: {
-                ...styles.handle,
-                backgroundColor: theme.isDark ? theme.colors.border : theme.colors.borderLight,
-            },
-            sheet: {
-                ...styles.sheet,
-                ...(detached ? styles.sheetDetached : styles.sheetNormal),
-                backgroundColor: theme.colors.background,
-            },
-            scrollContent: {
-                ...styles.scrollContent,
-                // In normal mode, don't add padding here - screens handle their own padding
-                // The sheet extends behind safe area, and screens add padding as needed
-            },
-        });
-    }, [theme.colors.background, theme.colors.border, theme.colors.borderLight, theme.isDark, detached]);
-
-    if (!rendered) return null;
-
+    BottomSheet as BloomBottomSheet,
+    type BottomSheetProps as BloomBottomSheetProps,
+    type BottomSheetRef,
+} from '@oxyhq/bloom/bottom-sheet';
+
+/**
+ * Thin wrapper around `@oxyhq/bloom`'s `BottomSheet` (>=0.4.0).
+ *
+ * Bloom is the canonical bottom-sheet primitive for the Oxy ecosystem; this
+ * wrapper exists only to inject service-specific defaults so the 29+ screens
+ * mounted by `BottomSheetRouter` keep the exact UX they had under the
+ * pre-refactor in-tree implementation:
+ *
+ *   - `manualActivation: true` — the body pan uses RNGH's manualActivation
+ *     with scroll-handoff, the only RNGH 2.x pattern that doesn't steal
+ *     vertical events from inner scrollers on Android. The previous in-tree
+ *     implementation always ran in this mode.
+ *   - `dynamicBackdrop: true` — backdrop dims proportionally with drag
+ *     distance (iOS Photos style). The previous in-tree implementation
+ *     always did this.
+ *
+ * Consumers (`BottomSheetRouter`, primarily) can still override either default
+ * by passing the prop explicitly — for example, per-route via `getSheetConfig`.
+ *
+ * Public API (name + ref shape) is identical to the previous in-tree
+ * implementation, so external consumers and `BottomSheetRouter` need no
+ * changes beyond the new pass-through props.
+ */
+export type BottomSheetProps = BloomBottomSheetProps;
+export type { BottomSheetRef };
+
+const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props, ref) => {
+    const { manualActivation = true, dynamicBackdrop = true, ...rest } = props;
     return (
-        <Modal visible={rendered} transparent animationType="none" statusBarTranslucent onRequestClose={dismiss}>
-            <View style={StyleSheet.absoluteFill}>
-                <Animated.View style={[styles.backdrop, { backgroundColor: theme.colors.overlay }, backdropStyle]}>
-                    {backdropComponent ? (
-                        backdropComponent({ onPress: handleBackdropPress })
-                    ) : (
-                        <Pressable style={styles.backdropTouchable} onPress={handleBackdropPress}>
-                            <View style={StyleSheet.absoluteFill} />
-                        </Pressable>
-                    )}
-                </Animated.View>
-
-                <GestureDetector gesture={panGesture}>
-                    <Animated.View style={[dynamicStyles.sheet, sheetMarginStyle, sheetStyle, sheetHeightStyle]}>
-                        {backgroundComponent?.({ style: styles.background })}
-
-                        <View style={dynamicStyles.handle} />
-
-                        <GestureDetector gesture={nativeGesture}>
-                            <Animated.ScrollView
-                                ref={scrollViewRef}
-                                style={[
-                                    styles.scrollView,
-                                    Platform.OS === 'web' && ({
-                                        scrollbarWidth: 'thin',
-                                        scrollbarColor: `${theme.colors.border} transparent`,
-                                    } as ViewStyle),
-                                ]}
-                                contentContainerStyle={dynamicStyles.scrollContent}
-                                showsVerticalScrollIndicator={false}
-                                keyboardShouldPersistTaps="handled"
-                                onScroll={scrollHandler}
-                                scrollEventThrottle={16}
-                                {...(Platform.OS === 'web' ? { className: 'bottom-sheet-scrollview' } : undefined)}
-                                onLayout={() => {
-                                    if (Platform.OS === 'web') {
-                                        createWebScrollbarStyle(theme.colors.border);
-                                    }
-                                }}
-                            >
-                                {children}
-                            </Animated.ScrollView>
-                        </GestureDetector>
-                    </Animated.View>
-                </GestureDetector>
-            </View>
-        </Modal>
+        <BloomBottomSheet
+            ref={ref}
+            manualActivation={manualActivation}
+            dynamicBackdrop={dynamicBackdrop}
+            {...rest}
+        />
     );
 });
 
 BottomSheet.displayName = 'BottomSheet';
 
-const styles = StyleSheet.create({
-    backdrop: {
-        flex: 1,
-    },
-    backdropTouchable: {
-        flex: 1,
-    },
-    sheet: {
-        position: 'absolute',
-        bottom: 0,
-        overflow: 'hidden',
-        maxWidth: 800,
-        alignSelf: 'center',
-        marginHorizontal: 'auto',
-    },
-    sheetDetached: {
-        left: 16,
-        right: 16,
-        borderRadius: 24,
-    },
-    sheetNormal: {
-        left: 0,
-        right: 0,
-        borderTopLeftRadius: 24,
-        borderTopRightRadius: 24,
-    },
-    handle: {
-        position: 'absolute',
-        top: 10,
-        left: '50%',
-        marginLeft: -18,
-        width: 36,
-        height: 5,
-        borderRadius: 3,
-        zIndex: 100,
-    },
-    background: {
-        ...StyleSheet.absoluteFillObject,
-    },
-    scrollView: {
-        flex: 1,
-    },
-    scrollContent: {
-        flexGrow: 1,
-    },
-});
-
-// Create web scrollbar styles dynamically based on theme
-const createWebScrollbarStyle = (borderColor: string) => {
-    if (Platform.OS !== 'web' || typeof document === 'undefined') return;
-
-    const styleId = 'bottom-sheet-scrollbar-style';
-    let styleElement = document.getElementById(styleId) as HTMLStyleElement;
-
-    if (!styleElement) {
-        styleElement = document.createElement('style');
-        styleElement.id = styleId;
-        document.head.appendChild(styleElement);
-    }
-
-    styleElement.textContent = `
-        .bottom-sheet-scrollview::-webkit-scrollbar {
-            width: 6px;
-        }
-        .bottom-sheet-scrollview::-webkit-scrollbar-track {
-            background: transparent;
-            border-radius: 10px;
-        }
-        .bottom-sheet-scrollview::-webkit-scrollbar-thumb {
-            background: ${borderColor};
-            border-radius: 10px;
-        }
-        .bottom-sheet-scrollview::-webkit-scrollbar-thumb:hover {
-            background: ${borderColor};
-        }
-    `;
-};
-
-export default BottomSheet;
+export default BottomSheet;

package/src/ui/components/BottomSheetRouter.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useCallback, useMemo, type ErrorInfo } from '
 import { BackHandler, View, StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native';
 import { useStore } from 'zustand';
 import type { RouteName } from '../navigation/routes';
-import { getScreenComponent, isValidRoute } from '../navigation/routes';
+import { getScreenComponent, getSheetConfig, isValidRoute } from '../navigation/routes';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import BottomSheet, { type BottomSheetRef } from './BottomSheet';
@@ -209,6 +209,13 @@ const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, o
         };
     }, [navigate, handleGoBack, theme.mode, currentScreen, currentStep, screenProps, handleStepChange, scrollTo]);
 
+    // Route-level sheet config (e.g. whether the sheet provides its own
+    // ScrollView or yields scrolling to a VirtualizedList inside the screen).
+    const sheetConfig = useMemo(
+        () => getSheetConfig(currentScreen, screenProps),
+        [currentScreen, screenProps],
+    );
+
     return (
         <BottomSheet
             ref={sheetRef}
@@ -218,6 +225,10 @@ const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, o
             style={styles.container}
             onDismiss={handleDismiss}
             onDismissAttempt={handleDismissAttempt}
+            scrollable={sheetConfig.scrollable}
+            manualActivation={sheetConfig.manualActivation}
+            dynamicBackdrop={sheetConfig.dynamicBackdrop}
+            handleComponent={sheetConfig.handleComponent}
         >
             {ScreenComponent && currentScreen && (
                 <ScreenErrorBoundary screenName={currentScreen}>

package/src/ui/components/FollowButton.tsx

@@ -9,8 +9,7 @@ import {
   ActivityIndicator
 } from 'react-native';
 import { useOxy } from '../context/OxyContext';
-import { fontFamilies } from '../styles/fonts';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { useFollowForButton } from '../hooks/useFollow';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { OxyServices } from '@oxyhq/core';
@@ -94,7 +93,7 @@ const FollowButtonInner = memo(function FollowButtonInner({
       {showLoadingState && isLoading ? (
         <ActivityIndicator
           size="small"
-          color={isFollowing ? colors.text : '#FFFFFF'}
+          color={isFollowing ? colors.text : colors.negativeForeground}
         />
       ) : (
         <Text
@@ -159,7 +158,6 @@ function getBaseButtonStyle(size: string, style?: StyleProp<ViewStyle>): StylePr
 
 function getBaseTextStyle(size: string, textStyle?: StyleProp<TextStyle>): StyleProp<TextStyle> {
   const baseTextStyle: TextStyle = {
-    fontFamily: fontFamilies.interSemiBold,
     fontWeight: '600',
   };
 

package/src/ui/components/Header.tsx

@@ -13,7 +13,6 @@ import AnimatedReanimated, { useAnimatedStyle, interpolate, Extrapolation, type
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import OxyIcon from './icon/OxyIcon';
-import { fontFamilies } from '../styles/fonts';
 import { useTheme } from '@oxyhq/bloom/theme';
 
 // Calculate header height based on platform and variant
@@ -406,14 +405,12 @@ const styles = StyleSheet.create({
     titleDefault: {
         fontSize: 18,
         fontWeight: '700',
-        fontFamily: fontFamilies.interBold,
         letterSpacing: -0.5,
         lineHeight: 22,
     },
     titleLarge: {
         fontSize: 28,
         fontWeight: '800',
-        fontFamily: fontFamilies.interExtraBold,
         letterSpacing: -1,
         lineHeight: 34,
         marginBottom: 3,
@@ -421,7 +418,6 @@ const styles = StyleSheet.create({
     titleMinimal: {
         fontSize: 16,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
         letterSpacing: -0.3,
         lineHeight: 20,
     },
@@ -475,7 +471,6 @@ const styles = StyleSheet.create({
     actionText: {
         fontSize: 14,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
         letterSpacing: -0.2,
     },
     loadingContainer: {

package/src/ui/components/Icon.tsx

@@ -4,6 +4,9 @@ import {
   Image,
   type ImageSourcePropType,
   Platform,
+  type StyleProp,
+  type ImageStyle,
+  type TextStyle,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useInternalTheme } from './theming';
@@ -19,13 +22,15 @@ export type IconSource =
   | Readonly<{ source: IconSourceBase; direction: 'rtl' | 'ltr' | 'auto' }>
   | ((props: IconProps & { color: string }) => React.ReactNode);
 
+type IconStyle = StyleProp<ImageStyle> | StyleProp<TextStyle>;
+
 type IconProps = {
   /**
    * Size of icon.
    */
   size: number;
   allowFontScaling?: boolean;
-  style?: any;
+  style?: IconStyle;
 };
 
 const isImageSource = (source: any) =>
@@ -150,7 +155,10 @@ const Icon = ({
     );
   }if (typeof s === 'string') {
     // String icons - use MaterialCommunityIcons from @expo/vector-icons
-    // This is the default icon library used by react-native-paper
+    // This is the default icon library used by react-native-paper.
+    // The package ships a literal-union for `name`, but the local
+    // module augmentation in src/types/expo-vector-icons.d.ts widens it
+    // to `string` so dynamic names compile without a cast.
     const styleArray = Array.isArray(rest.style)
       ? rest.style
       : rest.style
@@ -158,8 +166,7 @@ const Icon = ({
         : [];
     return (
       <MaterialCommunityIcons
-        // biome-ignore lint/suspicious/noExplicitAny: MaterialCommunityIcons name expects literal union; dynamic icon names require cast
-        name={s as any}
+        name={s}
         size={size}
         color={iconColor}
         style={[
@@ -167,8 +174,7 @@ const Icon = ({
             transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
           },
           ...styleArray,
-          // biome-ignore lint/suspicious/noExplicitAny: style array type incompatibility with MaterialCommunityIcons style prop
-        ] as any}
+        ]}
         testID={testID}
         {...accessibilityProps}
       />

package/src/ui/components/IconButton/IconButton.tsx

@@ -191,9 +191,6 @@ const IconButton = forwardRef<View, Props>(
           rippleColor={rippleColor}
           accessibilityLabel={accessibilityLabel}
           style={[styles.touchable, contentStyle]}
-          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-          accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
-          accessibilityComponentType="button"
           accessibilityRole="button"
           accessibilityState={{ disabled }}
           disabled={disabled}

package/src/ui/components/OxyPayButton.tsx

@@ -2,7 +2,6 @@ import type React from 'react';
 import { useState } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type LayoutChangeEvent } from 'react-native';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { fontFamilies } from '../styles/fonts';
 import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
 import OxyLogo from './OxyLogo';
 
@@ -117,7 +116,6 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     text: {
-        fontFamily: fontFamilies.inter,
         fontWeight: '700',
     },
 });