bugfix: update migrated components default text color

packages/mobile-sdk-alpha/README.md

@@ -37,15 +37,25 @@ The SDK includes custom fonts that need to be linked to your app:
 
 #### Automatic Linking (Recommended)
 
-If your app uses React Native autolinking (RN 0.60+), run:
+React Native autolinking (RN 0.60+) does not link assets by default. First, configure your app's assets:
+
+Create or update `react-native.config.js` at the app root:
+
+```js
+module.exports = {
+  assets: ['./node_modules/@selfxyz/mobile-sdk-alpha/assets/fonts'],
+};
+```
+
+Then run:
 
 ```bash
 npx react-native-asset
-# or
-yarn react-native-asset
+# or (Yarn 2+)
+yarn dlx react-native-asset
 ```
 
-This will automatically copy the font files to your iOS and Android projects.
+This copies the font files to your iOS and Android projects.
 
 #### Manual Linking
 
@@ -71,20 +81,38 @@ If autolinking doesn't work or you need manual control:
 
 **Android:**
 
-1. Copy font files to your Android project:
+1. Ensure the `fonts` directory exists:
 
    ```bash
-   cp node_modules/@selfxyz/mobile-sdk-alpha/assets/fonts/* android/app/src/main/assets/fonts/
+   mkdir -p android/app/src/main/assets/fonts
    ```
 
-2. If the `fonts` directory doesn't exist, create it:
+2. Copy font files to your Android project:
    ```bash
-   mkdir -p android/app/src/main/assets/fonts
+   cp node_modules/@selfxyz/mobile-sdk-alpha/assets/fonts/* android/app/src/main/assets/fonts/
    ```
 
 The fonts will be automatically available to your app.
 
-### 3. Initialize the SDK
+### 3. Install peer dependencies
+
+This SDK requires `react-native-svg` as a peer dependency. Install it in your app:
+
+```bash
+npm install react-native-svg
+# or
+yarn add react-native-svg
+```
+
+**Minimum required version:** `react-native-svg@*` (any version compatible with your React Native version)
+
+For iOS, run `pod install` after installation:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+### 4. Initialize the SDK
 
 Provide `scanner`, `network`, and `crypto` adapters. `storage`, `clock`, and `logger` default to no-ops.
 
