Center button at bottom center of view - css

Question

I'm trying to center the next button at the bottom of the page. Instead of being at the bottom of the page it's stick in the middle of the page. Any help?
Screen shot:
Screen Shot
export default class Type extends Component {
constructor(props) {
super(props)
this.state = {
selected: 'user'
}
}
_select(selected) {
this.setState({ selected })
}
_renderButton(type, photo, width, height, buttonStyles) {
const { selected } = this.state
if (selected === type)
return (
<TouchableOpacity style={ styles.buttonSelected } onPress={ e => this._select(type) }>
<Image source={ photo } style={[ styles.buttonPhoto, buttonStyles ]} width={ width } height={ height } />
</TouchableOpacity>
)
return (
<TouchableOpacity style={ styles.button } onPress={ e => this._select(type) }>
<Image source={ photo } style={[ styles.buttonPhoto, buttonStyles ]} width={ width } height={ height } />
</TouchableOpacity>
)
}
_renderText(text, type, textStyles) {
const { selected } = this.state
if (selected === type)
return <Text style={[ styles.text, styles.textSelected, textStyles ]}>{ text }</Text>
return <Text style={[ styles.text, textStyles ]}>{ text }</Text>
}
render() {
return (
<ScrollView style={ styles.container }>
<Text style={ styles.question }>Who are you?</Text>
<View style={ styles.buttons }>
{ this._renderButton('user', boy, 64, 64, { top: 15, left: 20 }) }
{ this._renderButton('carnival', ticket, 72, 72, { top: 10, left: 15 })}
</View>
<View style={ styles.texts }>
{ this._renderText('Attendee', 'user', { left: -12 }) }
{ this._renderText('Carnival', 'carnival', { left: 8 }) }
</View>
<TouchableOpacity style={ styles.nextButton }>
<Text style={ styles.nextText }>
Next Step
</Text>
</TouchableOpacity>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
question: {
paddingTop: '30%',
textAlign: 'center',
color: '#ccc',
fontSize: 24,
marginBottom: 30
},
buttons: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center'
},
button: {
width: width/3,
height: width/3,
borderRadius: (width/3)/2,
borderWidth: 1,
borderColor: '#e6e6e6',
marginLeft: 10,
marginRight: 10
},
buttonPhoto: {
position: 'relative'
},
buttonSelected: {
width: width/3,
height: width/3,
borderRadius: (width/3)/2,
borderWidth: 1,
borderColor: '#ff9972',
marginLeft: 10,
marginRight: 10
},
texts: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
paddingTop: 12
},
text: {
width: width/3,
color: '#b5b5b5',
textAlign: 'center',
},
textSelected: {
color: '#ff9972'
},
nextButton: {
position: 'absolute',
left: (width/1.5)/2,
bottom: 5,
paddingTop: 10,
backgroundColor: '#ff6b5d',
width: width/1.5,
height: 48,
borderRadius: 5,
borderBottomWidth: 2,
borderBottomColor: '#de5244',
},
nextText: {
fontSize: 16,
color: '#fff',
textAlign: 'center'
}
})
This has been giving me issues for hours now. Looking for a simple solution that is what professional developers use.
Ignore:
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.

Answer 1

Instead of using <ScrollView> as Parent, you can use <ScrollView> inside of <View> and have something similar to the below structure.
<View>
<ScrollView style={{flex:1}}>
{/*All of your screen */}
</ScrollView>
<View>
<TouchableOpacity style={ styles.nextButton }>
<Text style={ styles.nextText }>
Next Step
</Text>
</TouchableOpacity>
</View>
</View>
The button will always stay at bottom of the page.