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


#1

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):


#3

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