Добавление полей к правому краю Flex-Start React-Native

import React, { Component } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import {
  CheckBox, Container, Content, Text, View, Button,
} from 'native-base';
import Fonts from '../common/Fonts';


const checkAllMargin = Dimensions.get('window').height / 3.14;

const styles = StyleSheet.create({
  wrapper: {
    justifyContent: 'flex-end',
    flexDirection: 'column',
    flex: 1,
  },
  moveButtonContainer: {
    flexDirection: 'row',
    alignSelf: 'flex-end',
    marginTop: checkAllMargin,
  },
  prevButton: {
    justifyContent: 'center',
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
    backgroundColor: '#333333',
    height: 55,
  },
  nextButton: {
    justifyContent: 'center',
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
    backgroundColor: '#4FCBFF',
    height: 55,
  },
  moveButtonText: {
    textAlign: 'center',
    fontFamily: Fonts.NANUMGOTHICBOLD,
    fontSize: 18,
  },
  termsView: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginTop: 21,
  },
  checkBox: {
    marginLeft: 10,
  },
  termsText: {
    alignSelf: 'center',
    marginLeft: 17,
    height: 16,
    fontFamily: Fonts.NANUMGOTHIC,
    fontSize: 11,
  },
  termsTextEnd: {
    fontFamily: Fonts.NANUMGOTHIC,
    fontSize: 11,
    alignSelf: 'center',
  },
  requiredText: {
    color: '#4FCBFF',
  },
  choiceText: {
    color: '#999999',
  },
  checkAllView: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    marginTop: 35,
  },
  checkAllText: {
    alignSelf: 'flex-end',
    marginRight: 42,
  },
  checkAllBox: {
    marginRight: 17,
  },
  openLinkButton: {
    borderColor: '#CCCCCC',
    borderRadius: 10,
    height: 18,
    width: 35,
    alignSelf: 'flex-end',
    borderWidth: 1,
  },
  openLinkText: {
    fontFamily: Fonts.NANUMGOTHIC,
    fontSize: 9,
    paddingTop: 3,
    paddingLeft: 5,
  },
});


class TermsAgreeContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      agreeTermsOfServices: false,
      agreeTermsOfPrivacy: false,
      agreeTermsOfCopyright: false,
      agreeAll: false,
    };
  }

  checkTermsOfServices = (isCheck) => {
    this.setState({
      agreeTermsOfServices: isCheck,
    });
  }

  checkTermsOfPrivacy = (isCheck) => {
    this.setState({
      agreeTermsOfPrivacy: isCheck,
    });
  }

  checkTermsOfCopyright = (isCheck) => {
    this.setState({
      agreeTermsOfCopyright: isCheck,
    });
  }

  checkAll = (isCheck) => {
    this.setState({
      agreeTermsOfServices: isCheck,
      agreeTermsOfPrivacy: isCheck,
      agreeTermsOfCopyright: isCheck,
      agreeAll: isCheck,
    });
  }

  render() {
    const {
      agreeTermsOfServices, agreeTermsOfPrivacy, agreeTermsOfCopyright, agreeAll,
    } = this.state;
    const {
      checkTermsOfServices, checkTermsOfPrivacy, checkTermsOfCopyright, checkAll,
    } = this;
    return (
      <Container>
        <Content scrollEnabled = {false} contentContainerStyle = {styles.wrapper}>
          <View style = {styles.termsView}>
            <CheckBox
              checked = {agreeTermsOfServices}
              onPress = {() => checkTermsOfServices(!agreeTermsOfServices)}
              style = {styles.checkBox}
            />
            <Text
              style = {styles.termsText}
              onPress = {() => checkTermsOfServices(!agreeTermsOfServices)}
              suppressHighlighting
            >
              TermsOfServices
            </Text>
            <Text style = {[styles.termsTextEnd, styles.requiredText]}> (required)</Text>
            <Text style = {[styles.openLinkButton, styles.openLinkText]}>Show</Text>
          </View>
          <View style = {styles.termsView}>
            <CheckBox
              checked = {agreeTermsOfPrivacy}
              onPress = {() => checkTermsOfPrivacy(!agreeTermsOfPrivacy)}
              style = {styles.checkBox}
            />
            <Text
              style = {styles.termsText}
              onPress = {() => checkTermsOfPrivacy(!agreeTermsOfPrivacy)}
              suppressHighlighting
            >
              TermsOfPrivacy
            </Text>
            <Text style = {[styles.termsTextEnd, styles.requiredText]}> (required)</Text>
            <Text style = {[styles.openLinkButton, styles.openLinkText]}>Show</Text>
          </View>
          <View style = {styles.termsView}>
            <CheckBox
              checked = {agreeTermsOfCopyright}
              onPress = {() => checkTermsOfCopyright(!agreeTermsOfCopyright)}
              style = {styles.checkBox}
            />
            <Text
              style = {styles.termsText}
              onPress = {() => checkTermsOfCopyright(!agreeTermsOfCopyright)}
              suppressHighlighting
            >
              TermsOfCopyright
            </Text>
            <Text style = {[styles.termsTextEnd, styles.choiceText]}> (choice)</Text>
            <Text style = {[styles.openLinkButton, styles.openLinkText]}>Show</Text>
          </View>
          <View style = {styles.checkAllView}>
            <CheckBox
              checked = {agreeAll}
              onPress = {() => checkAll(!agreeAll)}
              style = {styles.checkAllBox}
            />
            <Text
              style = {styles.checkAllText}
              onPress = {() => checkAll(!agreeAll)}
              suppressHighlighting
            >
              Check All
            </Text>
          </View>
          <View style = {styles.moveButtonContainer}>
            <Button full style = {styles.prevButton}>
              <Text style = {styles.moveButtonText}>back</Text>
            </Button>
            <Button full style = {styles.nextButton}>
              <Text style = {styles.moveButtonText}>next</Text>
            </Button>
          </View>
        </Content>
      </Container>
    );
  }
}


export default TermsAgreeContainer;

В настоящее время положение кнопки «Показать» определяется длиной текста слева. Я хотел бы переместить его вправо, как на фото.

Я хочу, чтобы кнопка «Показать» была на поле 30 справа. Однако я не использую margin-right, если использую Flex-Start. Как разместить кнопку показа справа?