Skip to content

Commit

Permalink
docs: add themeprovider examples
Browse files Browse the repository at this point in the history
  • Loading branch information
arpitBhalla authored Jan 3, 2023
1 parent 1b0332e commit 10dad90
Showing 1 changed file with 11 additions and 13 deletions.
24 changes: 11 additions & 13 deletions website/docs/customization/themeprovider.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -260,43 +260,41 @@ export const App = () => {
};
```

### Switch theme mode with `useColorScheme`
### Switch theme mode with useColorScheme

```tsx
import React from 'react';
import { useColorScheme } from 'react-native';
import { useThemeMode } from '@rneui/themed';

// create custom hook
const useThemeModeScheme = () => {
// use within ThemeProvider
const ColorScheme = ({ children }) => {
const colorScheme = useColorScheme();
const { setMode } = useThemeMode();

React.useEffect(() => {
setMode(colorScheme);
}, [colorScheme, setMode]);

return <>{children}</>;
};
```

**Usage**

```tsx
// use within ThemeProvider
const ChildComp = ({ children }) => {
useThemeModeScheme(); // our custom hook
// ...
// ...
};

export const App = () => {
return (
<ThemeProvider theme={theme}>
<ChildComp>
<ColorScheme>
{/*...*/}
{/*...*/}
</ColorScheme>
</ThemeProvider>
);
};
```

### Mode based background color
### Theme mode based background color

```tsx
const Background = ({ children }) => {
Expand Down

0 comments on commit 10dad90

Please sign in to comment.