@dryanovski/react-native-components 1.0.0 → 1.0.2

package/lib/typescript/src/index.d.ts

@@ -1,2 +1,3 @@
+export * from './components/Card/Card';
 export * from './providers/ThemeProvider';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AAGvC,cAAc,2BAA2B,CAAC"}

package/lib/typescript/src/providers/ThemeProvider.d.ts

@@ -1,5 +1,27 @@
 import React from 'react';
-import type { ThemeProviderProps } from './types';
+import type { ThemeContextType, ThemeProviderProps } from './types';
+/**
+ * Give access to theme context
+ * @returns {ThemeContextType} The current theme context
+ * @throws Will throw an error if used outside of ThemeProvider
+ * @example
+ * const { theme, changeTheme } = useTheme();
+ * console.log(theme); // 'light' | 'dark' | 'system'
+ */
+export declare const useTheme: () => ThemeContextType;
+/**
+ * ThemeProvider component to manage and provide theme context
+ * @param {React.ReactNode} children - The child components
+ * @param {ThemeVariants} theme - The current theme ('light', 'dark', 'system')
+ * @param {ThemeVariants} defaultTheme - The default theme if none is provided
+ * @param {(theme: ThemeVariants) => void} onThemeChange - Callback when theme changes
+ * @returns {JSX.Element} The ThemeProvider component
+ *
+ * @example
+ * <ThemeProvider theme="dark" onThemeChange={(theme) => console.log(theme)}>
+ *   <App />
+ * </ThemeProvider>
+ */
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export default ThemeProvider;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/lib/typescript/src/providers/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAQjB;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,wBAMpB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+BtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/typescript/src/providers/ThemeProvider.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ThemeProvider.test.d.ts.map

package/lib/typescript/src/providers/ThemeProvider.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.test.d.ts","sourceRoot":"","sources":["../../../../src/providers/ThemeProvider.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/src/providers/types.d.ts

@@ -1,5 +1,21 @@
+/**
+ * Theme variants type definition
+ */
+export type ThemeVariants = 'light' | 'dark' | 'system';
+/**
+ * ThemeProvider component props definition
+ */
 export type ThemeProviderProps = {
     children: React.ReactNode;
-    configuration?: {};
+    theme?: ThemeVariants;
+    defaultTheme?: ThemeVariants;
+    onThemeChange?: (theme: ThemeVariants) => void;
+};
+/**
+ * Theme context type definition
+ */
+export type ThemeContextType = {
+    theme: ThemeVariants;
+    changeTheme: (theme: ThemeVariants) => void;
 };
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/providers/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/providers/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,EAAE,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/providers/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,aAAa,CAAC;IAG7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,aAAa,CAAC;IAGrB,WAAW,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7C,CAAC"}

package/lib/typescript/src/utils/Style.d.ts

@@ -0,0 +1,4 @@
+import { StyleSheet } from 'react-native';
+export declare const Style: typeof StyleSheet;
+export default Style;
+//# sourceMappingURL=Style.d.ts.map

package/lib/typescript/src/utils/Style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Style.d.ts","sourceRoot":"","sources":["../../../../src/utils/Style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,eAAO,MAAM,KAAK,mBAAa,CAAC;AAEhC,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryanovski/react-native-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Collection of reusable React Native components for building mobile applications.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -36,6 +36,7 @@
     "@react-native-community/cli": "latest",
     "@react-native/babel-preset": "0.78.2",
     "@react-native/eslint-config": "^0.78.0",
+    "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.0.12",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -56,6 +57,7 @@
     "react-native-screens": "~4.16.0",
     "react-native-svg": "15.12.1",
     "react-native-worklets": "0.5.1",
+    "react-test-renderer": "19.1.0",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
@@ -67,14 +69,6 @@
     "react-native-svg": "^15.12.1",
     "react-native-worklets": "0.5.1"
   },
-  "jest": {
-    "preset": "react-native",
-    "passWithNoTests": true,
-    "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
-    ]
-  },
   "prettier": {
     "quoteProps": "consistent",
     "singleQuote": true,
@@ -108,5 +102,15 @@
     "languages": "js",
     "type": "library",
     "version": "0.51.1"
+  },
+  "dependencies": {
+    "@react-native/eslint-plugin": "^0.82.1",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-jest": "^29.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-native": "^5.0.0"
   }
 }

package/src/components/Card/Card.tsx

@@ -0,0 +1,25 @@
+import { View } from 'react-native';
+import Styles from './styles';
+import type { CardProps } from './types';
+
+/**
+ * Card component to display content within a styled container
+ * @param {React.ReactNode} children - The content to be displayed inside the card
+ * @param {ViewStyle} style - Additional styles for the card container
+ * @returns {JSX.Element} The Card component
+ * @example
+ * <Card style={{ margin: 10 }}>
+ *   <Text>This is a card</Text>
+ * </Card>
+ */
+export const Card: React.FC<CardProps> = ({ children, style, ...props }) => {
+  return (
+    <View style={[Styles.container, style]} {...props}>
+      {children}
+    </View>
+  );
+};
+
+Card.displayName = 'Card';
+
+export default Card;

package/src/components/Card/styles.ts

@@ -0,0 +1,27 @@
+import Style from '../../utils/Style';
+
+const DEFAULT_CARD = {
+  card_background_color: '#fff',
+  card_border_radius: 8,
+  card_padding: 16,
+  card_shadow_color: '#000',
+  card_shadow_offset: { width: 0, height: 2 },
+  card_shadow_opacity: 0.1,
+  card_shadow_radius: 4,
+  card_elevation: 3,
+};
+
+export const Styles = Style.create({
+  container: {
+    backgroundColor: DEFAULT_CARD.card_background_color,
+    borderRadius: DEFAULT_CARD.card_border_radius,
+    padding: DEFAULT_CARD.card_padding,
+    shadowColor: DEFAULT_CARD.card_shadow_color,
+    shadowOffset: DEFAULT_CARD.card_shadow_offset,
+    shadowOpacity: DEFAULT_CARD.card_shadow_opacity,
+    shadowRadius: DEFAULT_CARD.card_shadow_radius,
+    elevation: DEFAULT_CARD.card_elevation,
+  },
+});
+
+export default Styles;

package/src/components/Card/types.ts

@@ -0,0 +1,9 @@
+import type { View, ViewStyle } from 'react-native';
+
+/**
+ * Props for the Card component
+ */
+export type CardProps = {
+  children?: React.ReactNode;
+  style?: ViewStyle;
+} & View;

package/src/index.tsx

@@ -1,2 +1,5 @@
+// Export Components
+export * from './components/Card/Card';
+
 // Provider
 export * from './providers/ThemeProvider';

package/src/providers/README.md

@@ -0,0 +1,22 @@
+# ThemeProvider
+
+Design to manage and provide theming capabilities to your application.
+
+## Usage
+
+```tsx
+import { ThemeProvider } from '@dryanovski/react-native-components';
+
+const App = () => {
+  return (
+    <ThemeProvider theme="dark">
+      <YourAppComponents />
+    </ThemeProvider>
+  );
+};
+```
+
+## Props
+
+- `theme`: A string representing the theme to be applied (e.g., "light", "dark").
+- `children`: The child components that will have access to the theme context.

package/src/providers/ThemeProvider.test.tsx

@@ -0,0 +1,340 @@
+import { act, renderHook, waitFor } from '@testing-library/react-native';
+import React from 'react';
+import { useColorScheme as useDeviceColorScheme } from 'react-native';
+import { ThemeProvider, useTheme } from './ThemeProvider';
+
+// Mock react-native's useColorScheme hook
+jest.mock('react-native', () => ({
+  useColorScheme: jest.fn(),
+}));
+
+const mockedUseDeviceColorScheme = useDeviceColorScheme as jest.MockedFunction<
+  typeof useDeviceColorScheme
+>;
+
+describe('ThemeProvider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockedUseDeviceColorScheme.mockReturnValue('light');
+  });
+
+  describe('useTheme hook', () => {
+    it('should throw error when used outside ThemeProvider', () => {
+      // Suppress console.error for this test
+      const originalError = console.error;
+      console.error = jest.fn();
+
+      expect(() => {
+        renderHook(() => useTheme());
+      }).toThrow('useTheme must be used within a ThemeProvider');
+
+      console.error = originalError;
+    });
+
+    it('should return theme context when used inside ThemeProvider', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider>{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current).toHaveProperty('theme');
+      expect(result.current).toHaveProperty('changeTheme');
+    });
+  });
+
+  describe('ThemeProvider component', () => {
+    it('should use defaultTheme when no theme prop is provided and device is in light mode', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should use defaultTheme even when device is in dark mode', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider>{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      // defaultTheme is 'light' by default, so it should use 'light' even though device is 'dark'
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should use provided theme prop over device color scheme', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider theme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should use custom defaultTheme when provided', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should call onThemeChange when theme prop is provided', async () => {
+      const onThemeChange = jest.fn();
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider theme="light" onThemeChange={onThemeChange}>
+          {children}
+        </ThemeProvider>
+      );
+
+      renderHook(() => useTheme(), { wrapper });
+
+      await waitFor(() => {
+        expect(onThemeChange).toHaveBeenCalledWith('light');
+      });
+    });
+
+    it('should not call onThemeChange when no theme prop is provided', () => {
+      const onThemeChange = jest.fn();
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider onThemeChange={onThemeChange}>{children}</ThemeProvider>
+      );
+
+      renderHook(() => useTheme(), { wrapper });
+
+      // onThemeChange should not be called when theme prop is not provided
+      expect(onThemeChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('changeTheme function', () => {
+    it('should change theme to dark', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+
+      act(() => {
+        result.current.changeTheme('dark');
+      });
+
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should change theme to light', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('dark');
+
+      act(() => {
+        result.current.changeTheme('light');
+      });
+
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should use device color scheme when theme is set to "system"', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+
+      act(() => {
+        result.current.changeTheme('system');
+      });
+
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should switch to light theme when system theme is set and device is in light mode', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('dark');
+
+      act(() => {
+        result.current.changeTheme('system');
+      });
+
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should handle multiple theme changes', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+
+      act(() => {
+        result.current.changeTheme('dark');
+      });
+      expect(result.current.theme).toBe('dark');
+
+      act(() => {
+        result.current.changeTheme('light');
+      });
+      expect(result.current.theme).toBe('light');
+
+      act(() => {
+        result.current.changeTheme('system');
+      });
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should respect device color scheme when changing to system theme', () => {
+      // Mock device as dark initially
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      // Initially should be light (from defaultTheme)
+      expect(result.current.theme).toBe('light');
+
+      // Change to system should use device color scheme (dark)
+      act(() => {
+        result.current.changeTheme('system');
+      });
+
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should update system theme when device color scheme is light', () => {
+      // Mock device as light
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      // Initially should be dark (from defaultTheme)
+      expect(result.current.theme).toBe('dark');
+
+      // Change to system should use device color scheme (light)
+      act(() => {
+        result.current.changeTheme('system');
+      });
+
+      expect(result.current.theme).toBe('light');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle undefined device color scheme', () => {
+      mockedUseDeviceColorScheme.mockReturnValue(undefined);
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should handle null device color scheme', () => {
+      mockedUseDeviceColorScheme.mockReturnValue(null);
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should maintain theme stability with same changeTheme callback reference', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result, rerender } = renderHook(() => useTheme(), { wrapper });
+
+      const initialChangeTheme = result.current.changeTheme;
+
+      rerender({});
+
+      // changeTheme should maintain reference stability due to useCallback
+      expect(result.current.changeTheme).toBe(initialChangeTheme);
+    });
+  });
+
+  describe('integration tests', () => {
+    it('should work with nested providers', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">
+          <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+        </ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      // Should use the innermost provider
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should maintain theme state across re-renders', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result, rerender } = renderHook(() => useTheme(), { wrapper });
+
+      act(() => {
+        result.current.changeTheme('dark');
+      });
+      expect(result.current.theme).toBe('dark');
+
+      rerender({});
+      expect(result.current.theme).toBe('dark');
+    });
+  });
+});

package/src/providers/ThemeProvider.tsx

@@ -1,8 +1,77 @@
-import React from 'react';
-import type { ThemeProviderProps } from './types';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useColorScheme as useDeviceColorScheme } from 'react-native';
+import type {
+  ThemeContextType,
+  ThemeProviderProps,
+  ThemeVariants,
+} from './types';
 
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  return <>{children}</>;
+/**
+ * Create a ThemeContext with default value null
+ * @type {React.Context<ThemeContextType | null>}
+ */
+const ThemeContext = React.createContext<ThemeContextType | null>(null);
+
+/**
+ * Give access to theme context
+ * @returns {ThemeContextType} The current theme context
+ * @throws Will throw an error if used outside of ThemeProvider
+ * @example
+ * const { theme, changeTheme } = useTheme();
+ * console.log(theme); // 'light' | 'dark' | 'system'
+ */
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+/**
+ * ThemeProvider component to manage and provide theme context
+ * @param {React.ReactNode} children - The child components
+ * @param {ThemeVariants} theme - The current theme ('light', 'dark', 'system')
+ * @param {ThemeVariants} defaultTheme - The default theme if none is provided
+ * @param {(theme: ThemeVariants) => void} onThemeChange - Callback when theme changes
+ * @returns {JSX.Element} The ThemeProvider component
+ *
+ * @example
+ * <ThemeProvider theme="dark" onThemeChange={(theme) => console.log(theme)}>
+ *   <App />
+ * </ThemeProvider>
+ */
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  theme,
+  defaultTheme = 'light',
+  onThemeChange = () => undefined,
+}) => {
+  const deviceColorscheme = useDeviceColorScheme();
+  const [currentTheme, setTheme] = useState<ThemeVariants>(
+    theme || defaultTheme
+  );
+
+  useEffect(() => {
+    onThemeChange && theme && onThemeChange(theme);
+  }, [theme, onThemeChange]);
+
+  const changeTheme = useCallback(
+    (newTheme: ThemeVariants) => {
+      if (newTheme === 'system') {
+        setTheme(deviceColorscheme === 'dark' ? 'dark' : 'light');
+        return;
+      }
+      setTheme(newTheme);
+    },
+    [deviceColorscheme]
+  );
+
+  return (
+    <ThemeContext.Provider value={{ theme: currentTheme, changeTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
 };
 
 export default ThemeProvider;