These are the current packages I am using:
react-google-charts 1.5.5
react 16.0.0-beta.5
react-native https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz
I am currently working on rendering a Gantt Chart and you can find an example here and another one here.
Below is the code snippet I'm using:
import React, { Component } from 'react';
import { View, ScrollView, Text } from 'react-native';
import { Card, Avatar } from 'react-native-elements';
import { Chart } from 'react-google-charts';
class ScheduleScreen extends Component {
constructor(props) {
super(props);
this.state = {
rows: [],
columns: []
};
}
onButtonPressClose = () => {
this.props.navigation.navigate('Home');
}
render() {
return (
<View>
<ScrollView>
<Card title="Schedule">
<Chart
graph_id="ganttchart"
chartType="Gantt"
columns={this.state.columns}
rows={this.state.rows}
chartPackages={['gantt']}
width="100%" height="9999px"
/>
</Card>
</ScrollView>
<View style={styles.buttonBackContainer}>
<Avatar
medium
rounded
backgroundColor="#66ff33"
icon={{ name: 'chevron-left' }}
onPress={this.onButtonPressClose}
/>
</View>
</View>
);
}
}
const styles = {
buttonBackContainer: {
position: 'absolute',
top: 20,
left: 20,
right: 20,
flexDirection: 'row',
justifyContent: 'flex-start'
}
};
export default ScheduleScreen;
An error occurred when I started the app. Here's the error message:
Body:
{"message":"TransformError:
/Users/ling/workspace/chartapp/node_modules/react-google-charts/lib/index.js:
[BABEL]/Users/ling/workspace/chartapp/node_modules/react-google-
charts/lib/index.js:Unknown
option:/Users/ling/workspace/chartapp/node_modules/react-google-
charts/react/react.js.Children.Check out http://babeljs.io/docs/usage/options/
for more information about options.....
Can anyone help me troubleshoot this error? I have checked for lint errors in the code but couldn't find any.
Thank you for any assistance or suggestions provided.