Customizing Components

Copy
import React from 'react';
import { NativeBaseProvider, extendTheme } from 'native-base';

export default function () {
  const theme = extendTheme({
    components: {
      Button: {
        // Can simply pass default props to change default behaviour of components.
        baseStyle: {
          rounded: 'md',
        },
        defaultProps: {
          colorScheme: 'red',
        },
      },
      Heading: {
        // Can pass also function, giving you access theming tools
        baseStyle: ({ colorMode }) => {
          return {
            color: colorMode === 'dark' ? 'red.300' : 'blue.300',
            fontWeight: 'normal',
          };
        },
      },
    },
  });
  return (
    <NativeBaseProvider theme={theme}>{/* components */}</NativeBaseProvider>
  );
}

As shown above, we can customize components by passing the components object with the key being the name of the component. Whereas you set defaultProps or baseStyle to customize the components.

Difference between baseStyle and defaultProps

Base Style

As the name suggests, it's used to define the base style of a component.

Base style can be a function or a plain object. Use function if you want to get access to defaultProps, current colorMode (light/dark) and theme object.

Take a look at an

example here

Default Props

Default props can be used to initialize props of a component.

For e.g. You have a Button component and it has 2 variants. i.e. outline, solid.

Take a look at an

example here

Copy
<Button variant="ghost">
<Button variant="outline">


// What variant should it pick if it's not passed?
<Button />

When variant in defaultProps is solid the above button will use solid variant.

Customizing Base Style

You can specify the base style of the component and use it across project.


Playground
function Example() {
  const theme = extendTheme({
    components: {
      Text: {
        baseStyle: {
          color: 'emerald.400'
        },
        defaultProps: {
          size: 'lg'
        },
        sizes: {
          xl: {
            fontSize: '64px'
          },
          lg: {
            fontSize: '32px'
          },
          md: {
            fontSize: '16px'
          },
          sm: {
            fontSize: '12px'
          }
        }
      }
    }
  });
  return <NativeBaseProvider theme={theme}>
      <Center flex={1}>
        <Text>NativeBase</Text>
      </Center>
    </NativeBaseProvider>;
}function Example() {
  const theme = extendTheme({
    components: {
      Text: {
        baseStyle: {
          color: 'emerald.400'
        },
        defaultProps: {
          size: 'lg'
        },
        sizes: {
          xl: {
            fontSize: '64px'
          },
          lg: {
            fontSize: '32px'
          },
          md: {
            fontSize: '16px'
          },
          sm: {
            fontSize: '12px'
          }
        }
      }
    }
  });
  return <NativeBaseProvider theme={theme}>
      <Center flex={1}>
        <Text>NativeBase</Text>
      </Center>
    </NativeBaseProvider>;
}

Adding Variants

You can also add the variants to the components and use it across project.


Playground
const Example = () => {
  const theme = extendTheme({
    components: {
      Button: {
        variants: {
          rounded: ({
            colorScheme
          }) => {
            return {
              bg: `${colorScheme}.500`,
              _hover: {
                bg: `${colorScheme}.600`
              },
              _pressed: {
                bg: `${colorScheme}.700`
              },
              _text: {
                color: `${colorScheme}.50`
              },
              rounded: "full"
            };
          }
        }
      }
    }
  });
  return <NativeBaseProvider theme={theme}>
      <Center flex={1}>
        <VStack space={2}>
          <Button colorScheme="emerald">Default Button</Button>
          <Button colorScheme="emerald" variant="rounded">
            Rounded Button
          </Button>
        </VStack>
      </Center>
    </NativeBaseProvider>;
};const Example = () => {
  const theme = extendTheme({
    components: {
      Button: {
        variants: {
          rounded: ({
            colorScheme
          }) => {
            return {
              bg: `${colorScheme}.500`,
              _hover: {
                bg: `${colorScheme}.600`
              },
              _pressed: {
                bg: `${colorScheme}.700`
              },
              _text: {
                color: `${colorScheme}.50`
              },
              rounded: "full"
            };
          }
        }
      }
    }
  });
  return <NativeBaseProvider theme={theme}>
      <Center flex={1}>
        <VStack space={2}>
          <Button colorScheme="emerald">Default Button</Button>
          <Button colorScheme="emerald" variant="rounded">
            Rounded Button
          </Button>
        </VStack>
      </Center>
    </NativeBaseProvider>;
};

NativeBase ships with default styles for each components.

You can find it here

Customizing Fonts

Making components dark mode compatible

Quick Nav

Basic

Difference between baseStyle and defaultProps

Base Style

Default Props

Customizing Base Style

Adding Variants

MadeWithNativeBase

gluestack-ui

Customizing Components | NativeBase | Universal Components for React and React Native