control components placement with flexbox - css

Question

I have the following APP. I'm having trouble with the spacing of components within the return of the App class.
I would like to move the 'Reset' up a little bit and the 'Start' down a little. It would be nice if there was an easy way to control the vertical placement
import React from 'react';
import { Button,StyleSheet, Text, View } from 'react-native';
export class Timers extends React.Component{
constructor(props){
super(props)
this.state={work:{min:this.props.min,
sec:this.props.sec,
buttton:this.props.button,
period:this.props.period,},
play:{min:this.props.min,
sec:this.props.sec,
buttton:this.props.button,
start:this.props.start,
period:this.props.period,}
}
}
render(){
return(
<View style={styles.timer}>
<Text>{this.props.name}</Text>
<Text>{'min: ' + this.props.min + ' sec: ' + this.props.sec }</Text>
<Text>{this.props.period}</Text>
</View>
)
}
}
export default class App extends React.Component {
constructor(){
super()
this.state={start:'Start'}
}
parentState(){
if(this.state.start === 'Start') startStop = 'Stop'
else startStop = 'Start'
this.setState({start:startStop})
}
buttonPress(x){
if(x === 'Start' || x === 'Stop')this.parentState()
console.log(x)
}
render() {
return (
<View style={styles.container}>
<Button style={styles.top} title='Reset'onPress=
{()=>this.buttonPress(this.state.start)}/>
<View style={styles.row}>
<Timers
name={'WORK'}
min={'25'}
sec={'00'}
button={'Reset'}
period={'tbd'} >
</Timers>
<Timers
name={'PLAY'}
min={'25'}
sec={'00'}
period={'tbd'} >
</Timers>
</View>
<Button title={this.state.start} onPress=
{()=>this.buttonPress(this.state.start)}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'column',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
timer:{
flex:1,
flexDirection:'column',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
row:{
flex:0,
flexDirection:'row',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

apply marginTop and MarginBottom to styles.row does the trick