ScrollView: overflow style is getting overridden

[z0al]

The problem

I have a simple ScrollView component that looks like this:

function Scrollable(props) {
    return (
        <ScrollView
            style={styles.view}
        ></ScrollView>
    );
}

const styles = StyleSheet.create({
    view: {
        // This style is getting overridden by "overflow-y: auto; overflow-x: hidden"
        overflow: 'scroll'
    }
});

However, my style is getting overridden by other classes:

How to reproduce

Simplified test case: https://codesandbox.io/s/react-native-kxit2

Steps to reproduce: Use the same sample above and check the stylesheet output

Expected behavior

I'm expecting the styles passed to the style attribute should always take precedence (unless the component internally does override s) to internal styles.

Environment (include versions). Did this work in previous versions?

• Did this work in previous versions? I don't know.
• React Native for Web (version): 0.11.7
• React (version): 16.9.0
• Browser: Any

Notes:

• To work around this I have to pass {overflow: 'scroll'} directly to the <ScrollView> component (i.e without using StyleSheet.create API).
• Or use overflowY instead of overflow but TypeScript will complain.
• Also, I'm not sure if this is actually the intended behavior of <ScrollView> or not, suggestions are welcome.

[giuseppeg]

This behavior is correct, longhand properties are more specific than shorthand. Probably react native for web could use the shorthand for the defaults overflow: hidden auto.

[swyxio]

interesting. would you accept a PR to fix?

[giuseppeg]

I think that the shorthand form is discouraged because of this resolution mechanism.

longhand properties are more specific than shorthand

Imagine if we fix the primitive by switching to the shorthand form and then we create a wrapper which sets overflowY: 'scroll' and accepts a style prop for overrides. The consumer passes style={{ overflow: 'hidden' }} and all of the sudden we have the same issue that the OP reported.

Eventually it is @necolas' call because he has more context (iirc the old resolution mechanism was a bit different and probably wouldn't result in this *bug*)

[swyxio]

i see. in what situations would RNW create such a wrapper? is this a common scenario?

[necolas]

This could be avoided if I change how ScrollView is built, but you probably shouldn't be using overflow at all on ScrollView, as it's not support in React Native and the ScrollView has the horizontal prop for configuring the scroll direction (doesn't support both directions at once).

[fadak0828]

I met same issue. In my case, using a styled component solved it.

function Scrollable(props) {
    return (
        <StyledScrollView/>
    );
}

const StyledScrollView = styled.ScrollView`
        overflow-x: scroll;
        overflow-y: scroll;
`;

I don't know why this works😂

[avlonder]

I met same issue. In my case, using a styled component solved it.

function Scrollable(props) {
  return (
      <StyledScrollView/>
  );
}

const StyledScrollView = styled.ScrollView`
        overflow-x: scroll;
        overflow-y: scroll;
`;

I don't know why this works

Thanks! Unfortunately, I tried this for a horizontal FlatList, but it doesn't work. Also, explicitly appending {overflow: 'visible'} to the style property did not work. Any ideas?

edit: I'm talking about react-native, not react-native-web

[stuckj]

@avlonder, I don't know what use case you're having problems with. But, in my case, I had a margin on my scroll view and wanted a small icon that overlaps the margin (via negative margin) to not get clipped. My only workaround was to wrap the contents with another view, take the margin out of the scrollview and put it on this wrapper view, and set its overflow to be visible. This achieved the same visual affect.

Not sure if that helps you in your case, but thought I'd share.