Issue in displaying flex width

i am designing an application that has an image background and the logo is included in the background image, so my content needs to start after this logo which is about the half of the page, my question is how can i control the width of the container class to be a bit smaller because as you can see in the image it is full screen & how to make the oneButtonRow class same width as the TwoButtonRow because they are not same width. Is my current technique good to go and would be responsive on other screens?

Attached image and code Thanks :)

Image of current output

  render() {
    return (
      <ImageBackground
        source={require('../assets/images/HomeBackground.png')}
        style={styles.ImageBackground}>

        <View style={styles.container}>
          <View style={styles.upperArea}>
          </View>
          <View style={styles.TwoButtonRow}>
            <Button buttonStyle={styles.inlineButton} title="Log In"
            linearGradientProps={{colors: ['#f4c26a', '#fba083','#f4c26a'],
                start: [1, 0], end: [0, 0.5]}}/>
            <View style={{width:15}}></View>
            <Button buttonStyle={styles.inlineButton} title="Register"
            linearGradientProps={{colors: ['#f4c26a', '#fba083','#f4c26a'],
                start: [1, 0], end: [0, 0.5]}}/>
          </View>
          <View style={styles.OneButtonRow}>
            <Button buttonStyle={styles.inlineButton} title="Continue with Facebook"
            icon={<Icon name='facebook' size={25} color='white'/>}
            linearGradientProps={{colors: ['#3b5998', '#2b4170'],
            start: [1, 0], end: [0, 0.5]}}/>
          </View>
          <View style={styles.OneButtonRow}>
            <Button buttonStyle={styles.inlineButton} title="Continue with G-mail"
            icon={<Icon name='google' size={25} color='white'/>}
            linearGradientProps={{colors: ['#e64522', '#c33219'],
            start: [1, 0], end: [0, 0.5]}}/>
          </View>
        </View>

      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  ImageBackground : {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width:'100%',
    height:'100%',
    resizeMode:'stretch'
  },
    container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex:1,
    },
  upperArea:{
    flex:0.4
  },
  TwoButtonRow :{
    flexDirection:'row',
    flex:0.1,
    backgroundColor: 'blue',
  },
  OneButtonRow: {
    flex:0.1,
    backgroundColor: 'blue',
    flexDirection:'row',

  },
    inlineButton : {
     width:'100%',
     height:40,
     borderRadius:30
    }
});