Skip to content

fix: setup provider doc improvements #413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 18, 2022
Merged

fix: setup provider doc improvements #413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3fa3cd1
fix: setup provider doc improvements
ankit-tailor Nov 18, 2022
ae982d4
fix: linear gradient link
ankit-tailor Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions docs/3.0.x/setup-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@ title: Setup NativeBase Provider

NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows:

**App.js**
## App.js

```jsx
import React from 'react';
// 1. import `NativeBaseProvider` component

// 1. Import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from 'native-base';

export default function App() {
// 2. Use at the root of your app

// 2. Wrap `NativeBaseProvider` at the root of your app
return (
<NativeBaseProvider>
<Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
Expand All @@ -31,8 +33,10 @@ If you need to customize the default theme to match your design requirements, yo
NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations.

```jsx

// 1. Import the extendTheme function
import { extendTheme, NativeBaseProvider } from 'native-base';

// 2. Extend the theme to include custom colors, fonts, etc
const newColorTheme = {
brand: {
Expand All @@ -42,6 +46,7 @@ const newColorTheme = {
},
};
const theme = extendTheme({ colors: newColorTheme });

// 3. Pass the `theme` prop to the `NativeBaseProvider`
function App() {
return (
Expand Down Expand Up @@ -126,4 +131,4 @@ export default () => {
| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - |
| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - |
| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#h3-with-linear-gradient) | - |
13 changes: 9 additions & 4 deletions docs/3.1.x/setup-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@ title: Setup NativeBase Provider

NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows:

**App.js**
## App.js

```jsx
import React from 'react';
// 1. import `NativeBaseProvider` component

// 1. Import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from 'native-base';

export default function App() {
// 2. Use at the root of your app

// 2. Wrap `NativeBaseProvider` at the root of your app
return (
<NativeBaseProvider>
<Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
Expand All @@ -31,8 +33,10 @@ If you need to customize the default theme to match your design requirements, yo
NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations.

```jsx

// 1. Import the extendTheme function
import { extendTheme, NativeBaseProvider } from 'native-base';

// 2. Extend the theme to include custom colors, fonts, etc
const newColorTheme = {
brand: {
Expand All @@ -42,6 +46,7 @@ const newColorTheme = {
},
};
const theme = extendTheme({ colors: newColorTheme });

// 3. Pass the `theme` prop to the `NativeBaseProvider`
function App() {
return (
Expand Down Expand Up @@ -126,4 +131,4 @@ export default () => {
| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - |
| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - |
| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#h3-with-linear-gradient) | - |
13 changes: 9 additions & 4 deletions docs/3.2.x/setup-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@ title: Setup NativeBase Provider

NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows:

**App.js**
## App.js

```jsx
import React from 'react';
// 1. import `NativeBaseProvider` component

// 1. Import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from 'native-base';

export default function App() {
// 2. Use at the root of your app

// 2. Wrap `NativeBaseProvider` at the root of your app
return (
<NativeBaseProvider>
<Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
Expand All @@ -31,8 +33,10 @@ If you need to customize the default theme to match your design requirements, yo
NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations.

```jsx

// 1. Import the extendTheme function
import { extendTheme, NativeBaseProvider } from 'native-base';

// 2. Extend the theme to include custom colors, fonts, etc
const newColorTheme = {
brand: {
Expand All @@ -42,6 +46,7 @@ const newColorTheme = {
},
};
const theme = extendTheme({ colors: newColorTheme });

// 3. Pass the `theme` prop to the `NativeBaseProvider`
function App() {
return (
Expand Down Expand Up @@ -126,4 +131,4 @@ export default () => {
| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - |
| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - |
| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#h3-with-linear-gradient) | - |
11 changes: 8 additions & 3 deletions docs/3.3.x/setup-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ title: Setup NativeBase Provider

```jsx
import React from 'react';
// 1. import `NativeBaseProvider` component

// 1. Import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from 'native-base';

export default function App() {
// 2. Use at the root of your app

// 2. Wrap `NativeBaseProvider` at the root of your app
return (
<NativeBaseProvider>
<Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
Expand All @@ -31,8 +33,10 @@ If you need to customize the default theme to match your design requirements, yo
NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations.

```jsx

// 1. Import the extendTheme function
import { extendTheme, NativeBaseProvider } from 'native-base';

// 2. Extend the theme to include custom colors, fonts, etc
const newColorTheme = {
brand: {
Expand All @@ -42,6 +46,7 @@ const newColorTheme = {
},
};
const theme = extendTheme({ colors: newColorTheme });

// 3. Pass the `theme` prop to the `NativeBaseProvider`
function App() {
return (
Expand Down Expand Up @@ -125,4 +130,4 @@ export default () => {
| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - |
| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - |
| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#h3-with-linear-gradient) | - |
13 changes: 9 additions & 4 deletions docs/3.4.x/setup-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@ title: Setup NativeBase Provider

NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows:

**App.js**
## App.js

```jsx
import React from "react";
// 1. import `NativeBaseProvider` component

// 1. Import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from "native-base";

export default function App() {
// 2. Use at the root of your app

// 2. Wrap `NativeBaseProvider` at the root of your app
return (
<NativeBaseProvider>
<Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
Expand All @@ -31,8 +33,10 @@ If you need to customize the default theme to match your design requirements, yo
NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations.

```jsx

// 1. Import the extendTheme function
import { extendTheme, NativeBaseProvider } from "native-base";

// 2. Extend the theme to include custom colors, fonts, etc
const newColorTheme = {
brand: {
Expand All @@ -42,6 +46,7 @@ const newColorTheme = {
},
};
const theme = extendTheme({ colors: newColorTheme });

// 3. Pass the `theme` prop to the `NativeBaseProvider`
function App() {
return (
Expand Down Expand Up @@ -146,4 +151,4 @@ export default () => {
| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - |
| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - |
| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#h3-with-linear-gradient) | - |
13 changes: 9 additions & 4 deletions docs/next/setup-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@ title: Setup NativeBase Provider

NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows:

**App.js**
## App.js

```jsx
import React from "react";
// 1. import `NativeBaseProvider` component

// 1. Import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from "native-base";

export default function App() {
// 2. Use at the root of your app

// 2. Wrap `NativeBaseProvider` at the root of your app
return (
<NativeBaseProvider>
<Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
Expand All @@ -31,8 +33,10 @@ If you need to customize the default theme to match your design requirements, yo
NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations.

```jsx

// 1. Import the extendTheme function
import { extendTheme, NativeBaseProvider } from "native-base";

// 2. Extend the theme to include custom colors, fonts, etc
const newColorTheme = {
brand: {
Expand All @@ -42,6 +46,7 @@ const newColorTheme = {
},
};
const theme = extendTheme({ colors: newColorTheme });

// 3. Pass the `theme` prop to the `NativeBaseProvider`
function App() {
return (
Expand Down Expand Up @@ -146,4 +151,4 @@ export default () => {
| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - |
| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - |
| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - |
| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#h3-with-linear-gradient) | - |