Error while using FlatUIImplementationProvider.

[aahz]

Problem

When FlatUIImplementationProvider is enabled as a default UIImplementationProvider usage of Svg component leads to crash on Android platform:

Red screen dissolves only when I delete usage of component with Svg with Path instance inside from screen layout. Rendering only <Svg /> without children seems OK.

Some extra data:

Versions:

react: 16.0.0-alpha.12
react-native: 0.46.1
react-native-svg: 5.3.0

Component example

/**
 * @providesModule CheckIcon
 */

import React, {PureComponent} from 'react';
import {Svg, Path} from 'react-native-svg';

export default class CheckIcon extends PureComponent {
    static defaultProps = {
        color: "#ffffff",
        thickness: 2,
    };

    render() {
        return (
            <Svg
                style={this.props.style}
                width={this.props.width}
                height={this.props.height}
                viewBox="0 1 45 33">
                <Path
                    stroke={this.props.color}
                    strokeWidth={this.props.thickness}
                    strokeLinecap="round"
                    fill="none"
                    d="M3 19.3995271L14.775 30.475 42.25 3" />
            </Svg>
        );
    }
}

Usage example

import React, {Component} from 'react'
import {View} from 'react-native';
import CheckIcon from 'CheckIcon';

class Screen extends Component {
    render () {
        return (
            <View style={[styles.summary, {this.props.height}]}>
                <View style={[styles.body, {this.props.width}]}>
                    <View style={[styles.status, {left: this.props.width / 2 - STATUS_ICON_SIZE / 2}]}>
                        <CheckIcon width={24} height={18} thickness={6} />
                    </View>
                </View>
            </View>
        );
    }
}

const STATUS_ICON_SIZE = 50;

const styles = StyleSheet.create({
    summary: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#515fa7',
    },

    body: {
        position: 'relative',
    },

    status: {
        position: 'absolute',
        top: -60,
        backgroundColor: '#00b670',
        height: STATUS_ICON_SIZE,
        width: STATUS_ICON_SIZE,
        borderRadius: STATUS_ICON_SIZE / 2,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

Possibly the problem related to facebook/react-native#12770 issue, but I'm not sure about that

[chunghe]

confirm this still happens in react-native 0.47.0 with FlatUIImplementationProvider.
FlatUIImplementationProvider is crucial for Android performance.
@magicismight really appreciate your hard work, this is the only blocking issue to use FlatUIImplementationProvider for now.

[aahz]

@chunghe still reproducible for react-native@0.47.1 and react-native-svg@5.4.1

[sibelius]

any progress on this?

[JCMais]

Can we get an update? is that is on the roadmap of this project maintainers?

[unel]

hm, some progress?

[msand]

Is this still an issue with the latest version?
This seems to work fine:

class CheckIcon extends PureComponent {
  static defaultProps = {
    color: "#ffffff",
    thickness: 2,
  };

  render() {
    return (
      <Svg
        width={this.props.width}
        height={this.props.height}
        viewBox="0 1 45 33">
        <Path
          stroke={this.props.color}
          strokeWidth={this.props.thickness}
          strokeLinecap="round"
          fill="none"
          d="M3 19.3995271L14.775 30.475 42.25 3" />
      </Svg>
    );
  }
}

class Screen extends Component {
  render () {
    return (
      <View style={[styles.summary]}>
        <View style={[styles.body]}>
          <View style={[styles.status, {left: STATUS_ICON_SIZE / 2}]}>
            <CheckIcon width={24} height={18} thickness={6} />
          </View>
        </View>
      </View>
    );
  }
}

const STATUS_ICON_SIZE = 50;

export default class App extends Component {
  render() {
    return (
      <Screen />
    );
  }
}

const styles = StyleSheet.create({
  summary: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#515fa7',
  },

  body: {
    position: 'relative',
  },

  status: {
    position: 'absolute',
    top: -60,
    backgroundColor: '#00b670',
    height: STATUS_ICON_SIZE,
    width: STATUS_ICON_SIZE,
    borderRadius: STATUS_ICON_SIZE / 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
});