NativeBase

https://docs.nativebase.io
Admin
NativeBase is a universal React Native UI library that provides customizable cross-platform...
Tokens:158,828
Snippets:1,221
Trust Score:9.8
Update:5 months ago
Show doc for...
Tokens:
Raw
### 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 (
    <NativeBaseProvider config={config}>
      <Center flex={1}>
        <Example />
      </Center>
    </NativeBaseProvider>
  );
};
```

--------------------------------

### 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 <Switch size="lg" />;
};
```

--------------------------------

### 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 (
    <Center>
      <Text mt="12" fontSize="18">
        This is {props.route.name} page.
      </Text>
    </Center>
  );
}

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 (
    <DrawerContentScrollView {...props} safeArea>
      <VStack space="6" my="2" mx="1">
        <Box px="4">
          <Text bold color="gray.700">
            Mail
          </Text>
          <Text fontSize="14" mt="1" color="gray.500" fontWeight="500">
            john_doe@gmail.com
          </Text>
        </Box>
        <VStack divider={<Divider />} space="4">
          <VStack space="3">
            {props.state.routeNames.map((name, index) => (
              <Pressable
                px="5"
                py="3"
                rounded="md"
                bg={
                  index === props.state.index
                    ? "rgba(6, 182, 212, 0.1)"
                    : "transparent"
                }
                onPress={(event) => {
                  props.navigation.navigate(name);
                }}
              >
                <HStack space="7" alignItems="center">
                  <Icon
                    color={
                      index === props.state.index ? "primary.500" : "gray.500"
                    }
                    size="5"
                    as={<MaterialCommunityIcons name={getIcon(name)} />}
                  />
                  <Text
                    fontWeight="500"
                    color={
                      index === props.state.index ? "primary.500" : "gray.700"
                    }
                  >
                    {name}
                  </Text>
                </HStack>
              </Pressable>
            ))}
          </VStack>
          <VStack space="5">
            <Text fontWeight="500" fontSize="14" px="5" color="gray.500">
              Labels
            </Text>
            <VStack space="3">
              <Pressable px="5" py="3">
                <HStack space="7" alignItems="center">
                  <Icon
                    color="gray.500"
                    size="5"
                    as={<MaterialCommunityIcons name="bookmark" />}
                  />
                  <Text color="gray.700" fontWeight="500">
                    Family
                  </Text>
                </HStack>
              </Pressable>
              <Pressable px="5" py="2">
                <HStack space="7" alignItems="center">
                  <Icon
                    color="gray.500"
                    size="5"
                    as={<MaterialCommunityIcons name="bookmark" />}
                  />
                  <Text color="gray.700" fontWeight="500">
                    Friends
                  </Text>
                </HStack>
              </Pressable>
              <Pressable px="5" py="3">
                <HStack space="7" alignItems="center">
                  <Icon
                    color="gray.500"
                    size="5"
                    as={<MaterialCommunityIcons name="bookmark" />}
                  />
                  <Text fontWeight="500" color="gray.700">
                    Work
                  </Text>
                </HStack>
              </Pressable>
            </VStack>
          </VStack>
        </VStack>
      </VStack>
    </DrawerContentScrollView>
  );
}
function MyDrawer() {
  return (
    <Box safeArea flex={1}>
      <Drawer.Navigator
        drawerContent={(props) => <CustomDrawerContent {...props} />}
      >
        <Drawer.Screen name="Inbox" component={Component} />
        <Drawer.Screen name="Outbox" component={Component} />
        <Drawer.Screen name="Favorites" component={Component} />
        <Drawer.Screen name="Archive" component={Component} />
        <Drawer.Screen name="Trash" component={Component} />
        <Drawer.Screen name="Spam" component={Component} />
      </Drawer.Navigator>
    </Box>
  );
}
export default function Example() {
  return (
    <NavigationContainer>
      <NativeBaseProvider>
        <MyDrawer />
      </NativeBaseProvider>
    </NavigationContainer>
  );
}
```

--------------------------------

### 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 <Center>
      <Box maxW="300">
        <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
        bg: "teal.600",
        endIcon: <CheckIcon size="5" />

```

