<ThemeProvider />
As the name says, the ThemeProvider is a component responsible for providing the theme values across the application. The ThemeProvider creates a React Context to hold the theme values & ideally sits at the root of the application layout.
In the main file of the application, wrap the application inside the ThemeProvider & supply the theme values to it.
import { ThemeProvider } from 'react-native-stylo';
import { variables, styles } from './stylo/themes/default';
const App = () => (
<ThemeProvider variables={variables} styles={styles}>
// Application layout
</ThemeProvider>
);
Props
variables (Required)
Type definition
Record<string, string | number>;
The variables defined in the theme. These variables can be accessed across the application using the hook useVariables().
styles (Required)
Type definition
{
IconStyles: Record<string, ReactNative.TextStyle>,
ImageBackgroundStyles: Record<string, ReactNative.ViewStyle>,
ImageStyles: Record<string, ReactNative.ImageStyle>,
SafeAreaViewStyles: Record<string, ViewStyle>,
ScrollViewStyles: Record<string, ReactNative.ViewStyle>,
ScrollViewContentContainerStyles: Record<string, ReactNative.ViewStyle>,
TextInputStyles: Record<string, ReactNative.TextStyle>,
TextStyles: Record<string, ReactNative.TextStyle>,
TouchableStyles: Record<string, ReactNative.ViewStyle>,
ViewStyles: Record<string, ReactNative.ViewStyle>,
};
The style definitions defined in the theme. These styles are used by the Stylish components & Styler hooks to apply them to components.