Overview

Congrats! You've installed React Native Elements and your immediate question goes something like this:

So umm, how do I change how it looks?

Great question! A UI Kit wouldn't be that useful if the apps everyone built looked the same right? For this case React Native Elements provide a number of props on each component to enable you to style them how you want.

Component Styles

Every component from React Native Elements has a container around it. The container is just a traditional <View /> from react native that has some styling on it. This default styling prevents components from colliding with each other. If you want to change how two components react to each on the screen your first stop should be the containerStyle prop.

Similar to containerStyle, components may provide their custom style props like buttonStyle, titleStyle etc. Always refer to the documentation for the component to find out which style props it provides.

Theming

While component styles are great for single use, you may want to have the same styling for every instance of a component. For example, you may want all your buttons to be blue or have the same font. Here are some ways to reuse styles with React Native Elements.

Using Composition

With this approach, we create one component with the styles we want and use that instead of the built-in component.

import React from 'react';
import { Button } from '@rneui/themed';

const RaisedButton = (props) => <Button raised {...props} />;

// Your App
const App = () => {
  return <RaisedButton title="Yea" />;
};

If we want to use a button that's raised in our app, we can use RaisedButton instead of using Button. This component still accepts all the props from the normal Button just that it has the raised prop set by default.

---

Order of Styles

What happens now if we want a Button that isn't raised? To do that we have to understand the order in which styles are applied.

Internal > Theme > External

Internal

Internal components styles are the styles which are defined in the component file. These are applied first.

Theme

Theme styles are the values that are set by the ThemeProvider If present, these are applied second.

import { ThemeProvider, Button, createTheme } from '@rneui/themed';

const theme = createTheme({
  components: {
    Button: {
      titleStyle: {
        color: 'red',
      },
    },
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button title="My Button" />
    </ThemeProvider>
  );
};

This will override the white color for the title set in the component's style.

External

External styles are the styles which are set through the component props. These are applied last and have the highest precedence.

import { ThemeProvider, Button, createTheme } from '@rneui/themed';

const theme = createTheme({
  components: {
    Button: {
      titleStyle: {
        color: 'red',
      },
    },
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button title="My Button" titleStyle={{ color: 'pink' }} />
    </ThemeProvider>
  );
};

This will override both the white color for the title set in the component's style as well as the red color set in the theme.

Remember if you want to override the values set in the theme you can always use component props.

Note: To theme subcomponents such as ListItem.Title, in your theme remove the dot and list them as "ListItemTitle"

Using the theme in your own components

App.tsx

import { ThemeProvider, createTheme } from '@rneui/themed';

const myTheme = createTheme({
  lightColors: {
    primary: '#a4e2f5',
  },
});

const App = () => {
  return (
    <ThemeProvider theme={myTheme}>
      {/* ... */}
      {/* ... */}
    </ThemeProvider>
  );
};

The updateTheme function merges the theme passed in with the current theme.

updateTheme({
  lightColors: {
    primary: 'purple',
  },
});

The replaceTheme function merges the theme passed in with the default theme.

Don't want to wrap your components with withTheme? You can use the ThemeConsumer component which uses render props!

import React from 'react';
import { Text } from 'react-native';
import { ThemeConsumer } from '@rneui/themed';

const MyComponent = () => (
  <ThemeConsumer>
    {({ theme }) => (
      <Text style={{ color: theme.colors.primary }}>Yo!</Text>;
    )}
  </ThemeConsumer>
)

You can also use useTheme() if you use hooks.

import React from 'react';
import { Text } from 'react-native';
import { useTheme } from '@rneui/themed';

const MyComponent = () => {
  const { theme } = useTheme();

  return (
    <View style={styles.container}>
      <Text style={{ color: theme.colors.primary }}>Yo!</Text>
    </View>
  );
};

If you want to keep your styles outside the component use makeStyles() (hook generator) to reference the theme and component props (optional param).

import React from 'react';
import { Text } from 'react-native';
import { makeStyles } from '@rneui/themed';

type Params = {
  fullWidth?: boolean;
};

const MyComponent = (props: Params) => {
  const styles = useStyles(props);

  return (
    <View style={styles.container}>
      <Text style={{ color: theme.colors.primary }}>Yo!</Text>
    </View>
  );
};

const useStyles = makeStyles((theme, props: Params) => ({
  container: {
    background: theme.colors.white,
    width: props.fullWidth ? '100%' : 'auto',
  },
  text: {
    color: theme.colors.primary,
  },
}));