Okay, so I have a problem where when I press the text input to add a user the app dont scroll all the way down as you can se in the second picture. I have some padding on the input View wrapper "the red color" but when I press the input it scrolls all the way to input and removes some of the border color and it just looks ugly.
How do I fix so that it scroll all the way down with the padding?
My code for the file
CSS
logoWrapper: {
position: 'relative',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: 120
},
logo: {
color: 'white',
textAlign: 'center',
fontSize: 55,
fontFamily: 'JosefinSans-BoldItalic',
position: 'absolute',
zIndex: 2,
},
back: {
color: 'black',
textAlign: 'center',
fontSize: 55,
fontFamily: 'JosefinSans-BoldItalic',
position: 'absolute',
top: '50%',
transform: [{ translateY: -50 }],
marginTop: 20,
},
container: {
flex: 1,
backgroundColor: '#303030',
},
taskWrapper: {
paddingHorizontal: 20,
},
textSection: {
fontSize: 24,
fontWeight: 'bold',
},
items: {
marginTop: 30,
justifyContent: 'center',
alignItems: 'center',
},
writeTaskWrapper: {
backgroundColor: 'red',
paddingVertical: 20,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center'
},
addText: {
fontFamily: 'JosefinSans-Regular',
color: 'white',
fontSize: 40,
position: 'absolute',
top: -5,
},
addPlayer: {
fontFamily: 'JosefinSans-Regular',
fontSize: 13,
color: 'white'
},
input: {
paddingVertical: 15,
width: 200,
paddingHorizontal: 25,
backgroundColor: '#333',
borderRadius: 60,
borderColor: '#C0C0C0',
borderWidth: 1,
color: 'white',
height: 60,
},
addWrapper: {
width: 60,
height: 60,
backgroundColor: '#333',
borderRadius: 60,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#C0C0C0',
color: 'white',
borderWidth: 1,
},
startWrapper: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center'
},
startButton: {
padding: 15,
backgroundColor: '#f06e6e',
borderRadius: 10,
borderColor: 'white',
borderWidth: 2,
marginTop: 20,
width: 250,
justifyContent: 'center',
alignItems: 'center',
},
startText: {
color: 'white',
fontSize: 20,
fontFamily: 'JosefinSans-BoldItalic',
},
changeLang: {
position: 'absolute',
top: 10,
right: 10,
zIndex: 10,
},
langStyle: {
color: 'white',
fontSize: 12,
fontFamily: 'JosefinSans-BoldItalic',
borderRadius: 10,
textTransform: 'capitalize',
},
debug: {
position: 'absolute',
top: 10,
left: 10,
zIndex: 10,
}
APP js file
return (
<View style={styles.container}>
<View style={styles.changeLang}>
<TouchableOpacity onPress={() => changeLang()}>
<Text style={styles.langStyle}>{lang.lang}</Text>
</TouchableOpacity>
</View>
<ScrollView style={styles.container} keyboardShouldPersistTaps={'handled'} enableAutoAutomaticScroll={false}>
<FadeInView>
<View style={styles.logoWrapper}>
<Text style={styles.logo}>
PartyTime
</Text>
<Text style={styles.back}>
PartyTime
</Text>
</View>
</FadeInView>
<View style={styles.taskWrapper}>
<View style={styles.startWrapper}>
{players.length > 0 ? <TouchableOpacity onPress={() => startGame()} style={styles.startButton}>
<Text style={styles.startText}>Start game</Text>
</TouchableOpacity> : <Text style={styles.addPlayer}>Add a player to start the game</Text>}
</View>
<View style={styles.items}>
{
players.map((item, index) => {
return (
<TouchableOpacity key={index} onPress={() => dispatch(removePlayer(index))}>
<Users text={item} />
</TouchableOpacity>
)
})
}
<View style={styles.writeTaskWrapper}>
<TextInput style={styles.input} placeholder={'Add a player'} placeholderTextColor="white"
value={playerName} onChangeText={text => setPlayerName(text)} />
<TouchableOpacity onPress={() => { dispatch(addPlayer(playerName)); setPlayerName('') }} >
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</ScrollView>
</View>
);
