SVG getting cut in react native

Question

I am using react-native-svg with react-native-svg-transformer for rendering SVGs in our app. All SVGs are rendering correctly except this one SVG which just cuts off at its right side. This is the rendered SVG (The right side of the svg is cutoff):

and this is the original svg which I want to render as it is:

I don't know what I am doing wrong, but I also tried using the viewBox prop, still no effect. How can I rectify this?

Code:

import YourEldercarePartner from '../../Assets/Images/WelcomeScreenSVGImages/Your-Eldercare-Partner.svg';

const data = [
        ...
        {
            heading: "Welcome to Emoha!",
            svg: {
                image: YourEldercarePartner,
                width: hp(40),
                height: hp(40)
            },
            message: "India’s largest virtual community of Elders. This app is your one-stop solution for everything Elders need to live a healthy and energized life in the comfort of home."
        },
        ...
];

return (
    <Swiper 
        ref={swiper}
        loop={false}
        onIndexChanged={index => setIndex(index)}
        showsButtons={false}
        showsPagination={true}
        renderPagination={handlePagination}
    >
        {
            data.map((datum, idx) => <Screen datum={datum} key={idx}/> )
        }
    </Swiper>
)

const Screen = ({ datum }) => (
    <View style={styles.container}>
        <View style={styles.main}>
            <Text style={styles.heading}>
                {datum.heading}
            </Text>
            <View style={{ marginTop: 10, flex: 10, justifyContent: 'flex-start' }}>
                <datum.svg.image
                    width={datum.svg.width} 
                    height={datum.svg.height}  
                />
            </View>
            <Text style={styles.message}>
                {datum.message} 
            </Text>
        </View>
    </View>
)

It's probably the viewBox attribute. You may try increasing the value of the 3rd component of the viewBox. Also it's posible that the declared width and height for the svg element do not preserve the aaspect ratio. You may try to set only the width. Do you use `` elements? In this case it may be the viewBox of the `` element. A life working example may be useful — enxaneta, Jun 03 '21 at 07:55
What do meant by a life working example? I tried increasing the third value in the viewBox prop and only setting width. Both didn't work. — Soham Gadhave, Jun 03 '21 at 08:45
The code from pastebin must be the original svg, not the one with the problem. — enxaneta, Jun 03 '21 at 10:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/233276/discussion-between-soham-gadhave-and-enxaneta). — Soham Gadhave, Jun 03 '21 at 12:28

score 1 · Answer 1 · answered Apr 04 '22 at 09:24

Kind of late, but had similar problem and it was because svg width was actually smaller than mask width inside svg.

For example:

<svg width="261" height="251" viewBox="0 0 261 251" fill="none" xmlns="http://www.w3.org/2000/svg">
    <mask id="mask1_11005_24077" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="0" width="251" height="251">

Here mask width was accidentally 251 and after changing to 261 it was fixed and image not cut anymore. Don't see your svg anymore so I don't know if this was case for you, but was for me with multiple images.

SVG getting cut in react native

1 Answers1