ScrollView child layout must be applied through the contentContainerStyle prop

Version

1.4.6

Reproduction

import styled from 'styled-components/native';

const Scroll = styled.ScrollView`
  align-items: 'center';
`;

this code throws an error

ScrollView child layout (["alignItems"]) must be applied through the contentContainerStyle prop.

Expected Behavior

I’d expect styled components would apply the property to the correct element.

Actual Behavior

I ended up writing

const styles = StyleSheet.create({
  center: {
    alignItems: 'center',
  },
});

<ScrollView contentContainerStyle={styles.center}>
    {children}
</Scroll>

[xsokev]

I was able to perform this using the following:

const Scroll = styled.ScrollView.attrs({
  contentContainerStyle: props => {
    return {
      alignItems: 'center',
      justifyContent: 'center'
    }
  }
})``

[kolkol69]

If you are using react native with typescript, you can use it like this

const StyledScrollView = styled.ScrollView.attrs(() => ({
  contentContainerStyle: {
    alignItems: 'center',
  },
}))``;