Setup Theme Provider

FlexNative ThemeProvider from FlexNative is a component that makes the theme available throughout your app. It uses React's Context API.

info

If you are not familiar with React's Context we strongly suggest to follow this link before starting.

Installation

You can installing FlexNative ThemeProvider packages using npm:

npm i @flexnative/theme-context

Using ThemeProvider

ThemeProvider it is a Class React Component that let's passing/consuming theme from all components through the App. It accepts a value prop which is the data that will be shared with all components that are consumers of that context.

ThemeProvider wrap the top-level component of your application with a Provider component, thus making the context available to all its descendants.

ThemeProvider it comes with the base structure for implementing multiple themes and supporting dark mode.

CAUTION

ThemeProvider it supports dark mode depending on the device's color scheme. You also can implement you custom dark mode beheiver, for more details read section ThemeProvider.

To change default colors or add new colors fallow this link on how to change default colors or how to add custom colors.

To support dark mode fallow this link on how to implement dark mode using ThemeContext.

Examples

Add ThemeProvider from FlexNative to the root of your app and update App.js as follows examples.

import ThemeContext, { light } from '@flexnative/theme-context';

function App() {
  return (
    <ThemeContext.Provider value={{colors: themeColors}}>
      <YourAPP />
    </ThemeContext.Provider>
  );
}

ThemeProviderProps

Name	Type	Required	Default Value	Description
colors	BaseTheme<TColors>	true	null	Where TColors is the object with custom colors.
colorScheme	ColorSchemeName	false	null	Value indicates the current user preferred color scheme.

BaseTheme

Name	Type	Required	Light Value	Dark Value
background	ColorValue	true	#f8f8f8	#000000
default	ColorValue	true	#f5f5f5	#404040
card	ColorValue	true	#ffffff	#232323
text	ColorValue	true	#424242	#ffffff
border	ColorValue	true	#42424226	#ffffff1A
placeholder	ColorValue	true	#0000001A	#FFFFFF1A
info	ColorValue	true	#3e80ed	#3e80ed
success	ColorValue	true	#5ec232	#5ec232
warning	ColorValue	true	#ffc107	#ffc107
error	ColorValue	true	#d51923	#d51923
dark	ColorValue	true	#424242	#424242
secondary	ColorValue	true	#666666	#5C5C5C
light	ColorValue	true	#ebebeb	#ebebeb
primary	ColorValue	true	#ff6358	#ff6358

Using ThemeContext

ThemeContext it expects as value an object of type ThemeProviderProps<TColors>. You can use one of default themes light or dark from @flexnative/theme-context or you can create your own theme as long you implements ThemeBase object.

To change default colors or add new colors fallow this link on how to change default colors or how to add custom colors.

To support dark mode fallow this link on how to implement dark mode using ThemeContext.

ThemeContextProps

Name	Type	Required	Default Value	Description
colors	BaseTheme<TColors>	true	BaseTheme	Where TColors object with custom colors
colorScheme	ColorSchemeName	false	Device ColorScheme	ColorSchemeName from react-native
setTheme	(theme: BaseTheme & TColors) => void	false	null	void function for change all theme colors. It expect as parameter object of BaseTheme<TColors>
setColorScheme	(colorScheme: ColorSchemeName) => void	false	null	void function for change schema (light/dark). It expect as parameter type of ColorSchemeName

BaseTheme<TColors>

BaseTheme and TColors custom extendet colors.

Examples

Example of consuming Theme Context.

Function Component

import { useThemeContext } from '@flexnative/theme-context';
import ThemeContext from '@flexnative/theme-context';

function App() {
  const theme = useThemeContext();

  return (
    <Text style={{ color: theme.colors.text}}>Example of consuming Theme Context.</Text>
  );
}

Class Component

import React from 'react';
import { Text } from 'react-native';
import ThemeContext, { light } from '@flexnative/theme-context';

class App extends React.Component {
  static contextType = ThemeContext;
  declare context: React.ContextType<typeof ThemeContext>;

  return (
    <Text style={{ color: this.context.colors.text}}>Example of consuming Theme Context.</Text>
  );
}