How to use the styled-components/native.ScrollView function in styled-components

const Wrapper = styled.View.attrs(
  {
    // colors: ['#53B1FF'],
    // start: { x: 0, y: 1 },
    // end: { x: 1, y: 1 },
  },
)`
  flex-direction: column;
  justify-content: center;
  background-color: rgb(56,101,249);
  padding-top: 10;
  padding-horizontal: 18;
  padding-bottom: 20;
`;

const PillsContainer = styled.ScrollView.attrs({
  horizontal: true,
  showsHorizontalScrollIndicator: false,
})`
  flex-direction: row;
  ${/* justify-content: space-around;
  align-items: center; */ ''}
  margin-horizontal: -6;
  margin-top: 18;
`;

const Pill = styled.TouchableOpacity`
  padding: 6px 18px;
  align-items: center;
  border-radius: 20px;
  border: 2px solid ${props => props.theme.colors.secondaryColor};
  margin-right: 10;

import styled from 'styled-components/native';
import { AsyncStorage, Dimensions, Keyboard, Alert, Platform } from 'react-native';
import { Navigator, Navigation } from 'react-native-navigation';
import { graphql, compose } from 'react-apollo';
import { sha256 } from 'react-native-sha256';

import Description from './Components/Description';
import CodeInput from './Components/CodeInput';
import Button from './Components/Button';

import REQUEST_VERIFICATION from '../../graphql/mutations/requestVerification';
import REQUEST_CODE from '../../graphql/mutations/requestCode';
import GET_PROCEDURE from '../../graphql/queries/getProcedure';
import F_PROCEDURE_VERIFIED from '../../graphql/fragments/ProcedureVerified';

const ScrollView = styled.ScrollView.attrs(() => ({
  contentContainerStyle: {
    alignItems: 'center',
    justifyContent: 'center',
  },
}))`
  background-color: #fff;
`;

class Code extends Component {
  static navigatorStyle = {
    // navBarHidden: true,
    orientation: 'landscape',
  };

  state = {
    height: Dimensions.get('window').height,

AsyncStorage,
  Keyboard,
} from 'react-native'
import styled from 'styled-components/native'
import { NavigationInjectedProps } from 'react-navigation'
import gql from 'graphql-tag'
import { Routes } from '../../config/Router'
import KeyboardSpacer from 'react-native-keyboard-spacer'

const { width } = Dimensions.get('window')

const Container = styled.View`
  flex: 1;
`

const ScrollWrapper = styled.ScrollView.attrs({
  contentContainerStyle: {
    alignItems: 'center',
  },
})`
  background-color: ${({ theme }) => theme.colors.primary};
`

const Wrapper = styled(SafeAreaView)`
  flex: 1;
  background-color: ${({ theme }) => theme.colors.primary};
  align-items: center;
`

const Logo = styled.Image.attrs({
  source: ({ theme }) => theme.images.logo,
})`

import styled from 'styled-components/native';

import Loading from '../../widget/Loading';
import Text from '../../widget/Text';
import Icon from '../../widget/Icon';
import Image from '../../widget/Image';

export const MainScreenView = styled.ScrollView`
  background-color : ${props => props.theme.color.pirmary};
  paddingVertical: 10;
`;

export const BackgroundImage = styled.ImageBackground`
  width: 100%; 
  height: 100%;
`;

export const CoverLabel = styled(Text).attrs({
  fontWeight: 'normal',
})`
  padding-top: 5;
  padding-bottom: 50;
  font-size: 13;
  marginHorizontal: 20;

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components/native';

const Wrapper = styled.ScrollView`
  flex: 1;
`;

const Text = styled.Text``;

const Content = ({ description }) => (
  
    
  
);

Content.defaultProps = {
  description: '',
};

Content.propTypes = {

datenschutz6Head,
  datenschutz6Text,
  datenschutz7Head,
  datenschutz7Text,
  datenschutz8Head,
  datenschutz8Text,
  datenschutz9Head,
  datenschutz9Text,
  datenschutz10Head,
  datenschutz10Text1,
  datenschutz10Text2,
  datenschutz10Text3,
  datenschutz10Link,
} from './content';

const ScrollWrapper = styled.ScrollView`
  flex: 1;
  background-color: #ffffff;
`;

const Wrapper = styled.View`
  flex: 1;
  padding-top: 30;
  padding-horizontal: 18;
`;

const Section = styled.Text`
  font-weight: 600;
  font-size: 17;
  color: #8f8e94;
  padding-bottom: 3;
`;

`;

export const CardBody = styled.View`
  padding-top: 10px;
  flex-direction: row;
  justify-content: center;
`;

export const StatementSection = styled.View`
  justify-content: space-between;
  flex-direction: row;
  padding: 0 5%;
  margin-bottom: 5px;
`;

export const AllStatements = styled.ScrollView.attrs({
  horizontal: true,
  contentContainerStyle: { paddingLeft: '5%', paddingRight: 20 },
  showHorizontalScrollIndicator: false,
})`
  margin-top: 10px;
`;


export const IndividualStatement = styled.TouchableOpacity`
  height: 100px;
  width: 300px;
  background-color: #7770eb;
  border-radius: 6px;
  flex-direction: row;
  margin-right: 10px;

import styled from "styled-components/native"

export const Container = styled.ScrollView`
  flex: 1;
  background-color: #f0f0f0;
`

export const HeaderContainer = styled.View`
  background-color: white;
  padding: 32px 16px;
`

export const HeaderCardsCount = styled.Text`
  font-weight: bold;
  color: #9e9e9e;
  margin-bottom: 12px;
`

export const HeaderTitle = styled.Text`

import { Platform, SegmentedControlIOS, Dimensions } from 'react-native';
import PropTypes from 'prop-types';
import styled from 'styled-components/native';
import { Navigation, Navigator } from 'react-native-navigation';

import List from './List';
import Header from './Header';

Navigation.registerComponent('democracy.VoteList.Header', () => Header);

const Screen = styled.View`
  flex: 1;
  background-color: #ffffff;
`;

const ScrollView = styled.ScrollView.attrs(() => ({
  horizontal: true,
  pagingEnabled: true,
}))``;

const SegmentControlsWrapper = styled.View`
  background-color: #4494d3;
  height: 50;
  padding-left: 16;
  padding-right: 16;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 10;
`;

class VoteList extends PureComponent {
  static navigatorStyle = {