Panza
Panza is a UI foundation for react-native (on iOS and Android) with experimental support for react-native-web. It's inspired by the excellent rebass library.
Panza gives you:
- The standard building blocks of most mobile applications.
- Beautiful UI-styles out of the box, suitable for iOS, Android, and the web.
- A method for theming your application.
- A Base and Text component, which provide useful shorthand prop to style conversions. For example, use
p={2}
to provide padding, orbackgroundColor='primary'
to provide a background colour. Most UI-components composeBase
, and thus accept these props.
Getting Started
Install using NPM.
npm i panza --save
npm i react-native-vector-icons --save
rnpm link react-native-vector-icons
And import your components.
import { Base, Button, Text } from 'panza'
const Hello = ({ onPress }) => (
<Base flex={1} backgroundColor='light'>
<Text large color='positive'>I am text</Text>
<Button
primary
outline
onPress={onPress}>
I am a button
</Button>
</Base>
)
Components
Elements
Navigation
Input
- InputGroup
- InputRow
- InputTouchable
- InputToggle
- InputPicker
- InputDatePicker
- InputExpandable
- InputHelpText
Lists
Buttons
Cards
Pages
Modules
Themes
You can override parts of the global theme to provide custom colours, font sizes, scales, etc. Use the customizeTheme
function provided by Panza to supply a custom theme before registering your application. Check out the default config to see which variables you can override.
import { customizeTheme } from 'panza'
customizeTheme({
colors: {
primary: '#08e'
}
})
// mount your application
Learn more here
Examples
UIExplorer bRandom - Randomize your routine. App Store Roast Buddy.
Built something with Panza? Let us know!
Contributing
If you are interested in working on Panza and want to develop it locally within a react-native project, we recommend using wml to directly copy your local panza
directory into your node_modules
folder inside of your react-native project. This is the best solution until react-native fully support symlinks.
wml add ~/panza ~/panza-example/node_modules/panza
wml start
To run the tests:
npm test
License
MIT