Provider component is used to wrap your app content and provide the theme context.
| Prop | Type | Default | Description |
|---|
children | ReactNode | - | App content wrapped by the provider |
defaultTheme? | ThemeMode | 'system' | Sets the initial theme mode. 'system' follows device preference |
customDarkTheme | Partial<Theme> | undefined | Custom theme configuration for dark mode |
customLightTheme | Partial<Theme> | undefined | Custom theme configuration for light mode |
bottomSheetProps | BottomSheetProps | {} | Global props for bottom sheet components |
toast | ToastConfig | {} | Configuration for toast notifications |
i18nConfig | I18nConfig | undefined | Internationalization configuration |
| Property | Type | Required | Default | Description |
|---|
defaultSnapTo | string | No | undefined | Default snap position for the bottom sheet |
maxSnapTo | string | No | undefined | Maximum snap position for the bottom sheet |
backgroundColor | ViewStyle['backgroundColor'] | No | undefined | Background color of the bottom sheet |
backDropColor | string | No | undefined | Color of the backdrop overlay |
lineBackgroundColor | ViewStyle['backgroundColor'] | No | undefined | Color of the drag indicator line |
borderTopLeftRadius | ViewStyle['borderTopLeftRadius'] | No | undefined | Top left border radius |
borderTopRightRadius | ViewStyle['borderTopRightRadius'] | No | undefined | Top right border radius |
isBorderBottomTitleVisible | boolean | false | Whether to show border below title | |
onStateChange | (state: boolean) => void | undefined | Callback when bottom sheet state changes | |
variant | 'scroll' | 'flatlist' | 'scroll' | Type of scrollable content in bottom sheet | |
flatListProps | Omit<FlatListProps<T>, 'ref'> | undefined | Props for FlatList when variant is ‘flatlist’ | |
| Property | Type | Default | Description |
|---|
position | 'top' or 'bottom' | 'bottom' | Position of the toast notifications |
maxToasts | number | 5 | Maximum number of toast notifications to show at once |
| Property | Type | Required | Default | Description |
|---|
translations | Record<string, any> | No | undefined | An object containing translation key-value pairs for different languages. The keys represent translation identifiers, and values can be strings, objects, or any other type containing the translated content. |
supportedLocales | string[] | No | undefined | An array of locale codes (e.g., ['en', 'id', 'fr']) that the application supports. These should follow standard locale format (ISO 639-1 language codes). |
defaultLocale | string | No | undefined | The default locale code to use when no specific locale is selected or when the requested locale is not supported. Should be one of the locales listed in supportedLocales. |
autoDetectLocale | boolean | No | undefined | Whether to automatically detect the user’s preferred locale from browser settings or other sources. When true, the application will attempt to match the user’s preference with supported locales. |
| Property/Method | Type | Description |
|---|
theme | Theme | Current active theme object containing all theme properties |
themeMode | ThemeMode | Current theme mode (light/dark/system) |
isDark | boolean | Boolean indicating if the current theme is in dark mode |
activePreset | string? | Optional string identifying the currently active preset |
setThemeMode | (mode: ThemeMode) => void | Function to change the theme mode |
updateCustomTheme | (customTheme: Partial<Theme>, preset?: string, presetConfig?: (isDark: boolean) => Partial<Theme>) => void | Function to update the custom theme with optional preset and configuration |
resetTheme | () => void | Function to reset the theme to its default state |