@@ -100,6 +128,67 @@ const sdk = createSelfClient({
 });
 ```
 
+## Migration from Tamagui
+
+If you're upgrading from a Tamagui-based version of this SDK, please note the following breaking changes:
+
+### Breaking Changes
+
+**1. UI Component System**
+
+- **Removed:** Tamagui dependency and Tamagui-based components
+- **Added:** Custom React Native components with direct styling
+- **Impact:** Any custom theme overrides or Tamagui-specific configurations will need to be replaced
+
+**2. Font System**
+
+- **Changed:** Fonts are now bundled directly with the package
+- **Required:** Manual font linking step (see installation section above)
+- **Impact:** You must run `react-native-asset` or manually link fonts
+
+**3. Peer Dependencies**
+
+- **Added:** `react-native-svg` is now a required peer dependency
+- **Required:** Install `react-native-svg` in your app
+- **Impact:** SVG-based UI components now use `react-native-svg` directly
+
+### Upgrade Steps
+
+1. **Remove Tamagui dependencies** (if you installed them specifically for this SDK):
+
+   ```bash
+   # Only if these were installed solely for the SDK
+   npm uninstall @tamagui/core @tamagui/config
+   ```
+
+2. **Install required peer dependencies:**
+
+   ```bash
+   npm install react-native-svg
+   cd ios && pod install && cd ..
+   ```
+
+3. **Link fonts** following the asset linking instructions in the installation section above
+
+4. **Update your imports** - Component imports remain the same, but internal implementation has changed:
+
+   ```ts
+   // These imports still work
+   import { PrimaryButton, Title, Body } from '@selfxyz/mobile-sdk-alpha/components';
+   ```
+
+5. **Remove Tamagui configuration** - If you had Tamagui config specifically for this SDK, it's no longer needed
+
+6. **Test your UI** - Components now use platform-native styling instead of Tamagui
+
+### Style Customization
+
+Component styling is no longer customizable via Tamagui themes. The SDK now uses fixed styles optimized for the verification flow. If you need to customize UI:
+
+- Use the component composition patterns provided by the SDK
+- Wrap SDK components with your own styled containers
+- Use the `style` prop where available
+
 ## SDK Events
 
 The SDK emits events throughout the verification lifecycle. Subscribe using `selfClient.on(event, callback)`.

packages/mobile-sdk-alpha/src/components/buttons/PrimaryButtonLongHold.web.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import { Animated } from 'react-native';
 
@@ -14,7 +14,8 @@ export function HeldPrimaryButton({ children, onLongPress, ...props }: HeldPrima
   const [hasTriggered, setHasTriggered] = useState(false);
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [isPressed, setIsPressed] = useState(false);
-  const animationValue = new Animated.Value(0);
+  const animationValueRef = useRef(new Animated.Value(0));
+  const animationValue = animationValueRef.current;
 
   const onPressIn = () => {
     setHasTriggered(false);

packages/mobile-sdk-alpha/src/components/typography/BodyText.tsx

@@ -6,8 +6,9 @@ import type React from 'react';
 import type { TextProps } from 'react-native';
 import { Text } from 'react-native';
 
+import { slate500 } from '../../constants/colors';
 import { dinot } from '../../utils/fonts';
 
 export const BodyText: React.FC<TextProps> = ({ style, ...props }) => (
-  <Text style={[{ fontFamily: dinot }, style]} {...props} />
+  <Text style={[{ fontFamily: dinot, color: slate500 }, style]} {...props} />
 );

packages/mobile-sdk-alpha/src/components/typography/Caption.tsx

@@ -3,7 +3,8 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import type React from 'react';
-import type { TextProps } from 'react-native';
+import { useMemo } from 'react';
+import { StyleSheet, type TextProps } from 'react-native';
 
 import { slate400 } from '../../constants/colors';
 import { BodyText } from './BodyText';
@@ -14,6 +15,7 @@ type CaptionProps = TextProps & {
 
 export const Caption: React.FC<CaptionProps> = ({ size, style, ...props }) => {
   const fontSize = size === 'small' ? 14 : size === 'large' ? 16 : 15;
+  const flattenedStyle = useMemo(() => StyleSheet.flatten([{ fontSize, color: slate400 }, style]), [fontSize, style]);
 
-  return <BodyText style={[{ fontSize, color: slate400 }, style]} {...props} />;
+  return <BodyText style={flattenedStyle} {...props} />;
 };

packages/mobile-sdk-alpha/src/components/typography/Title.tsx

@@ -3,9 +3,11 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import type React from 'react';
+import { useMemo } from 'react';
 import type { StyleProp, TextProps, TextStyle } from 'react-native';
-import { Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 
+import { black } from '../../constants/colors';
 import { advercase } from '../../utils/fonts';
 
 type TitleProps = TextProps & {
@@ -18,6 +20,7 @@ export const Title: React.FC<TitleProps> = ({ size, style, children, ...rest })
     fontSize: 28,
     lineHeight: 35,
     fontFamily: advercase,
+    color: black,
   };
 
   const largeStyle: TextStyle =
@@ -28,8 +31,10 @@ export const Title: React.FC<TitleProps> = ({ size, style, children, ...rest })
         }
       : {};
 
+  const flattenedStyle = useMemo(() => StyleSheet.flatten([baseStyle, largeStyle, style]), [size, style]);
+
   return (
-    <Text style={[baseStyle, largeStyle, style]} {...rest}>
+    <Text style={flattenedStyle} {...rest}>
       {children}
     </Text>
   );