GeekyAnts · sahilvasuja · Nov 30, 2022 · Nov 30, 2022 · Nov 30, 2022 · Nov 30, 2022
diff --git a/docs/3.0.x/alert.md b/docs/3.0.x/alert.md
@@ -1,6 +1,8 @@
 ---
 id: alert
 title: Alert
+metaTitle: Alert | NativeBase
+metaDescription: The Alert component in NativeBase is used to convey warnings and important messages to the user. Explore alert component types with examples in this document.
 ---
 
 import { ComponentTheme } from '../../src/components';

diff --git a/docs/3.0.x/avatar.md b/docs/3.0.x/avatar.md
@@ -1,6 +1,8 @@
 ---
 id: avatar
 title: Avatar
+metaTitle: Avatar | NativeBase
+metaDescription: "The Avatar component in NativeBase can display profile pictures, or a fallback image as a representation of the user. More on avatar icon types with examples."
 ---
 
 import { ComponentTheme } from '../../src/components';

diff --git a/docs/3.0.x/badge.md b/docs/3.0.x/badge.md
@@ -1,6 +1,8 @@
 ---
 id: badge
 title: Badge
+metaTitle: Badge | NativeBase
+metaDescription: Migrating Badge to NativeBase v3 will provide a lot more design, size, variant, and customization, options. More on migrating Badge components in this document.
 ---
 
 import { ComponentTheme } from '../../src/components';

diff --git a/docs/3.0.x/box.md b/docs/3.0.x/box.md
@@ -1,6 +1,8 @@
 ---
 id: box
 title: Box
+metaTitle: Box | NativeBase
+metaDescription: Box in NativeBase is a generic component for low-level layout needs. More on box component types- basic, composition, with linear gradient, and box (with ref).
 ---
 
 This is a generic component for low level layout needs. It is similar to a [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) in HTML.

diff --git a/docs/3.0.x/breakpoints.md b/docs/3.0.x/breakpoints.md
@@ -1,6 +1,8 @@
 ---
 id: breakpoint
 title: Breakpoints
+metaTitle: Breakpoints | NativeBase
+metaDescription: Breakpoints are the building blocks of responsive design. NativeBase provides some default breakpoints which you can check out and update using extendTheme.
 ---
 
 Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size.

diff --git a/docs/3.0.x/building-app-bar.md b/docs/3.0.x/building-app-bar.md
@@ -1,6 +1,9 @@
 ---
 id: building-app-bar
 title: AppBar
+metaTitle: AppBar | NativeBase
+metaDescription: The App Bar in NativeBase provides content and actions related to the current screen. This document shows how you can create it using layout components.
+
 ---
 
 The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

diff --git a/docs/3.0.x/building-app-drawer.md b/docs/3.0.x/building-app-drawer.md
@@ -1,6 +1,8 @@
 ---
 id: appDrawer
 title: App drawer
+metaTitle: App drawer | NativeBase
+metaDescription: Creating an app drawer-like layout in NativeBase is very simple using FlatList. Read this document to learn more about how to create an app drawer with example.
 ---
 
 Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it.

diff --git a/docs/3.0.x/building-card.md b/docs/3.0.x/building-card.md
@@ -1,6 +1,8 @@
 ---
 id: buildingCard
 title: Card
+metaTitle: Card | NativeBase
+metaDescription: In NativeBase, a card is a flexible and extensible content container. Read this document to learn more about cards, how to create them, and the most common designs.
 ---
 
 A card is a flexible and extensible content container. It comes in caries shapes and sizes and here we'll make few of them.

diff --git a/docs/3.0.x/building-drawer-navigation.md b/docs/3.0.x/building-drawer-navigation.md
@@ -1,6 +1,8 @@
 ---
 id: buildingDrawerNavigation
 title: Drawer Navigation
+metaTitle: Drawer Navigation | NativeBase
+metaDescription: In NativeBase, a common pattern in Drawer Navigation is to use drawer from the left or right side for navigating between screens. Read this to know more.
 ---
 
 Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens.

diff --git a/docs/3.0.x/building-footer-tabs.md b/docs/3.0.x/building-footer-tabs.md
@@ -1,6 +1,8 @@
 ---
 id: building-footer-tabs
 title: Footer
