File tree Expand file tree Collapse file tree 2 files changed +92
-0
lines changed
docusaurus/docs/reactnative/contexts Expand file tree Collapse file tree 2 files changed +92
-0
lines changed Original file line number Diff line number Diff line change 1+ ---
2+ id : theme-context
3+ title : ThemeContext
4+ ---
5+
6+ ` ThemeContext ` is provided by [ ` OverlayProvider ` ] ( ../core-components/overlay_provider.mdx ) and [ ` Chat ` ] ( ../core-components/chat.mdx ) components.
7+ Read the [ theming section] ( ../customization/theming.mdx ) for more information on how to customize your theme.
8+ If you are not familiar with React Context API, please read about it on [ React docs] ( https://reactjs.org/docs/context.html ) .
9+
10+ ## Basic Usage
11+
12+ ` ThemeContext ` can be consumed by any of the child component of ` OverlayProvider ` or ` Chat ` components.
13+
14+ ``` tsx
15+ import { useContext } from ' react' ;
16+ import { ThemeContext } from ' stream-chat-react-native' ;
17+
18+ const {
19+ theme : {
20+ colors : { accent_red },
21+ },
22+ } = useContext (OverlayContext );
23+ ```
24+
25+ Alternatively, you can also use ` useTheme ` hook provided by library to consume ThemeContext.
26+
27+ ``` tsx
28+ import { useTheme } from ' stream-chat-react-native' ;
29+
30+ const {
31+ theme : {
32+ colors : { accent_red },
33+ },
34+ } = useTheme ();
35+ ```
36+
37+ ## Value
38+
39+ ### theme
40+
41+ The default theme object in [ theme.ts] ( https://github.com/GetStream/stream-chat-react-native/blob/master/src/contexts/themeContext/utils/theme.ts )
42+ merged with the theme you pass as ` style ` to [ ` OverlayProvider ` ] ( ../core-components/overlay_provider.mdx ) or [ ` Chat ` ] ( ../core-components/chat.mdx ) components.
43+
44+ | Type |
45+ | - |
46+ | object |
Original file line number Diff line number Diff line change 1+ ---
2+ id : translation-context
3+ title : TranslationContext
4+ ---
5+
6+ ` TranslationContext ` is provided by [ ` OverlayProvider ` ] ( ../core-components/overlay_provider.mdx ) and [ ` Chat ` ] ( ../core-components/chat.mdx ) components.
7+ Read the [ translations section] ( ../basics/translations/ ) for more information on how to customize your translations.
8+ If you are not familiar with React Context API, please read about it on [ React docs] ( https://reactjs.org/docs/context.html ) .
9+
10+ ## Basic Usage
11+
12+ ` TranslationContext ` can be consumed by any of the child component of ` OverlayProvider ` or ` Chat ` components.
13+
14+ ``` tsx
15+ import { useContext } from ' react' ;
16+ import { TranslationContext } from ' stream-chat-react-native' ;
17+
18+ const { t, tDateTimeParser } = useContext (TranslationContext );
19+ ```
20+
21+ Alternatively, you can also use ` useTranslationContext ` hook provided by library to consume TranslationContext.
22+
23+ ``` tsx
24+ import { useTheme } from ' stream-chat-react-native' ;
25+
26+ const { t, tDateTimeParser } = useTranslationContext ();
27+ ```
28+
29+ ## Value
30+
31+ ### t
32+
33+ Given a key, extracts the translated text from the Streami18n instance.
34+
35+ | Type |
36+ | - |
37+ | function |
38+
39+ ### tDateTimeParser
40+
41+ Used for translating dates and times into the desired local format.
42+
43+ | Type |
44+ | - |
45+ | function |
46+
You can’t perform that action at this time.
0 commit comments