@trustchex/react-native-sdk 1.250.0 → 1.253.0

package/src/Shared/Components/StyledButton.tsx

@@ -1,21 +1,127 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
-import { Button } from 'react-native-paper';
-import type { ButtonProps } from 'react-native-paper';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  ActivityIndicator,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { useTheme } from '../Contexts/ThemeContext';
 
-type StyledButtonProps = ButtonProps;
+// Calculate if a color is light or dark to determine text color
+const isLightColor = (color: string): boolean => {
+  // Remove # if present
+  const hex = color.replace('#', '');
+
+  // Convert to RGB
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  // Calculate relative luminance using WCAG formula
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  // Return true if light (luminance > 0.5)
+  return luminance > 0.5;
+};
+
+interface StyledButtonProps {
+  mode?: 'text' | 'outlined' | 'contained';
+  onPress?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  children: React.ReactNode;
+  style?: ViewStyle;
+  labelStyle?: TextStyle;
+  buttonColor?: string;
+  textColor?: string;
+}
 
 const StyledButton: React.FC<StyledButtonProps> = ({
+  mode = 'contained',
+  onPress,
+  disabled = false,
+  loading = false,
+  children,
   style,
   labelStyle,
-  ...props
+  buttonColor,
+  textColor,
 }) => {
+  const theme = useTheme();
+  const primaryColor = buttonColor || theme.colors.primary;
+
+  // Determine text color based on background color for contained mode
+  const getContainedTextColor = () => {
+    if (textColor) return textColor;
+    return isLightColor(primaryColor) ? '#000000' : '#FFFFFF';
+  };
+
+  const containedTextColor = getContainedTextColor();
+
+  const getButtonStyle = () => {
+    const baseStyle = [styles.button, style];
+    if (mode === 'contained') {
+      return [
+        ...baseStyle,
+        styles.containedButton,
+        { backgroundColor: primaryColor },
+        disabled && styles.disabledButton,
+      ];
+    }
+    if (mode === 'outlined') {
+      return [
+        ...baseStyle,
+        styles.outlinedButton,
+        { borderColor: primaryColor },
+        disabled && styles.disabledButton,
+      ];
+    }
+    return [...baseStyle, styles.textButton];
+  };
+
+  const getTextStyle = () => {
+    const baseStyle = [styles.label, labelStyle];
+    if (mode === 'contained') {
+      return [
+        ...baseStyle,
+        styles.containedLabel,
+        { color: containedTextColor },
+        disabled && styles.disabledLabel,
+      ];
+    }
+    if (mode === 'outlined') {
+      return [
+        ...baseStyle,
+        styles.outlinedLabel,
+        { color: primaryColor },
+        disabled && styles.disabledLabel,
+      ];
+    }
+    return [
+      ...baseStyle,
+      styles.textLabel,
+      { color: primaryColor },
+      disabled && styles.disabledLabel,
+    ];
+  };
+
+  const loadingColor = mode === 'contained' ? containedTextColor : primaryColor;
+
   return (
-    <Button
-      {...props}
-      style={[styles.button, style]}
-      labelStyle={[styles.label, labelStyle]}
-    />
+    <TouchableOpacity
+      style={getButtonStyle()}
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.7}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={loadingColor} />
+      ) : (
+        <Text style={getTextStyle()}>{children}</Text>
+      )}
+    </TouchableOpacity>
   );
 };
 
@@ -24,11 +130,36 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     height: 56,
     justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  containedButton: {
     elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+  outlinedButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+  },
+  textButton: {
+    backgroundColor: 'transparent',
+  },
+  disabledButton: {
+    opacity: 0.5,
   },
   label: {
     fontWeight: 'bold',
     fontSize: 16,
+    textAlign: 'center',
+  },
+  containedLabel: {},
+  outlinedLabel: {},
+  textLabel: {},
+  disabledLabel: {
+    opacity: 0.6,
   },
 });
 

package/src/Shared/Components/StyledTextInput.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  View,
+  Text,
+  type TextInputProps,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+
+interface StyledTextInputProps extends TextInputProps {
+  containerStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  placeholderStyle?: TextStyle;
+  borderColor?: string;
+  focusedBorderColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  placeholderColor?: string;
+}
+
+const StyledTextInput = React.forwardRef<TextInput, StyledTextInputProps>(
+  (
+    {
+      containerStyle,
+      inputStyle,
+      placeholderStyle,
+      borderColor = '#DDDDDD',
+      focusedBorderColor,
+      backgroundColor = '#FFFFFF',
+      textColor = '#000000',
+      placeholderColor = '#999999',
+      style,
+      placeholderTextColor,
+      onFocus,
+      onBlur,
+      value,
+      ...props
+    },
+    ref
+  ) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const hasValue = value !== undefined && value !== '';
+
+    const handleFocus = (e: any) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: any) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+
+    const currentBorderColor = isFocused
+      ? focusedBorderColor || borderColor
+      : borderColor;
+
+    return (
+      <View style={[styles.container, containerStyle]}>
+        <TextInput
+          ref={ref}
+          {...props}
+          value={value}
+          placeholder=""
+          style={[
+            styles.input,
+            {
+              backgroundColor,
+              borderColor: currentBorderColor,
+              color: textColor,
+            },
+            inputStyle,
+            style,
+          ]}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+        {!hasValue && props.placeholder && (
+          <View style={styles.placeholderContainer} pointerEvents="none">
+            <Text
+              style={[
+                styles.placeholderText,
+                { color: placeholderColor || placeholderTextColor || '#999' },
+                placeholderStyle,
+              ]}
+            >
+              {props.placeholder}
+            </Text>
+          </View>
+        )}
+      </View>
+    );
+  }
+);
+
+StyledTextInput.displayName = 'StyledTextInput';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative',
+  },
+  input: {
+    borderWidth: 2,
+    borderRadius: 8,
+    height: 56,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    fontWeight: '400',
+  },
+  placeholderContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  placeholderText: {
+    fontSize: 16,
+    fontWeight: '400',
+  },
+});
+
+export default StyledTextInput;

