NativeBase

The Modal component is a composite component used to create overlay dialogs. It follows a pattern where the main Modal component acts as a container for several sub-components that define its structure.

To build a modal, you compose the following sub-components:

• Modal.Header: For the title or header section.
• Modal.Body: For the main content area.
• Modal.Footer: For action buttons at the bottom.
• Modal.CloseButton: A button to dismiss the modal.
• Modal.Content: The wrapper for the internal layout of the modal content.

import { Modal } from 'native-base';

const MyComponent = () => (
  <Modal isOpen={true}>
    <Modal.Content>
      <Modal.Header>Modal Title</Modal.Header>
      <Modal.CloseButton />
      <Modal.Body>
        <Text>Modal content goes here.</Text>
      </Modal.Body>
      <Modal.Footer>
        <Button>Close</Button>
      </Modal.Footer>
    </Modal.Content>
  </Modal>
);

NativeBase provides a wide range of accessible UI components categorized into primitives (layout, basic elements) and composites (complex UI patterns). You can import them directly from the main entrypoint.

Primitives

Used for layout and basic building blocks:

• Layout: Box, Stack, VStack, HStack, ZStack, Flex, Container, Center, Square, Circle, SimpleGrid, Wrap.
• Basic Elements: Text, Heading, Button, Input, TextArea, Checkbox, Radio, Switch, Select, Image, Icon.
• Feedback/Status: Spinner, Progress, Skeleton.

Composites

Used for complex user interactions:

• Overlays: Modal, Drawer, Popover, AlertDialog, Actionsheet, Tooltip, Backdrop.
• Navigation/Selection: Breadcrumb, Menu, Typeahead, Accordion.
• Form Controls: FormControl, PinInput, NumberInput, TextField.
• Transitions: Fade, ScaleFade, Slide, SlideFade, PresenceTransition, Stagger.

import {
  Box,
  Text,
  Button,
  VStack,
  HStack,
  Input,
  Modal,
  useToast
} from 'native-base';

// Example usage
const MyComponent = () => (
  <VStack space={4}>
    <Box bg="primary.500" p={4}>
      <Text color="white">Hello NativeBase</Text>
    </Box>
    <Button onPress={() => {}}>
      Click Me
    </Button>
  </VStack>
);

When setting up Jest for iOS testing in environments using Expo, use the jest-expo/ios preset. To ensure NativeBase and its dependencies are correctly transformed by Jest, you must include them in the transformIgnorePatterns regex. This prevents Jest from ignoring these specific modules in node_modules during the transformation process.

Key configuration requirements:

• Preset: Use jest-expo/ios.
• Transform Ignore Patterns: Must include native-base and related mobile dependencies (like react-native, expo, and react-navigation) to avoid transformation errors.
• Setup Files: Use a global mock file (e.g., <rootDir>/__mocks__/globalMock.js) via setupFilesAfterEnv to handle environment-specific globals.

const config = {
  preset: 'jest-expo/ios',
  transformIgnorePatterns: [
    '<rootDir>/../node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|unimodules|sentry-expo|native-base|@sentry/.*)',
  ],
  setupFilesAfterEnv: ['<rootDir>/__mocks__/globalMock.js'],
};

module.exports = config;

In the RNBareExample project, the metro.config.js is configured to prevent multiple versions of peerDependencies from being loaded. This is achieved by blacklisting the peerDependencies located in the project root's node_modules and aliasing them to the specific versions installed within the example's local node_modules using extraNodeModules.

const path = require('path');
const blacklist = require('metro-config/src/defaults/blacklist');
const escape = require('escape-string-regexp');
const pak = require('../package.json');

const root = path.resolve(__dirname, '..');
const modules = Object.keys({
  ...pak.peerDependencies,
});

module.exports = {
  projectRoot: __dirname,
  watchFolders: [root],
  resolver: {
    blacklistRE: blacklist(
      modules.map(
        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
      ),
    ),
    extraNodeModules: modules.reduce((acc, name) => {
      acc[name] = path.join(__dirname, 'node_modules', name);
      return acc;
    }, {}),
  },
  // ...
};