I have a component that displays a mapped array within a container. However, if I expand the array to a larger length, I want it to scroll vertically. I attempted to do this by using ScrollView, but it keeps breaking my components. Can anyone help solve this for me?
This is how my component looks right now:
This is my CSS code:
const Container = styled.View` padding: 10px; padding-top: 30px; padding-bottom: 30px; width: 100%; height: 50% position: relative; background: ${({theme}) => theme.colors.background}}; `;const InnerContainer = styled.View` border: ${({theme}) => theme.colors.border}}; border-radius: 5px; flex-direction: column; padding: 10px; width: 100%; height: 100% background: ${({theme}) => theme.colors.background}}; `;const MainContentContainer = styled.View` flex-direction: column; padding: 10px; width: 100%; height: 70%; background: ${({theme}) => theme.colors.background}}; `;const OrderContainer = styled.View` flex-direction: row; flex-wrap: wrap; flex-grow: 1; width: 100%; height: 100%; padding: 10px; justify-content: center; background: ${({theme}) => theme.colors.red}};`;const TitleText = styled(Text).attrs(() => ({ type: TextTypes.H2,}))` font-weight: bold; text-align: center; width: 100%; color: ${({theme}) => theme.colors.text};`;const SubText = styled(Text).attrs(() => ({ type: TextTypes.H4, numberOfLines: 2,}))` width: 100%; text-align: center; color: ${({theme}) => theme.colors.mediumGrayText};`;const OrderTextContainer = styled.View` flex-direction: column; padding: 10px; background: ${({theme}) => theme.colors.background}}; position: relative;`;const OrderText = styled(Text).attrs(() => ({ type: TextTypes.H4,}))` border: ${({theme}) => theme.colors.border}}; background: ${({theme}) => theme.colors.background}}; color: ${({theme}) => theme.colors.text}; text-align: center; padding-top: 5px; width: 35px; height: 35px; border-radius: 999px; border-width: 3px;`;const FooterContentContainer = styled.View` flex-direction: row; padding: 10px; width: 100%; height: 30%; background: ${({theme}) => theme.colors.background}}; border-top-color: ${({theme}) => theme.colors.border}}; border-top-width: 1px; `;const PointsTextContainer = styled.View` flex-shrink: 1; padding: 10px; background: ${({theme}) => theme.colors.background}};`;const PointsText = styled(Text).attrs(() => ({ type: TextTypes.H4, numberOfLines: 2,}))` width: 100%; text-align: left; color: ${({theme}) => theme.colors.text};`;const BoldedPointsText = styled(Text).attrs(() => ({ type: TextTypes.H4, numberOfLines: 2,}))` width: 100%; text-align: left; color: ${({theme}) => theme.colors.text}; font-weight: bold;`;const BurgerIconContainer = styled.View` padding: 10px; padding-top: 12px; background: ${({theme}) => theme.colors.background}};`;const BurgerIcon = styled(Icon).attrs(() => ({ name: 'hamburger', size: 22,}))` border: ${({theme}) => theme.colors.border}}; color: ${({theme}) => theme.colors.greyBorder}; text-align: center; padding-top: 5px; width: 35px; height: 35px; border-radius: 999px; border-width: 3px;`;const LockIcon = styled(Icon).attrs(() => ({ name: 'lock', size: 25,}))` padding: 4px; text-align: center; color: ${({theme}) => theme.colors.text};`;const IconContainer = styled.View` width: 40px; height: 40px; top: 12px; left: 48%; position: absolute; background: ${({theme}) => theme.colors.background}; border: ${({theme}) => theme.colors.border}}; border-radius: 20px;`;const CrownIcon = styled(Icon).attrs(() => ({ name: 'crown', size: 22,}))` width: 35px; height: 35px; padding-top: 5px; text-align: center; background: ${({theme}) => theme.colors.background}}; border: ${({theme}) => theme.colors.primary}}; color: ${({theme}) => theme.colors.primary}; border-radius: 999px; border-width: 3px; position: absolute; left: 10px; bottom: 10px;`;Here is how I nested the CSS:
<Container {...props}><InnerContainer><MainContentContainer><TitleText>{`Unlock ${statusTier} Status`}</TitleText><SubText>{`Just order ${orderCount} times this month.`}</SubText><OrderContainer>{displayOrders()}</OrderContainer></MainContentContainer><FooterContentContainer><BurgerIconContainer><BurgerIcon /></BurgerIconContainer><PointsTextContainer><PointsText> {`You'll earn `}<BoldedPointsText>{`${points} points`}</BoldedPointsText> {` per dollar when you unlock ${statusTier} Status.`}</PointsText></PointsTextContainer></FooterContentContainer></InnerContainer><IconContainer><LockIcon /></IconContainer></Container>However, when I make the OrderContainer into a scrollview, it breaks and looks like this with the ability to scroll:
How do I make it look the like the original but with a vertical scroll?