unable to move button to the right - react-native

Question

I have the following return() and am unable to move the last VIEW which contains the button title = 'done' to the right side
return (
<View style={styles.container}>
<Text style={styles.bigFont}>{`${this.state.timer + 'TIMER'}`}</Text>
<Text style={styles.bigFont}>{`${this.state.min + ':' + this.state.sec}`}</Text>
<View style={styles.button}>
<Button title= {this.state.startFlag ? 'PAUSE' : 'START'} onPress={()=>this.startToggle()} />
<Button title='RESET' onPress={()=>this.resetToggle()} />
</View>
<View style={styles.row}>
<Text style={[styles.bold,{marginRight:10},{width:112},
{textAlign:'right'}]}>
Work Timer:</Text>
<Text style={styles.bold}> min:</Text>
<TextInput
value={Math.floor(this.state.workTime / 60).toString()}
style={styles.input}
onChangeText={(text)=>{this.captureInput(text)}}
onSubmitEditing={()=>{(this.update('work-min'))}}
/>
<Text style={styles.bold}> sec:</Text>
<TextInput
value={Math.floor(this.state.workTime % 60).toString()}
style={styles.input}
keyboardType='numeric'
onChangeText={(text) => {this.captureInput(text)}}
onSubmitEditing={()=>{(this.update('work-sec'))}}
/>
</View>
<View style={styles.row}>
<Text style={[styles.bold,{marginRight:10},{width:112},
{textAlign:'right'}]}>
Break Timer:</Text>
<Text style={styles.bold}> min:</Text>
<TextInput
value={Math.floor(this.state.breakTime / 60).toString()}
style={styles.input}
keyboardType='numeric'
onChangeText={(text) => {this.captureInput(text)}}
onSubmitEditing={()=>{(this.update('break-min'))}}
/>
<Text style={styles.bold}> sec:</Text>
<TextInput
value={Math.floor(this.state.breakTime % 60).toString()}
style={styles.input}
keyboardType='numeric'
onChangeText={(text) => {this.captureInput(text)}}
onSubmitEditing={()=>{(this.update('break-sec'))}}
/>
</View>
<View style={{flexDirection:'row',justifyContent:'flex-end',alignItems:'flex-end'}} >
<Text ><Button title='done' onPress={()=>this.resetToggle()} /></Text>
</View>
</View>
)
export default StyleSheet.create({
container: {
flex:1,
flexDirection:'column',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginBottom:150,
},
bigFont:{
fontSize:40,
color:'darkblue'
},
row:{
flexDirection:'row',
marginBottom:15,
},
button:{
flexDirection:'row',
marginTop:30,
marginBottom:30,
},
bold: {
fontWeight: 'bold',
color:'green',
},
input: {
borderWidth: 1,
borderColor: 'black',
marginRight: 10,
paddingHorizontal:15,
minWidth: 50,
},
})

Answer 1

so, interestingly, we need to use alignSelf:'flex-end' or use width:'100%'. flex:1 is definitely wrong as that uses all the available space and shifts everything up.

Answer 2

Below code should work. Last section of return statement.
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}} >
<Text ><Button title='done' onPress={() => this.resetToggle()} /></Text>