diff --git a/docs/3.0.x/alert.md b/docs/3.0.x/alert.md index a56754e77..3f5fd5842 100644 --- 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 index dff7875cc..b24880562 100644 --- 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 index 607a80451..b1c6d69de 100644 --- 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 index a12b95783..0ef13063a 100644 --- 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 index 78b04fa8a..6c777579c 100644 --- 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 index 875402e5a..3c9a9b82f 100644 --- 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 index 27dc5e200..0575a8988 100644 --- 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 index 53d320a47..baf7e9883 100644 --- 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 index b37b7bb17..9b1e77803 100644 --- 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 index 80c9e324c..c5124f613 100644 --- 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 index f97c0195b..6d704051e 100644 --- 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 index 83ede5e8e..5c262cc49 100644 --- 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 index b6be45e7d..2b81572ab 100644 --- a/docs/3.0.x/center.md +++ b/docs/3.0.x/center.md @@ -1,6 +1,8 @@ --- 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. @@ -8,7 +10,7 @@ title: Center ## 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 index bc7fec7ca..d21dd00de 100644 --- 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 index 62bc8b5be..1a50370a1 100644 --- 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 index 69499ef9a..8b4e363db 100644 --- 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 index c86c72bf6..5e7bfd4ef 100644 --- 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 index e5256943e..680594954 100644 --- 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 index c7c73a78f..d6728f448 100644 --- 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 index a65c8b86a..5f79acdd7 100644 --- 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 index ae9f1392e..cf2374b48 100644 --- 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 index 0e9fddc8d..5b2842e4d 100644 --- a/docs/3.0.x/flex.md +++ b/docs/3.0.x/flex.md @@ -1,6 +1,8 @@ --- 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`. @@ -8,7 +10,7 @@ title: 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 index 276f3d442..bcd4a47cf 100644 --- 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 index 89c657ca2..0eecadc79 100644 --- 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 index 550e56ec4..6995e9c33 100644 --- 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 index 574e474de..b21a56eb7 100644 --- 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 index ecca7b82c..1008679a7 100644 --- 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 index 4ed6cbe32..596825318 100644 --- 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 index 2e725036a..f3c4c04e0 100644 --- 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 index 7b0b68ed3..698a00821 100644 --- 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 diff --git a/docs/3.0.x/scrollview.md b/docs/3.0.x/scrollview.md index 1064515aa..33f650cd3 100644 --- a/docs/3.0.x/scrollview.md +++ b/docs/3.0.x/scrollview.md @@ -1,6 +1,8 @@ --- id: scrollview title: Scrollview +metaTitle: Scrollview | NativeBase +metaDescription: "The ScrollView component in NativeBase provides a scrolling container that helps host multiple components and views. Read the document for more on ScrollView." --- Provides a scrolling container that can host multiple components and views. diff --git a/docs/3.0.x/section-list.md b/docs/3.0.x/section-list.md index 45c588db7..6ebca1420 100644 --- a/docs/3.0.x/section-list.md +++ b/docs/3.0.x/section-list.md @@ -1,6 +1,8 @@ --- id: sectionList title: SectionList +metaTitle: SectionList | NativeBase +metaDescription: SectionList component in NativeBase is a performance interface for rendering sectioned lists. Read this document to know more about SectionList with examples. --- A performant interface for rendering sectioned lists. diff --git a/docs/3.0.x/slide.md b/docs/3.0.x/slide.md index fb8279ee1..1b56bb9ab 100644 --- a/docs/3.0.x/slide.md +++ b/docs/3.0.x/slide.md @@ -1,6 +1,8 @@ --- id: slide title: Slide +metaTitle: Slider | NativeBase +metaDescription: The slider component in NativeBase allows users to select options from a given range of values. Explore slider colors, values, size, and more with examples here. --- Slide component provides a declarative API to add sliding transitions. diff --git a/docs/3.0.x/spinner.md b/docs/3.0.x/spinner.md index 359275a20..0ab35a6a8 100644 --- a/docs/3.0.x/spinner.md +++ b/docs/3.0.x/spinner.md @@ -1,6 +1,8 @@ --- id: spinner title: Spinner +metaTitle: Spinner | NativeBase +metaDescription: " Spinner component in NativeBase gives visual cues to actions that are processing or awaiting changes. Learn more about basic spinners, colors and sizes here." --- ## Examples diff --git a/docs/3.0.x/stack.md b/docs/3.0.x/stack.md index 12ac4ecae..6c59741e4 100644 --- a/docs/3.0.x/stack.md +++ b/docs/3.0.x/stack.md @@ -1,6 +1,8 @@ --- id: stack title: Stack +metaTitle: Stack | NativeBase +metaDescription: Stack in NativeBase aligns items vertically or horizontally based on the direction prop. Learn more about Stack component with some examples in this document. --- `Stack` aligns items vertically or horizontally based on the `direction` prop. diff --git a/docs/3.0.x/stagger.md b/docs/3.0.x/stagger.md index ac8bce5c4..a29c33fc0 100644 --- a/docs/3.0.x/stagger.md +++ b/docs/3.0.x/stagger.md @@ -1,6 +1,8 @@ --- id: stagger title: Stagger +metaTitle: Stagger | NativeBase +metaDescription: "The stagger component in NativeBase provides a declarative API to add staggered transitions. Read this documentation to explore more about it with examples." --- Stagger component provides a declarative API to add Staggered Transitions. diff --git a/docs/3.0.x/status-bar.md b/docs/3.0.x/status-bar.md index a40c98c2f..afe9ef9e3 100644 --- a/docs/3.0.x/status-bar.md +++ b/docs/3.0.x/status-bar.md @@ -1,6 +1,8 @@ --- id: statusBar title: StatusBar +metaTitle: StatusBar | NativeBase +metaDescription: "In NativeBase, the StatusBar component controls the app's status bar. Read this document for more information and examples on the use of StatusBar." --- Component to control the app status bar. diff --git a/docs/3.0.x/theme.md b/docs/3.0.x/theme.md index 259439050..db10fa462 100644 --- a/docs/3.0.x/theme.md +++ b/docs/3.0.x/theme.md @@ -1,6 +1,8 @@ --- id: theme title: Using Theme +metaTitle: useTheme | NativeBase +metaDescription: In NativeBase useTheme is a custom hook to call theme object from the context. Read this document to know more about useTheme hook and its uses with examples. --- NativeBase provides multiple tools to use the central theme defined in the app. The first tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. diff --git a/docs/3.0.x/toast.md b/docs/3.0.x/toast.md index d6019a4b4..86976ce27 100644 --- a/docs/3.0.x/toast.md +++ b/docs/3.0.x/toast.md @@ -1,6 +1,8 @@ --- id: toast title: Toast +metaTitle: Toast | NativeBase +metaDescription: The Toast component in NativeBase displays alerts on top of an overlay. Read more on toast usage, toast message in react and react native and how to configure them. --- import { ComponentTheme } from '../../src/components'; @@ -12,7 +14,7 @@ Toasts can be configured to appear at either the top or the bottom of an applica ## Import ```jsx -import { useToast } from 'native-base'; +import { useToast } from "native-base"; ``` ## Examples diff --git a/docs/3.0.x/todo-list.md b/docs/3.0.x/todo-list.md index e45381c7e..779dfa16c 100644 --- a/docs/3.0.x/todo-list.md +++ b/docs/3.0.x/todo-list.md @@ -1,6 +1,8 @@ --- id: todo-example title: Todo-List +metaTitle: Todo-List | NativeBase +metaDescription: Todo-List is a simple To-do app that is made using NativeBase 3.0. Check out this document for more information on the Todo-List app and see what it looks like. --- A simple To Do App made using NativeBase 3.0. diff --git a/docs/3.0.x/view.md b/docs/3.0.x/view.md index dd1890b6f..4193c01da 100644 --- a/docs/3.0.x/view.md +++ b/docs/3.0.x/view.md @@ -1,6 +1,8 @@ --- id: view title: View +metaTitle: View | NativeBase +metaDescription: "In NativeBase, View is considered the most fundamental component for building a UI. Read the document for more information on View component and its uses." --- The most fundamental component for building a UI. diff --git a/docs/3.0.x/vstack.md b/docs/3.0.x/vstack.md index 44942a4fa..21ab811cb 100644 --- a/docs/3.0.x/vstack.md +++ b/docs/3.0.x/vstack.md @@ -1,6 +1,8 @@ --- id: VStack title: VStack / Column +metaTitle: VStack / Column | NativeBase +metaDescription: Vstack in NativeBase aligns items vertically. Column is an alias for Vstack. You can learn more about the usage of Vstack/Column component in this document. --- `VStack` aligns items vertically. `Column` is also an alias for `VStack`. @@ -8,7 +10,7 @@ title: VStack / Column ## Import ```jsx -import { VStack } from 'native-base'; +import { VStack } from "native-base"; ``` ## Usage diff --git a/docs/3.0.x/zstack.md b/docs/3.0.x/zstack.md index 6005fa0e2..7b1720729 100644 --- a/docs/3.0.x/zstack.md +++ b/docs/3.0.x/zstack.md @@ -1,3 +1,8 @@ +--- +metaTitle: ZStack | NativeBase +metaDescription: In NativeBase ZStack aligns items to the z-axis. Learn more about the types of ZStack component such as basic and items centered with examples in this document. +--- + `ZStack` aligns items to the z-axis. ## Examples diff --git a/docs/3.1.x/alert.md b/docs/3.1.x/alert.md index a56754e77..3f5fd5842 100644 --- a/docs/3.1.x/alert.md +++ b/docs/3.1.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.1.x/avatar.md b/docs/3.1.x/avatar.md index dff7875cc..b24880562 100644 --- a/docs/3.1.x/avatar.md +++ b/docs/3.1.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.1.x/badge.md b/docs/3.1.x/badge.md index 607a80451..b1c6d69de 100644 --- a/docs/3.1.x/badge.md +++ b/docs/3.1.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.1.x/box.md b/docs/3.1.x/box.md index a03c3f457..d93e1727a 100644 --- a/docs/3.1.x/box.md +++ b/docs/3.1.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.1.x/breakpoints.md b/docs/3.1.x/breakpoints.md index c7ed47991..a07b4b64d 100644 --- a/docs/3.1.x/breakpoints.md +++ b/docs/3.1.x/breakpoints.md @@ -1,6 +1,8 @@ --- id: breakpoints 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.1.x/building-app-bar.md b/docs/3.1.x/building-app-bar.md index 875402e5a..03ae0af60 100644 --- a/docs/3.1.x/building-app-bar.md +++ b/docs/3.1.x/building-app-bar.md @@ -1,6 +1,8 @@ --- 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.1.x/building-app-drawer.md b/docs/3.1.x/building-app-drawer.md index 57b4f60d8..1a05a926e 100644 --- a/docs/3.1.x/building-app-drawer.md +++ b/docs/3.1.x/building-app-drawer.md @@ -1,6 +1,8 @@ --- id: app-drawer 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.1.x/building-card.md b/docs/3.1.x/building-card.md index 69b49446b..e9a7ad22b 100644 --- a/docs/3.1.x/building-card.md +++ b/docs/3.1.x/building-card.md @@ -1,6 +1,8 @@ --- id: building-card 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.1.x/building-drawer-navigation.md b/docs/3.1.x/building-drawer-navigation.md index 875a15880..d7c55fdc8 100644 --- a/docs/3.1.x/building-drawer-navigation.md +++ b/docs/3.1.x/building-drawer-navigation.md @@ -1,6 +1,8 @@ --- id: building-drawer-navigation 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.1.x/building-footer-tabs.md b/docs/3.1.x/building-footer-tabs.md index 80c9e324c..c5124f613 100644 --- a/docs/3.1.x/building-footer-tabs.md +++ b/docs/3.1.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.1.x/building-swipe-list.md b/docs/3.1.x/building-swipe-list.md index f97c0195b..6d704051e 100644 --- a/docs/3.1.x/building-swipe-list.md +++ b/docs/3.1.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.1.x/building-tab-view.md b/docs/3.1.x/building-tab-view.md index 302ab95d3..480505017 100644 --- a/docs/3.1.x/building-tab-view.md +++ b/docs/3.1.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.1.x/center.md b/docs/3.1.x/center.md index b6be45e7d..c6238a0fd 100644 --- a/docs/3.1.x/center.md +++ b/docs/3.1.x/center.md @@ -1,6 +1,8 @@ --- 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. diff --git a/docs/3.1.x/container.md b/docs/3.1.x/container.md index bc7fec7ca..d21dd00de 100644 --- a/docs/3.1.x/container.md +++ b/docs/3.1.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.1.x/customizing-components.md b/docs/3.1.x/customizing-components.md index ea7854833..8cfcb6640 100644 --- a/docs/3.1.x/customizing-components.md +++ b/docs/3.1.x/customizing-components.md @@ -1,6 +1,8 @@ --- id: customizing-components title: Customizing 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.1.x/customizing-fonts.md b/docs/3.1.x/customizing-fonts.md index f280bc8ab..64374052d 100644 --- a/docs/3.1.x/customizing-fonts.md +++ b/docs/3.1.x/customizing-fonts.md @@ -1,6 +1,8 @@ --- id: customizing-fonts title: Customizing 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.1.x/customizing-theme.md b/docs/3.1.x/customizing-theme.md index 61dfd9ee1..b559a04a3 100644 --- a/docs/3.1.x/customizing-theme.md +++ b/docs/3.1.x/customizing-theme.md @@ -1,6 +1,8 @@ --- id: customizing-theme title: Customizing 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'; diff --git a/docs/3.1.x/dark-mode.md b/docs/3.1.x/dark-mode.md index 9825a0266..4c4c0549e 100644 --- a/docs/3.1.x/dark-mode.md +++ b/docs/3.1.x/dark-mode.md @@ -1,6 +1,8 @@ --- id: dark-mode 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.1.x/default-theme.md b/docs/3.1.x/default-theme.md index 056ef1dec..37448db37 100644 --- a/docs/3.1.x/default-theme.md +++ b/docs/3.1.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"; @@ -11,7 +13,7 @@ Theming in NativeBase is based on the **[Styled System Theme Specification](htt ## Colors -You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. +You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. We recommend adding a palette that ranges from `50` to `900`. Tools like **[Smart Swatch](https://smart-swatch.netlify.app/)**, **[Palx](https://palx.jxnblk.com/)** are available to generate these palettes. @@ -30,28 +32,28 @@ To manage Typography options, the theme object supports the following keys: ```jsx const typography = { letterSpacings: { - '2xs': -1.5, - 'xs': -0.5, - 'sm': 0, - 'md': 0.1, - 'lg': 0.15, - 'xl': 0.25, - '2xl': 0.4, - '3xl': 0.5, - '4xl': 1.25, - '5xl': 1.5, + "2xs": -1.5, + "xs": -0.5, + "sm": 0, + "md": 0.1, + "lg": 0.15, + "xl": 0.25, + "2xl": 0.4, + "3xl": 0.5, + "4xl": 1.25, + "5xl": 1.5, }, lineHeights: { - '2xs': 16, - 'xs': 18, - 'sm': 20, - 'md': 22, - 'lg': 24, - 'xl': 28, - '2xl': 32, - '3xl': 40, - '4xl': 48, - '5xl': 64, + "2xs": 16, + "xs": 18, + "sm": 20, + "md": 22, + "lg": 24, + "xl": 28, + "2xl": 32, + "3xl": 40, + "4xl": 48, + "5xl": 64, }, fontWeights: { hairline: 100, @@ -71,20 +73,20 @@ const typography = { mono: undefined, }, fontSizes: { - '2xs': 10, - 'xs': 12, - 'sm': 14, - 'md': 16, - 'lg': 18, - 'xl': 20, - '2xl': 24, - '3xl': 30, - '4xl': 36, - '5xl': 48, - '6xl': 60, - '7xl': 72, - '8xl': 96, - '9xl': 128, + "2xs": 10, + "xs": 12, + "sm": 14, + "md": 16, + "lg": 18, + "xl": 20, + "2xl": 24, + "3xl": 30, + "4xl": 36, + "5xl": 48, + "6xl": 60, + "7xl": 72, + "8xl": 96, + "9xl": 128, }, }; ``` @@ -128,7 +130,7 @@ The `shadow` key allows you to customize the global box shadow for your project. ```jsx export default { 0: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -138,7 +140,7 @@ export default { elevation: 1, }, 1: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -148,7 +150,7 @@ export default { elevation: 2, }, 2: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -158,7 +160,7 @@ export default { elevation: 3, }, 3: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -168,7 +170,7 @@ export default { elevation: 4, }, 4: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -178,7 +180,7 @@ export default { elevation: 5, }, 5: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -188,7 +190,7 @@ export default { elevation: 6, }, 6: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -198,7 +200,7 @@ export default { elevation: 7, }, 7: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -208,7 +210,7 @@ export default { elevation: 8, }, 8: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -218,7 +220,7 @@ export default { elevation: 9, }, 9: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 5, diff --git a/docs/3.1.x/divider.md b/docs/3.1.x/divider.md index a65c8b86a..41f50c316 100644 --- a/docs/3.1.x/divider.md +++ b/docs/3.1.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'; diff --git a/docs/3.1.x/flat-list.md b/docs/3.1.x/flat-list.md index 4b6c9e211..d9ffb7490 100644 --- a/docs/3.1.x/flat-list.md +++ b/docs/3.1.x/flat-list.md @@ -1,6 +1,8 @@ --- id: flat-list 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.1.x/flex.md b/docs/3.1.x/flex.md index 0e9fddc8d..94659f8a3 100644 --- a/docs/3.1.x/flex.md +++ b/docs/3.1.x/flex.md @@ -1,6 +1,8 @@ --- 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`. diff --git a/docs/3.1.x/hstack.md b/docs/3.1.x/hstack.md index 276f3d442..bcd4a47cf 100644 --- a/docs/3.1.x/hstack.md +++ b/docs/3.1.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.1.x/icon.md b/docs/3.1.x/icon.md index 89c657ca2..0eecadc79 100644 --- a/docs/3.1.x/icon.md +++ b/docs/3.1.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.1.x/image.md b/docs/3.1.x/image.md index 550e56ec4..6995e9c33 100644 --- a/docs/3.1.x/image.md +++ b/docs/3.1.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.1.x/keyboard-avoiding-view.md b/docs/3.1.x/keyboard-avoiding-view.md index a124d3063..dd6759975 100644 --- a/docs/3.1.x/keyboard-avoiding-view.md +++ b/docs/3.1.x/keyboard-avoiding-view.md @@ -1,6 +1,8 @@ --- id: keyboard-avoiding-view 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.1.x/kitchen-sink.mdx b/docs/3.1.x/kitchen-sink.mdx index ecca7b82c..1008679a7 100644 --- a/docs/3.1.x/kitchen-sink.mdx +++ b/docs/3.1.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.1.x/migration/v3.md b/docs/3.1.x/migration/v3.md index 24813b8ee..4cfe29dcb 100644 --- a/docs/3.1.x/migration/v3.md +++ b/docs/3.1.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.1.x/presence-transition.md b/docs/3.1.x/presence-transition.md index 2e725036a..f3c4c04e0 100644 --- a/docs/3.1.x/presence-transition.md +++ b/docs/3.1.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.1.x/progress.md b/docs/3.1.x/progress.md index 7b0b68ed3..cd02c8d94 100644 --- a/docs/3.1.x/progress.md +++ b/docs/3.1.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'; diff --git a/docs/3.1.x/scrollview.md b/docs/3.1.x/scrollview.md index 1064515aa..33f650cd3 100644 --- a/docs/3.1.x/scrollview.md +++ b/docs/3.1.x/scrollview.md @@ -1,6 +1,8 @@ --- id: scrollview title: Scrollview +metaTitle: Scrollview | NativeBase +metaDescription: "The ScrollView component in NativeBase provides a scrolling container that helps host multiple components and views. Read the document for more on ScrollView." --- Provides a scrolling container that can host multiple components and views. diff --git a/docs/3.1.x/section-list.md b/docs/3.1.x/section-list.md index 329206a1d..22243fc28 100644 --- a/docs/3.1.x/section-list.md +++ b/docs/3.1.x/section-list.md @@ -1,6 +1,8 @@ --- id: section-list title: SectionList +metaTitle: SectionList | NativeBase +metaDescription: SectionList component in NativeBase is a performance interface for rendering sectioned lists. Read this document to know more about SectionList with examples. --- A performant interface for rendering sectioned lists. diff --git a/docs/3.1.x/slide.md b/docs/3.1.x/slide.md index fb8279ee1..1b56bb9ab 100644 --- a/docs/3.1.x/slide.md +++ b/docs/3.1.x/slide.md @@ -1,6 +1,8 @@ --- id: slide title: Slide +metaTitle: Slider | NativeBase +metaDescription: The slider component in NativeBase allows users to select options from a given range of values. Explore slider colors, values, size, and more with examples here. --- Slide component provides a declarative API to add sliding transitions. diff --git a/docs/3.1.x/spinner.md b/docs/3.1.x/spinner.md index 359275a20..0ab35a6a8 100644 --- a/docs/3.1.x/spinner.md +++ b/docs/3.1.x/spinner.md @@ -1,6 +1,8 @@ --- id: spinner title: Spinner +metaTitle: Spinner | NativeBase +metaDescription: " Spinner component in NativeBase gives visual cues to actions that are processing or awaiting changes. Learn more about basic spinners, colors and sizes here." --- ## Examples diff --git a/docs/3.1.x/stack.md b/docs/3.1.x/stack.md index 12ac4ecae..6c59741e4 100644 --- a/docs/3.1.x/stack.md +++ b/docs/3.1.x/stack.md @@ -1,6 +1,8 @@ --- id: stack title: Stack +metaTitle: Stack | NativeBase +metaDescription: Stack in NativeBase aligns items vertically or horizontally based on the direction prop. Learn more about Stack component with some examples in this document. --- `Stack` aligns items vertically or horizontally based on the `direction` prop. diff --git a/docs/3.1.x/stagger.md b/docs/3.1.x/stagger.md index ac8bce5c4..a29c33fc0 100644 --- a/docs/3.1.x/stagger.md +++ b/docs/3.1.x/stagger.md @@ -1,6 +1,8 @@ --- id: stagger title: Stagger +metaTitle: Stagger | NativeBase +metaDescription: "The stagger component in NativeBase provides a declarative API to add staggered transitions. Read this documentation to explore more about it with examples." --- Stagger component provides a declarative API to add Staggered Transitions. diff --git a/docs/3.1.x/status-bar.md b/docs/3.1.x/status-bar.md index eceacc2fa..00e521ced 100644 --- a/docs/3.1.x/status-bar.md +++ b/docs/3.1.x/status-bar.md @@ -1,6 +1,8 @@ --- id: status-bar title: StatusBar +metaTitle: StatusBar | NativeBase +metaDescription: "In NativeBase, the StatusBar component controls the app's status bar. Read this document for more information and examples on the use of StatusBar." --- Component to control the app status bar. diff --git a/docs/3.1.x/theme.md b/docs/3.1.x/theme.md index 259439050..db10fa462 100644 --- a/docs/3.1.x/theme.md +++ b/docs/3.1.x/theme.md @@ -1,6 +1,8 @@ --- id: theme title: Using Theme +metaTitle: useTheme | NativeBase +metaDescription: In NativeBase useTheme is a custom hook to call theme object from the context. Read this document to know more about useTheme hook and its uses with examples. --- NativeBase provides multiple tools to use the central theme defined in the app. The first tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. diff --git a/docs/3.1.x/toast.md b/docs/3.1.x/toast.md index c6e2d5894..c6d991efb 100644 --- a/docs/3.1.x/toast.md +++ b/docs/3.1.x/toast.md @@ -1,6 +1,8 @@ --- id: toast title: Toast +metaTitle: Toast | NativeBase +metaDescription: The Toast component in NativeBase displays alerts on top of an overlay. Read more on toast usage, toast message in react and react native and how to configure them. --- import { ComponentTheme } from '../../src/components'; diff --git a/docs/3.1.x/todo-list.md b/docs/3.1.x/todo-list.md index e45381c7e..779dfa16c 100644 --- a/docs/3.1.x/todo-list.md +++ b/docs/3.1.x/todo-list.md @@ -1,6 +1,8 @@ --- id: todo-example title: Todo-List +metaTitle: Todo-List | NativeBase +metaDescription: Todo-List is a simple To-do app that is made using NativeBase 3.0. Check out this document for more information on the Todo-List app and see what it looks like. --- A simple To Do App made using NativeBase 3.0. diff --git a/docs/3.1.x/view.md b/docs/3.1.x/view.md index dd1890b6f..4193c01da 100644 --- a/docs/3.1.x/view.md +++ b/docs/3.1.x/view.md @@ -1,6 +1,8 @@ --- id: view title: View +metaTitle: View | NativeBase +metaDescription: "In NativeBase, View is considered the most fundamental component for building a UI. Read the document for more information on View component and its uses." --- The most fundamental component for building a UI. diff --git a/docs/3.1.x/vstack.md b/docs/3.1.x/vstack.md index 44942a4fa..a56f3da51 100644 --- a/docs/3.1.x/vstack.md +++ b/docs/3.1.x/vstack.md @@ -1,6 +1,8 @@ --- id: VStack title: VStack / Column +metaTitle: VStack / Column | NativeBase +metaDescription: Vstack in NativeBase aligns items vertically. Column is an alias for Vstack. You can learn more about the usage of Vstack/Column component in this document. --- `VStack` aligns items vertically. `Column` is also an alias for `VStack`. diff --git a/docs/3.1.x/zstack.md b/docs/3.1.x/zstack.md index 6005fa0e2..7b1720729 100644 --- a/docs/3.1.x/zstack.md +++ b/docs/3.1.x/zstack.md @@ -1,3 +1,8 @@ +--- +metaTitle: ZStack | NativeBase +metaDescription: In NativeBase ZStack aligns items to the z-axis. Learn more about the types of ZStack component such as basic and items centered with examples in this document. +--- + `ZStack` aligns items to the z-axis. ## Examples diff --git a/docs/3.2.x/alert.md b/docs/3.2.x/alert.md index 885bff9ef..c5f0de2af 100644 --- a/docs/3.2.x/alert.md +++ b/docs/3.2.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.2.x/avatar.md b/docs/3.2.x/avatar.md index 9055bbf42..258578351 100644 --- a/docs/3.2.x/avatar.md +++ b/docs/3.2.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.2.x/badge.md b/docs/3.2.x/badge.md index 33a08a72d..fd6f60154 100644 --- a/docs/3.2.x/badge.md +++ b/docs/3.2.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.2.x/box.md b/docs/3.2.x/box.md index 22a3eb016..fdd106058 100644 --- a/docs/3.2.x/box.md +++ b/docs/3.2.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.2.x/breakpoints.md b/docs/3.2.x/breakpoints.md index d30fb4cf1..422586e65 100644 --- a/docs/3.2.x/breakpoints.md +++ b/docs/3.2.x/breakpoints.md @@ -1,6 +1,8 @@ --- id: breakpoints 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.2.x/building-app-bar.md b/docs/3.2.x/building-app-bar.md index fe488e6f5..a9f667918 100644 --- a/docs/3.2.x/building-app-bar.md +++ b/docs/3.2.x/building-app-bar.md @@ -1,6 +1,8 @@ --- 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.2.x/building-app-drawer.md b/docs/3.2.x/building-app-drawer.md index a249f6a87..c4e386aab 100644 --- a/docs/3.2.x/building-app-drawer.md +++ b/docs/3.2.x/building-app-drawer.md @@ -1,6 +1,8 @@ --- id: app-drawer 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 using FlatList. Here is an example to illustrate it. diff --git a/docs/3.2.x/building-card.md b/docs/3.2.x/building-card.md index c99468b41..d954f32bb 100644 --- a/docs/3.2.x/building-card.md +++ b/docs/3.2.x/building-card.md @@ -1,6 +1,8 @@ --- id: building-card 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.2.x/building-drawer-navigation.md b/docs/3.2.x/building-drawer-navigation.md index 59c0f5c36..afcf89d08 100644 --- a/docs/3.2.x/building-drawer-navigation.md +++ b/docs/3.2.x/building-drawer-navigation.md @@ -1,6 +1,8 @@ --- id: building-drawer-navigation 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.2.x/building-footer-tabs.md b/docs/3.2.x/building-footer-tabs.md index c99af156a..b90c7519b 100644 --- a/docs/3.2.x/building-footer-tabs.md +++ b/docs/3.2.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.2.x/building-swipe-list.md b/docs/3.2.x/building-swipe-list.md index 5ec5a4359..17d1a09b6 100644 --- a/docs/3.2.x/building-swipe-list.md +++ b/docs/3.2.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.2.x/building-tab-view.md b/docs/3.2.x/building-tab-view.md index 8065dcfc4..8a50044d4 100644 --- a/docs/3.2.x/building-tab-view.md +++ b/docs/3.2.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.2.x/center.md b/docs/3.2.x/center.md index 3f466f274..74990ecf1 100644 --- a/docs/3.2.x/center.md +++ b/docs/3.2.x/center.md @@ -1,6 +1,8 @@ --- 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. diff --git a/docs/3.2.x/container.md b/docs/3.2.x/container.md index bd4680d93..5337a3f7d 100644 --- a/docs/3.2.x/container.md +++ b/docs/3.2.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.2.x/customizing-components.md b/docs/3.2.x/customizing-components.md index 5ca290d66..6a5e127aa 100644 --- a/docs/3.2.x/customizing-components.md +++ b/docs/3.2.x/customizing-components.md @@ -1,6 +1,8 @@ --- id: customizing-components title: Customizing 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.2.x/customizing-fonts.md b/docs/3.2.x/customizing-fonts.md index f280bc8ab..64374052d 100644 --- a/docs/3.2.x/customizing-fonts.md +++ b/docs/3.2.x/customizing-fonts.md @@ -1,6 +1,8 @@ --- id: customizing-fonts title: Customizing 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.2.x/customizing-theme.md b/docs/3.2.x/customizing-theme.md index d38daab9e..78683d9ae 100644 --- a/docs/3.2.x/customizing-theme.md +++ b/docs/3.2.x/customizing-theme.md @@ -1,6 +1,8 @@ --- id: customizing-theme title: Customizing 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'; diff --git a/docs/3.2.x/dark-mode.md b/docs/3.2.x/dark-mode.md index 9825a0266..4c4c0549e 100644 --- a/docs/3.2.x/dark-mode.md +++ b/docs/3.2.x/dark-mode.md @@ -1,6 +1,8 @@ --- id: dark-mode 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.2.x/default-theme.md b/docs/3.2.x/default-theme.md index 4bee4202c..af12f3b30 100644 --- a/docs/3.2.x/default-theme.md +++ b/docs/3.2.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 { ColorBlocks, FontBlocks, SpaceBlocks } from "../../src/components"; @@ -11,7 +13,7 @@ Theming in NativeBase is based on the **[Styled System Theme Specification](htt ## Colors -You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. +You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) @@ -32,24 +34,24 @@ To manage Typography options, the theme object supports the following keys: ```jsx const typography = { letterSpacings: { - 'xs': '-0.05em', - 'sm': '-0.025em', - 'md': 0, - 'lg': '0.025em', - 'xl': '0.05em', - '2xl': '0.1em', + "xs": "-0.05em", + "sm": "-0.025em", + "md": 0, + "lg": "0.025em", + "xl": "0.05em", + "2xl": "0.1em", }, lineHeights: { - '2xs': '1em', - 'xs': '1.125em', - 'sm': '1.25em', - 'md': '1.375em', - 'lg': '1.5em', - 'xl': '1.75em', - '2xl': '2em', - '3xl': '2.5em', - '4xl': '3em', - '5xl': '4em', + "2xs": "1em", + "xs": "1.125em", + "sm": "1.25em", + "md": "1.375em", + "lg": "1.5em", + "xl": "1.75em", + "2xl": "2em", + "3xl": "2.5em", + "4xl": "3em", + "5xl": "4em", }, fontWeights: { hairline: 100, @@ -69,20 +71,20 @@ const typography = { mono: undefined, }, fontSizes: { - '2xs': 10, - 'xs': 12, - 'sm': 14, - 'md': 16, - 'lg': 18, - 'xl': 20, - '2xl': 24, - '3xl': 30, - '4xl': 36, - '5xl': 48, - '6xl': 60, - '7xl': 72, - '8xl': 96, - '9xl': 128, + "2xs": 10, + "xs": 12, + "sm": 14, + "md": 16, + "lg": 18, + "xl": 20, + "2xl": 24, + "3xl": 30, + "4xl": 36, + "5xl": 48, + "6xl": 60, + "7xl": 72, + "8xl": 96, + "9xl": 128, }, }; ``` @@ -126,7 +128,7 @@ The `shadow` key allows you to customize the global box shadow for your project. ```jsx export default { 0: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -136,7 +138,7 @@ export default { elevation: 1, }, 1: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -146,7 +148,7 @@ export default { elevation: 2, }, 2: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -156,7 +158,7 @@ export default { elevation: 3, }, 3: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -166,7 +168,7 @@ export default { elevation: 4, }, 4: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -176,7 +178,7 @@ export default { elevation: 5, }, 5: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -186,7 +188,7 @@ export default { elevation: 6, }, 6: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -196,7 +198,7 @@ export default { elevation: 7, }, 7: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -206,7 +208,7 @@ export default { elevation: 8, }, 8: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -216,7 +218,7 @@ export default { elevation: 9, }, 9: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 5, diff --git a/docs/3.2.x/divider.md b/docs/3.2.x/divider.md index 38a22c284..eaea403fa 100644 --- a/docs/3.2.x/divider.md +++ b/docs/3.2.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'; diff --git a/docs/3.2.x/flat-list.md b/docs/3.2.x/flat-list.md index d0cd17068..59cf8fb97 100644 --- a/docs/3.2.x/flat-list.md +++ b/docs/3.2.x/flat-list.md @@ -1,6 +1,8 @@ --- id: flat-list 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.2.x/flex.md b/docs/3.2.x/flex.md index 1f5cb3f3b..b6d37065f 100644 --- a/docs/3.2.x/flex.md +++ b/docs/3.2.x/flex.md @@ -1,6 +1,8 @@ --- 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`. diff --git a/docs/3.2.x/hstack.md b/docs/3.2.x/hstack.md index de0d33d06..de051c172 100644 --- a/docs/3.2.x/hstack.md +++ b/docs/3.2.x/hstack.md @@ -1,6 +1,8 @@ --- id: h-stack 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.2.x/icon.md b/docs/3.2.x/icon.md index c84381c24..db49e0e75 100644 --- a/docs/3.2.x/icon.md +++ b/docs/3.2.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.2.x/image.md b/docs/3.2.x/image.md index 767347d6d..54b0b43b2 100644 --- a/docs/3.2.x/image.md +++ b/docs/3.2.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.2.x/keyboard-avoiding-view.md b/docs/3.2.x/keyboard-avoiding-view.md index 7433142e2..dbb68200b 100644 --- a/docs/3.2.x/keyboard-avoiding-view.md +++ b/docs/3.2.x/keyboard-avoiding-view.md @@ -1,6 +1,8 @@ --- id: keyboard-avoiding-view 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.2.x/kitchen-sink.mdx b/docs/3.2.x/kitchen-sink.mdx index ecca7b82c..1008679a7 100644 --- a/docs/3.2.x/kitchen-sink.mdx +++ b/docs/3.2.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.2.x/migration/v3.md b/docs/3.2.x/migration/v3.md index 349226570..c73ef1f9a 100644 --- a/docs/3.2.x/migration/v3.md +++ b/docs/3.2.x/migration/v3.md @@ -1,6 +1,8 @@ --- id: migration-guide-three title: Upgrading 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.2.x/migration/v3xtov32.mdx b/docs/3.2.x/migration/v3xtov32.mdx index ee5be30ed..027de5f69 100644 --- a/docs/3.2.x/migration/v3xtov32.mdx +++ b/docs/3.2.x/migration/v3xtov32.mdx @@ -1,6 +1,9 @@ --- id: migration-guide-three-point-two title: Upgrading to 3.2.0 from 3.x +metaTitle: Upgrading to 3.2.0 from 3.x | NativeBase +metaDescription: "In NativeBase v3.2.0 we revamped the features and theme and made them more optimized. Read on to find out how to easily upgrade to v3.2.0 with three options. +" --- As we continued to improve NativeBase v3, we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, and optimized to promote good practices while writing code. diff --git a/docs/3.2.x/presence-transition.md b/docs/3.2.x/presence-transition.md index 123d1ec63..4441dd63e 100644 --- a/docs/3.2.x/presence-transition.md +++ b/docs/3.2.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.2.x/progress.md b/docs/3.2.x/progress.md index dc431c74d..5eb99168d 100644 --- a/docs/3.2.x/progress.md +++ b/docs/3.2.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'; diff --git a/docs/3.2.x/scrollview.md b/docs/3.2.x/scrollview.md index 99e5e443b..ca9b0ffb3 100644 --- a/docs/3.2.x/scrollview.md +++ b/docs/3.2.x/scrollview.md @@ -1,6 +1,8 @@ --- id: scrollview title: Scrollview +metaTitle: Scrollview | NativeBase +metaDescription: "The ScrollView component in NativeBase provides a scrolling container that helps host multiple components and views. Read the document for more on ScrollView." --- Provides a scrolling container that can host multiple components and views. diff --git a/docs/3.2.x/section-list.md b/docs/3.2.x/section-list.md index aea7b93d3..c85d73a34 100644 --- a/docs/3.2.x/section-list.md +++ b/docs/3.2.x/section-list.md @@ -1,6 +1,8 @@ --- id: section-list title: SectionList +metaTitle: SectionList | NativeBase +metaDescription: SectionList component in NativeBase is a performance interface for rendering sectioned lists. Read this document to know more about SectionList with examples. --- A performant interface for rendering sectioned lists. diff --git a/docs/3.2.x/slide.md b/docs/3.2.x/slide.md index 885488982..5bffab0de 100644 --- a/docs/3.2.x/slide.md +++ b/docs/3.2.x/slide.md @@ -1,6 +1,8 @@ --- id: slide title: Slide +metaTitle: Slider | NativeBase +metaDescription: The slider component in NativeBase allows users to select options from a given range of values. Explore slider colors, values, size, and more with examples here. --- Slide component provides a declarative API to add sliding transitions. diff --git a/docs/3.2.x/spinner.md b/docs/3.2.x/spinner.md index 3ceaeef0f..f53e00166 100644 --- a/docs/3.2.x/spinner.md +++ b/docs/3.2.x/spinner.md @@ -1,6 +1,8 @@ --- id: spinner title: Spinner +metaTitle: Spinner | NativeBase +metaDescription: " Spinner component in NativeBase gives visual cues to actions that are processing or awaiting changes. Learn more about basic spinners, colors and sizes here." --- ## Examples diff --git a/docs/3.2.x/stack.md b/docs/3.2.x/stack.md index bf058ead7..420aa0d95 100644 --- a/docs/3.2.x/stack.md +++ b/docs/3.2.x/stack.md @@ -1,6 +1,8 @@ --- id: stack title: Stack +metaTitle: Stack | NativeBase +metaDescription: Stack in NativeBase aligns items vertically or horizontally based on the direction prop. Learn more about Stack component with some examples in this document. --- `Stack` aligns items vertically or horizontally based on the `direction` prop. diff --git a/docs/3.2.x/stagger.md b/docs/3.2.x/stagger.md index ed4adb704..9f105e0ae 100644 --- a/docs/3.2.x/stagger.md +++ b/docs/3.2.x/stagger.md @@ -1,6 +1,8 @@ --- id: stagger title: Stagger +metaTitle: Stagger | NativeBase +metaDescription: "The stagger component in NativeBase provides a declarative API to add staggered transitions. Read this documentation to explore more about it with examples." --- Stagger component provides a declarative API to add Staggered Transitions. diff --git a/docs/3.2.x/status-bar.md b/docs/3.2.x/status-bar.md index f041b9682..0b335a237 100644 --- a/docs/3.2.x/status-bar.md +++ b/docs/3.2.x/status-bar.md @@ -1,6 +1,8 @@ --- id: status-bar title: StatusBar +metaTitle: StatusBar | NativeBase +metaDescription: "In NativeBase, the StatusBar component controls the app's status bar. Read this document for more information and examples on the use of StatusBar." --- Component to control the app status bar. diff --git a/docs/3.2.x/theme.md b/docs/3.2.x/theme.md index cedfc03a3..38b8cc7d7 100644 --- a/docs/3.2.x/theme.md +++ b/docs/3.2.x/theme.md @@ -1,6 +1,8 @@ --- id: theme title: Using Theme +metaTitle: useTheme | NativeBase +metaDescription: In NativeBase useTheme is a custom hook to call theme object from the context. Read this document to know more about useTheme hook and its uses with examples. --- NativeBase provides multiple tools to use the central theme defined in the app. The first tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. diff --git a/docs/3.2.x/toast.md b/docs/3.2.x/toast.md index 2cac17bc3..f808f31b7 100644 --- a/docs/3.2.x/toast.md +++ b/docs/3.2.x/toast.md @@ -1,6 +1,8 @@ --- id: toast title: Toast +metaTitle: Toast | NativeBase +metaDescription: The Toast component in NativeBase displays alerts on top of an overlay. Read more on toast usage, toast message in react and react native and how to configure them. --- import { ComponentTheme } from '../../src/components'; diff --git a/docs/3.2.x/todo-list.md b/docs/3.2.x/todo-list.md index 70010dc0e..f778e6bef 100644 --- a/docs/3.2.x/todo-list.md +++ b/docs/3.2.x/todo-list.md @@ -1,6 +1,8 @@ --- id: todo-example title: Todo-List +metaTitle: Todo-List | NativeBase +metaDescription: Todo-List is a simple To-do app that is made using NativeBase 3.0. Check out this document for more information on the Todo-List app and see what it looks like. --- A simple To Do App made using NativeBase 3.0. diff --git a/docs/3.2.x/typescript.mdx b/docs/3.2.x/typescript.mdx index e35674269..74709d4a0 100644 --- a/docs/3.2.x/typescript.mdx +++ b/docs/3.2.x/typescript.mdx @@ -1,6 +1,8 @@ --- id: typescript title: TypeScript +metaTitle: Typescript | NativeBase +metaDescription: "Learn more about the steps to follow in order to enable TypeScript for custom theme tokens or variants in NativeBase. Example with result in the guideline." --- To enable TypeScript for custom theme tokens or variants, we'll follow two simple steps. diff --git a/docs/3.2.x/view.md b/docs/3.2.x/view.md index 8f1a9f415..6bd2d3c59 100644 --- a/docs/3.2.x/view.md +++ b/docs/3.2.x/view.md @@ -1,6 +1,8 @@ --- id: view title: View +metaTitle: View | NativeBase +metaDescription: "In NativeBase, View is considered the most fundamental component for building a UI. Read the document for more information on View component and its uses." --- The most fundamental component for building a UI. diff --git a/docs/3.2.x/vstack.md b/docs/3.2.x/vstack.md index a7b47fb83..53016e971 100644 --- a/docs/3.2.x/vstack.md +++ b/docs/3.2.x/vstack.md @@ -1,6 +1,8 @@ --- id: vstack title: VStack / Column +metaTitle: VStack / Column | NativeBase +metaDescription: Vstack in NativeBase aligns items vertically. Column is an alias for Vstack. You can learn more about the usage of Vstack/Column component in this document. --- `VStack` aligns items vertically. `Column` is also an alias for `VStack`. diff --git a/docs/3.2.x/zstack.md b/docs/3.2.x/zstack.md index 8cce87da5..0cd7cc8ab 100644 --- a/docs/3.2.x/zstack.md +++ b/docs/3.2.x/zstack.md @@ -1,6 +1,8 @@ --- id: z-stack title: ZStack +metaTitle: ZStack | NativeBase +metaDescription: In NativeBase ZStack aligns items to the z-axis. Learn more about the types of ZStack component such as basic and items centered with examples in this document. --- `ZStack` aligns items to the z-axis. diff --git a/docs/3.3.x/alert.md b/docs/3.3.x/alert.md index e8a92c77f..cffef8a16 100644 --- a/docs/3.3.x/alert.md +++ b/docs/3.3.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.3.x/aspect-ratio.md b/docs/3.3.x/aspect-ratio.md index 4a49d0617..1a64606ad 100644 --- a/docs/3.3.x/aspect-ratio.md +++ b/docs/3.3.x/aspect-ratio.md @@ -1,6 +1,8 @@ --- id: aspectRatio title: AspectRatio +metaTitle: AspectRatio | NativeBase +metaDescription: AspectRatio in NativeBase controls the size of the undefined dimension of a node or child component. Read on for examples and more details on AspectRatio. --- AspectRatio controls the size of the undefined dimension of a node or child component. You can refer [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. diff --git a/docs/3.3.x/avatar.md b/docs/3.3.x/avatar.md index 739890371..715d43afc 100644 --- a/docs/3.3.x/avatar.md +++ b/docs/3.3.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.3.x/badge.md b/docs/3.3.x/badge.md index 5c8e24cbd..ef198cf4f 100644 --- a/docs/3.3.x/badge.md +++ b/docs/3.3.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.3.x/box.md b/docs/3.3.x/box.md index 5642e591e..9a2566541 100644 --- a/docs/3.3.x/box.md +++ b/docs/3.3.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.3.x/breakpoints.md b/docs/3.3.x/breakpoints.md index d30fb4cf1..422586e65 100644 --- a/docs/3.3.x/breakpoints.md +++ b/docs/3.3.x/breakpoints.md @@ -1,6 +1,8 @@ --- id: breakpoints 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.3.x/building-app-bar.md b/docs/3.3.x/building-app-bar.md index 619b618ab..e42388977 100644 --- a/docs/3.3.x/building-app-bar.md +++ b/docs/3.3.x/building-app-bar.md @@ -1,6 +1,8 @@ --- 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.3.x/building-app-drawer.md b/docs/3.3.x/building-app-drawer.md index 20692a4b0..7a2012a4b 100644 --- a/docs/3.3.x/building-app-drawer.md +++ b/docs/3.3.x/building-app-drawer.md @@ -1,6 +1,8 @@ --- id: app-drawer 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 using FlatList. Here is an example to illustrate it. diff --git a/docs/3.3.x/building-card.md b/docs/3.3.x/building-card.md index c99468b41..d954f32bb 100644 --- a/docs/3.3.x/building-card.md +++ b/docs/3.3.x/building-card.md @@ -1,6 +1,8 @@ --- id: building-card 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.3.x/building-drawer-navigation.md b/docs/3.3.x/building-drawer-navigation.md index 59c0f5c36..afcf89d08 100644 --- a/docs/3.3.x/building-drawer-navigation.md +++ b/docs/3.3.x/building-drawer-navigation.md @@ -1,6 +1,8 @@ --- id: building-drawer-navigation 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.3.x/building-footer-tabs.md b/docs/3.3.x/building-footer-tabs.md index 6ed177656..6bf4379a6 100644 --- a/docs/3.3.x/building-footer-tabs.md +++ b/docs/3.3.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.3.x/building-swipe-list.md b/docs/3.3.x/building-swipe-list.md index 49cd046c7..f146a2d40 100644 --- a/docs/3.3.x/building-swipe-list.md +++ b/docs/3.3.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.3.x/building-tab-view.md b/docs/3.3.x/building-tab-view.md index 11511e9bf..8a8aa694d 100644 --- a/docs/3.3.x/building-tab-view.md +++ b/docs/3.3.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.3.x/center.md b/docs/3.3.x/center.md index abba8dce0..809ea98e2 100644 --- a/docs/3.3.x/center.md +++ b/docs/3.3.x/center.md @@ -1,6 +1,8 @@ --- 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. diff --git a/docs/3.3.x/container.md b/docs/3.3.x/container.md index bd4680d93..5337a3f7d 100644 --- a/docs/3.3.x/container.md +++ b/docs/3.3.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.3.x/customizing-components.md b/docs/3.3.x/customizing-components.md index 9bd0207c8..fdf3f1d8c 100644 --- a/docs/3.3.x/customizing-components.md +++ b/docs/3.3.x/customizing-components.md @@ -1,6 +1,8 @@ --- id: customizing-components title: Customizing 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.3.x/customizing-fonts.md b/docs/3.3.x/customizing-fonts.md index f280bc8ab..64374052d 100644 --- a/docs/3.3.x/customizing-fonts.md +++ b/docs/3.3.x/customizing-fonts.md @@ -1,6 +1,8 @@ --- id: customizing-fonts title: Customizing 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.3.x/customizing-theme.md b/docs/3.3.x/customizing-theme.md index d573b7170..a87dc3af5 100644 --- a/docs/3.3.x/customizing-theme.md +++ b/docs/3.3.x/customizing-theme.md @@ -1,6 +1,8 @@ --- id: customizing-theme title: Customizing 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'; diff --git a/docs/3.3.x/dark-mode.md b/docs/3.3.x/dark-mode.md index 9825a0266..4c4c0549e 100644 --- a/docs/3.3.x/dark-mode.md +++ b/docs/3.3.x/dark-mode.md @@ -1,6 +1,8 @@ --- id: dark-mode 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.3.x/default-theme.md b/docs/3.3.x/default-theme.md index 7b83315e4..64571eb4d 100644 --- a/docs/3.3.x/default-theme.md +++ b/docs/3.3.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"; @@ -11,7 +13,7 @@ Theming in NativeBase is based on the **[Styled System Theme Specification](htt ## Colors -You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. +You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) @@ -32,24 +34,24 @@ To manage Typography options, the theme object supports the following keys: ```jsx const typography = { letterSpacings: { - 'xs': '-0.05em', - 'sm': '-0.025em', - 'md': 0, - 'lg': '0.025em', - 'xl': '0.05em', - '2xl': '0.1em', + "xs": "-0.05em", + "sm": "-0.025em", + "md": 0, + "lg": "0.025em", + "xl": "0.05em", + "2xl": "0.1em", }, lineHeights: { - '2xs': '1em', - 'xs': '1.125em', - 'sm': '1.25em', - 'md': '1.375em', - 'lg': '1.5em', - 'xl': '1.75em', - '2xl': '2em', - '3xl': '2.5em', - '4xl': '3em', - '5xl': '4em', + "2xs": "1em", + "xs": "1.125em", + "sm": "1.25em", + "md": "1.375em", + "lg": "1.5em", + "xl": "1.75em", + "2xl": "2em", + "3xl": "2.5em", + "4xl": "3em", + "5xl": "4em", }, fontWeights: { hairline: 100, @@ -69,20 +71,20 @@ const typography = { mono: undefined, }, fontSizes: { - '2xs': 10, - 'xs': 12, - 'sm': 14, - 'md': 16, - 'lg': 18, - 'xl': 20, - '2xl': 24, - '3xl': 30, - '4xl': 36, - '5xl': 48, - '6xl': 60, - '7xl': 72, - '8xl': 96, - '9xl': 128, + "2xs": 10, + "xs": 12, + "sm": 14, + "md": 16, + "lg": 18, + "xl": 20, + "2xl": 24, + "3xl": 30, + "4xl": 36, + "5xl": 48, + "6xl": 60, + "7xl": 72, + "8xl": 96, + "9xl": 128, }, }; ``` @@ -130,7 +132,7 @@ The `shadow` key allows you to customize the global box shadow for your project. ```jsx export default { 0: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -140,7 +142,7 @@ export default { elevation: 1, }, 1: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -150,7 +152,7 @@ export default { elevation: 2, }, 2: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -160,7 +162,7 @@ export default { elevation: 3, }, 3: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -170,7 +172,7 @@ export default { elevation: 4, }, 4: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -180,7 +182,7 @@ export default { elevation: 5, }, 5: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -190,7 +192,7 @@ export default { elevation: 6, }, 6: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -200,7 +202,7 @@ export default { elevation: 7, }, 7: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -210,7 +212,7 @@ export default { elevation: 8, }, 8: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -220,7 +222,7 @@ export default { elevation: 9, }, 9: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 5, diff --git a/docs/3.3.x/divider.md b/docs/3.3.x/divider.md index 61c7745aa..4ba099305 100644 --- a/docs/3.3.x/divider.md +++ b/docs/3.3.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'; diff --git a/docs/3.3.x/flat-list.md b/docs/3.3.x/flat-list.md index d0cd17068..59cf8fb97 100644 --- a/docs/3.3.x/flat-list.md +++ b/docs/3.3.x/flat-list.md @@ -1,6 +1,8 @@ --- id: flat-list 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.3.x/flex.md b/docs/3.3.x/flex.md index 647930df8..6e8141a9f 100644 --- a/docs/3.3.x/flex.md +++ b/docs/3.3.x/flex.md @@ -1,6 +1,8 @@ --- 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`. diff --git a/docs/3.3.x/hstack.md b/docs/3.3.x/hstack.md index 119704e5e..f1b64e455 100644 --- a/docs/3.3.x/hstack.md +++ b/docs/3.3.x/hstack.md @@ -1,6 +1,8 @@ --- id: h-stack 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.3.x/icon.md b/docs/3.3.x/icon.md index 196961782..e273cdeb3 100644 --- a/docs/3.3.x/icon.md +++ b/docs/3.3.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. --- NativeBase allows you to use icons in multiples ways: diff --git a/docs/3.3.x/image.md b/docs/3.3.x/image.md index b21a686fc..b49e5d9c4 100644 --- a/docs/3.3.x/image.md +++ b/docs/3.3.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." --- The `Image` component allows one to display images. diff --git a/docs/3.3.x/keyboard-avoiding-view.md b/docs/3.3.x/keyboard-avoiding-view.md index 60da29145..d7b1ab2d9 100644 --- a/docs/3.3.x/keyboard-avoiding-view.md +++ b/docs/3.3.x/keyboard-avoiding-view.md @@ -1,6 +1,8 @@ --- id: keyboard-avoiding-view 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 solves the common problem of views needing 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.3.x/kitchen-sink.mdx b/docs/3.3.x/kitchen-sink.mdx index ecca7b82c..1008679a7 100644 --- a/docs/3.3.x/kitchen-sink.mdx +++ b/docs/3.3.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.3.x/migration/v3.md b/docs/3.3.x/migration/v3.md index 349226570..c73ef1f9a 100644 --- a/docs/3.3.x/migration/v3.md +++ b/docs/3.3.x/migration/v3.md @@ -1,6 +1,8 @@ --- id: migration-guide-three title: Upgrading 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.3.x/migration/v3xtov32.mdx b/docs/3.3.x/migration/v3xtov32.mdx index 948bfef2b..e87afe26f 100644 --- a/docs/3.3.x/migration/v3xtov32.mdx +++ b/docs/3.3.x/migration/v3xtov32.mdx @@ -1,6 +1,9 @@ --- id: migration-guide-three-point-two title: Upgrading to 3.2.0 from 3.x +metaTitle: Upgrading to 3.2.0 from 3.x | NativeBase +metaDescription: "In NativeBase v3.2.0 we revamped the features and theme and made them more optimized. Read on to find out how to easily upgrade to v3.2.0 with three options. +" --- As we continued to improve NativeBase v3, we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, and optimized to promote good practices while writing code. diff --git a/docs/3.3.x/presence-transition.md b/docs/3.3.x/presence-transition.md index f5705cc53..6fea93a50 100644 --- a/docs/3.3.x/presence-transition.md +++ b/docs/3.3.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.3.x/progress.md b/docs/3.3.x/progress.md index 6fa5abec7..06c2fdcf6 100644 --- a/docs/3.3.x/progress.md +++ b/docs/3.3.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'; diff --git a/docs/3.3.x/scrollview.md b/docs/3.3.x/scrollview.md index 99e5e443b..ca9b0ffb3 100644 --- a/docs/3.3.x/scrollview.md +++ b/docs/3.3.x/scrollview.md @@ -1,6 +1,8 @@ --- id: scrollview title: Scrollview +metaTitle: Scrollview | NativeBase +metaDescription: "The ScrollView component in NativeBase provides a scrolling container that helps host multiple components and views. Read the document for more on ScrollView." --- Provides a scrolling container that can host multiple components and views. diff --git a/docs/3.3.x/section-list.md b/docs/3.3.x/section-list.md index aea7b93d3..c85d73a34 100644 --- a/docs/3.3.x/section-list.md +++ b/docs/3.3.x/section-list.md @@ -1,6 +1,8 @@ --- id: section-list title: SectionList +metaTitle: SectionList | NativeBase +metaDescription: SectionList component in NativeBase is a performance interface for rendering sectioned lists. Read this document to know more about SectionList with examples. --- A performant interface for rendering sectioned lists. diff --git a/docs/3.3.x/skeleton.md b/docs/3.3.x/skeleton.md index 4caf51f29..e1eac32f4 100644 --- a/docs/3.3.x/skeleton.md +++ b/docs/3.3.x/skeleton.md @@ -1,6 +1,8 @@ --- id: skeleton title: Skeleton +metaTitle: Skeleton | NativeBase +metaDescription: Skeleton in NativeBase showcases the loading state of a component. Learn more about usage, color, composition, and IsLoaded in skeleton from this document. --- import { ComponentTheme } from '../src/components'; diff --git a/docs/3.3.x/slide.md b/docs/3.3.x/slide.md index 97406fb65..4c92a8ad8 100644 --- a/docs/3.3.x/slide.md +++ b/docs/3.3.x/slide.md @@ -1,6 +1,8 @@ --- id: slide title: Slide +metaTitle: Slider | NativeBase +metaDescription: The slider component in NativeBase allows users to select options from a given range of values. Explore slider colors, values, size, and more with examples here. --- Slide component provides a declarative API to add sliding transitions. diff --git a/docs/3.3.x/spinner.md b/docs/3.3.x/spinner.md index b18493425..bde1df704 100644 --- a/docs/3.3.x/spinner.md +++ b/docs/3.3.x/spinner.md @@ -1,6 +1,8 @@ --- id: spinner title: Spinner +metaTitle: Spinner | NativeBase +metaDescription: " Spinner component in NativeBase gives visual cues to actions that are processing or awaiting changes. Learn more about basic spinners, colors and sizes here." --- Spinners gives visual cues to actions that are processing or awaiting a course change or results. diff --git a/docs/3.3.x/stack.md b/docs/3.3.x/stack.md index 636151da9..e2ef987fb 100644 --- a/docs/3.3.x/stack.md +++ b/docs/3.3.x/stack.md @@ -1,6 +1,8 @@ --- id: stack title: Stack +metaTitle: Stack | NativeBase +metaDescription: Stack in NativeBase aligns items vertically or horizontally based on the direction prop. Learn more about Stack component with some examples in this document. --- `Stack` aligns items vertically or horizontally based on the `direction` prop. diff --git a/docs/3.3.x/stagger.md b/docs/3.3.x/stagger.md index 02240ecc2..1ab643c39 100644 --- a/docs/3.3.x/stagger.md +++ b/docs/3.3.x/stagger.md @@ -1,6 +1,8 @@ --- id: stagger title: Stagger +metaTitle: Stagger | NativeBase +metaDescription: "The stagger component in NativeBase provides a declarative API to add staggered transitions. Read this documentation to explore more about it with examples." --- `Stagger` component provides a declarative API to add staggered transitions. diff --git a/docs/3.3.x/status-bar.md b/docs/3.3.x/status-bar.md index f041b9682..0b335a237 100644 --- a/docs/3.3.x/status-bar.md +++ b/docs/3.3.x/status-bar.md @@ -1,6 +1,8 @@ --- id: status-bar title: StatusBar +metaTitle: StatusBar | NativeBase +metaDescription: "In NativeBase, the StatusBar component controls the app's status bar. Read this document for more information and examples on the use of StatusBar." --- Component to control the app status bar. diff --git a/docs/3.3.x/theme.md b/docs/3.3.x/theme.md index 3385c17fd..3d0591c25 100644 --- a/docs/3.3.x/theme.md +++ b/docs/3.3.x/theme.md @@ -1,6 +1,8 @@ --- id: theme title: Using Theme +metaTitle: useTheme | NativeBase +metaDescription: In NativeBase useTheme is a custom hook to call theme object from the context. Read this document to know more about useTheme hook and its uses with examples. --- NativeBase provides multiple tools to use the central theme defined in the app. The first tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. diff --git a/docs/3.3.x/toast.md b/docs/3.3.x/toast.md index c197364d1..d670c23d9 100644 --- a/docs/3.3.x/toast.md +++ b/docs/3.3.x/toast.md @@ -1,6 +1,8 @@ --- id: toast title: Toast +metaTitle: Toast | NativeBase +metaDescription: The Toast component in NativeBase displays alerts on top of an overlay. Read more on toast usage, toast message in react and react native and how to configure them. --- import { ComponentTheme } from '../src/components'; diff --git a/docs/3.3.x/todo-list.md b/docs/3.3.x/todo-list.md index 70010dc0e..f778e6bef 100644 --- a/docs/3.3.x/todo-list.md +++ b/docs/3.3.x/todo-list.md @@ -1,6 +1,8 @@ --- id: todo-example title: Todo-List +metaTitle: Todo-List | NativeBase +metaDescription: Todo-List is a simple To-do app that is made using NativeBase 3.0. Check out this document for more information on the Todo-List app and see what it looks like. --- A simple To Do App made using NativeBase 3.0. diff --git a/docs/3.3.x/typescript.md b/docs/3.3.x/typescript.md index 8cdb3413d..4de9a4647 100644 --- a/docs/3.3.x/typescript.md +++ b/docs/3.3.x/typescript.md @@ -1,6 +1,9 @@ --- id: typescript title: TypeScript +metaTitle: Typescript | NativeBase +metaDescription: "Learn more about the steps to follow in order to enable TypeScript for custom theme tokens or variants in NativeBase. Example with result in the guideline." + --- import Image from "next/Image"; diff --git a/docs/3.3.x/view.md b/docs/3.3.x/view.md index 8f1a9f415..6bd2d3c59 100644 --- a/docs/3.3.x/view.md +++ b/docs/3.3.x/view.md @@ -1,6 +1,8 @@ --- id: view title: View +metaTitle: View | NativeBase +metaDescription: "In NativeBase, View is considered the most fundamental component for building a UI. Read the document for more information on View component and its uses." --- The most fundamental component for building a UI. diff --git a/docs/3.3.x/vstack.md b/docs/3.3.x/vstack.md index 4f5516f7f..e816b29d3 100644 --- a/docs/3.3.x/vstack.md +++ b/docs/3.3.x/vstack.md @@ -1,6 +1,8 @@ --- id: vstack title: VStack / Column +metaTitle: VStack / Column | NativeBase +metaDescription: Vstack in NativeBase aligns items vertically. Column is an alias for Vstack. You can learn more about the usage of Vstack/Column component in this document. --- `VStack` aligns items vertically. `Column` is also an alias for `VStack`. diff --git a/docs/3.3.x/zstack.md b/docs/3.3.x/zstack.md index 3446c4fd0..ccadc2ad5 100644 --- a/docs/3.3.x/zstack.md +++ b/docs/3.3.x/zstack.md @@ -1,6 +1,8 @@ --- id: z-stack title: ZStack +metaTitle: ZStack | NativeBase +metaDescription: In NativeBase ZStack aligns items to the z-axis. Learn more about the types of ZStack component such as basic and items centered with examples in this document. --- `ZStack` aligns items to the z-axis. diff --git a/docs/3.4.x/alert.md b/docs/3.4.x/alert.md index 507b82573..f7975c1bf 100644 --- a/docs/3.4.x/alert.md +++ b/docs/3.4.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.4.x/aspect-ratio.md b/docs/3.4.x/aspect-ratio.md index 4a49d0617..1a64606ad 100644 --- a/docs/3.4.x/aspect-ratio.md +++ b/docs/3.4.x/aspect-ratio.md @@ -1,6 +1,8 @@ --- id: aspectRatio title: AspectRatio +metaTitle: AspectRatio | NativeBase +metaDescription: AspectRatio in NativeBase controls the size of the undefined dimension of a node or child component. Read on for examples and more details on AspectRatio. --- AspectRatio controls the size of the undefined dimension of a node or child component. You can refer [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. diff --git a/docs/3.4.x/avatar.md b/docs/3.4.x/avatar.md index 97765f725..736705b59 100644 --- a/docs/3.4.x/avatar.md +++ b/docs/3.4.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.4.x/badge.md b/docs/3.4.x/badge.md index 5c8e24cbd..ef198cf4f 100644 --- a/docs/3.4.x/badge.md +++ b/docs/3.4.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.4.x/box.md b/docs/3.4.x/box.md index 5642e591e..9a2566541 100644 --- a/docs/3.4.x/box.md +++ b/docs/3.4.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.4.x/breakpoints.md b/docs/3.4.x/breakpoints.md index 0d430e1b8..459eb8491 100644 --- a/docs/3.4.x/breakpoints.md +++ b/docs/3.4.x/breakpoints.md @@ -1,6 +1,8 @@ --- id: breakpoints 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.4.x/building-app-bar.md b/docs/3.4.x/building-app-bar.md index b3e13bd5d..3f74c7d2c 100644 --- a/docs/3.4.x/building-app-bar.md +++ b/docs/3.4.x/building-app-bar.md @@ -1,6 +1,8 @@ --- 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.4.x/building-app-drawer.md b/docs/3.4.x/building-app-drawer.md index 20692a4b0..7a2012a4b 100644 --- a/docs/3.4.x/building-app-drawer.md +++ b/docs/3.4.x/building-app-drawer.md @@ -1,6 +1,8 @@ --- id: app-drawer 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 using FlatList. Here is an example to illustrate it. diff --git a/docs/3.4.x/building-card.md b/docs/3.4.x/building-card.md index c99468b41..d954f32bb 100644 --- a/docs/3.4.x/building-card.md +++ b/docs/3.4.x/building-card.md @@ -1,6 +1,8 @@ --- id: building-card 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.4.x/building-drawer-navigation.md b/docs/3.4.x/building-drawer-navigation.md index 59c0f5c36..afcf89d08 100644 --- a/docs/3.4.x/building-drawer-navigation.md +++ b/docs/3.4.x/building-drawer-navigation.md @@ -1,6 +1,8 @@ --- id: building-drawer-navigation 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.4.x/building-footer-tabs.md b/docs/3.4.x/building-footer-tabs.md index 6ed177656..6bf4379a6 100644 --- a/docs/3.4.x/building-footer-tabs.md +++ b/docs/3.4.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.4.x/building-swipe-list.md b/docs/3.4.x/building-swipe-list.md index 49cd046c7..f146a2d40 100644 --- a/docs/3.4.x/building-swipe-list.md +++ b/docs/3.4.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.4.x/building-tab-view.md b/docs/3.4.x/building-tab-view.md index 11511e9bf..8a8aa694d 100644 --- a/docs/3.4.x/building-tab-view.md +++ b/docs/3.4.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.4.x/center.md b/docs/3.4.x/center.md index abba8dce0..809ea98e2 100644 --- a/docs/3.4.x/center.md +++ b/docs/3.4.x/center.md @@ -1,6 +1,8 @@ --- 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. diff --git a/docs/3.4.x/container.md b/docs/3.4.x/container.md index bd4680d93..5337a3f7d 100644 --- a/docs/3.4.x/container.md +++ b/docs/3.4.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.4.x/customizing-components.md b/docs/3.4.x/customizing-components.md index acd76d533..9f2eed8e5 100644 --- a/docs/3.4.x/customizing-components.md +++ b/docs/3.4.x/customizing-components.md @@ -1,6 +1,8 @@ --- id: customizing-components title: Customizing 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.4.x/customizing-fonts.md b/docs/3.4.x/customizing-fonts.md index 7e81cd178..568677d7b 100644 --- a/docs/3.4.x/customizing-fonts.md +++ b/docs/3.4.x/customizing-fonts.md @@ -1,6 +1,8 @@ --- id: customizing-fonts title: Customizing 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.4.x/customizing-theme.md b/docs/3.4.x/customizing-theme.md index d573b7170..a87dc3af5 100644 --- a/docs/3.4.x/customizing-theme.md +++ b/docs/3.4.x/customizing-theme.md @@ -1,6 +1,8 @@ --- id: customizing-theme title: Customizing 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'; diff --git a/docs/3.4.x/dark-mode.md b/docs/3.4.x/dark-mode.md index d6e4a3b2e..a1ebf593b 100644 --- a/docs/3.4.x/dark-mode.md +++ b/docs/3.4.x/dark-mode.md @@ -1,6 +1,8 @@ --- id: dark-mode 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.4.x/default-theme.md b/docs/3.4.x/default-theme.md index 801915daa..08bb491d0 100644 --- a/docs/3.4.x/default-theme.md +++ b/docs/3.4.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"; @@ -11,7 +13,7 @@ Theming in NativeBase is based on the **[Styled System Theme Specification](htt ## Colors -You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. +You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) diff --git a/docs/3.4.x/divider.md b/docs/3.4.x/divider.md index 61c7745aa..23390c592 100644 --- a/docs/3.4.x/divider.md +++ b/docs/3.4.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'; @@ -8,8 +10,8 @@ import { ComponentTheme } from '../src/components'; `Divider` can visually separate content in a given list or group. ```jsx isShowcase -import React from 'react'; -import { Divider, Heading, Box } from 'native-base'; +import React from "react"; +import { Divider, Heading, Box } from "native-base"; export const Example = () => { return ( @@ -29,7 +31,7 @@ export const Example = () => { ## Import ```jsx -import { Divider } from 'native-base'; +import { Divider } from "native-base"; ``` ## Examples diff --git a/docs/3.4.x/flat-list.md b/docs/3.4.x/flat-list.md index d0cd17068..59cf8fb97 100644 --- a/docs/3.4.x/flat-list.md +++ b/docs/3.4.x/flat-list.md @@ -1,6 +1,8 @@ --- id: flat-list 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.4.x/flex.md b/docs/3.4.x/flex.md index 74e118840..11c72c4da 100644 --- a/docs/3.4.x/flex.md +++ b/docs/3.4.x/flex.md @@ -1,6 +1,8 @@ --- 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`. diff --git a/docs/3.4.x/hstack.md b/docs/3.4.x/hstack.md index 119704e5e..f1b64e455 100644 --- a/docs/3.4.x/hstack.md +++ b/docs/3.4.x/hstack.md @@ -1,6 +1,8 @@ --- id: h-stack 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.4.x/icon.md b/docs/3.4.x/icon.md index 196961782..e273cdeb3 100644 --- a/docs/3.4.x/icon.md +++ b/docs/3.4.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. --- NativeBase allows you to use icons in multiples ways: diff --git a/docs/3.4.x/image.md b/docs/3.4.x/image.md index b21a686fc..b49e5d9c4 100644 --- a/docs/3.4.x/image.md +++ b/docs/3.4.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." --- The `Image` component allows one to display images. diff --git a/docs/3.4.x/keyboard-avoiding-view.md b/docs/3.4.x/keyboard-avoiding-view.md index 60da29145..d7b1ab2d9 100644 --- a/docs/3.4.x/keyboard-avoiding-view.md +++ b/docs/3.4.x/keyboard-avoiding-view.md @@ -1,6 +1,8 @@ --- id: keyboard-avoiding-view 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 solves the common problem of views needing 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.4.x/kitchen-sink.mdx b/docs/3.4.x/kitchen-sink.mdx index b7650d782..11c2f6af6 100644 --- a/docs/3.4.x/kitchen-sink.mdx +++ b/docs/3.4.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. --- diff --git a/docs/3.4.x/migration/v3.md b/docs/3.4.x/migration/v3.md index 349226570..c73ef1f9a 100644 --- a/docs/3.4.x/migration/v3.md +++ b/docs/3.4.x/migration/v3.md @@ -1,6 +1,8 @@ --- id: migration-guide-three title: Upgrading 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.4.x/migration/v33xtov34x.mdx b/docs/3.4.x/migration/v33xtov34x.mdx index 29122a9d8..ba0af36b7 100644 --- a/docs/3.4.x/migration/v33xtov34x.mdx +++ b/docs/3.4.x/migration/v33xtov34x.mdx @@ -1,6 +1,8 @@ --- id: migration-guide-three-point-four title: Upgrading to 3.4.0 from 3.3.x +metaTitle: Upgrading to 3.4.0 from 3.3.x | NativeBase +metaDescription: As we continue to revamp, improve, and upgrade NativeBase, read the document to learn about how to easily upgrade to v3.4.0 with an overview of the changelog. ---