Skip to content

Fixes #14. Children, if present, are required to be of type string, node, or element.#22

Closed
Andrewpk wants to merge 2 commits intoAPSL:masterfrom
Andrewpk:master
Closed

Fixes #14. Children, if present, are required to be of type string, node, or element.#22
Andrewpk wants to merge 2 commits intoAPSL:masterfrom
Andrewpk:master

Conversation

@Andrewpk
Copy link

@Andrewpk Andrewpk commented Apr 30, 2016

Fixes #14
Children aren't required - so an empty button is allowed, but if they are present they must be of types:

        React.PropTypes.string,
        React.PropTypes.node,
        React.PropTypes.element

This should allow nesting of custom elements (icons) inside buttons. This is a more accommodating fix than what was presenting in code by #15 and seems to line up more with @alvaromb's desires for this change.

Here's a screenshot of the proposed solution working with react-native-vector-icons:

screen shot 2016-04-30 at 10 40 34 am

And here's the code for the button:

<Button style={styles.button} textStyle={styles.buttonText}>
    <Text>WAT</Text>
    {pizzaIcon}
    <Text> WAT 2 </Text>
</Button>

… must be of type string, node, or element. This should allow nesting of custom elements (icons) inside buttons.
@alvaromb
Copy link
Collaborator

alvaromb commented May 2, 2016

Thanks for the PR @Andrewpk!

It looks great so let me run a couple of tests and I'll merge it as soon as I can.

@alvaromb
Copy link
Collaborator

alvaromb commented May 2, 2016

Will merge tomorrow! Thanks for the patience @Andrewpk 😉

@Andrewpk
Copy link
Author

Andrewpk commented May 2, 2016

No problem @alvaromb. I worked on another change yesterday in a personal branch that would remove the singular text wrapper and allow individual elements to be rendered in their own views within the button. This allows for placement styles (flex, margin, padding, etc.) on individual components within a button. If that sounds like something you'd like to include I'll submit a PR for that when I'm done as well.

@alvaromb
Copy link
Collaborator

alvaromb commented May 2, 2016

Yes, if we have to integrate more than just a string that could fit perfectly.

@alvaromb
Copy link
Collaborator

alvaromb commented May 3, 2016

Hello @Andrewpk. Can't merge this PR because the example doesn't run. Text component can't have anything but raw string, another Text or an Image, so this code doesn't work:

<Button
  style={styles.buttonStyle1} textStyle={styles.textStyle}
  onPress={() => {
     console.log('world!')
  }}>
  <View>
    <Text>Hello</Text>
  </View>
</Button>

screen shot 2016-05-03 at 16 19 22

The solution should be something like wrapping everything into a parent view, not a text, and discriminate between raw strings and a React node. I can plan to develop something like that, but it would be done/merged during the next week.

@Andrewpk
Copy link
Author

I'm going to close this PR in favor of #29

@Andrewpk Andrewpk closed this May 11, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Can we lossen up props.children check?

2 participants