NativeBase Factory | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Typography

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

NativeBase Factory

NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them.

Copy
import { Factory } from 'native-base';

Usage


Playground
function FactoryViewExample() {
  const FactoryView = Factory(View);
  return <FactoryView bg="emerald.400" borderRadius={4} size={16} />;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <FactoryViewExample />
      </Center>
    </NativeBaseProvider>;
}function FactoryViewExample() {
  const FactoryView = Factory(View);
  return <FactoryView bg="emerald.400" borderRadius={4} size={16} />;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <FactoryViewExample />
      </Center>
    </NativeBaseProvider>;
}

Defining component theme


Playground
function FactoryViewExample() {
  const FactoryView = Factory(View, {
    baseStyle: {
      bg: 'cyan.300',
      borderRadius: 'md'
    }
  });
  return <FactoryView size={16} />;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <FactoryViewExample />
      </Center>
    </NativeBaseProvider>;
}function FactoryViewExample() {
  const FactoryView = Factory(View, {
    baseStyle: {
      bg: 'cyan.300',
      borderRadius: 'md'
    }
  });
  return <FactoryView size={16} />;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <FactoryViewExample />
      </Center>
    </NativeBaseProvider>;
}

Using mode in component theme


Playground
function FactoryViewModeExample() {
  const FactoryView = Factory(View, {
    baseStyle: props => {
      return {
        bg: themeTools.mode('rose.500', 'cyan.300')(props),
        borderRadius: 'md'
      };
    }
  });
  return <FactoryView size={16} />;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <FactoryViewModeExample />
      </Center>
    </NativeBaseProvider>;
}function FactoryViewModeExample() {
  const FactoryView = Factory(View, {
    baseStyle: props => {
      return {
        bg: themeTools.mode('rose.500', 'cyan.300')(props),
        borderRadius: 'md'
      };
    }
  });
  return <FactoryView size={16} />;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <FactoryViewModeExample />
      </Center>
    </NativeBaseProvider>;
}

Using ref


Playground
function FactoryViewRefExample() {
  const NBInput = Factory(TextInput);
  const inputRef = React.useRef(null);
  return <Stack space={4}>
      <NBInput placeholder="Click on the button" ref={inputRef} p={2} border={1} borderColor="cyan.400" borderRadius="md" />
      <Button colorScheme="emerald" onPress={() => {
      inputRef?.current?.focus();
    }}>
        Set Focus
      </Button>
    </Stack>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <FactoryViewRefExample />
      </Center>
    </NativeBaseProvider>;
}function FactoryViewRefExample() {
  const NBInput = Factory(TextInput);
  const inputRef = React.useRef(null);
  return <Stack space={4}>
      <NBInput placeholder="Click on the button" ref={inputRef} p={2} border={1} borderColor="cyan.400" borderRadius="md" />
      <Button colorScheme="emerald" onPress={() => {
      inputRef?.current?.focus();
    }}>
        Set Focus
      </Button>
    </Stack>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <FactoryViewRefExample />
      </Center>
    </NativeBaseProvider>;
}