Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Crash when using Pattern

See original GitHub issue

I’m getting hard crash when trying to use Patterns. Testing with react-native-svg 8.0.8 and iOS simulator outputs to XCode console just libc++abi.dylib: terminating with uncaught exception of type NSException.

Simple test case which always crashes:

const STRIPE_WIDTH = 1 / 7;
const VIEWBOX_WIDTH = 140;
const VIEWBOX_HEIGHT = 140;
return (
    <View style={{ height: 64, width: 64 }}>
        <Svg
            width="100%"
            height="100%"
            viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
        >
            <Defs>
                <Pattern
                    id="Stripes"
                    width={STRIPE_WIDTH * 2}
                    height="1"
                    patternContentUnits="objectBoundingBox"
                >
                    <Rect
                        x="0"
                        y="0"
                        height="1"
                        width={STRIPE_WIDTH}
                        fill="#ffffff"
                    />
                    <Rect
                        x={STRIPE_WIDTH}
                        y="0"
                        height="1"
                        width={STRIPE_WIDTH}
                        fill="#000000"
                    />
                </Pattern>
            </Defs>
            <Circle
                fill="url(#Stripes)"
                cx={VIEWBOX_WIDTH / 2}
                cy={VIEWBOX_HEIGHT / 2}
                r={VIEWBOX_HEIGHT / 2}
            />
        </Svg>
    </View>
);

Issue Analytics

State:
Created 5 years ago
Comments:12

Top GitHub Comments

3reactions

msandcommented, Jan 24, 2019

Btw, stop-color should be stopColor instead. And, with the latest commit in the master branch, you can use this to get equivalent output to the original:

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import {
  Svg,
  Defs,
  LinearGradient,
  Stop,
  Pattern,
  Rect,
  Circle,
} from 'react-native-svg';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Svg width="200" height="200">
          <Defs>
            <LinearGradient id="Gradient1">
              <Stop offset="5%" stopColor="white"/>
              <Stop offset="95%" stopColor="blue"/>
            </LinearGradient>
            <LinearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
              <Stop offset="5%" stopColor="red"/>
              <Stop offset="95%" stopColor="orange"/>
            </LinearGradient>

            <Pattern id="Pattern" x="0" y="0" width="50" height="50">
              <Rect x="0" y="0" width="50" height="50" fill="skyblue"/>
              <Rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
              <Circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
            </Pattern>
          </Defs>

          <Rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
  },
});

0reactions

TheEhsanSarsharcommented, Jan 11, 2021

here is the pattern that I use it crash only in iOS

"react-native-svg": "^9.13.6"

<Pattern
          id="prefix__a"
          patternUnits="userSpaceOnUse"
          width={wp(2)}
          height={wp(2)}
          patternTransform="rotate(135)"
        >
          <Rect width={'100%'} height={'100%'} fill="#FFFBE6" opacity={1} />
          <Path stroke="#fef9e0" strokeWidth={5} d="M0 0v12.5" />
</Pattern>

@msand would you mind to help me to spot the issue.

ok fixed by removing “100%” and using actual numbers