panza-org / panza

react-native stateless functional UI components to get you up and running quickly

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

• InputRow
• InputGroup
• InputHelpText
• InputToggle
• InputPicker
• InputDatePicker
• RemovableInput
• AddRow
• TouchableInput

Rows

• TouchableRow
• RowSeparator
• RowImage
• SectionHeader

Navigation

• NavBar
• NavTitle
• NavTouchableIcon
• NavTouchableText
• SubNav

Pages

• ErrorPage
• LoadingPage

Buttons

• Button
• PrimaryButton
• WarningButton
• ErrorButton
• SuccessButton
• NakedButton
• VerticalButtonGroup

Text

• PrimaryText
• SecondaryText
• LargeText
• SubtitleText
• PrimaryTextInput
• SecondaryTextInput

Images

• FadeImage

Icons

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

Base Components

• Base
• TextBase

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