Devlander's Shared React Native Types

Devlander's team utilizes this package during the development of their React Native projects. Its primary purpose is to facilitate code reuse by sharing types across multiple projects that uses the styled-components library.

Purpose

• Promote consistency across styled components, design systems, and apps by leveraging shared utilities and types, eliminating the need to retype static types in each project.
• Enable type sharing between React Native and React.
• Facilitate utility sharing between React Native and React.

Styled Components: Colors and Functions

All theme colors and utilities are centralized in Devlander React Native Shared Types. Within this package, we provide several built-in functions:

• getStyleForTextProps: Converts CSS with custom props and units.
• getStyleForContainerProps: Manages predefined CSS properties and units.
• handleGhost: Takes two colors and swaps them to generate ghost buttons.
• getStyleForImageProps: Simplifies image styling.
• unitPropsHandler: Handles units, whether expressed as strings or numbers, and appends appropriate metrics.
• handleFontSizeProps: Provides responsive design flexibility by defining fontSize and maxFontSize for text elements.
• deviceOnTheme: Reflects the current device's dimensions. This is essential when adapting UI elements based on device size. This attribute is updated within the ThemeProvider.

Working with Colors

Throughout this project, you'll frequently encounter the ColorFromTheme type. Most styled components won't accept just any "color" prop with a hex value. The color input should be either a key from the ColorsInterface or a valid hex code present within the designated dark or light theme color set. While there are default colors within the theme, you have the flexibility to customize them during your theme initialization in styled.d.ts

Setup

Install

Using Yarn

1yarn add  @devlander/shared-react-native-types

Or npm

1npm install @devlander/shared-react-native-types

Initialize the theme

For traditional react

1// theme.tsx
2
3import { createThemeForWeb } from "@devlander/shared-react-native-types";
4import { fontOptions } from "./fonts";
5
6export const theme = createThemeForWeb();

For React Native

1import { createThemeForNative } from "@devlander/shared-react-native-types";
2import { fontOptions } from "./fonts";
3
4export const theme = createThemeForNative();

You can update the colors and font preferences by passing in a custom ColorsInterface, or FontInterface as well as updating the theme.

1// theme.tsx
2
3import {
4  ColorsInterface,
5  DeviceOnTheme,
6  boxShadowFuncInterface,
7  createThemeForWeb,
8} from "@devlander/shared-react-native-types";
9import { fontOptions } from "./fonts";
10
11const lightTheme: ColorsInterface = {
12  // customize your colors here
13};
14
15const fontOptions: FontInterface = {
16  // customize fonts here
17};
18
19const deviceOnTheme: DeviceOnTheme = {
20  screenWidth: 0,
21  statusBarHeight: 0,
22  screenHeight: 0,
23  isTablet: false,
24  hasNotch: false,
25  hasDynamicIsland: false,
26  platform: "ios",
27};
28
29export const themeForWeb = createThemeForWeb({
30  colorPreferences: lightTheme,
31  fontPreferences: fontOptions,
32  deviceOnTheme,
33});
34export const themeForNative = createThemeForNative({
35  colorPreferences: lightTheme,
36  fontPreferences: fontOptions,
37  deviceOnTheme,
38});

Import the type of theme to your styled.d.ts file

What it would like if you were doing it for traditional React

1// this needs to be a typescript definition file
2// example styled.d.ts
3import "styled-components";
4import { themeForWeb } from "../src/theme.tsx";
5
6declare module "styled-components" {
7  export type DefaultTheme = typeof themeForWeb;
8}

What it would like if you were doing it for React Native

1// this needs to be a typescript definition file
2// example styled.d.ts
3import "styled-components/native";
4import { themeForNative } from "../somefile";
5
6declare module "styled-components/native" {
7  export type DefaultTheme = typeof themeForNative;
8}

Create your Theme Provider using styled components

The reason we have to define the theme provider outside of this package, is there was no good way to swap between styled-components web theme provider, and the native one.

