glamorous-native icon indicating copy to clipboard operation
glamorous-native copied to clipboard

How to style ScrollView prop contentContainerStyle

Open slorber opened this issue 8 years ago • 4 comments

Currently I do:

    <ScrollView
      width="100%"
      display="flex"
      contentContainerStyle={{ alignItems: "center" }}
    >

Is there a way to do that with glamorous native only?

slorber avatar Jun 14 '17 17:06 slorber

This is the case in all scrollable components currently (FlatList, ListView, ScrollView, ...). I’m thinking how we could solve this in an elegant way. Just letting people use a custom style prop name isn’t the solution because it has both style and contentContainerStyle props.

JodusNodus avatar Jun 17 '17 12:06 JodusNodus

There is no current way to do this via glamorous-native

This is an interesting problem since the ScrollView has two style entry points, but the ScrollView itself is the primary component, and the "content container" is a secondary one.

Off the top of my head, I can't think of a straightforward approach that glamorous-native could introduce here. Interested in hearing your thoughts.

atticoos avatar Jun 17 '17 23:06 atticoos

We could use prefixes to style de container but it can be quite messy.

I don't exactly know all the potential optimizatons that goes under the hood of this lib but one solution which could work but wouldn't be the most optimized would be using something like @threepointone suggested here: https://gist.github.com/threepointone/ec7febc17f02fd91dcbabc087519088e

The idea could be simply that glamorous-native components (like ScrollView) automatically transform styles props (both style and contentContainerStyle) to stylesheet if they are inline styles.

slorber avatar Jun 20 '17 07:06 slorber

also worth mentionning: new ListView.DataSource did not work for me :)

slorber avatar Jul 07 '17 15:07 slorber