MarginRight modifica todo o container

Precico de um text 'Cadastre' totalmente à esquerda e ao final da página e um text 'Sobre' totalmente à direita e também ao final da página, ambos na mesma linha. Coloquei flexDirection: 'row' e estão na mesma linha, porém estão colados um ao outro. Ao colocar marginRight no text, tenho todo o container modificado. Como faço para arrumar isso?

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  TouchableOpacity
} from 'react-native';

import {
    Container
} from 'native-base';

import Images from '../imgs';


export default class Splash extends Component {

    constructor(props) {
        super(props);
    }

  render() {
    return (
        <View style={styles.container}>
            <Image 
                key = {Images.background}
                source = {Images.background}
                style = {styles.backgroundStyle}
                resizeMode = 'stretch'
            />

            <Container style={styles.transparentView}>
                <View style={styles.logoViewStyle}>
                    <Image 
                        key = {Images.logo}
                        source = {Images.logo}
                        resizeMode = 'contain'
                        style = {styles.logoStyle}
                    />
                </View>
                <View >
                    <Text style={styles.acessar}>Acessar com</Text>
                </View>

                <View style = {styles.viewSocialStyle}>
                    <TouchableOpacity>
                        {/* Ícone do Facebook */}
                        <Image 
                            key = {Images.facebookbranco}
                            source = {Images.facebookbranco}
                            resizeMode = 'contain'
                            style = {styles.iconStyle}
                        />
                    </TouchableOpacity>
                </View>

                <View style={styles.viewRodape}>
                    <Text style={styles.rodape}>Cadastre</Text>
                    <Text style={styles.rodape}>Sobre</Text>
                </View>
            </Container>

        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  backgroundStyle: {
    flex: 1,
    position: 'relative'
  },

  transparentView: {
    flex: 1,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    position: 'absolute'
},

logoViewStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 250
},

logoStyle: {
    height: 100,
    width: 100,

},

acessar: {
    color: '#fff',
    marginTop: 40,
    fontSize: 16,
},

iconStyle: {
    width: 50,
    height: 50,
    marginBottom: 10
},

viewSocialStyle: {
    width: 250,
    height: 100,
    justifyContent: 'flex-end',
    alignItems: 'center'
},

rodape: {
    color: '#fff',
    fontSize: 20,
    marginTop: 100,
},

viewRodape: {
    flexDirection: 'row',
    marginTop: 100,
},

});