Проблема в отображении гибкой ширины

Question

Я разрабатываю приложение, которое имеет фоновое изображение и логотип включен в фоновое изображение, поэтому мой контент должен запускаться после этого логотипа, который занимает около половины страницы, мой вопрос: как я могу контролировать ширинукласса контейнера быть немного меньше, потому что, как вы можете видеть на изображении, это полноэкранный режим и как сделать так, чтобы класс oneButtonRow был такой же ширины, что и TwoButtonRow, потому что они не имеют одинаковую ширину.Является ли моя текущая методика подходящей и пригодной для работы на других экранах?

Прикрепленное изображение и код Спасибо:)

Изображение текущего выхода

  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
    }
});