package/src/Shared/Contexts/ThemeContext.tsx

@@ -0,0 +1,67 @@
+import React, { createContext, useContext, useMemo } from 'react';
+
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  tertiary: string;
+  background: string;
+  surface: string;
+  text: string;
+  textSecondary: string;
+  border: string;
+  error: string;
+  success: string;
+}
+
+interface ThemeContextType {
+  colors: ThemeColors;
+}
+
+const defaultColors: ThemeColors = {
+  primary: '#000000',
+  secondary: '#CCCCCC',
+  tertiary: '#FF0000',
+  background: '#FFFFFF',
+  surface: '#F5F5F5',
+  text: '#000000',
+  textSecondary: '#666666',
+  border: '#DDDDDD',
+  error: '#E53935',
+  success: '#43A047',
+};
+
+const ThemeContext = createContext<ThemeContextType>({
+  colors: defaultColors,
+});
+
+export const useTheme = () => useContext(ThemeContext);
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  primaryColor?: string;
+  secondaryColor?: string;
+  tertiaryColor?: string;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  primaryColor,
+  secondaryColor,
+  tertiaryColor,
+}) => {
+  const colors = useMemo(
+    () => ({
+      ...defaultColors,
+      primary: primaryColor || defaultColors.primary,
+      secondary: secondaryColor || defaultColors.secondary,
+      tertiary: tertiaryColor || defaultColors.tertiary,
+    }),
+    [primaryColor, secondaryColor, tertiaryColor]
+  );
+
+  const value = useMemo(() => ({ colors }), [colors]);
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+};

package/src/Translation/index.ts

@@ -1,20 +1,22 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import * as resources from './Resources';
-import { Platform, NativeModules } from 'react-native';
 
 const getCurrentLanguage = () => {
-  let deviceLanguage =
-    Platform.OS === 'ios'
-      ? NativeModules?.SettingsManager?.settings?.AppleLocale
-      : NativeModules?.I18nManager?.localeIdentifier;
+  try {
+    if (typeof Intl !== 'undefined' && Intl.DateTimeFormat) {
+      const locale = Intl.DateTimeFormat().resolvedOptions().locale;
+      if (locale) {
+        // Extract language code from locale (e.g., "en-US" -> "en", "tr-TR" -> "tr")
+        return locale.split(/[-_]/)[0].toLowerCase();
+      }
+    }
 
-  if (!deviceLanguage) {
-    deviceLanguage =
-      NativeModules?.SettingsManager?.settings?.AppleLanguages[0];
+    return 'en';
+  } catch (error) {
+    console.error('Error detecting language:', error);
+    return 'en';
   }
-
-  return deviceLanguage;
 };
 
 i18n.use(initReactI18next).init({

package/src/Trustchex.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState, useMemo } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { View, ActivityIndicator, StyleSheet } from 'react-native';
-import { MD3LightTheme, PaperProvider } from 'react-native-paper';
 import 'react-native-get-random-values';
+import { ThemeProvider } from './Shared/Contexts/ThemeContext';
 
 import IdentityDocumentEIDScanningScreen from './Screens/Dynamic/IdentityDocumentEIDScanningScreen';
 import IdentityDocumentScanningScreen from './Screens/Dynamic/IdentityDocumentScanningScreen';
@@ -51,7 +51,9 @@ const Trustchex: React.FC<TrustchexProps> = ({
 }) => {
   const [baseUrl, setBaseUrl] = useState<string | null>(null);
   const [sessionId, setSessionId] = useState<string | null>(null);
-  const [locale, setLocale] = useState(propLocale || i18n.language);
+  const [locale, setLocale] = useState(
+    propLocale || (i18n.language as 'en' | 'tr')
+  );
   const [isInitialized, setIsInitialized] = useState(false);
 
   const branding = useMemo(
@@ -62,19 +64,6 @@ const Trustchex: React.FC<TrustchexProps> = ({
     [propBranding]
   );
 
-  const theme = useMemo(
-    () => ({
-      ...MD3LightTheme,
-      colors: {
-        ...MD3LightTheme.colors,
-        primary: branding.primaryColor,
-        secondary: branding.secondaryColor,
-        tertiary: branding.tertiaryColor,
-      },
-    }),
-    [branding]
-  );
-
   const contextValue = useMemo(
     () => ({
       isDemoSession: false,
@@ -88,7 +77,7 @@ const Trustchex: React.FC<TrustchexProps> = ({
           contractIds: [],
           deviceInfo: '',
         },
-        locale: propLocale || i18n.language,
+        locale: propLocale || (i18n.language as 'en' | 'tr'),
       },
       onCompleted,
       onError,
@@ -131,7 +120,11 @@ const Trustchex: React.FC<TrustchexProps> = ({
   }
 
   return (
-    <PaperProvider theme={theme}>
+    <ThemeProvider
+      primaryColor={branding.primaryColor}
+      secondaryColor={branding.secondaryColor}
+      tertiaryColor={branding.tertiaryColor}
+    >
       <AppContext.Provider value={contextValue}>
         <NavigationContainer>
           <Stack.Navigator
@@ -170,7 +163,7 @@ const Trustchex: React.FC<TrustchexProps> = ({
           </Stack.Navigator>
         </NavigationContainer>
       </AppContext.Provider>
-    </PaperProvider>
+    </ThemeProvider>
   );
 };