10.1.0 broke iOS 10

[mars-lan]

Bug

After updating to 10.1.0, the entire <SVG> component becomes a black box.

Environment info

React native info output:

System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 135.71 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.5.0 - /var/folders/yj/5115g9cx3nz9tgzmsbl_fc540000gn/T/yarn--1579101337358-0.7994216973205717/node
    Yarn: 1.21.1 - /var/folders/yj/5115g9cx3nz9tgzmsbl_fc540000gn/T/yarn--1579101337358-0.7994216973205717/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    @react-native-community/cli: 3.0.4 => 3.0.4 
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

Library version: 10.1.0

[msand]

reproduction?

[grean]

Same problem here on ios 10.3
Works well on android 5.1 api 22
A black box nothing else. No errors.
System:
OS: macOS 10.15.2
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 292.30 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.14.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-22 | Google APIs Intel x86 Atom_64, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
npmGlobalPackages:
react-native-cli: 2.0.1

[msand]

Nothing I can do without code to reproduce the issue. I will close this soon unless that can be provided.

[mars-lan]

Will provide a basic repro later today, but I'm pretty sure you don't need anything special to reproduce that. The bug seems very fundamental and only affects iOS 10 AFAIK.

[mars-lan]

Here's the minimal example project to reproduce this error. The app literally just draws a simple circle and it showed up as a black box on iOS 10.

Relevant code snippet

import React from 'react';
import { View } from 'react-native';
import Svg, { Circle } from 'react-native-svg';

export default function App() {
  return (
   <View style={{flex: 1}}>
     <Svg height="100%" width="100%" viewBox="0 0 100 100">
       <Circle cx="50" cy="50" r="45" />
     </Svg>
   </View>
  );
};

[grean]

For me i use this code :

     <VictoryChart
        height={200}
        width={this.props.dims.width}
        theme={victoryStyle}
        animate={true}
        domainPadding={20}
        padding={{ top: 10, bottom: 40, left: 30, right: 30 }}
      >
        <VictoryAxis
          tickValues={[1, 2, 3, 4]}
          tickFormat={this.translate.legend}
          style={{
            tickLabels: { fontWeight: 'bold' },
          }}
        />
        <VictoryBar
          data={ [
    { macro: 1, val: 0 },
    { macro: 2, val: 0 },
    { macro: 3, val: 0 },
    { macro: 4, val: 0 },
  ];}
          alignment="middle"
          x="macro"
          y="val"
          labels={({ datum }) => `${Math.round(datum.val)}%`}
          style={{ data: { fill: '#00b5ad', width: 30 } }}
          labelComponent={
            <VictoryLabel
              style={{ fontWeight: 'bold', fill: '#666' }}
            />
          }
        />
      </VictoryChart>

[msand]

Thanks for the reproduction, had to download the older simulator to reproduce it, seems ios has inconsistent api across versions. Single line fix available in the develop branch.

[msand]

🎉 This issue has been resolved in version 11.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