panza

Panza is a collection of ui-components for react-native modelled after iOS.

This library is currently undergoing a rewrite and will be updated soon along with new documentation.

Getting Started

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

Components

Inputs

Rows

Navigation

Pages

Buttons

Text

Images

Icons

  • Icon
  • TouchableIcon
  • PlusIcon
  • ArrowRightIcon
  • CloseIcon
  • BackIcon
  • SearchIcon
  • MoreIcon

Base Components

Customize

You can override parts of the global configuration to provide custom colours, font sizes, scales, etc.

import { config } from 'panza'

class App extends React.Component {

  static childContextTypes = {
    panza: PropTypes.object
  }

  getChildContext() {
    panza: this.state.styles
  }

  state = {
    styles: {
      colors: Object.assign(
        {},
        config.colors,
        { primary: config.colors.red } // change the primary color from blue to red
      )
    }
  }

  // ... render your app
}

Example

You can install the example application contained within this repository.

$ git clone https://github.com/bmcmahen/panza.git
$ cd panza && npm install
$ react-native run-ios
$ react-native run-android

License

MIT