Skip to content
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

change in meta title and meta description #420

Open
wants to merge 3 commits into
base: staging
Choose a base branch
from
Open

change in meta title and meta description #420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9362a85
change in meta title and meta description
Nov 30, 2022
e25ac19
remove console in Setup NativeBase Provider
Dec 5, 2022
881be0f
remove console in Setup NativeBase Provider
Dec 5, 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
40 changes: 21 additions & 19 deletions docs/3.0.x/setup-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
---
id: setup-provider
title: Setup NativeBase Provider
metaTitle: Setup NativeBase Provider | NativeBase
metaDescription: Learn how to set up Nativebase Provider- the component that makes the theme available throughout your app, customize the default theme, and manage color modes.
---

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**

```jsx
import React from 'react';
import React from "react";
// 1. import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from 'native-base';
import { NativeBaseProvider, Text, Box } from "native-base";

export default function App() {
// 2. Use at the root of your app
Expand All @@ -32,13 +34,13 @@ NativeBase 3.0 provides an `extendTheme` function that deep merges the default

```jsx
// 1. Import the extendTheme function
import { extendTheme, NativeBaseProvider } from 'native-base';
import { extendTheme, NativeBaseProvider } from "native-base";
// 2. Extend the theme to include custom colors, fonts, etc
const newColorTheme = {
brand: {
900: '#8287af',
800: '#7c83db',
700: '#b3bef6',
900: "#8287af",
800: "#7c83db",
700: "#b3bef6",
},
};
const theme = extendTheme({ colors: newColorTheme });
Expand All @@ -59,25 +61,25 @@ If you want to do something with the color modes in your app, you can use colorM
In the example below, we show how to store the active ColorMode in an async storage, so it can be consistent all around your app.

```tsx
import React from 'react';
import { NativeBaseProvider, ColorMode } from 'native-base';
import type { StorageManager } from 'native-base';
import AsyncStorage from '@react-native-async-storage/async-storage';
import React from "react";
import { NativeBaseProvider, ColorMode } from "native-base";
import type { StorageManager } from "native-base";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default ({ children, theme }: any) => {
const colorModeManager: StorageManager = {
get: async () => {
try {
let val = await AsyncStorage.getItem('@my-app-color-mode');
return val === 'dark' ? 'dark' : 'light';
let val = await AsyncStorage.getItem("@my-app-color-mode");
return val === "dark" ? "dark" : "light";
} catch (e) {
console.log(e);
return 'light';
return "light";
}
},
set: async (value: ColorMode) => {
try {
await AsyncStorage.setItem('@my-app-color-mode', value);
await AsyncStorage.setItem("@my-app-color-mode", value);
} catch (e) {
console.log(e);
}
Expand All @@ -96,13 +98,13 @@ export default ({ children, theme }: any) => {
If you want to use the [Gradient feature in Box](box#with-linear-gradient),it has to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient).

```jsx
import React from 'react';
import { NativeBaseProvider } from 'native-base';
import React from "react";
import { NativeBaseProvider } from "native-base";

