• bottom borders of single child is shown if there's only one child
• the name suggests a narrower function than it actually provides

Getting warnings using InputPicker

<InputGroup label='Tracking' inset={16} backgroundColor='white'>
                        <InputPicker expanded={this.state.focusPicker}
                            value={this.state.tracking}
                            label='Idle tracking'
                            onToggleExpansion={() => {
                            this.setState({ focusPicker: !this.state.focusPicker })
                        }}>
                        <Picker
                            prompt='Select a Idle tracking'
                            style={{ width: 300 }}
                            selectedValue={this.state.tracking}
                            onValueChange={(lang) => this.setState({ tracking: lang })}>
                              <Picker.Item label='Aggressive' value='0' />
                              <Picker.Item label='Calm' value='1' />
                        </Picker>
                        </InputPicker>
                    </InputGroup>

Gives the following error in console

Bad object: {
  "padding": 0,
  "fontSize": 17,
  "width": 300
}
Valid keys: [
  "width",
  "height",
  "top",
.....
] Check the render method of `Picker`.

NavTouchableIcon positioning is off on android

When setting the backgroundColor prop on the Button component, the button doesnt darken like it does when using a preset color.

with <Button backgroundColor='midgray'/> (second button is pressed):

with <Button backgroundColor='#e6e6e6'/> (second button is pressed) :

I believe it has to do with these lines: https://github.com/bmcmahen/panza/blob/master/components/panza/Base/Base.js#L131-L137

For instance, if I have a backgroundColor: transparent, darken doesn't work. Also ensure that we can provide a custom underlayColor prop in these circumstances.

Hello using panza 3.0.0-beta-1 on android. Having some issues with InputRow
InputRow default preloaded value "ssss" is not set, onChangeText works though and normal Input works fine.

  <InputRow
            value={'ssss'}
            onChangeText={() => false} />

Other issues: There are difficulties on styling label, especially if InputRow is not vertical. It's just small bold text.

master has bugs

v3 is completely different from v2, rewriting config by context doesn't work on v3. Only temp fix is using panza prop.

Examples folder contains examples for v3 and master, when readme covers v2.

InputToggle's onTintColor doesn't work. And a lot more small details I didn't cover.

It's a pity, cause I really like the idea of customizable stateless components.

• Add Item label appears unevenly when condensed
• ItemGroup showBottomBorder={false} also removes Dividers
• Something in the NavBar sets color='#111' to a non-text element.

• Allow users to supply their own prop -> style conversion functions, perhaps using a plugin architecture of some sort.
• Make themes responsive -- i.e., when the theme changes, perform setState on our HOC.

Can verify this was woking with 0.27.2.

Things like py, mt, etc., are still applied to the div when using react-native-web, and this now causes a warning from React. Ideally, we should remove all of the props from Base that are translated into styles. Not sure the most elegant way of doing this.

I'm getting that error using InputRow

Versions:

"react-native": "^0.34.0",
"panza": "^2.3.0",
"react-native-vector-icons": "^2.1.0",

By simply using the input as copied from the docs:

<InputRow
  placeholder='Basic Input'

  value={value}
  editable
  onChangeText={(text) => {
    console.log('change', text)
  }}
/>

Base should accept an inverted prop, that uses an inverted color scheme provided by our config. This will be useful when building menus or writing text over a dark background (or, conversely, over a white background if the predominant theme is dark).

https://github.com/js-org/dns.js.org

Let's see if the react-native builder supports symlinks first though...

https://github.com/wix/wml

it can be broken up into multiple smaller components which would be useful independently of this module

figure out the testing story..

http://hosain.net/2016/01/31/unit-testing-react-native-components.html

if this project becomes something bigger & better, and there are significant contributors like @HammadJ this repo should probably be moved from my namespace to its own org.

trying to run generate-docs script right now gives errors because of multiple exports in some components (Icon) and also because its trying to read the index.js files. Not too familiar with how react-docgen is setup and works.

generate-doc-json:

Error with path "components/panza/RowInput/RemovableInput.js": Error: Multiple exported component definitions found.
Error with path "components/panza/Text/index.js": Error: No suitable component definition found.

generate-doc-markdown:

Error: ENOENT: no such file or directory, open '/Users/hammadjutt/Dev/panza/scripts/../documentation/components/panza/RowInput/RevealingRow.js.md'

The usual way I do this is by calling this.refs.myInput.focus(), being the myInput a focusable element, like the normal TextInput.

As this are stateless components there is no way to attach a ref. Is there another way to focus the Input?

We can keep track of what components we feel should make the cut, here.

Elements

• Base
• Text
• Button
• Icon
• Divider
• Input
• Image - Fade on load, circular, width & height, cover as default resizeMode
• Loading
• CheckMark - a with toggle on / off state.

Views

• InputGroup
• TouchableRow
• InputRow
• InputExpandable
• InputToggle
• InputDatePicker
• SectionHeader
• TouchableInput (Rethink the difference between TouchableRow & TouchableInput)
• ErrorPage
• NavBar
• NavTitle
• NavTouchableText
• NavTouchableIcon
• SubNav
• Card, CardHeader - a simple card, much like that provided by material design.
• Grid - Wrapper around listview to make grids easier
• ButtonGroup - Deprecate VerticalButtonGroup. Allow groups of 2, or 3, with centered attributes.

