### Basic NativeBaseProvider Setup
Source: https://docs.nativebase.io/setup-provider.md
This is the fundamental setup for the NativeBaseProvider. It wraps your application to provide NativeBase functionalities. Ensure `native-base` is installed.
```javascript
import React from "react";
import { NativeBaseProvider } from "native-base";
const config = {
dependencies: {
// For Expo projects (Bare or managed workflow)
"linear-gradient": require("expo-linear-gradient").LinearGradient,
// For non expo projects
// 'linear-gradient': require('react-native-linear-gradient').default,
},
};
export default () => {
return (
);
};
```
--------------------------------
### Basic Switch Example
Source: https://docs.nativebase.io/switch
A simple example demonstrating the basic usage of the Switch component. No specific setup is required beyond importing the component.
```jsx
const Example = () => {
return ;
};
```
--------------------------------
### Drawer Navigator Setup
Source: https://docs.nativebase.io/building-drawer-navigation
Sets up a basic drawer navigator with screens and a custom drawer content component. Ensure MaterialCommunityIcons are installed for icons.
```javascript
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import {
createDrawerNavigator,
DrawerContentScrollView,
} from "@react-navigation/drawer";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import {
NativeBaseProvider,
Button,
Box,
HamburgerIcon,
Pressable,
Heading,
VStack,
Text,
Center,
HStack,
Divider,
Icon,
} from "native-base";
global.__reanimatedWorkletInit = () => {};
const Drawer = createDrawerNavigator();
function Component(props) {
return (
This is {props.route.name} page.
);
}
const getIcon = (screenName) => {
switch (screenName) {
case "Inbox":
return "email";
case "Outbox":
return "send";
case "Favorites":
return "heart";
case "Archive":
return "archive";
case "Trash":
return "trash-can";
case "Spam":
return "alert-circle";
default:
return undefined;
}
};
function CustomDrawerContent(props) {
return (
Mail
john_doe@gmail.com
} space="4">
{props.state.routeNames.map((name, index) => (
{
props.navigation.navigate(name);
}}
>
}
/>
{name}
))}
Labels
}
/>
Family
}
/>
Friends
}
/>
Work
);
}
function MyDrawer() {
return (
}
>
);
}
export default function Example() {
return (
);
}
```
--------------------------------
### Basic Select Example
Source: https://docs.nativebase.io/select
This example demonstrates a basic Select component setup. Ensure you have a state variable to manage the selected value and an `onValueChange` handler. The `_selectedItem` prop customizes the appearance of the chosen option.
```jsx
const Example = () => {
const [service, setService] = React.useState("");
return
```
--------------------------------
### Basic Badge Example
Source: https://docs.nativebase.io/badge
A simple example of how to render a basic Badge component with text.
```javascript
function Example() {
return NEW FEATURE;
}
```
--------------------------------
### Example Usage with NativeBaseProvider
Source: https://docs.nativebase.io/responsive
This example demonstrates how to wrap your application with NativeBaseProvider to enable its components and theming, including responsive features.
```jsx
function Example() {
return
;
}
```
--------------------------------
### Basic Select Example
Source: https://docs.nativebase.io/select
A simple example demonstrating how to use the Select component with a list of items.
```APIDOC
## Basic Select
### Description
This example shows a basic implementation of the Select component, allowing users to choose a service from a list.
### Usage
```jsx
const Example = () => {
const [service, setService] = React.useState("");
return
;
};
```
```
--------------------------------
### Basic Heading Example
Source: https://docs.nativebase.io/heading
A simple example of rendering a Heading component with text content.
```javascript
function Example() {
return I'm a Heading;
}
```
--------------------------------
### FAB Placement Example
Source: https://docs.nativebase.io/fab
Shows how to position a FAB using the 'placement' prop. This example places the FAB in the 'top-right' corner and includes a 'label'.
```javascript
const Example = () => {
return
} label="Quick Start" />
;
};
```
--------------------------------
### Basic Drawer Navigation Example
Source: https://docs.nativebase.io/building-drawer-navigation
This example shows how to quickly integrate React Native's DrawerNavigation with NativeBase components.
```jsx
import React from 'react';
import {
Box,
Button,
Drawer,
useDisclose,
useBreakpointValue,
} from 'native-base';
import { Text, View } from 'react-native';
const DrawerExample = () => {
const drawerDisclosure = useDisclose();
const isLargeScreen = useBreakpointValue({ base: false, lg: true });
return (
Drawer Content
);
};
export default DrawerExample;
```
--------------------------------
### Login Form Example
Source: https://docs.nativebase.io/login-signup-forms
This example demonstrates a complete login form with email, password, and sign-in functionality. It includes links for password recovery and new user sign-up.
```jsx
const Example = () => {
return
Welcome
Sign in to continue!
Email IDPassword
Forget Password?
I'm a new user.{" "}
Sign Up
;
};
```
--------------------------------
### Multiple Modals Example
Source: https://docs.nativebase.io/modal
Illustrates how to manage and display multiple sequential modals. This pattern is useful for multi-step processes or guided user flows.
```jsx
import { Modal } from "native-base";
const Example = () => {
const [showModal, setShowModal] = useState(false);
const [showModal2, setShowModal2] = useState(false);
const [showModal3, setShowModal3] = useState(false);
return
setShowModal(false)} size="lg">
OrderSub Total$298.77Tax$38.84Total Amount$337.61 setShowModal2(false)} size="lg">
Select Address
4140 Parker Rd. Allentown, New Mexico 31134
6391 Elign St. Celina, Delaware 10299
```
--------------------------------
### Basic Alert Example
Source: https://docs.nativebase.io/alert
A simple example demonstrating the basic usage of the Alert component with a title and description.
```APIDOC
## Alert
### Description
Displays important status information to the user.
### Props
#### status
- **Type**: "info" | (string & {}) | "error" | "success" | "warning"
- **Default**: info
- **Description**: The status of the alert.
#### variant
- **Type**: ResponsiveValue<"subtle" | "solid" | "outline" | "left-accent" | "top-accent" | "outline-light" | (string & {})>
- **Default**: subtle
- **Description**: The variant of the alert style to use.
#### colorScheme
- **Type**: ColorSchemeType
- **Description**: The color scheme of the Alert.
### Alert.Icon
#### Description
An icon component to be used within the Alert.
### Examples
```jsx
function Example() {
return (
Application received!
Your application has been received. We will review your application and respond within the next 48 hours.
);
}
```
```
--------------------------------
### Basic Link Example
Source: https://docs.nativebase.io/link
A basic example of a Link component that navigates to a specified URL. It includes hover effects for styling.
```jsx
const Example = () => {
return
Click me to open NativeBase website.
;
};
```
--------------------------------
### Progress Basic Example
Source: https://docs.nativebase.io/progress
A simple Progress component example. It displays a progress bar with a value of 45.
```jsx
const Example = () => {
return
;
};
```
--------------------------------
### SearchBar Component Examples
Source: https://docs.nativebase.io/building-search-bar
Demonstrates the creation of Cupertino and Material style search bars using NativeBase components. Includes examples with input fields, icons, and placeholders. Ensure NativeBase Provider is set up before using these components.
```jsx
function SearchBar() {
return
}>
Cupertino
} />} />
Material
} />} InputRightElement={} />} />
;
}
function Example() {
return
;
}
```
--------------------------------
### NativeBase v2 Picker Example
Source: https://docs.nativebase.io/migration/picker
Demonstrates the usage of the Picker component in NativeBase v2. This example shows how to set up a basic dropdown picker with state management for selected values.
```javascript
import React, { Component } from 'react';
import { Container, Header, Content, Picker, Form } from 'native-base';
export default class PickerExample extends Component {
constructor(props) {
super(props);
this.state = {
selected: 'key1',
};
}
onValueChange(value: string) {
this.setState({
selected: value,
});
}
render() {
return (
);
}
}
```
--------------------------------
### Basic Tooltip Example
Source: https://docs.nativebase.io/tooltip
A simple example demonstrating how to use the Tooltip component with a label and an open delay. It wraps a Button component.
```jsx
function Example() {
return ;
}
```
--------------------------------
### Basic Link Example
Source: https://docs.nativebase.io/link
A simple example of a NativeBase Link component. Ensure the Link component is imported from 'native-base'.
```jsx
import { Link } from 'native-base';
const Example = () => {
return
Click here to open documentation.
;
};
```
--------------------------------
### Basic Modal Example
Source: https://docs.nativebase.io/modal
This example demonstrates how to implement a basic modal with a header, body, and footer. It uses state to control the modal's visibility and includes cancel and save buttons.
```jsx
const Example = () => {
const [showModal, setShowModal] = useState(false);
return
setShowModal(false)} _backdrop={{
_dark: {
bg: "coolGray.800"
},
bg: "warmGray.50"
}}>
Return Policy
Create a 'Return Request' under “My Orders” section of App/Website.
Follow the screens that come up after tapping on the 'Return’
button. Please make a note of the Return ID that we generate at the
end of the process. Keep the item ready for pick up or ship it to us
basis on the return mode.
;
};
```
--------------------------------
### Example Usage of useColorMode
Source: https://docs.nativebase.io/use-color-mode
This example demonstrates how to use the useColorMode hook to display the current color mode and provide a button to toggle between light and dark modes.
```APIDOC
## Example Usage of useColorMode
### Description
This example shows a practical implementation of the `useColorMode` hook within a React Native component. It displays the current color mode and includes a button to switch between 'light' and 'dark' modes.
### Component
```javascript
import { NativeBaseProvider, Center, Box, Text, Button } from "native-base";
import { useColorMode } from "native-base";
function UseColorMode() {
const { colorMode, toggleColorMode } = useColorMode();
return (
The active color mode is {colorMode}
);
}
const Example = () => {
return (
);
};
```
### Explanation
- The `UseColorMode` component utilizes the `useColorMode` hook to get the `colorMode` state and the `toggleColorMode` function.
- The background color of the `Box` component changes based on the current `colorMode`.
- The `Button`'s `onPress` event is linked to `toggleColorMode`, allowing users to switch themes.
```
--------------------------------
### Basic Popover Example
Source: https://docs.nativebase.io/popover
This example demonstrates a basic implementation of the Popover component, used here for a 'Delete Customer' action. It shows how to define the trigger and structure the popover's content with a header, body, and footer containing action buttons.
```jsx
function Example() {
return {
return ;
}}>
Delete Customer
This will remove all data relating to Alex. This action cannot be
reversed. Deleted data can not be recovered.
;
}
```
--------------------------------
### Basic HStack Example
Source: https://docs.nativebase.io/h-stack
This example demonstrates a basic HStack with three centered items. It utilizes the 'space' prop for spacing between items and 'alignItems' for vertical alignment.
```jsx
function Example() {
return
;
}
```
--------------------------------
### Basic AlertDialog Example
Source: https://docs.nativebase.io/alert-dialog
A basic example demonstrating how to use the AlertDialog component to confirm an action like deleting a customer. It includes a trigger button and the dialog content with header, body, and footer actions.
```jsx
import { AlertDialog, Button, Center } from "native-base";
import React from "react";
const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
const onClose = () => setIsOpen(false);
const cancelRef = React.useRef(null);
return
Delete Customer
This will remove all data relating to Alex. This action cannot be
reversed. Deleted data can not be recovered.
;
};
```
--------------------------------
### Basic Slide Example
Source: https://docs.nativebase.io/slide
This example shows a basic implementation of the Slide component. It's controlled by a state variable `isOpen` and placed at the top of the screen. The content inside the slide is a confirmation message for an order.
```jsx
const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
return
OrderSub Total$298.77Tax$38.84Total Amount$337.61Promo Code
Order Placed Successfully.
;
};
```
--------------------------------
### Basic Switch Usage
Source: https://docs.nativebase.io/switch
A simple example demonstrating the basic usage of the Switch component.
```APIDOC
## Basic Switch Usage
### Description
This example shows the fundamental implementation of the Switch component.
### Code Example
```javascript
const Example = () => {
return ;
};
```
```
--------------------------------
### Basic AlertDialog Example
Source: https://docs.nativebase.io/alert-dialog
This example demonstrates a basic AlertDialog used for confirming a customer deletion. It utilizes state to manage the dialog's visibility and includes header, body, and footer with cancel and delete actions.
```jsx
const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
const onClose = () => setIsOpen(false);
const cancelRef = React.useRef(null);
return
Delete Customer
This will remove all data relating to Alex. This action cannot be
reversed. Deleted data can not be recovered.
;
};
```
--------------------------------
### Drawer Navigator Setup
Source: https://docs.nativebase.io/building-drawer-navigation
Sets up a basic drawer navigator with a custom drawer content component. Ensure you have installed `@react-navigation/drawer` and `react-native-screens`.
```javascript
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import {
createDrawerNavigator,
DrawerContentScrollView,
} from "@react-navigation/drawer";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import {
NativeBaseProvider,
Button,
Box,
HamburgerIcon,
Pressable,
Heading,
VStack,
Text,
Center,
HStack,
Divider,
Icon,
} from "native-base";
global.__reanimatedWorkletInit = () => {};
const Drawer = createDrawerNavigator();
function Component(props) {
return (
This is {props.route.name} page.
);
}
const getIcon = (screenName) => {
switch (screenName) {
case "Inbox":
return "email";
case "Outbox":
return "send";
case "Favorites":
return "heart";
case "Archive":
return "archive";
case "Trash":
return "trash-can";
case "Spam":
return "alert-circle";
default:
return undefined;
}
};
function CustomDrawerContent(props) {
return (
Mail
john_doe@gmail.com
} space="4">
{props.state.routeNames.map((name, index) => (
{
props.navigation.navigate(name);
}}
>
}
/>
{name}
))}
Labels
}
/>
Family
}
/>
Friends
}
/>
Work
);
}
function MyDrawer() {
return (
}
>
);
}
export default function Example() {
return (
```
--------------------------------
### Toast Placement Examples
Source: https://docs.nativebase.io/toast
Demonstrates how to display toasts at different positions on the screen using the `placement` prop.
```javascript
const Example = () => {
const toast = useToast();
return
;
};
```
--------------------------------
### Basic useContrastText Example
Source: https://docs.nativebase.io/use-contrast-text
Demonstrates how to use useContrastText to get contrasting text colors for light and dark backgrounds. This ensures text is always readable.
```javascript
const Example = () => {
const bgDark = "gray.900";
const bgLight = "gray.50";
const colorContrastDark = useContrastText(bgDark);
const colorContrastLight = useContrastText(bgLight);
return
```
--------------------------------
### Flat Progress Example
Source: https://docs.nativebase.io/progress
Demonstrates a basic flat progress bar. Ensure the Progress component is imported.
```jsx
const Example = () => {
return
;
};
```
--------------------------------
### ZStack Basic Example
Source: https://docs.nativebase.io/zstack
Demonstrates the basic usage of ZStack to layer multiple Box components with different background colors and sizes.
```jsx
const Example = () => {
return ;
};
```
--------------------------------
### Basic Modal Example
Source: https://docs.nativebase.io/modal
Demonstrates how to implement a basic modal with input fields for name and email, and cancel/save actions. Use this to create interactive dialogs for user input or confirmation.
```jsx
const Example = () => {
const [showModal, setShowModal] = useState(false);
return <>
setShowModal(false)}>
Contact UsNameEmail
;
};
```
--------------------------------
### Signup Form Example
Source: https://docs.nativebase.io/login-signup-forms
A complete signup form component using NativeBase components like Center, Box, Heading, FormControl, Input, and Button. It includes fields for email, password, and password confirmation.
```jsx
const Example = () => {
return
Welcome
Sign up to continue!
EmailPasswordConfirm Password