Getting Started

Panza is a simple, flexible, and beautiful ui foundation for react-native and react-native-web, created by Ben McMahen and Hammad Jutt. Essentially, it’s the Bootstrap of react-native.

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.

So instead of doing this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const styles = StyleSheets.create({
  button: {
    backgroundColor: 'transparent',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#F62459',
    paddingVertical: 4,
    paddingHorizontal: 8
  }
});
 
<TouchableOpacity style={styles.button}>
  <Text style={{ color: '#F62459', fontSize: 15 }}>Press me!</Text>
</TouchableOpacity>

You can do this:

1
2
3

<Button primary>
  Press me!
</Button>

Installation

Install using NPM.

1
2
3

npm i panza --save
npm i react-native-vector-icons --save
rnpm link react-native-vector-icons

And import your components.

1
2
3
4
5
6
7
8
9
10
11
12
13

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>
)

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.

1
2
3
4
5
6
7
8
9

import { customizeTheme } from 'panza'
customizeTheme({
  colors: {
    primary: '#08e'
  }
})
// mount your application

Examples

• UIExplorer
• bRandom - Randomize your routine (GitHub, 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.

1
2

wml add ~/panza ~/panza-example/node_modules/panza
wml start

To run the tests:

1

npm test

License

MIT