https://github.com/ianhenrydev/preem-ui
UI components for React Native that support custom theming
https://github.com/ianhenrydev/preem-ui
react-native styled-components theme
Last synced: 26 days ago
JSON representation
UI components for React Native that support custom theming
- Host: GitHub
- URL: https://github.com/ianhenrydev/preem-ui
- Owner: ianhenrydev
- License: mit
- Created: 2023-01-13T17:00:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-13T18:23:39.000Z (over 3 years ago)
- Last Synced: 2025-03-15T18:06:12.639Z (about 1 year ago)
- Topics: react-native, styled-components, theme
- Language: TypeScript
- Homepage:
- Size: 163 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# preem-ui
[](https://www.npmjs.com/package/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.
```typescript
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 {/* Rest of your app code */}
}
```
## 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`.
``
## 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`. |