--------------------------------

### 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 <Box alignItems="center">
      <Badge>NEW FEATURE</Badge>
    </Box>;
}
```

--------------------------------

### 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 <Center flex={1}>
      <App />
    </Center>;
}
```

--------------------------------

### 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 <Center>
      <Box maxW="300">
        <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
        bg: "teal.600",
        endIcon: <CheckIcon size="5" />
      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
          <Select.Item label="UX Research" value="ux" />
          <Select.Item label="Web Development" value="web" />
          <Select.Item label="Cross Platform Development" value="cross" />
          <Select.Item label="UI Designing" value="ui" />
          <Select.Item label="Backend Development" value="backend" />
        </Select>
      </Box>
    </Center>;
};
```
```

--------------------------------

### Basic Heading Example

Source: https://docs.nativebase.io/heading

A simple example of rendering a Heading component with text content.

```javascript
function Example() {
  return <Heading>I'm a Heading</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 <Center>
      <Box height="200" w={[200, 300, 400]} shadow="2" rounded="lg" _dark={{
      bg: "coolGray.200:alpha.20"
    }} _light={{
      bg: "coolGray.200:alpha.20"
    }}>
        <Fab renderInPortal={false} shadow={2} placement="top-right" size="sm" icon={<Icon color="white" as={MaterialIcons} name="lightbulb" size="4" />} label="Quick Start" />
      </Box>
    </Center>;
};
```

--------------------------------

### 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 (
    <Box>
      <Button onPress={drawerDisclosure.onOpen}>Open Drawer</Button>
      <Drawer
        isOpen={drawerDisclosure.isOpen}
        onClose={drawerDisclosure.onClose}
        placement={isLargeScreen ? 'left' : 'right'}
        finalFocusRef={drawerDisclosure.finalFocusRef}
      >
        <Box
          tabIndex={-1}
          _dark={{
            bg: 'coolGray.800',
          }}
          _light={{
            bg: 'white',
          }}
          h="full"
          w="64"
          p="4"
        >
          <Text>Drawer Content</Text>
          <Button onPress={drawerDisclosure.onClose}>Close Drawer</Button>
        </Box>
      </Drawer>
    </Box>
  );
};

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 <Center w="100%">
      <Box safeArea p="2" py="8" w="90%" maxW="290">
        <Heading size="lg" fontWeight="600" color="coolGray.800" _dark={{
        color: "warmGray.50"
      }}>
          Welcome
        </Heading>
        <Heading mt="1" _dark={{
        color: "warmGray.200"
      }} color="coolGray.600" fontWeight="medium" size="xs">
          Sign in to continue!
        </Heading>

        <VStack space={3} mt="5">
          <FormControl>
            <FormControl.Label>Email ID</FormControl.Label>
            <Input />
          </FormControl>
          <FormControl>
            <FormControl.Label>Password</FormControl.Label>
            <Input type="password" />
            <Link _text={{
            fontSize: "xs",
            fontWeight: "500",
            color: "indigo.500"
          }} alignSelf="flex-end" mt="1">
              Forget Password?
            </Link>
          </FormControl>
          <Button mt="2" colorScheme="indigo">
            Sign in
          </Button>
          <HStack mt="6" justifyContent="center">
            <Text fontSize="sm" color="coolGray.600" _dark={{
            color: "warmGray.200"
          }}>
              I'm a new user.{" "}
            </Text>
            <Link _text={{
            color: "indigo.500",
            fontWeight: "medium",
            fontSize: "sm"
          }} href="#">
              Sign Up
            </Link>
          </HStack>
        </VStack>
      </Box>
    </Center>;
};
```

--------------------------------

### 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 <Center>
      <Button onPress={() => setShowModal(true)}>Button</Button>
      <Modal isOpen={showModal} onClose={() => setShowModal(false)} size="lg">
        <Modal.Content maxWidth="350">
          <Modal.CloseButton />
          <Modal.Header>Order</Modal.Header>
          <Modal.Body>
            <VStack space={3}>
              <HStack alignItems="center" justifyContent="space-between">
                <Text fontWeight="medium">Sub Total</Text>
                <Text color="blueGray.400">$298.77</Text>
              </HStack>
              <HStack alignItems="center" justifyContent="space-between">
                <Text fontWeight="medium">Tax</Text>
                <Text color="blueGray.400">$38.84</Text>
              </HStack>
              <HStack alignItems="center" justifyContent="space-between">
                <Text fontWeight="medium">Total Amount</Text>
                <Text color="green.500">$337.61</Text>
              </HStack>
            </VStack>
          </Modal.Body>
          <Modal.Footer>
            <Button flex="1" onPress={() => {
            setShowModal2(true);
          }}>
              Continue
            </Button>
          </Modal.Footer>
        </Modal.Content>
      </Modal>

      <Modal isOpen={showModal2} onClose={() => setShowModal2(false)} size="lg">
        <Modal.Content maxWidth="350">
          <Modal.CloseButton />
          <Modal.Header>Select Address</Modal.Header>
          <Modal.Body>
            <Radio.Group defaultValue="address1" name="address" size="sm">
              <VStack space={3}>
                <Radio alignItems="flex-start" _text={{
                mt: "-1",
                ml: "2",
                fontSize: "sm"
              }} value="address1">
                  4140 Parker Rd. Allentown, New Mexico 31134
                </Radio>
                <Radio alignItems="flex-start" _text={{
                mt: "-1",
                ml: "2",
                fontSize: "sm"
              }} value="address2">
                  6391 Elign St. Celina, Delaware 10299
                </Radio>
              </VStack>
            </Radio.Group>
          </Modal.Body>
          <Modal.Footer>

```

--------------------------------

### 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 (
    <Alert maxW="400" status="success">
      <VStack space={1} flexShrink={1} w="100%">
        <HStack flexShrink={1} space={2} alignItems="center" justifyContent="space-between">
          <HStack flexShrink={1} space={2} alignItems="center">
            <Alert.Icon />
            <Text fontSize="md" fontWeight="medium">
              Application received!
            </Text>
          </HStack>
        </HStack>
        <Box pl="6">
          Your application has been received. We will review your application and respond within the next 48 hours.
        </Box>
      </VStack>
    </Alert>
  );
}
```
```

--------------------------------

### 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 <Box alignItems="center">
      <Link href="https://nativebase.io" isUnderlined _hover={{
      _text: {
        _light: {
          color: "cyan.600"
        },
        color: "cyan.400"
      }
    }}>
        Click me to open NativeBase website.
      </Link>
    </Box>;
};

```

--------------------------------

### 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 <Center w="100%">
      <Box w="90%" maxW="400">
        <Progress value={45} mx="4" />
      </Box>
    </Center>;
};
```

--------------------------------

### 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 <VStack my="4" space={5} w="100%" maxW="300px" divider={<Box px="2">
          <Divider />
        </Box>}>
      <VStack w="100%" space={5} alignSelf="center">
        <Heading fontSize="lg">Cupertino</Heading>
        <Input placeholder="Search" variant="filled" width="100%" borderRadius="10" py="1" px="2" InputLeftElement={<Icon ml="2" size="4" color="gray.400" as={<Ionicons name="ios-search" />} />} />
      </VStack>

      <VStack w="100%" space={5} alignSelf="center">
        <Heading fontSize="lg">Material</Heading>
        <Input placeholder="Search People & Places" width="100%" borderRadius="4" py="3" px="1" fontSize="14" InputLeftElement={<Icon m="2" ml="3" size="6" color="gray.400" as={<MaterialIcons name="search" />} />} InputRightElement={<Icon m="2" mr="3" size="6" color="gray.400" as={<MaterialIcons name="mic" />} />} />
      </VStack>
    </VStack>;
}

