Display: contents

[natew]

Introduction

I've run into an issue trying to compose <Pressability /> without breaking parent styles. One way to fix that is exporting the hook, but that does require quite a bit of cajoling on my end to collect props and pass them around properly.

Another solution is having display: contents work on react native. This would be a real help actually in a few areas, and to me is preferable.

[kelset]

👋 there - as stated in the README and the issue template, this repo is for long-form discussions. Yours seems more a question for StackOverflow instead.

[natew]

@kelset, isn't StackOverflow more for figuring out workarounds or getting code examples?

Display contents would have to be implemented on the layout/flexbox level, so it would need to be supported by the React Native engine itself. Seems like discussing support for that would be best at home here, as this is a proposal for changing and adding a feature to React Native itself and not anything to do with existing features.

It's also a pretty cool feature as it would probably save a lot of hassle in terms of composablity. For example using <Pressable /> around a view you have today breaks composability:

function MyButton(props: ViewProps) {
   return (
      <Pressable style={{  ...grabJustLayoutAffectingProps(props.style) }}>
        <MyIcon />
        <View style={[{ ...myCustomStyles }, grabNonLayoutAffectingProps(props.style)]}>
           {props.children}
        </View>
     </Pressable>
   )
}

As you can see in this example, you have quite a weird problem now with composability. You'd have to implement grabJustLayoutAffectingProps and grabNonLayoutAffectingProps which is quite a challenge. Meanwhile with display: contents you could do:

function MyButton(props: ViewProps) {
   return (
      <Pressable style={{ display: 'contents' }}>
        <MyIcon />
        <View style={[{ ...myCustomStyles }, props.style]}>
           {props.children}
        </View>
     </Pressable>
   )
}

And no longer have to worry that your position absolute, or shadow, or margin, etc, will break.

[kelset]

I hope that you can understand that by reading your original comment it looked more like that you were asking for a workaround to fix your "issue trying to compose without breaking parent styles".

I'll reopen, maybe the FB team can give you feedback