Support pagingEnabled property by CSS child selector

[ArrayZoneYour]

Is there an existing request?

• I have searched for this request

Describe the feature request

pagingEnabled has been implemented #1212 by wrapping original children with pagingEnabledChild style

const children =
      hasStickyHeaderIndices || pagingEnabled
        ? React.Children.map(this.props.children, (child, i) => {
            const isSticky =
              hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1;
            if (child != null && (isSticky || pagingEnabled)) {
              return (
                <View
                  style={[
                    isSticky && styles.stickyHeader,
                    pagingEnabled && styles.pagingEnabledChild
                  ]}
                >
                  {child}
                </View>
              );
            } else {
              return child;
            }
          })
        : this.props.children;

It only works when children is directly written in ScrollView.

✅ Supported

<ScrollView horizontal style={{ width: Dimensions.get('window').width }} pagingEnabled>
    <View style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}>
      <Text>Page 0</Text>
    </View>
    <View style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}>
      <Text>Page 1</Text>
    </View>
    <View style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}>
      <Text>Page 2</Text>
    </View>
</ScrollView>

❌ Unsupported

const Children = () => (
  <>
    <View style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}>
      <Text>Page 0</Text>
    </View>
    <View style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}>
      <Text>Page 1</Text>
    </View>
    <View style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}>
      <Text>Page 2</Text>
    </View>
  </>
)

<ScrollView horizontal style={{ width: Dimensions.get('window').width }} pagingEnable>
    <Children />
</ScrollView>

According to W3C spec (https://www.w3.org/TR/css-scroll-snap-1/), we only need to set scroll-snap-type style to ScrollView element and scroll-snap-align style to child elements. It's more easier with CSS selector as follows:

<ScrollView horizontal style={{ width: Dimensions.get('window').width }} testID="paging-enable-x">
    <Children />
</ScrollView>

[data-testid='paging-enable-x'] {
  scroll-snap-type: x mandatory;
}

/* internal div is generated by `contentContainer` in `ScrollView#render()` */
[data-testid='paging-enable-x'] > div > div {
  scroll-snap-align: start;
}

Currently, I only found style generation from https://github.com/necolas/styleq and React JSX inline style, will it acceptable to involve css selector to archive some native features like pagingEnable / snapToInterval / snapToAlignment ?