Expo 32.0.0 [react-native-svg-charts] Invariant Violation : Element type is invalid : expected a string (for built-in components) or a class/function (for composite components) but got: object

In expo snack I got this error because of react-native-svg-chart library:
image
image

SDK version : 32.0.0
If I switch to SDK 30.0.0 in Snack, all works good.

Chart component code:

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import {MAIN_COLOR} from "../../config";
import { BarChart, XAxis } from 'react-native-svg-charts'

//i was trying to remove this line, nothing changed
import 'react-native-svg';

class Chart extends Component
{
  constructor (props)
  {
    super(props);
  }

  render ()
  {
    const data   = [29, 30, 70, 50, 34, 98, 51, 35, 53, 24, 50];

    return (
      <View style={styles.container}>
        <BarChart
          style={{ flex: 1 }}
          data={ data }
          svg={{ fill : MAIN_COLOR}}
          contentInset={{ top: 30, bottom: 30 }}/>

        <XAxis
          style={{ marginHorizontal: -10, marginTop: 15}}
          data={ data }
          formatLabel={ (value, index) => index }
          contentInset={{ left: 25, right: 25 }}
          svg={{ fontSize: 10, fill : MAIN_COLOR}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: '60%'
  }
});

export default Chart;

The problem is that on Anroid device all works perfectly. Whats wrong with Snack?

Package.json:

{
	"name": "mobile",
	"main": "node_modules/expo/AppEntry.js",
	"scripts": {
		"start": "expo start",
		"android": "expo start --android",
		"ios": "expo start --ios",
		"eject": "expo eject"
	},
	"dependencies": {
		"@expo/vector-icons": "^9.0.0",
		"aws-amplify": "^1.1.17",
		"aws-amplify-react-native": "^2.1.5",
		"expo": "^32.0.0",
		"react": "16.5.0",
		"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
		"react-native-check-box": "^2.1.7",
		"react-native-datepicker": "^1.7.2",
		"react-native-hr-plus": "^1.0.6",
		"react-native-material-menu": "^0.4.2",
		"react-native-material-textfield": "^0.12.0",
		"react-native-segmented-control-tab": "^3.3.1",
		"react-native-svg-charts": "^5.2.0",
		"react-native-swiper": "^1.5.14",
		"react-navigation": "^3.0.9",
		"react-redux": "^6.0.0",
		"redux": "^4.0.1",
		"redux-thunk": "^2.3.0",
		"styled-components": "^4.1.3"
	},
	"devDependencies": {
		"babel-preset-expo": "^5.0.0"
	},
	"private": true,
	"rnpm": {
		"assets": [
			"./assets/fonts/"
		]
	}
}

app.json:

{
	"name": "mobile",
	"displayName": "mobile",
	"expo": {
		"name": "app",
		"slug": "app",
		"privacy": "public",
		"sdkVersion": "32.0.0",
		"platforms": [
			"ios",
			"android"
		],
		"version": "1.0.0",
		"orientation": "portrait",
		"icon": "./assets/icon.png",
		"splash": {
			"image": "./assets/splash.png",
			"resizeMode": "contain",
			"backgroundColor": "#ffffff"
		},
		"updates": {
			"fallbackToCacheTimeout": 0
		},
		"assetBundlePatterns": [
			"**/*"
		],
		"ios": {
			"supportsTablet": true
		}
	}
}

type or paste code here

EXAMPLE where sdk 32.0.0 don’t works, and 30.0.0 works (if you will switch between sdk, try to change something and code and then press SAVE, becase Snack caches selected sdk):

FWIW, I’m having the same problem running on Expo client v2.10.0.105122 on iOS. I’m guessing it’s perhaps more an issue with this package and thus it may need to be updated. The maintainer of this package recently posted that he’s unable to keep up with updates and is looking for help.

Same issue posted to Slack here:
https://expo-developers.slack.com/archives/C04Q3JTSV/p1547133260827100

got same issue with ActionButton it was working fine few days ago

In expo snack still nothing works, but I use expo 32 and in publish version on real device all works good.

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.