Inconsistency on Different Devices

[aswinputra]

Hi,

I am in need of help from fellow developers

I have created a component called Curve Header that pretty much creates a header in a shape of a svg. I successfully created one for Pixel 4 phone, however, When I tried to open the component in a Pixel 2 Screen it is out of scale and I couldn't figure out what is wrong with it.

Picture below is what the header component should look like:

However, I received this result on a Pixel 2 phone

import Svg, {Path, Text, } from 'react-native-svg';
import colors from "../config/colors";
import {
    StyleSheet,
    View,
    StatusBar, 
    TouchableOpacity
} from "react-native";
import { Icon } from "react-native-elements";
const SAFE_STATUS_BAR = Platform.select({
    ios: 44,
    android: StatusBar.currentHeight,
  });

function CurveHeader(props){
    return(
        <View style={styles.container}>
            <Svg viewBox="0 0 100 44">
                <Path stroke={colors.primary} d="M0 0 h100 v40 q-50 -20, -100 0 Z" fill={colors.primary}></Path>
                <Text x="50%" y="45%" textAnchor="middle" alignmentBaseline="middle" fontSize="7" fill="white" fontWeight="bold" letterSpacing="0.1">{props.title.toUpperCase()}</Text>
            </Svg>
            {
                props.showBackButton ? 
                <View style={styles.backButton}>
                    <TouchableOpacity onPress={() => props.returnFunction()}>
                        <Icon
                        name="arrow-left"
                        type="font-awesome-5"
                        size={30}
                        iconStyle={{ color: "#fff" }}
                        />
                    </TouchableOpacity>
                </View>
                : <View style={styles.backButton}></View>
            }
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        // paddingTop: SAFE_STATUS_BAR,
        // flex: 1,
        height: '22%'
    },
    backButton: { 
        flex: 1,
        alignItems:"flex-start",
        marginHorizontal:20,
        marginVertical:55,
        elevation:3, 
        position: 'absolute' 
    }
})

export default CurveHeader;

Can someone please help me figure out what is wrong?
Thanks

[jupdike]

You probably need to change the view box with the width of the device, or scale the entire SVG up. This does not seem like a bug with the React Native SVG library.

[bohdanprog]

Hello @aswinputra,
As @jupdike mentioned, this problem is not related to react-native-svg.
However, if you continue to experience any issues, please feel free to open a new one.

Thank you.