New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

panza

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

panza

a foundation for your react-native projects

latest
Source
npmnpm
Version
2.3.0
Version published
Maintainers
1
Created
Source

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

Keywords

react-native

FAQs

Package last updated on 23 Jun 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts