Edit This Page

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, or backgroundColor='primary' to provide a background colour. Most UI-components compose Base, 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

Input

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