Skip to content
react-native stateless functional UI components to get you up and running quickly
Branch: master
Clone or download
bmcmahen [add] some basic stub tests.
Unfortunately, I haven't actually run these yet because of issues
with babel. Why is testing react-native such a pain in the butt?
Latest commit 9eef139 Jul 8, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android Update React Native Jun 13, 2016
components [add] some basic stub tests. Jul 8, 2016
documentation TextBase thin prop Jun 28, 2016
images add android screenshot to the readme Jun 7, 2016
ios Update React Native Jun 13, 2016
lib Resolve conflicts and merge remote-tracking branch 'bmcmahen/master' Jun 27, 2016
scripts append examples to api docs Jun 3, 2016
web Resolve conflicts and merge remote-tracking branch 'bmcmahen/master' Jun 27, 2016
.babelrc [add] some basic stub tests. Jul 8, 2016
.buckconfig initial commit Jun 1, 2016
.eslintrc [change] Button and Text to use props instead of excessive composition Jul 7, 2016
.flowconfig Update React Native Jun 13, 2016
.gitignore Resolve conflicts and merge remote-tracking branch 'bmcmahen/master' Jun 27, 2016
.npmignore add demo ios screenshot to readme Jun 2, 2016
.watchmanconfig initial commit Jun 1, 2016
README.md add icon docs Jun 8, 2016
index.android.js initial commit Jun 1, 2016
index.ios.js initial commit Jun 1, 2016
package.json [change] Button and Text to use props instead of excessive composition Jul 7, 2016
webpack.config.js

README.md

panza

Panza (named after Sancho Panza, from Don Quixote), is a collection of stateless, functional ui-components for react-native, and heavily inspired by the excellent rebass library. 

The goal with Panza is to provide a set of commonly used (mostly) functional ui components for react-native, that work well in both android and iOS environments. These components should look nice out of the box, but still offer a high degree of customization. This is achieved primarily through the use of composition. Each component is comprised of smaller components including a Base component, which provides some nice shorthands to transform props into styles based upon a global configuration. A component like TouchableRow may suit your needs eighty percent of the time, but in cases where you need something a bit more custom, you can construct your own row using TouchableRowCell, PrimaryText, SecondaryText, RowImage, Base, ArrowRightIcon, and any other components that you’d like.

You can see Panza in production with Payback, an app that manages shared expenses between individuals and groups.

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

You can’t perform that action at this time.