const config = {
dependencies: {
// For Expo projects (Bare or managed workflow)
'linear-gradient': require('expo-linear-gradient').LinearGradient,
"linear-gradient": require("expo-linear-gradient").LinearGradient,
// For non expo projects
// 'linear-gradient': require('react-native-linear-gradient').default,
},
Expand All @@ -124,6 +126,6 @@ export default () => {
| Name | Type | Description | 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 |
| 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) | - |
40 changes: 21 additions & 19 deletions docs/3.1.x/setup-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
---
id: setup-provider
title: Setup NativeBase Provider
metaTitle: Setup NativeBase Provider | NativeBase
metaDescription: Learn how to set up Nativebase Provider- the component that makes the theme available throughout your app, customize the default theme, and manage color modes.
---

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**

```jsx
import React from 'react';
import React from "react";
// 1. import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from 'native-base';
import { NativeBaseProvider, Text, Box } from "native-base";

export default function App() {
// 2. Use at the root of your app
Expand All @@ -32,13 +34,13 @@ NativeBase 3.0 provides an `extendTheme` function that deep merges the default

```jsx
// 1. Import the extendTheme function
import { extendTheme, NativeBaseProvider } from 'native-base';
import { extendTheme, NativeBaseProvider } from "native-base";
// 2. Extend the theme to include custom colors, fonts, etc
const newColorTheme = {
brand: {
900: '#8287af',
800: '#7c83db',
700: '#b3bef6',
900: "#8287af",
800: "#7c83db",
700: "#b3bef6",
},
};
const theme = extendTheme({ colors: newColorTheme });
Expand All @@ -59,25 +61,25 @@ If you want to do something with the color modes in your app, you can use colorM
In the example below, we show how to store the active ColorMode in an async storage, so it can be consistent all around your app.

```tsx
import React from 'react';
import { NativeBaseProvider, ColorMode } from 'native-base';
import type { StorageManager } from 'native-base';
import AsyncStorage from '@react-native-async-storage/async-storage';
import React from "react";
import { NativeBaseProvider, ColorMode } from "native-base";
import type { StorageManager } from "native-base";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default ({ children, theme }: any) => {
const colorModeManager: StorageManager = {
get: async () => {
try {
let val = await AsyncStorage.getItem('@my-app-color-mode');
return val === 'dark' ? 'dark' : 'light';
let val = await AsyncStorage.getItem("@my-app-color-mode");
return val === "dark" ? "dark" : "light";
} catch (e) {
console.log(e);
return 'light';
return "light";
}
},
set: async (value: ColorMode) => {
try {
await AsyncStorage.setItem('@my-app-color-mode', value);
await AsyncStorage.setItem("@my-app-color-mode", value);
} catch (e) {
console.log(e);
}
Expand All @@ -96,13 +98,13 @@ export default ({ children, theme }: any) => {
If you want to use the [Gradient feature in Box](box#with-linear-gradient),it has to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient).

```jsx
import React from 'react';
import { NativeBaseProvider } from 'native-base';
import React from "react";
import { NativeBaseProvider } from "native-base";

const config = {
dependencies: {
// For Expo projects (Bare or managed workflow)
'linear-gradient': require('expo-linear-gradient').LinearGradient,
"linear-gradient": require("expo-linear-gradient").LinearGradient,
// For non expo projects
// 'linear-gradient': require('react-native-linear-gradient').default,
},
Expand All @@ -124,6 +126,6 @@ export default () => {
| Name | Type | Description | 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 |
| 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) | - |
40 changes: 21 additions & 19 deletions docs/3.2.x/setup-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
---
id: setup-provider
title: Setup NativeBase Provider
metaTitle: Setup NativeBase Provider | NativeBase
metaDescription: Learn how to set up Nativebase Provider- the component that makes the theme available throughout your app, customize the default theme, and manage color modes.
---

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**

```jsx
import React from 'react';
import React from "react";
// 1. import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from 'native-base';
import { NativeBaseProvider, Text, Box } from "native-base";

export default function App() {
// 2. Use at the root of your app
Expand All @@ -32,13 +34,13 @@ NativeBase 3.0 provides an `extendTheme` function that deep merges the default

```jsx
// 1. Import the extendTheme function
import { extendTheme, NativeBaseProvider } from 'native-base';
import { extendTheme, NativeBaseProvider } from "native-base";
// 2. Extend the theme to include custom colors, fonts, etc
const newColorTheme = {
brand: {
900: '#8287af',
800: '#7c83db',
700: '#b3bef6',
900: "#8287af",
800: "#7c83db",
700: "#b3bef6",
},
};
const theme = extendTheme({ colors: newColorTheme });
Expand All @@ -59,25 +61,25 @@ If you want to do something with the color modes in your app, you can use colorM
In the example below, we show how to store the active ColorMode in an async storage, so it can be consistent all around your app.

```tsx
import React from 'react';
import { NativeBaseProvider, ColorMode } from 'native-base';
import type { StorageManager } from 'native-base';
import AsyncStorage from '@react-native-async-storage/async-storage';
import React from "react";
import { NativeBaseProvider, ColorMode } from "native-base";
import type { StorageManager } from "native-base";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default ({ children, theme }: any) => {
const colorModeManager: StorageManager = {
get: async () => {
try {
let val = await AsyncStorage.getItem('@my-app-color-mode');
return val === 'dark' ? 'dark' : 'light';
let val = await AsyncStorage.getItem("@my-app-color-mode");
return val === "dark" ? "dark" : "light";
} catch (e) {
console.log(e);
return 'light';
return "light";
}
},
set: async (value: ColorMode) => {
try {
await AsyncStorage.setItem('@my-app-color-mode', value);
await AsyncStorage.setItem("@my-app-color-mode", value);
} catch (e) {
console.log(e);
}
Expand All @@ -96,13 +98,13 @@ export default ({ children, theme }: any) => {
If you want to use the [Gradient feature in Box](box#with-linear-gradient),it has to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient).

```jsx
import React from 'react';
import { NativeBaseProvider } from 'native-base';
import React from "react";
import { NativeBaseProvider } from "native-base";

const config = {
dependencies: {
// For Expo projects (Bare or managed workflow)
'linear-gradient': require('expo-linear-gradient').LinearGradient,
"linear-gradient": require("expo-linear-gradient").LinearGradient,
// For non expo projects
// 'linear-gradient': require('react-native-linear-gradient').default,
},
Expand All @@ -124,6 +126,6 @@ export default () => {
| Name | Type | Description | 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 |
| 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) | - |
Loading