facing problems with styling on react native and achieving a better responsive layout - react-redux

Question

I tried to run my code on various screen sized emulators and the layout of my design varies from device to device. I need help to make the layout more responsive and fixed on different sized screens such as tablets, 3"mobile and 6"mobile.
-----------or connect with us on----------- I want to style this line in better way and that remains the same look on every device
I tried using the dimensions of the screen by defining the width and height using variables, and by describing the values in percentages, but nothing worked.
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;
I want the layout to remain the same. Both the logo and buttons remain at the same position on every device display.
And I want a better dynamic solution for separator I have used in code
--------------or connect with us on-----------

Answer 1

I got a workaround solution for this problem. I am assigning values using the height and width of the screen to the styling.
import { StyleSheet, Dimensions } from 'react-native';
const { width: WIDTH, height: HEIGHT } = Dimensions.get('window');
SomeText: {
fontSize: HEIGHT / 38,
marginTop: WIDTH / 20,
}