Merge pull request #238 from krzysztof-miemiec/fix-for-axis

XAxis/YAxis crash fix

Author: JesperLekland

package.json

@@ -54,7 +54,7 @@
   "peerDependencies": {
     "react": ">=16.0.0-alpha.12",
     "react-native": ">=0.46.0",
-    "react-native-svg": "^6.2.1"
+    "react-native-svg": "^6.2.1||^7.0.3"
   },
   "devDependencies": {
     "date-fns": "^1.28.5",

src/x-axis.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Text, View } from 'react-native'
 import * as d3Scale from 'd3-scale'
 import * as array from 'd3-array'
-import Svg, { Text as SVGText } from 'react-native-svg'
+import Svg, { G, Text as SVGText } from 'react-native-svg'
 
 class XAxis extends PureComponent {
 
@@ -99,29 +99,31 @@ class XAxis extends PureComponent {
                             height,
                             width,
                         }}>
-                            {children}
-                            {
-                                // don't render labels if width isn't measured yet,
-                                // causes rendering issues
-                                width > 0 &&
-                                ticks.map((value, index) => {
-                                    const { svg: valueSvg = {} } = data[ index ] || {}
-
-                                    return (
-                                        <SVGText
-                                            textAnchor={ 'middle' }
-                                            originX={ x(value) }
-                                            alignmentBaseline={ 'hanging' }
-                                            { ...svg }
-                                            { ...valueSvg }
-                                            key={ index }
-                                            x={ x(value) }
-                                        >
-                                            {formatLabel(value, index)}
-                                        </SVGText>
-                                    )
-                                })
-                            }
+                            <G>
+                                {children}
+                                {
+                                    // don't render labels if width isn't measured yet,
+                                    // causes rendering issues
+                                    width > 0 &&
+                                    ticks.map((value, index) => {
+                                        const { svg: valueSvg = {} } = data[ index ] || {}
+
+                                        return (
+                                            <SVGText
+                                                textAnchor={ 'middle' }
+                                                originX={ x(value) }
+                                                alignmentBaseline={ 'hanging' }
+                                                { ...svg }
+                                                { ...valueSvg }
+                                                key={ index }
+                                                x={ x(value) }
+                                            >
+                                                {formatLabel(value, index)}
+                                            </SVGText>
+                                        )
+                                    })
+                                }
+                            </G>
                         </Svg>
                     }
                 </View>

src/y-axis.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Text, View } from 'react-native'
-import { Svg, Text as SVGText } from 'react-native-svg'
+import { Svg, G, Text as SVGText } from 'react-native-svg'
 import * as d3Scale from 'd3-scale'
 import * as array from 'd3-array'
 
@@ -113,27 +113,29 @@ class YAxis extends PureComponent {
                             height,
                             width,
                         }}>
-                            {children}
-                            {
-                                // don't render labels if width isn't measured yet,
-                                // causes rendering issues
-                                height > 0 &&
-                                ticks.map((value, index) => {
-                                    return (
-                                        <SVGText
-                                            originY={ y(value) }
-                                            textAnchor={ 'middle' }
-                                            x={ '50%' }
-                                            alignmentBaseline={ 'middle' }
-                                            { ...svg }
-                                            key={ index }
-                                            y={ y(value) }
-                                        >
-                                            {formatLabel(value, index)}
-                                        </SVGText>
-                                    )
-                                })
-                            }
+                            <G>
+                                {children}
+                                {
+                                    // don't render labels if width isn't measured yet,
+                                    // causes rendering issues
+                                    height > 0 &&
+                                    ticks.map((value, index) => {
+                                        return (
+                                            <SVGText
+                                                originY={ y(value) }
+                                                textAnchor={ 'middle' }
+                                                x={ '50%' }
+                                                alignmentBaseline={ 'middle' }
+                                                { ...svg }
+                                                key={ index }
+                                                y={ y(value) }
+                                            >
+                                                {formatLabel(value, index)}
+                                            </SVGText>
+                                        )
+                                    })
+                                }
+                            </G>
                         </Svg>
                     }
                 </View>