Modules

• TabView - like that provided by material design.
• Popup - Generic Popup (Modal?)
• PopupMenu - Pop up menu component -- similar to ActionSheet, but cross-platform.
• ProgressBar - indicates progress, alternative to loading indicator
• ImageSwiper - component that takes an array of image sources and creates a horizontal, paged swiper/carousel
• ProgressiveImage - component that renders a default image (low res, could be blurred) and smoothly transitions to the high res image once it's loaded.

<ModalInput
value={dof}
label='Birthday'
modalId='personal_birthday'
placeholder={dof}
loading={loadingMemberInfo}
onDone={() => {
const date = moment(this.state.form.date).format('YYYY-MM-DD')
editMemberInfo('dof', date, 'personal_birthday')
}}
>
<InputDatePicker
expanded={this.state.focusDate}
date={this.state.form.date}
editable={this.state.focusDate}
value={moment(this.state.form.date).format('MMMM DD YYYY')}
onDateChange={this.handledate}
label='Birthday'
onToggleExpansion={() => {
LayoutAnimation.spring()
this.setState({ focusDate: !this.state.focusDate })
}}
/>
</ModalInput>

https://github.com/panza-org/panza/blob/master/documentation/InputDatePicker.md

I'm always manually adding style={{ borderTopWidth: 1, borderTopColor: '#eee' }}

we should have a border shorthand like bt, by, ie., like padding, margin.

I am using v3 of panza.
Text component doesn't render "g" as it should on android device.
And text in buttons is not centered vertically, now i have paddingBottom: 5 as a temp fix

either for base, or just buttons

Object.freeze can only be called on Objects is thrown on SubNav.js:93:0.

Since styles is not used at all, it should be removed. This also fixes the bug.

I'm running master with react-native 0.27 on an android simulator.

supplying a context from the app root isn't always an option in react native (i.e. when using multiple roots) and the current way of setting up the custom config options is pretty messy (relies on user remembering to Object.assign to default config).

I propose we have something like this where the user can call once anywhere in their application:

import panza from 'panza'

panza.configure({
  colors: {
    primary: '#505050',
    customColor: '#123456'
  }
})

Also, I think we should change how the size configs work. Instead of arrays, we should have objects with keys:

const fontSizes = {
  1: 48,
  2: 32,
  3: 24,
  4: 20,
  5: 17,
  6: 15,
  7: 12
}

This way users will be able to customize the font/line-height/scale configurations easier

Let me know what you think and I can put something together sometime soon.

The ErrorPage component does not respect the message property.

Looks like the value is just hard-coded in the component:

see components/panza/Pages/Error.js:

  render () {

    const {
      error,
      retry,
      message,
      isOffline,
      children,
      offlineMessage,
      detailMessage,
      ...other
    } = this.props

    return (
      <Base baseStyle={styles.container} {...other}>
        <View style={styles.messageContainer}>
          <Base pb={2}>
            <LargeText light textAlign='center'>
              Hmm, loading appears to be taking a while.
            </LargeText>

Hi there,
First, thanks for the amazing work! I was looking forward to a Rebass equivalent on RN and Panza seems to be an amazing library.
I'm wondering what's the status of this library. Is there a roadmap somewhere?

use 'tiny', 'small', 'large', 'giant' sizing consistently across components

I was testing performance with react-perf-tools yesterday and if I hadn't already optimized the container components with shouldComponentUpdate and immutable data, the Base > View took up the majority of wasted render time (calculated using Perf.printWasted()). This becomes a significant problem especially when you use the Base component everywhere as a replacement for View because of the nice syntax.

Here are the options we have that I could think of right off the bat:

• shouldComponentUpdate
• memoize calculation functions in Base (margins, paddings, colorStyle, radii, underlay). lodash memoize should work like a charm
• create a separate component that is more stripped down and light-weight as a replacement for View instead of having to use Base, but would still support the nice layout syntax (mt, p, flex, etc)

shouldComponentUpdate might help the situation, but could also make it even slower since it's an extra function that needs to be called on every base component. Will have to do some more testing to verify if it would help, but even if it would we shouldn't resort to using it if we don't have to. The library should be as performant as possible and we should leave the advanced tuning with things like shouldComponentUpdate to the user.

I think if the memoization works well the second point woudn't even be necessary. I'll try doing some benchmarking and see what combination of the options above works best

Can verify this was working on RN 0.27.2

I've been looking for a UI kit for react native and this project seems very promising.
Do you know if it supports react-native-web out of box currently?
If not, do you have any plans to do so?

I always use this one. it should have a toggle state

• support react-native-web out of the box
• add date-picker, toggle for the web
• create native version of RevealableRow
• border short-hand
• refactored Base component, with improved performance
• invert option
• refactor config styling api
• centralized config for all of the components
• fontWeights as an object
• consolidate sizing
• merge Text into TextBase
• custom props for sizes using custom validator
• more tests, especially for Base, TextBase, theming, hoc
• comb through all the old code