function Example() {
  return <Center flex={1} px="2">
      <SearchBar />
    </Center>;
}
```

--------------------------------

### 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 (
      <Container>
        <Header />
        <Content>
          <Form>
            <Picker
              note
              mode="dropdown"
              style={{ width: 120 }}
              selectedValue={this.state.selected}
              onValueChange={this.onValueChange.bind(this)}
            >
              <Picker.Item label="Wallet" value="key0" />
              <Picker.Item label="ATM Card" value="key1" />
              <Picker.Item label="Debit Card" value="key2" />
              <Picker.Item label="Credit Card" value="key3" />
              <Picker.Item label="Net Banking" value="key4" />
            </Picker>
          </Form>
        </Content>
      </Container>
    );
  }
}

```

--------------------------------

### 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 <Tooltip label="Hey, I'm here!" openDelay={500}>
      <Button shadow={2}>More</Button>
    </Tooltip>;
}
```

--------------------------------

### 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 <Link mt={4} href="https://docs.nativebase.io" isExternal>
      Click here to open documentation.
    </Link>;
};
```

--------------------------------

### 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 <Center>
      <Button onPress={() => setShowModal(true)}>Button</Button>
      <Modal isOpen={showModal} onClose={() => setShowModal(false)} _backdrop={{
      _dark: {
        bg: "coolGray.800"
      },
      bg: "warmGray.50"
    }}>
        <Modal.Content maxWidth="350" maxH="212">
          <Modal.CloseButton />
          <Modal.Header>Return Policy</Modal.Header>
          <Modal.Body>
            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.
          </Modal.Body>
          <Modal.Footer>
            <Button.Group space={2}>
              <Button variant="ghost" colorScheme="blueGray" onPress={() => {
              setShowModal(false);
            }}>
                Cancel
              </Button>
              <Button onPress={() => {
              setShowModal(false);
            }}>
                Save
              </Button>
            </Button.Group>
          </Modal.Footer>
        </Modal.Content>
      </Modal>
    </Center>;
};

```

--------------------------------

### 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 (
    <Center>
      <Box
        p="4"
        flex="1"
        maxW="300"
        mt={10}
        w="100%"
        bg={colorMode === "dark" ? "coolGray.800" : "warmGray.50"}
        safeArea
      >
        <Text fontSize="lg" display="flex" mb="20">
          The active color mode is <Text bold fontSize="lg">{colorMode}</Text>
        </Text>
        <Button onPress={toggleColorMode} h={10}>
          Toggle
        </Button>
      </Box>
    </Center>
  );
}

const Example = () => {
  return (
    <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>
  );
};
```

### 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 <Box h="60%" w="100%" alignItems="center">
      <Popover trigger={triggerProps => {
      return <Button {...triggerProps} shadow={2} colorScheme="danger">
              Delete Customer
            </Button>;
    }}>
        <Popover.Content accessibilityLabel="Delete Customerd" w="56">
          <Popover.Arrow />
          <Popover.CloseButton />
          <Popover.Header>Delete Customer</Popover.Header>
          <Popover.Body>
            This will remove all data relating to Alex. This action cannot be
            reversed. Deleted data can not be recovered.
          </Popover.Body>
          <Popover.Footer justifyContent="flex-end">
            <Button.Group space={2}>
              <Button colorScheme="coolGray" variant="ghost">
                Cancel
              </Button>
              <Button colorScheme="danger">Delete</Button>
            </Button.Group>
          </Popover.Footer>
        </Popover.Content>
      </Popover>
    </Box>;
}
```

--------------------------------

### 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 <Stack space={3} alignItems="center">
      <HStack space={3} alignItems="center">
        <Center h="40" w="20" bg="primary.200" rounded="md" shadow={3} />
        <Center h="40" w="20" bg="primary.300" rounded="md" shadow={3} />
        <Center h="40" w="20" _dark={{
        bg: 'primary.500'
      }} _light={{
        bg: 'primary.400'
      }} rounded="md" shadow={3} />
      </HStack>
    </Stack>;
}
```

--------------------------------

