preem-ui

UI components for React Native that support custom theming.

Installation

Install the library using yarn:

yarn add preem-ui

Or npm:

npm install --save preem-ui

Setting up your theme

Next, wrap your app in a PreemThemeProvider. This allows you specify a common theme for all UI components to use.

import { PreemTheme, PreemThemeProvider } from 'preem-ui'

const theme: PreemTheme = {
  dark: true,
  colors: {
    primary: 'green',
    background: '#212121',
    card: '#2f2f2f',
    text: '#fff',
    border: '#282828',
    notification: '#ff6600',
  },
}

export default function App() {
    return (
        <PreemThemeProvider theme={theme}>
            {/* Rest of your app code */}
        <PreemThemeProvider>
    )
}

Usage with react-navigation

This library is designed to work with react-navigation. Just pass your custom PreemTheme as a prop when you create your NavigationContainer.

<NavigationContainer theme={theme}>

Components

Component	Description
Button	Custom TouchableOpacity styled as a simple button.
Card	View styled to look like a card.
CardList	Responsive list of cards.
Fab	Floating action button absolutely positioned in a corner.
Header	Simple header text to appear at the top of a screen.
InnerContainer	View that is locked to a max width.
Label	Styled text to be used in combination with Inputs.
Loading	Centered loading spinner.
OuterContainer	Main container for screens. Supports scrolling and accounts for status bar height.
TabBar	Toggle selector for a small number of items.
Table	Scrollable and sortable table.
Text	Styled Text.
TextInput	Styled TextInput.