React Native: How to center view inside a Scrollview

Question

I'm using React Native and I'm having trouble trying to center the view. The view keeps staying at the top of the screen. contentContainerStyle={{ justifyContent: 'center', alignItems: 'center' } doesn't work

This is my style.js

export const Container = styled.View`
    flex: 1;
    background-color: ${empty};
`;

export const ImageBackgroundContainer = styled.ImageBackground`
    flex: 1;
    justify-content: center;
    align-items: center;
    padding-top: ${StatusBarHeight + 10}px;
`;

export const ScrollViewContainer = styled.ScrollView`
    flex: 1;
    background-color: ${red};
    height: 100px;
    width: 100%;
`;

export const InnerContainer = styled.View`
    flex: 1;
    align-items: center;
    justify-content: center;
    background-color: ${white};
    border-radius: 25px
    padding: 20px;
`;

This is the layout

const Signup = () => {
    return (
        <Container>
            <ImageBackgroundContainer resizeMode='cover' source={require('./../assets/LoginBackground.jpg')}>        
                <ScrollViewContainer contentContainerStyle={{ justifyContent: 'center', alignItems: 'center' }}>
                    <InnerContainer>
                        <Text>Text Input Here</Text>
                    </InnerContainer>
                </ScrollViewContainer>
            </ImageBackgroundContainer>
        </Container>
    );
}

This is how the interface looks like

Answer 1

Add flex:1 to your contentContainerStyle :)