1
2import React, {
3  useCallback,
4  useContext,
5  useEffect,
6  useMemo,
7  useState,
8} from "react";
9import { ThemeProvider  } from "styled-components/native";
10import useScreenDimensions from "../../hooks/useScreenDimensions";
11import { theme, darkTheme, lightTheme } from "./theme";
12
13// ----- Types -----
14
15// Define the shape of the Theme context and the type for the Provider's props.
16interface ThemeContextType {
17  darkThemeEnabled: boolean;
18  canToggleTheme: boolean;
19  setDarkThemeEnabled: (value: boolean) => void;
20  toggleLightDarkMode: () => void;
21}
22
23interface ThemeProviderProps {
24  systemIsDark?: boolean;
25  getValueFromStorage?: (key: string) => Promise<boolean>;
26  saveToStorage?: (key: string, value: boolean) => Promise<void>;
27  children: React.ReactNode;
28}
29
30// ----- Context -----
31
32// Default values for the context
33const defaultThemeContext: ThemeContextType = {
34  darkThemeEnabled: true,
35  canToggleTheme: false,
36  setDarkThemeEnabled: () => {},
37  toggleLightDarkMode: () => {},
38};
39
40// Creation of the context
41const ColorThemeContext = React.createContext<ThemeContextType>(defaultThemeContext);
42
43// ----- Component -----
44
45const ColorThemeProvider: React.FC<ThemeProviderProps> = (props) => {
46  const { children, saveToStorage, getValueFromStorage, systemIsDark } = props;
47
48  // Obtain screen dimensions using a custom hook
49  const screenSize = useScreenDimensions();
50
51  // State to keep track of whether dark theme is enabled
52  const [darkThemeEnabled, setDarkThemeEnabled] = useState(true);
53
54  // Toggle between light and dark theme
55  const toggleLightDarkMode = useCallback(async () => {
56    const newValue = !darkThemeEnabled;
57    setDarkThemeEnabled(newValue);
58    if (saveToStorage) await saveToStorage("darkThemeEnabled", newValue);
59  }, [darkThemeEnabled, saveToStorage]);
60
61  // On component mount, initialize theme based on the stored value or system preference
62  useEffect(() => {
63    const initialize = async () => {
64      if (getValueFromStorage) {
65        const storedValue = await getValueFromStorage("darkThemeEnabled");
66        setDarkThemeEnabled(storedValue);
67      }
68    };
69
70    if (systemIsDark && !getValueFromStorage) {
71      setDarkThemeEnabled(true);
72    }
73
74    initialize();
75  }, [getValueFromStorage]);
76
77  // Prepare values for context provider
78  const valuePayload = useMemo(() => {
79    const baseTheme = {
80      ...theme,
81      canToggleTheme: Boolean(saveToStorage && getValueFromStorage),
82      darkThemeEnabled,
83      setDarkThemeEnabled,
84      toggleLightDarkMode,
85    };
86
87    return darkThemeEnabled
88      ? { ...baseTheme, colors: darkTheme }
89      : { ...baseTheme, colors: lightTheme };
90  }, [
91    darkThemeEnabled,
92    saveToStorage,
93    getValueFromStorage,
94    toggleLightDarkMode,
95  ]);
96
97  // Merge default colors with theme colors
98  const styledComponentsTheme = useMemo(() => {
99    const mergedColors = darkThemeEnabled
100      ? { ...theme.colors, ...darkTheme }
101      : { ...theme.colors, ...lightTheme };
102
103    return {
104      ...theme,
105      mode: "adaptive",
106      colors: mergedColors,
107      deviceOnTheme: {
108        isDesktop: screenSize.width > 768,
109        isTablet: screenSize.width > 480 && screenSize.width <= 768,
110        isMobile: screenSize.width <= 480,
111        screenWidth: screenSize.width,
112        screenHeight: screenSize.height,
113      },
114    };
115  }, [darkThemeEnabled, screenSize]);
116
117
118  return (
119    <ColorThemeContext.Provider value={valuePayload}>
120      <ThemeProvider theme={styledComponentsTheme}>{children}</ThemeProvider>
121    </ColorThemeContext.Provider>
122  );
123};
124
125// ----- Custom Hook -----
126
127// A hook to easily access the Theme context in any component
128const useColorThemeContext = (): ThemeContextType => {
129  return useContext(ColorThemeContext);
130};
131
132// ----- Exports -----
133
134export { ColorThemeContext, ColorThemeProvider, useColorThemeContext };
135export default ColorThemeProvider;
136
137

Then wrap your app inside of it

1    import  React from 'react'
2    import ThemeProvider from './theme-provider'
3
4    const App = () => {
5        <ThemeProvider>
6        </ThemeProvider>
7    }
8

Creating the dark colors palette Dynamically

1import { generateColorsFrom } from "@devlander/shared-react-native-types";
2import type {ColorsInterface} from "@devlander/shared-react-native-types"
3// This is what you would use
4const darkColors: ColorsInterface = generateColorsFrom(lightColors, 'dark');
5
6

To do

• [] run auto format imports with eslint automatically