Documents StyleSheet.flatten()

[ManasJayanth]

Indicates the purpose and an alternative use for the method too.

[facebook-github-bot]

By analyzing the blame information on this pull request, we identified @spicyj, @corbt and @vjeux to be potential reviewers.

[vjeux]

Thanks! This is super useful.

Do you mind adding a big warning at the top that this is not a recommended method and is an escape hatch. Style objects being opaque is required if we want to do optimizations down the line or work on the web by outputting classes, if you use this method, you are going to break this assumption.

[facebook-github-bot]

@prometheansacrifice updated the pull request.

[ManasJayanth]

@vjeux Do you think the following is valid use case?

// Child
render() {
  const overridingViewStyles = StyleSheet.flatten(this.props.style).viewStyles; //Ignore the fact that I could have cached it somewhere else instead of the render method. Bear with it for brevity.
  return <View style={[styles.defaultStyles, overridingViewStyles]} />
}

//Parent
render() {
  return <Child style={styles.childStyles} />
}

Basically, individual components nested within the child component, obtain their styles from style property. This would be possible only if the child component had access to the style objects passed by the parent.

[vjeux]

You can do more simply:

// Child
render() {
  return <View style={[styles.defaultStyles, this.props.style]} />
}

[vjeux]

You don't need to flatten it at every step of the way, and really, you don't want to flatten it at every step of the way which is actually pretty expensive. You just want to forward it all the way down.

If we can even get it unflattened all the way to React, then we can build good dev tools where we can display how the styles were combined and overridden like we have on web.

[vjeux]

@facebook-github-bot shipit

[facebook-github-bot]

Thanks for importing. If you are an FB employee go to Phabricator to review.

[ManasJayanth]

@vjeux The issue with style={[styles.defaultStyles, this.props.style]} was that sometimes you have styles that apply to different children components (and specifically to those alone)
Say for example a child is a simple Text nested inside a View. When I pass styles to Child like this,

<Child style={styles.childStyles} />

both View and Text obtain all the styles, which can cause warnings. There needs to be a way to separate out the style passed on to Child to its children Text and View

[sophiebits]

It is traditional to pass them as separate props.

<Component
  style={....}
  childStyle={...} />

Then you can just use props.childStyle.

[vjeux]

I tried to document this use case here: http://facebook.github.io/react-native/docs/style.html#content

[ManasJayanth]

Thank you for your inputs @spicyj @vjeux

[ManasJayanth]

@vjeux @spicyj I noticed that style.length is not cached in the for loop (here). Replace it with for (var i = 0, ii = style.length; i < ii; ++i) {?

[satya164]

@prometheansacrifice Why not l instead of ii?

[ManasJayanth]

@satya164 Sure. But open a new PR for this?

[satya164]

@prometheansacrifice Why not :)

[ManasJayanth]

@satya164 Did so here :)