+metaTitle: Footer | NativeBase
+metaDescription: Making Footer in our apps is very simple in NativeBase V3. Read this document where we explain how to make Footer using HStack component with useful examples.
 ---
 
 With NativeBase v3 we have removed FooterTab components because as it's very simple to create it using HStack component. Here is an example of how we can make Footer in our Apps.

diff --git a/docs/3.0.x/building-swipe-list.md b/docs/3.0.x/building-swipe-list.md
@@ -1,6 +1,8 @@
 ---
 id: building-swipe-list
 title: Swipe List
+metaTitle: Swipe List | NativeBase
+metaDescription: SwipeList View in NativeBase is a vertical ListView with rows that swipe open and close. Read to learn how we can use React Native Swipe List in NativeBase.
 ---
 
 SwipeListView is a vertical ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened.

diff --git a/docs/3.0.x/building-tab-view.md b/docs/3.0.x/building-tab-view.md
@@ -1,6 +1,8 @@
 ---
 id: building-tab-view
 title: Tab View
+metaTitle: Tab View | NativeBase
+metaDescription: This is a cross-platform Tab View component for React Native that can be used in NativeBase. Read this document to learn more about the component with examples.
 ---
 
 A cross-platform Tab View component for React Native

diff --git a/docs/3.0.x/center.md b/docs/3.0.x/center.md
@@ -1,14 +1,16 @@
 ---
 id: center
 title: Center
+metaTitle: Center | NativeBase
+metaDescription: In NativeBase, center aligns its contents to the center within itself. More on center types and examples such as basic, icon frames, and square and circle.
 ---
 
 `Center` aligns its contents to the center within itself. It is a layout component.
 
 ## Import
 
 ```jsx
-import { Center, Square, Circle } from 'native-base';
+import { Center, Square, Circle } from "native-base";
 ```
 
 - **Center:** Centers its child, pass `width` and `height`

diff --git a/docs/3.0.x/container.md b/docs/3.0.x/container.md
@@ -1,6 +1,8 @@
 ---
 id: container
 title: Container
+metaTitle: Container | NativeBase
+metaDescription: The Container in NativeBase restricts a content width according to the current breakpoint while keeping the size fluid. More on Container usage with examples.
 ---
 
 The `Container` restricts a content's width according to current breakpoint, while keeping the size fluid.

diff --git a/docs/3.0.x/customizing-components.md b/docs/3.0.x/customizing-components.md
@@ -1,6 +1,8 @@
 ---
 id: customizingComponents
 title: Customising Components
+metaTitle: Customizing Components | NativeBase
+metaDescription: Theme customization is at the heart of NativeBase. Learn how to customize components easily with examples and the difference between baseStyle and defaultProps.
 ---
 
 Theme customisation is at the heart of NativeBase. Using NativeBase's `extendTheme` function, we can customise components.

diff --git a/docs/3.0.x/customizing-fonts.md b/docs/3.0.x/customizing-fonts.md
@@ -1,6 +1,8 @@
 ---
 id: customizingFonts
 title: Customising Fonts
+metaTitle: Customizing Fonts | NativeBase
+metaDescription: Adding a custom font family can be done in React Native by following three simple steps. Read on to know the steps to follow and how to use fonts in NativeBase.
 ---
 
 Follow 3 simple steps to add a custom font family.

diff --git a/docs/3.0.x/customizing-theme.md b/docs/3.0.x/customizing-theme.md
@@ -1,6 +1,8 @@
 ---
 id: customizingTheme
 title: Customising Theme
+metaTitle: Customizing Theme | NativeBase
+metaDescription: The theme is one of the core elements of NativeBase. Learn more about the theme of NativeBase, what it looks like, and how to customize it to your liking.
 ---
 
 import { NativeBaseProvider, Box } from 'native-base';
