DOCSEARCHbyAlgolia
Submit Docs

NativeBase | Universal Components for React and React Native

website·Indexed 35 days ago

https://docs.nativebase.io/

A library of universal components for React and React Native, featuring a utility-first approach. NativeBase 3.4.x provides a comprehensive set of UI components including Modal, Menu, Alert, Stack, Flex, and Input, along with hooks like useBreakpointValue and useMediaQuery for building responsive applications.

Tokens
48.4K
Snippets
217
Records
299
Agent score
67%

What's inside NativeBase

  1. Overview of NativeBase Accessibility Features

    NativeBase implements accessibility standards out of the box to ensure components are usable by everyone. Key features include:

    • Accessible Roles: Uses React Native ARIA to implement WAI-ARIA standards, providing semantic meaning to controls not natively provided by the platform.
    • Accessible Labels: Supports accessibilityLabel to provide descriptive text for screen readers (voice-over), which is handled automatically via React Native ARIA in many cases.
    • Keyboard Navigation: Provides basic keyboard support for complex components (e.g., Tabs, Dialog) following WAI-ARIA authoring practices.
    • Focus Management: Programmatically manages focus during user interactions to guide screen readers and keyboard users. For example, when a Modal opens, focus is moved to the first focusable element and trapped within the modal.

  2. Overview of NativeBase

    NativeBase is a component library for building universal design systems. It is built on top of React Native, enabling developers to create applications that run across Android, iOS, and the Web. Key features include a default theme for immediate visual appeal, built-in accessibility (focus management, keyboard navigation), and high customizability of the theme and individual components.

  3. Overview of NativeBase

    NativeBase is a component library for building universal design systems. It is built on top of React Native, enabling developers to create applications that run across Android, iOS, and the Web. Key features include multiplatform support, a built-in default theme, out-of-the-box accessibility (including focus management and keyboard navigation), and high customizability of the theme and components.

  4. Implement icons in NativeBase

    NativeBase provides three primary ways to integrate icons into a project:

    1. SVG Icons: Create custom icons using SVG components from react-native-svg.
    2. createIcon Function: Use the createIcon utility to define a custom icon and use it as a React component.
    3. Third-Party Libraries: Use external libraries such as @expo/vector-icons by passing the icon as a prop.

  5. Render performant scrollable lists with FlatList

    The FlatList component in NativeBase is used for rendering performant scrollable lists. It extends the standard React Native FlatList by integrating NativeBase utility props, allowing you to style the list and its container using design tokens.
    import React from 'react';
import { Box, Heading, FlatList, HStack, Avatar, VStack, Text, Spacer } from 'native-base';

const Example = () => {
  const data = [
    {
      id: "1",
      fullName: "Aafreen Khan",
      timeStamp: "12:47 PM",
      recentText: "Good Day!",
      avatarUrl: "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg"
    },
    // ... more data
  ];

  return (
    <Box>
      <Heading fontSize="xl" p="4" pb="3">
        Inbox
      </Heading>
      <FlatList 
        data={data} 
        keyExtractor={item => item.id} 
        renderItem={({ item }) => (
          <Box 
            borderBottomWidth="1" 
            borderColor="muted.800" 
            _dark={{ borderColor: "muted.50" }} 
            pl={["0", "4"]} 
            pr={["0", "5"]} 
            py="2"
          >
            <HStack space={[2, 3]} justifyContent="space-between">
              <Avatar size="48px" source={{ uri: item.avatarUrl }} />
              <VStack>
                <Text bold color="coolGray.800" _dark={{ color: "warmGray.50" }}>
                  {item.fullName}
                </Text>
                <Text color="coolGray.600" _dark={{ color: "warmGray.200" }}>
                  {item.recentText}
                </Text>
              </VStack>
              <Spacer />
              <Text fontSize="xs" color="coolGray.800" _dark={{ color: "warmGray.50" }}>
                {item.timeStamp}
              </Text>
            </HStack>
          </Box>
        )}
      />
    </Box>
  );
};

  6. Use the Box component for low-level layout

    The Box component is a generic container used for low-level layout needs, serving as the NativeBase equivalent to an HTML div. It supports utility props for styling, spacing, and layout.
    import { Box } from 'native-base';

const Example = () => {
  return (
    <Box p="2" bg="primary.500" shadow={2} _text={{ fontSize: 'md', color: 'warmGray.50' }}>
      This is a Box
    </Box>
  );
};

  7. Use the TextArea component for multi-line text input

    The TextArea component in NativeBase is used to create multi-line text input fields. It supports standard layout, color, and typography props, as well as specific states for invalid and disabled inputs.
    import { TextArea } from 'native-base';

const Example = () => {
  return <TextArea h={20} placeholder="Text Area Placeholder" w="75%" maxW="300" />;
};

  8. Implement a Floating Action Button (FAB) with NativeBase

    The Fab component is a circular icon button that hovers over content to execute a primary action. It can be rendered inside a Portal by default or placed within a specific container by setting renderInPortal={false}.
    import { Fab, Icon } from 'native-base';
import { AntDesign } from 'react-native-vector-icons/AntDesign';

const Example = () => {
  return (
    <Fab 
      renderInPortal={false} 
      shadow={2} 
      size="sm" 
      icon={<Icon color="white" as={AntDesign} name="plus" size="sm" />} 
    />
  );
};

  9. Use the Skeleton component for loading states

    The Skeleton component provides a placeholder to indicate that content is loading. It can be used as a standalone placeholder or as a wrapper around the actual content using the isLoaded prop to toggle between the skeleton and the final UI.
    import { Skeleton, Center, VStack } from 'native-base';

const Example = () => {
  return (
    <Center w="350">
      <VStack w="90%" space={8} rounded="md">
        <Skeleton h="40" />
        <Skeleton.Text px="4" />
        <Skeleton px="4" my="4" rounded="md" />
      </VStack>
    </Center>
  );
};

  10. Use the Heading component in NativeBase

    The Heading component is used to render headlines in a React Native application. Because it composes the Text component, it supports all standard text styling props. It can be imported from the native-base package.
    import { Heading } from 'native-base';

function Example() {
  return <Heading>I'm a Heading</Heading>;
}

  11. Use the ScrollView component for scrolling containers

    The ScrollView component provides a scrolling container capable of hosting multiple components and views. It is a wrapper around the React Native ScrollView and integrates NativeBase utility props for styling.
    import { ScrollView, Center, Heading, VStack } from 'native-base';

const Example = () => {
  return (
    <ScrollView w={["200", "300"]} h="80">
      <Center mt="3" mb="4">
        <Heading fontSize="xl">Cyan</Heading>
      </Center>
      <VStack flex="1">
        {/* Content to scroll */}
      </VStack>
    </ScrollView>
  );
};

  12. Use the NativeBase Input component

    The Input component provides a text field for user input. It supports various sizes, visual variants, and can be customized using NativeBase utility props and pseudo-props for different color modes (light/dark) and interaction states (hover, focus).
    const Example = () => {
  return (
    <Input 
      shadow={2} 
      _light={{
        bg: "coolGray.100",
        _hover: { bg: "coolGray.200" },
        _focus: { bg: "coolGray.200:alpha.70" }
      }} 
      _dark={{
        bg: "coolGray.800",
        _hover: { bg: "coolGray.900" },
        _focus: { bg: "coolGray.900:alpha.70" }
      }} 
      placeholder="Enter your name" 
    />
  );
};