related-ui-components 1.1.8 → 1.2.0

package/src/index.ts

@@ -1,10 +1,10 @@
-// import { registerRootComponent } from 'expo';
-// import "react-native-reanimated";
+import { registerRootComponent } from 'expo';
+import "react-native-reanimated";
 
 
-// import App from "./app";
+import App from "./app";
 
-// registerRootComponent(App);
+registerRootComponent(App);
 
 export * from "./theme"
 export * from "./components";

package/src/theme/ThemeContext.tsx

@@ -6,28 +6,40 @@ import React, {
   ReactNode,
 } from "react";
 
-import { useColorScheme } from "react-native";
+import { I18nManager, useColorScheme } from "react-native";
 import { lightTheme, ThemeType, darkTheme } from "./Colors";
 
-export const ThemeContext = createContext(lightTheme);
+interface RelatedContext {
+  theme: ThemeType;
+  isRTL: boolean;
+}
+export const ThemeContext = createContext<RelatedContext>({
+  theme: lightTheme,
+  isRTL: I18nManager.isRTL,
+});
 
 // Define props for ThemeProvider
-interface ThemeProviderProps {
+interface RelatedProviderProps {
   children: ReactNode;
   customLightTheme?: Partial<ThemeType>;
   customDarkTheme?: Partial<ThemeType>;
   dark?: boolean;
+  forceRTL?: boolean;
 }
 
 // Provider component
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+export const RelatedProvider: React.FC<RelatedProviderProps> = ({
   children,
   customLightTheme,
   customDarkTheme,
-  dark
+  dark,
+  forceRTL,
 }) => {
   // Use system preference as initial value
-  const [isDark, setIsDark] = useState<boolean>(dark || useColorScheme() === "dark");
+  const [isDark, setIsDark] = useState<boolean>(
+    dark || useColorScheme() === "dark"
+  );
+  const currentIsRTL = typeof forceRTL === "boolean" ? forceRTL : false;
 
   // Allow custom themes to override defaults
   const [themes, setThemes] = useState({
@@ -35,10 +47,17 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     dark: { ...darkTheme, ...customDarkTheme } as ThemeType,
   });
 
-  const value = isDark ? themes.dark : themes.light;
+  const currentTheme = isDark ? themes.dark : themes.light;
+
+  const contextValue: RelatedContext = {
+    theme: currentTheme,
+    isRTL: currentIsRTL,
+  };
 
   return (
-    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
   );
 };