@@ -23,34 +25,34 @@ The Theme is one of the core elements of NativeBase. You can customize NativeBas
 It has many [other properties](default-theme) but in this recipe, we will update only a few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function.
 
 ```tsx
-import React from 'react';
-import { NativeBaseProvider, extendTheme } from 'native-base';
-import { Content } from './Content';
+import React from "react";
+import { NativeBaseProvider, extendTheme } from "native-base";
+import { Content } from "./Content";
 
 export default function () {
   const theme = extendTheme({
     colors: {
       // Add new color
       primary: {
-        50: '#E3F2F9',
-        100: '#C5E4F3',
-        200: '#A2D4EC',
-        300: '#7AC1E4',
-        400: '#47A9DA',
-        500: '#0088CC',
-        600: '#007AB8',
-        700: '#006BA1',
-        800: '#005885',
-        900: '#003F5E',
+        50: "#E3F2F9",
+        100: "#C5E4F3",
+        200: "#A2D4EC",
+        300: "#7AC1E4",
+        400: "#47A9DA",
+        500: "#0088CC",
+        600: "#007AB8",
+        700: "#006BA1",
+        800: "#005885",
+        900: "#003F5E",
       },
       // Redefining only one shade, rest of the color will remain same.
       amber: {
-        400: '#d97706',
+        400: "#d97706",
       },
     },
     config: {
       // Changing initialColorMode to 'dark'
-      initialColorMode: 'dark',
+      initialColorMode: "dark",
     },
   });
 
@@ -77,25 +79,25 @@ function Example() {
     colors: {
       // Add new color
       primary: {
-        50: '#E3F2F9',
-        100: '#C5E4F3',
-        200: '#A2D4EC',
-        300: '#7AC1E4',
-        400: '#47A9DA',
-        500: '#0088CC',
-        600: '#007AB8',
-        700: '#006BA1',
-        800: '#005885',
-        900: '#003F5E',
+        50: "#E3F2F9",
+        100: "#C5E4F3",
+        200: "#A2D4EC",
+        300: "#7AC1E4",
+        400: "#47A9DA",
+        500: "#0088CC",
+        600: "#007AB8",
+        700: "#006BA1",
+        800: "#005885",
+        900: "#003F5E",
       },
       // Redefining only one shade, rest of the color will remain same.
       amber: {
-        400: '#d97706',
+        400: "#d97706",
       },
     },
     config: {
       // Changing initialColorMode to 'dark'
-      initialColorMode: 'dark',
+      initialColorMode: "dark",
     },
   });
 

diff --git a/docs/3.0.x/dark-mode.md b/docs/3.0.x/dark-mode.md
@@ -1,6 +1,8 @@
 ---
 id: darkMode
 title: Making Components Dark Mode Compatible
+metaTitle: Making components dark mode compatible | NativeBase
+metaDescription: Most of the components in NativeBase are dark mode compatible. In case you might need to make your component respond to color mode, follow this guideline. 
 ---
 
 By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 ways to achieve this:

diff --git a/docs/3.0.x/default-theme.md b/docs/3.0.x/default-theme.md
@@ -1,6 +1,8 @@
 ---
 id: default-theme
 title: Default Theme
+metaTitle: Default Theme | NativeBase
+metaDescription: Theming in NativeBase is based on the Styled System Specification. Learn more here about default theme and how to use theme object in NativeBase.
 ---
 
 import { ColorsBlock, FontBlocks, SpaceBlocks } from "../../src/components/index";

diff --git a/docs/3.0.x/divider.md b/docs/3.0.x/divider.md
@@ -1,6 +1,8 @@
 ---
 id: divider
 title: Divider
+metaTitle: Divider | NativeBase
+metaDescription: "In NativeBase, Divider can visually separate content in a given list or group. Learn more here about basic, divider orientation, and composition with examples."
 ---
 
 import { ComponentTheme } from '../../src/components';
@@ -10,7 +12,7 @@ import { ComponentTheme } from '../../src/components';
 ## Import
 
 ```jsx
-import { Divider } from 'native-base';
+import { Divider } from "native-base";
 ```
 
 ## Examples

diff --git a/docs/3.0.x/flat-list.md b/docs/3.0.x/flat-list.md
@@ -1,6 +1,8 @@
 ---
 id: flatList
 title: FlatList
+metaTitle: FlatList | NativeBase
+metaDescription: FlatList component in NativeBase can be used for rendering performant scrollable lists. Read this document to know more about FlatList uses along with examples.
 ---
 
 A component for rendering performant scrollable lists.

diff --git a/docs/3.0.x/flex.md b/docs/3.0.x/flex.md
@@ -1,14 +1,16 @@
 ---
 id: flex
 title: Flex
+metaTitle: Flex | NativeBase
+metaDescription: Flex in NativeBase provides helpful style shorthand and is a Box with display:flex. Learn about the usage of flex components with examples in this document.
 ---
 
 `Flex` provides helpful style shorthand and is a [`Box`](box.md) with `display: flex`.
 
 ## Import
 
 ```jsx
-import { Flex, Spacer } from 'native-base';
+import { Flex, Spacer } from "native-base";
 ```
 
 - `Flex`: a **[Box](box.md)** with `display: flex`

diff --git a/docs/3.0.x/hstack.md b/docs/3.0.x/hstack.md
@@ -1,6 +1,8 @@
 ---
 id: hStack
 title: HStack / Row
+metaTitle: HStack / Row | NativeBase
+metaDescription: HStack in NativeBase aligns items horizontally. Row is also an alias for HStack. Learn more about aligning with this component with examples in this document.
 ---
 
 `HStack` aligns items horizontally. `Row` is also an alias for `HStack`.

diff --git a/docs/3.0.x/icon.md b/docs/3.0.x/icon.md
@@ -1,6 +1,8 @@
 ---
 id: icon
 title: Icon
+metaTitle: Icon | NativeBase
+metaDescription: Learn all the different ways in which NativeBase allows you to use icons. Get to know more about creating custom icons and more icon functions in this document.
 ---
 
 You can use icons in multiple ways in NativeBase:

diff --git a/docs/3.0.x/image.md b/docs/3.0.x/image.md
@@ -1,6 +1,8 @@
 ---
 id: image
 title: Image
+metaTitle: Image | NativeBase
+metaDescription: "The image component in NativeBase allows the display of images. An analysis of image sizes, border radius, fallback and other examples of this component here."
 ---
 
 Generic Image components from [React Native](https://reactnative.dev).

diff --git a/docs/3.0.x/keyboard-avoiding-view.md b/docs/3.0.x/keyboard-avoiding-view.md
@@ -1,6 +1,8 @@
 ---
 id: keyboardAvoidingView
 title: KeyboardAvoidingView
+metaTitle: KeyboardAvoidingView | NativeBase
+metaDescription:  In NativeBase KeyboardAvoidingView provides a view that moves out of the way of virtual keyboard automatically. More information on KeyboardAvoidingView here.
 ---
 
 Provides a view that moves out of the way of virtual keyboard automatically. It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height.

diff --git a/docs/3.0.x/kitchen-sink.mdx b/docs/3.0.x/kitchen-sink.mdx
@@ -1,6 +1,8 @@
 ---
 id: kitchen-sink
 title: Kitchen Sink
+metaTitle: Kitchen Sink | NativeBase
+metaDescription: Kitchen Sink is a comprehensive demo app showing all the components of NativeBase in action. Check out this document for more information on Kitchen Sink app.
 ---
 
 import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";

diff --git a/docs/3.0.x/migration/v3.md b/docs/3.0.x/migration/v3.md
@@ -1,6 +1,8 @@
 ---
 id: Guide
 title: Guide to v3
+metaTitle: Upgrading to v3 | NativeBase
+metaDescription: NativeBase V3 comes with a lot of changes in philosophy and API. If you are looking to upgrade from NativeBase V2 to V3 in your app, you can take a look here.
 ---
 
 `v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might come across a lot of changes while upgrading from v2 to v3. This might seem to be a bit of tedious work but we promise you, it will be worth it!

diff --git a/docs/3.0.x/presence-transition.md b/docs/3.0.x/presence-transition.md
@@ -1,6 +1,8 @@
 ---
 id: presence-transition
 title: PresenceTransition
+metaTitle: PresenceTransition | NativeBase
+metaDescription: PresenceTransition component in NativeBase provides a declarative API to add entry and exit transitions. Read this document to know more about the component.
 ---
 
 PresenceTransition provides a declarative API to add entry and exit transitions.

diff --git a/docs/3.0.x/progress.md b/docs/3.0.x/progress.md
@@ -1,6 +1,8 @@
 ---
 id: progress
 title: Progress
+metaTitle: Progress | NativeBase
+metaDescription: "The Progress component in NativeBase helps show the progress status for a time-consuming task that consists of several steps. Read this document to learn more."
 ---
 
 import { ComponentTheme } from '../../src/components';
@@ -10,7 +12,7 @@ import { ComponentTheme } from '../../src/components';
 ## Import
 
 ```jsx
-import { Progress } from 'native-base';
+import { Progress } from "native-base";
 ```
 
 ## Examples