React Native: ScrollView and Layout Elements with flex - react-native

Question

Hi i'm trying to add a ScrollView but it doesn't work like expected.
If i add flex:1 to ScrollView then i can style the child elements but there is no scroll bar so i can't scroll.
If I remove flex:1 or change it to flexGrow then i have the scrollbar but the styles are broken on the child elements.
How i can add i ScrollView and the styles to the childs?
I need some Information why is it happen. Thank you.
import React, { useContext, useState, useEffect } from 'react';
import {
Text,
TextInput,
StyleSheet,
View,
TouchableOpacity,
Alert,
ScrollView,
} from 'react-native';
import { globalStyles } from '../styles/global';
import colors from '../styles/color';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';
import * as Animatable from 'react-native-animatable';
import Button from '../components/Button';
const SignInScreen = (props) => {
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.scrollViewContainer}>
<View style={styles.containerTop}>
<Text style={globalStyles.h1}>Login</Text>
</View>
<View style={styles.containerBottom}>
<View style={styles.viewAction}>
<FontAwesome name='user-o' color='#ccc' size={20} style={{ width: 20 }} />
<TextInput
style={[styles.input]}
placeholder="Your Email"
value={data.email}
autoCapitalize='none'
onChangeText={(val) => textInputEmailChange(val)}
/>
</View>
<View style={styles.viewAction}>
<FontAwesome name='lock' color='#ccc' size={20} style={{ width: 20 }} />
<TextInput
style={[styles.input]}
placeholder="Password"
value={data.password}
autoCapitalize='none'
secureTextEntry={data.secureTextEntry ? true : false}
onChangeText={(val) => handlePasswordChange(val)}
/>
<TouchableOpacity onPress={updateSecureTextEntry}>
{data.secureTextEntry ? <Feather name='eye-off' color='#ccc' size={20} style={{ width: 20 }} />
: <Feather name='eye' color='#80c904' size={20} style={{ width: 20 }} />
}
</TouchableOpacity>
</View>
{uiErrors.errors ? (<Text style={styles.errorMsg}>{uiErrors.errors}</Text>) : (<Text></Text>)}
<Button
content={'Login'}
buttonStyles={{ marginVertical: 20, paddingVertical: 15, }}
onPress={handleLogin}
/>
<Button
content={'Login'}
buttonStyles={{ marginVertical: 20, paddingVertical: 15, }}
onPress={handleLogin}
/>
<Button
content={'Login'}
buttonStyles={{ marginVertical: 20, paddingVertical: 15, }}
onPress={handleLogin}
/>
<Button
content={'Login'}
buttonStyles={{ marginVertical: 20, paddingVertical: 15, }}
onPress={handleLogin}
/>
<Button
content={'Login'}
buttonStyles={{ marginVertical: 20, paddingVertical: 15, }}
onPress={handleLogin}
/>
<Button
content={'Create an account'}
buttonStyles={{ backgroundColor: 'transparent' }}
textStyles={styles.signUpBtnText}
onPress={() => { navigation.navigate('SignUp'); }}
/>
</View>
</ScrollView>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.light_theme.splashgb,
},
scrollViewContainer: {
// flex: 1,
// flexGrow: 1,
// justifyContent: 'space-between'
},
containerTop: {
flex: 1, // it add this only if flex:1 is added to scrollViewContainer but the then i can't scroll.
padding: 25,
backgroundColor: 'blue'
},
containerBottom: {
flex: 1,
padding: 25,
flexDirection: 'column',
backgroundColor: colors.light_theme.container,
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
},
viewAction: {
flexDirection: 'row',
width: '100%',
borderBottomWidth: 1,
borderBottomColor: colors.light_theme.lightgray,
paddingVertical: 0,
alignItems: 'center',
},
input: {
flex: 1,
padding: 15,
},
text: {
color: colors.light_theme.white,
},
errorMsg: {
color: colors.light_theme.errorMsg,
fontSize: 14,
marginVertical: 5,
},
signUpBtnText: {
color: colors.light_theme.primary
}
});
export default SignInScreen;

Answer 1

1: Put your ScrollView inside a View:
... <View><ScrollView> ... </ScrollView></View> ...
2: Remove "flex:1" from your scrollViewContainer style so it will be only with felxGrow and justifyContent