### 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 <Center>
      <Button colorScheme="danger" onPress={() => setIsOpen(!isOpen)}>
        Delete Customer
      </Button>
      <AlertDialog leastDestructiveRef={cancelRef} isOpen={isOpen} onClose={onClose}>
        <AlertDialog.Content>
          <AlertDialog.CloseButton />
          <AlertDialog.Header>Delete Customer</AlertDialog.Header>
          <AlertDialog.Body>
            This will remove all data relating to Alex. This action cannot be
            reversed. Deleted data can not be recovered.
          </AlertDialog.Body>
          <AlertDialog.Footer>
            <Button.Group space={2}>
              <Button variant="unstyled" colorScheme="coolGray" onPress={onClose} ref={cancelRef}>
                Cancel
              </Button>
              <Button colorScheme="danger" onPress={onClose}>
                Delete
              </Button>
            </Button.Group>
          </AlertDialog.Footer>
        </AlertDialog.Content>
      </AlertDialog>
    </Center>;
};

```

--------------------------------

### 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 <Center>
      <Box w={["250", "300"]} justifyContent="center">
        <VStack space={3}>
          <HStack alignItems="flex-end">
            <Heading>Order</Heading>
          </HStack>
          <HStack alignItems="center" justifyContent="space-between">
            <Text fontWeight="medium">Sub Total</Text>
            <Text color="blueGray.400">$298.77</Text>
          </HStack>
          <HStack alignItems="center" justifyContent="space-between">
            <Text fontWeight="medium">Tax</Text>
            <Text color="blueGray.400">$38.84</Text>
          </HStack>
          <HStack alignItems="center" justifyContent="space-between">
            <Text fontWeight="medium">Total Amount</Text>
            <Text color="emerald.600">$337.61</Text>
          </HStack>
          <VStack space={2} mt="2">
            <Text bold>Promo Code</Text>
            <HStack space={3}>
              <Input flex="1" />
              <Button variant="outline">Apply</Button>
            </HStack>
          </VStack>
          <Button my="2" onPress={() => setIsOpen(!isOpen)}>
            Place Order
          </Button>
        </VStack>
        <Slide in={isOpen} placement="top">
          <Box w="100%" position="absolute" p="2" borderRadius="xs" bg="emerald.100" alignItems="center" justifyContent="center" _dark={{
          bg: "emerald.200"
        }} safeArea>
            <HStack space={2}>
              <CheckIcon size="4" color="emerald.600" mt="1" _dark={{
              color: "emerald.700"
            }} />
              <Text color="emerald.600" textAlign="center" _dark={{
              color: "emerald.700"
            }} fontWeight="medium">
                Order Placed Successfully.
              </Text>
            </HStack>
          </Box>
        </Slide>
      </Box>
    </Center>;
};

```

--------------------------------

### 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 <Switch size="lg" />;
};
```
```

--------------------------------

### 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 <Center>
      <Button shadow={2} colorScheme="danger" onPress={() => setIsOpen(!isOpen)}>
        Delete Customer
      </Button>
      <AlertDialog leastDestructiveRef={cancelRef} isOpen={isOpen} onClose={onClose}>
        <AlertDialog.Content>
          <AlertDialog.CloseButton />
          <AlertDialog.Header>Delete Customer</AlertDialog.Header>
          <AlertDialog.Body>
            This will remove all data relating to Alex. This action cannot be
            reversed. Deleted data can not be recovered.
          </AlertDialog.Body>
          <AlertDialog.Footer>
            <Button.Group space={2}>
              <Button variant="unstyled" colorScheme="coolGray" onPress={onClose} ref={cancelRef}>
                Cancel
              </Button>
              <Button colorScheme="danger" onPress={onClose}>
                Delete
              </Button>
            </Button.Group>
          </AlertDialog.Footer>
        </AlertDialog.Content>
      </AlertDialog>
    </Center>;
};

