> For the complete documentation index, see [llms.txt](https://dormakaba-digital.gitbook.io/reactnative-visual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dormakaba-digital.gitbook.io/reactnative-visual/misc/visualprovider.md).

# VisualProvider

The VisualProvider is a gateway to pass the translation function and online/offline state to the components provided in this module.

```jsx
import { VisualContext } from '@dormakaba/digital-reactnative-visual';

// the provider
<VisualContext.Provider value={{ t, offline }}>
  {/* ... */}
</VisualContext.Provider>

// the consumer
<VisualContext.Consumer>
  {({ t, offline }) => <MyComponent t={t} offline={offline} />}
</VisualContext.Consumer>
```

{% hint style="info" %}
If you're using the [@dormakaba/digital-reactnative-client](https://dormakaba-digital.gitbook.io/reactnative-client/) the DokaApp component will do bootstrap the provider for you.
{% endhint %}