From b8d96c537118314f19b14b35d18c301067760ce1 Mon Sep 17 00:00:00 2001 From: ruchik02 Date: Wed, 30 Nov 2022 17:37:26 +0530 Subject: [PATCH] changes in metatitle and metadescription in safearea view props --- docs/3.0.x/safe-area-view-props.md | 14 ++++++++------ docs/3.1.x/safe-area-view-props.md | 14 ++++++++------ docs/3.2.x/safe-area-view-props.md | 14 ++++++++------ docs/3.3.x/safe-area-view-props.md | 14 ++++++++------ docs/3.4.x/safe-area-view-props.md | 2 ++ docs/next/safe-area-view-props.md | 2 ++ layouts/index.tsx | 10 ++++------ 7 files changed, 40 insertions(+), 30 deletions(-) diff --git a/docs/3.0.x/safe-area-view-props.md b/docs/3.0.x/safe-area-view-props.md index a574e2d76..972588ae9 100644 --- a/docs/3.0.x/safe-area-view-props.md +++ b/docs/3.0.x/safe-area-view-props.md @@ -1,6 +1,8 @@ --- id: safe-area-view-props title: SafeAreaView Props +metaTitle: SafeAreaView Props | NativeBase +metaDescription: In NativeBase, make components respect the SafeAreaView of the device, with props you can use with Box component, which apply a safe padding to your component. --- To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. @@ -26,8 +28,8 @@ SafeAreaView props can only be applied on [Box](box.md) as of now. To make your ### Flexible SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look different on devices with different insets @@ -50,8 +52,8 @@ export function Example() { ### Fixed SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look same on all devices @@ -76,8 +78,8 @@ export function Example() { If you want to add the SafeAreaView props to other components, you can use the hook. Since `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text, useSafeArea } from "native-base"; function MyComponent() { const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); return ( diff --git a/docs/3.1.x/safe-area-view-props.md b/docs/3.1.x/safe-area-view-props.md index a574e2d76..972588ae9 100644 --- a/docs/3.1.x/safe-area-view-props.md +++ b/docs/3.1.x/safe-area-view-props.md @@ -1,6 +1,8 @@ --- id: safe-area-view-props title: SafeAreaView Props +metaTitle: SafeAreaView Props | NativeBase +metaDescription: In NativeBase, make components respect the SafeAreaView of the device, with props you can use with Box component, which apply a safe padding to your component. --- To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. @@ -26,8 +28,8 @@ SafeAreaView props can only be applied on [Box](box.md) as of now. To make your ### Flexible SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look different on devices with different insets @@ -50,8 +52,8 @@ export function Example() { ### Fixed SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look same on all devices @@ -76,8 +78,8 @@ export function Example() { If you want to add the SafeAreaView props to other components, you can use the hook. Since `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text, useSafeArea } from "native-base"; function MyComponent() { const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); return ( diff --git a/docs/3.2.x/safe-area-view-props.md b/docs/3.2.x/safe-area-view-props.md index 3c078a33b..debe67234 100644 --- a/docs/3.2.x/safe-area-view-props.md +++ b/docs/3.2.x/safe-area-view-props.md @@ -1,6 +1,8 @@ --- id: safe-area-view-props title: SafeAreaView Props +metaTitle: SafeAreaView Props | NativeBase +metaDescription: In NativeBase, make components respect the SafeAreaView of the device, with props you can use with Box component, which apply a safe padding to your component. --- To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. @@ -26,8 +28,8 @@ SafeAreaView props can only be applied on [Box](box.md) as of now. To make your ### Flexible SafeArea ```jsx isLive -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look different on devices with different insets @@ -50,8 +52,8 @@ export function Example() { ### Fixed SafeArea ```jsx isLive -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look same on all devices @@ -76,8 +78,8 @@ export function Example() { If you want to add the SafeAreaView props to other components, you can use the hook. Since `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. ```jsx isLive -import React from 'react'; -import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text, useSafeArea } from "native-base"; function MyComponent() { const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); return ( diff --git a/docs/3.3.x/safe-area-view-props.md b/docs/3.3.x/safe-area-view-props.md index b2a11868c..e10c8cf67 100644 --- a/docs/3.3.x/safe-area-view-props.md +++ b/docs/3.3.x/safe-area-view-props.md @@ -1,6 +1,8 @@ --- id: safe-area-view-props title: SafeAreaView Props +metaTitle: SafeAreaView Props | NativeBase +metaDescription: In NativeBase, make components respect the SafeAreaView of the device, with props you can use with Box component, which apply a safe padding to your component. --- To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. @@ -26,8 +28,8 @@ SafeAreaView props can only be applied on [Box](box.md) as of now. To make your ### Flexible SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look different on devices with different insets @@ -50,8 +52,8 @@ export function Example() { ### Fixed SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look same on all devices @@ -76,8 +78,8 @@ export function Example() { If you want to add the SafeAreaView props to other components, you can use the hook. Since `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text, useSafeArea } from "native-base"; function MyComponent() { const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); return ( diff --git a/docs/3.4.x/safe-area-view-props.md b/docs/3.4.x/safe-area-view-props.md index 2a507d5b9..e10c8cf67 100644 --- a/docs/3.4.x/safe-area-view-props.md +++ b/docs/3.4.x/safe-area-view-props.md @@ -1,6 +1,8 @@ --- id: safe-area-view-props title: SafeAreaView Props +metaTitle: SafeAreaView Props | NativeBase +metaDescription: In NativeBase, make components respect the SafeAreaView of the device, with props you can use with Box component, which apply a safe padding to your component. --- To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. diff --git a/docs/next/safe-area-view-props.md b/docs/next/safe-area-view-props.md index 2a507d5b9..e10c8cf67 100644 --- a/docs/next/safe-area-view-props.md +++ b/docs/next/safe-area-view-props.md @@ -1,6 +1,8 @@ --- id: safe-area-view-props title: SafeAreaView Props +metaTitle: SafeAreaView Props | NativeBase +metaDescription: In NativeBase, make components respect the SafeAreaView of the device, with props you can use with Box component, which apply a safe padding to your component. --- To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. diff --git a/layouts/index.tsx b/layouts/index.tsx index 2b3690447..f6b998a9d 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(metaTitle, metaDescription); return ( <> @@ -115,11 +116,8 @@ function Layout({ content="Universal Components for React and React Native" /> {/* og meta links */} - - + +