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 d165430b0..f46d6add4 100644 --- a/layouts/index.tsx +++ b/layouts/index.tsx @@ -106,7 +106,6 @@ function Layout({ let href = "https://docs.nativebase.io/" + pages.currentPage.id; const { metaTitle, metaDescription } = frontMatter; - console.log(metaTitle, metaDescription); return ( <>