robinpowered/glamorous-native

How to style ScrollView prop contentContainerStyle

Closed this issue · 4 comments

Currently I do:

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

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

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.

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.

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.

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