```

--------------------------------

### 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 (
    <Center>
      <Text mt="12" fontSize="18">
        This is {props.route.name} page.
      </Text>
    </Center>
  );
}

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 (
    <DrawerContentScrollView {...props} safeArea>
      <VStack space="6" my="2" mx="1">
        <Box px="4">
          <Text bold color="gray.700">
            Mail
          </Text>
          <Text fontSize="14" mt="1" color="gray.500" fontWeight="500">
            john_doe@gmail.com
          </Text>
        </Box>
        <VStack divider={<Divider />} space="4">
          <VStack space="3">
            {props.state.routeNames.map((name, index) => (
              <Pressable
                px="5"
                py="3"
                rounded="md"
                bg={
                  index === props.state.index
                    ? "rgba(6, 182, 212, 0.1)"
                    : "transparent"
                }
                onPress={(event) => {
                  props.navigation.navigate(name);
                }}
              >
                <HStack space="7" alignItems="center">
                  <Icon
                    color={
                      index === props.state.index ? "primary.500" : "gray.500"
                    }
                    size="5"
                    as={<MaterialCommunityIcons name={getIcon(name)} />}
                  />
                  <Text
                    fontWeight="500"
                    color={
                      index === props.state.index ? "primary.500" : "gray.700"
                    }
                  >
                    {name}
                  </Text>
                </HStack>
              </Pressable>
            ))}
          </VStack>
          <VStack space="5">
            <Text fontWeight="500" fontSize="14" px="5" color="gray.500">
              Labels
            </Text>
            <VStack space="3">
              <Pressable px="5" py="3">
                <HStack space="7" alignItems="center">
                  <Icon
                    color="gray.500"
                    size="5"
                    as={<MaterialCommunityIcons name="bookmark" />}
                  />
                  <Text color="gray.700" fontWeight="500">
                    Family
                  </Text>
                </HStack>
              </Pressable>
              <Pressable px="5" py="2">
                <HStack space="7" alignItems="center">
                  <Icon
                    color="gray.500"
                    size="5"
                    as={<MaterialCommunityIcons name="bookmark" />}
                  />
                  <Text color="gray.700" fontWeight="500">
                    Friends
                  </Text>
                </HStack>
              </Pressable>
              <Pressable px="5" py="3">
                <HStack space="7" alignItems="center">
                  <Icon
                    color="gray.500"
                    size="5"
                    as={<MaterialCommunityIcons name="bookmark" />}
                  />
                  <Text fontWeight="500" color="gray.700">
                    Work
                  </Text>
                </HStack>
              </Pressable>
            </VStack>
          </VStack>
        </VStack>
      </VStack>
    </DrawerContentScrollView>
  );
}
function MyDrawer() {
  return (
    <Box safeArea flex={1}>
      <Drawer.Navigator
        drawerContent={(props) => <CustomDrawerContent {...props} />}
      >
        <Drawer.Screen name="Inbox" component={Component} />
        <Drawer.Screen name="Outbox" component={Component} />
        <Drawer.Screen name="Favorites" component={Component} />
        <Drawer.Screen name="Archive" component={Component} />
        <Drawer.Screen name="Trash" component={Component} />
        <Drawer.Screen name="Spam" component={Component} />
      </Drawer.Navigator>
    </Box>
  );
}
export default function Example() {
  return (
    <NavigationContainer>
      <NativeBaseProvider>
        <MyDrawer />
      </NativeBaseProvider>

```

--------------------------------

### 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 <Center>
      <VStack space={2}>
        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "top-left"
      })}>
          Top left
        </Button>


        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "top-right"
      })}>
          Top right
        </Button>


        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "bottom-left"
      })}>
          Bottom left
        </Button>


        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "bottom-right"
      })}>
          Bottom right
        </Button>
      </VStack>
    </Center>;
};

```

--------------------------------

### 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 <Center>
      <VStack space="4">
        <Button bg={bgDark} _text={{
        color: colorContrastDark
      }}>
          NativeBase
        </Button>
        <Button bg={bgLight} _text={{
        color: colorContrastLight
      }}>
          NativeBase
        </Button>
      </VStack>
    </Center>;
};
```

--------------------------------

### Flex Component Examples

Source: https://docs.nativebase.io/flex

