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.

Error while using FlatUIImplementationProvider.

See original GitHub issue

Problem

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

android_emulator_-_nexus_6_marshmellow_api_23_5554

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 https://github.com/facebook/react-native/issues/12770 issue, but I’m not sure about that

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

unelcommented, Nov 8, 2017

hm, some progress?

0reactions

msandcommented, Dec 9, 2018

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',
  },
});