From 9362a8539e72af7a98758ef0c2f642f0f692a5f8 Mon Sep 17 00:00:00 2001 From: Sahil Vasuja Date: Wed, 30 Nov 2022 17:32:54 +0530 Subject: [PATCH 1/2] change in meta title and meta description --- docs/3.0.x/setup-provider.md | 40 ++++++++++++++++++----------------- docs/3.1.x/setup-provider.md | 40 ++++++++++++++++++----------------- docs/3.2.x/setup-provider.md | 40 ++++++++++++++++++----------------- docs/3.3.x/setup-provider.md | 41 +++++++++++++++++++----------------- docs/3.4.x/setup-provider.md | 8 ++++--- docs/next/setup-provider.md | 8 ++++--- layouts/index.tsx | 8 +++---- 7 files changed, 99 insertions(+), 86 deletions(-) diff --git a/docs/3.0.x/setup-provider.md b/docs/3.0.x/setup-provider.md index 2e6a09db5..0e0b5b77c 100644 --- a/docs/3.0.x/setup-provider.md +++ b/docs/3.0.x/setup-provider.md @@ -1,6 +1,8 @@ --- 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: @@ -8,9 +10,9 @@ NativeBaseProvider is a component that makes the theme available throughout your **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 @@ -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 }); @@ -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); } @@ -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, }, @@ -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) | - | diff --git a/docs/3.1.x/setup-provider.md b/docs/3.1.x/setup-provider.md index 1e4230177..0e0b5b77c 100644 --- a/docs/3.1.x/setup-provider.md +++ b/docs/3.1.x/setup-provider.md @@ -1,6 +1,8 @@ --- 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: @@ -8,9 +10,9 @@ NativeBaseProvider is a component that makes the theme available throughout your **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 @@ -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 }); @@ -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); } @@ -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, }, @@ -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) | - | diff --git a/docs/3.2.x/setup-provider.md b/docs/3.2.x/setup-provider.md index 2e6a09db5..0e0b5b77c 100644 --- a/docs/3.2.x/setup-provider.md +++ b/docs/3.2.x/setup-provider.md @@ -1,6 +1,8 @@ --- 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: @@ -8,9 +10,9 @@ NativeBaseProvider is a component that makes the theme available throughout your **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 @@ -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 }); @@ -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); } @@ -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, }, @@ -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) | - | diff --git a/docs/3.3.x/setup-provider.md b/docs/3.3.x/setup-provider.md index 58334f55b..3828be045 100644 --- a/docs/3.3.x/setup-provider.md +++ b/docs/3.3.x/setup-provider.md @@ -1,6 +1,8 @@ --- 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: @@ -8,9 +10,9 @@ title: Setup NativeBase Provider **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 @@ -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 }); @@ -59,25 +61,25 @@ If you want to do something with the color modes in your app, you can use `color In the example below, we show how to store the active `ColorMode` in an async storage, so it can be consistent all around our 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); } @@ -94,14 +96,15 @@ export default ({ children, theme }: any) => { ## Add external dependencies (Optional) 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, }, @@ -123,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) | - | diff --git a/docs/3.4.x/setup-provider.md b/docs/3.4.x/setup-provider.md index c5b09bdf2..b62d76154 100644 --- a/docs/3.4.x/setup-provider.md +++ b/docs/3.4.x/setup-provider.md @@ -1,6 +1,8 @@ --- 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: @@ -142,8 +144,8 @@ export default () => { | Name | Type | Description | Default | | -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | -| isSSR | Boolean | Tells the provider if your app is rendered on the server side or not. | - | +| isSSR | Boolean | Tells the provider if your app is rendered on the server side or not. | - | | 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) | - | diff --git a/docs/next/setup-provider.md b/docs/next/setup-provider.md index c5b09bdf2..b62d76154 100644 --- a/docs/next/setup-provider.md +++ b/docs/next/setup-provider.md @@ -1,6 +1,8 @@ --- 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: @@ -142,8 +144,8 @@ export default () => { | Name | Type | Description | Default | | -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | -| isSSR | Boolean | Tells the provider if your app is rendered on the server side or not. | - | +| isSSR | Boolean | Tells the provider if your app is rendered on the server side or not. | - | | 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) | - | diff --git a/layouts/index.tsx b/layouts/index.tsx index 2b3690447..50cc6b58b 100644 --- a/layouts/index.tsx +++ b/layouts/index.tsx @@ -105,7 +105,8 @@ function Layout({ }`; let href = "https://docs.nativebase.io/" + pages.currentPage.id; - + const {metaTitle, metaDescription}= frontMatter; + console.log(metaDescription); return ( <> @@ -115,11 +116,10 @@ function Layout({ content="Universal Components for React and React Native" /> {/* og meta links */} - + + content={metaDescription} /> From 881be0fbe22669b5611a31dd11206e21ec07de53 Mon Sep 17 00:00:00 2001 From: Sahil Vasuja Date: Mon, 5 Dec 2022 13:38:00 +0530 Subject: [PATCH 2/2] remove console in Setup NativeBase Provider --- layouts/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/index.tsx b/layouts/index.tsx index 50cc6b58b..376a26953 100644 --- a/layouts/index.tsx +++ b/layouts/index.tsx @@ -106,7 +106,7 @@ function Layout({ let href = "https://docs.nativebase.io/" + pages.currentPage.id; const {metaTitle, metaDescription}= frontMatter; - console.log(metaDescription); + return ( <>