Demonstrates different flex directions (row, column, row-reverse, column-reverse) using the Flex component. Requires NativeBase setup and useColorModeValue hook for dynamic styling.

```jsx
function Example() {
  const bgShade100 = useColorModeValue("primary.100", "primary.400");
  const bgShade200 = useColorModeValue("primary.200", "primary.500");
  const bgShade300 = useColorModeValue("primary.300", "primary.600");
  const bgShade400 = useColorModeValue("primary.400", "primary.700");
  return <Box flex="1" safeAreaTop>
      <ScrollView _contentContainerStyle={{
      h: "40",
      px: "20px",
      mb: "4",
      minW: "72"
    }}>
        <VStack space={2.5} w="100%" px="3">
          {
          /* flexDirection -> row */
        }
          <Heading size="md">row</Heading>
          <Flex direction="row" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              400
            </Center>
          </Flex>
          <Divider />
          {
          /* flexDirection -> column */
        }
          <Heading size="md">column</Heading>

          <Flex direction="column" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              400
            </Center>
          </Flex>
          <Divider />
          {
          /* flexDirection -> row-reverse */
        }
          <Heading size="md">row-reverse</Heading>
          <Flex direction="row-reverse" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              400
            </Center>
          </Flex>
          <Divider />
          {
          /* flexDirection -> column-reverse */
        }
          <Heading size="md">column-reverse</Heading>
          <Flex direction="column-reverse" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
```

--------------------------------

### 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 <Center w="100%">
      <Box w="90%" maxW="400">
        <Progress rounded="0" value={65} mx="4" />
      </Box>
    </Center>;
};
```

--------------------------------

### 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 <Box mt="-20">
      <ZStack mt="3" ml={-50}>
        <Box bg="primary.700" size="20" rounded="lg" shadow={3} />
        <Box bg="primary.500" mt="5" ml="5" size="20" rounded="lg" shadow={5} />
        <Box bg="primary.300" mt="10" ml="10" size="20" rounded="lg" shadow={7} />
      </ZStack>
    </Box>;
};
```

--------------------------------

### 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 <>
      <Button shadow={2} onPress={() => setShowModal(true)}>
        Button
      </Button>
      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
        <Modal.Content maxWidth="400px">
          <Modal.CloseButton />
          <Modal.Header>Contact Us</Modal.Header>
          <Modal.Body>
            <FormControl>
              <FormControl.Label>Name</FormControl.Label>
              <Input />
            </FormControl>
            <FormControl mt="3">
              <FormControl.Label>Email</FormControl.Label>
              <Input />
            </FormControl>
          </Modal.Body>
          <Modal.Footer>
            <Button.Group space={2}>
              <Button variant="ghost" colorScheme="blueGray" onPress={() => {
              setShowModal(false);
            }}>
                Cancel
              </Button>
              <Button onPress={() => {
              setShowModal(false);
            }}>
                Save
              </Button>
            </Button.Group>
          </Modal.Footer>
        </Modal.Content>
      </Modal>
    </>;
};
```

--------------------------------

### 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 <Center w="100%">
      <Box safeArea p="2" w="90%" maxW="290" py="8">
        <Heading size="lg" color="coolGray.800" _dark={{
        color: "warmGray.50"
      }} fontWeight="semibold">
          Welcome
        </Heading>
        <Heading mt="1" color="coolGray.600" _dark={{
        color: "warmGray.200"
      }} fontWeight="medium" size="xs">
          Sign up to continue!
        </Heading>
        <VStack space={3} mt="5">
          <FormControl>
            <FormControl.Label>Email</FormControl.Label>
            <Input />
          </FormControl>
          <FormControl>
            <FormControl.Label>Password</FormControl.Label>
            <Input type="password" />
          </FormControl>
          <FormControl>
            <FormControl.Label>Confirm Password</FormControl.Label>
            <Input type="password" />
          </FormControl>
          <Button mt="2" colorScheme="indigo">
            Sign up
          </Button>
        </VStack>
      </Box>
    </Center>;
};
```
Tokens:
Raw