столкнувшись с проблемами со стилем на реагировать родной и достижения лучшего адаптивного макета

Question

Я пытался запустить свой код на эмуляторах разных размеров экрана, и структура моего дизайна варьируется от устройства к устройству. Мне нужна помощь, чтобы сделать макет более отзывчивым и закрепленным на экранах разных размеров, таких как планшеты, 3 "мобильные и 6" мобильные телефоны.

-----------or connect with us on----------- Я хочу, чтобы эта линия была лучше, и на каждом устройстве она будет выглядеть одинаково

Я пытался использовать размеры экрана, определяя ширину и высоту с помощью переменных и описывая значения в процентах, но ничего не получалось.

import React, { Component } from 'react';
import { View,TouchableOpacity, Text, StyleSheet, Image, Dimensions } from 'react-native';
import BacgroundImage from './BackgroundImage';
import Buttons from './Reusable/Button';

const { width: WIDTH } = Dimensions.get('window');

class LaunchScreen extends Component {

  render() {
        return (

            <BacgroundImage>
                <View style={styles.logoContainer}>
                    <Image
                        source={require('./images/logo.png')}
                        style={styles.PlaceLogo}
                    />
                </View>

                <View style={styles.Buttons}>
                    <Buttons style={styles.signupButton}
                    onPress={() => navigate('Login')}>
                        <Text style={styles.buttonText}> SIGN UP</Text>
                    </Buttons>
                    <Buttons style={styles.loginButton}>
                        <Text style={styles.buttonText}> SIGN IN</Text>
                    </Buttons>
                </View >
                <View style={styles.sepratorView}>

                    <Text style={styles.sepratorText}>--------- or connect with us on ---------</Text>

                </View >
                <View style={styles.socialButtonStyle}>
                   <TouchableOpacity
                        style={styles.fbstyle}
                        activeOpacity={0.5}

              >
                <Image
                  source={require('./images/facebookicon.png')}
                  style={styles.iconstyle}

                />

                <View 
                style={styles.sepratorLine} 
                />
                <Text
                    style={styles.socialButtonText}
                 >FACEBOOK</Text>
              </TouchableOpacity>


              <TouchableOpacity
                style={styles.googlestyle}
                onPress={this.signIn}
                activeOpacity={0.5}

              >

                <Image
                  source={require('./images/google.png')}
                  style={styles.iconstyle}
                />

                <View
                 style={styles.sepratorLine}
                 />
                <Text style={styles.socialButtonText} >GOOGLE</Text>

              </TouchableOpacity>
            </View>

            </BacgroundImage>
        );
    };
}



const styles = StyleSheet.create({
    logoContainer: {
        flex: 1

    },
    PlaceLogo: {
        width: WIDTH - 140,
        margin: 75,
        resizeMode: 'center',
        justifyContent: 'center',
        alignItems: 'center',
    },
    yosoButtons: {
        width: WIDTH - 80,
        justifyContent:'center',
        marginTop:350            

    },
    signupButton: {
        height:40,
        paddingTop:7,
        marginBottom: 15,

    },
    loginButton: {
        height:40,
        paddingTop:7,
        marginBottom: 15
    },
    buttonText: {

    },
    sepratorText: {
        textAlign:'center',
        fontSize:20,
        color: '#b6b7ba',        

    },
    sepratorView: {
        flexDirection: 'row',
        justifyContent:'center',
        alignItems:'center'
    },
    socialButtonStyle:{
        flex:1,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        margin:5
    },
    fbstyle:{
        flex:1,
        flexDirection:'row',
        borderColor:'white',
        alignItems:'center',
        backgroundColor:'#485a96',
        borderWidth:1,
        borderRadius:35,
        height: 40,
        marginLeft:15,
        marginRight:15
    },
    googlestyle:{
        flex:1,
        flexDirection:'row',
        alignItems:'center',
        backgroundColor:'#dc4e41',
        borderWidth:1,
        borderRadius:35,
        borderColor:'white',
        height: 40,
        marginRight:15
    },
    iconstyle:{
        resizeMode:'stretch',
        height:25,
        width:25
    },
    sepratorLine:{
        backgroundColor:'white',
        width:2,
        height: 40
    },
    socialButtonText:{
        color: '#fff',
        flex:1,
        textAlign: 'center',        
        fontSize: 15,
        fontWeight: "bold"

    }

});


export default LaunchScreen;

Я хочу, чтобы макет остался прежним. Логотип и кнопки остаются на одной и той же позиции на дисплее каждого устройства.

И я хочу лучшее динамическое решение для разделителя, которое я использовал в коде --------------or connect with us on-----------