Comments (8)
@fangjuncheng Hi again! I was playing around in a new project and I ran into a similar problem. The issue that I ran into was when the chart component had a parent component with a flex
style attribute. Then the chart rendered as empty.
from react-native-highcharts.
AND I found that the package in node_modules is not the same as it in github.
Is there something wrong with npm package?
@Infinity0106
from react-native-highcharts.
I ran the command and paste your code in one of my projects and it works correctly and the node_module is the same in npm, you could try downloading it from git instead of npm, let me know if you could fix it
from react-native-highcharts.
Bernardo beat me to it! I tried with the given code and WebStorm and it worked okay for iOS. I created a demo repository here if you're curious: react-native-highcharts-demo. I also compared the react-native-highcharts.js
file to the one in GitHub and they are identical.
The Default export is not declared in imported module
warning message in WebStorm is because you are importing with ES2015 module but react-native-highcharts.js
in react-native-highcharts uses CommonJS syntax module.exports = ChartWeb;
in line 123;
I'm not 100% sure on how this interop between ES2015 modules and CommonJS works but for some reason it's able to resolve it. Even when the class names are actually wrong! In the demo code for this repository it's ChartView
but in the latest version the class name is actually ChartWeb
.
This may be a material for a separate issue/PR, but is there a reason for this inconsistency? And is there a reason why CommonJS is used instead of ES2015 modules since they are natively supported by React Native?
@fangjuncheng Back to your issue. Just to make sure, do you have a "react-native-highcharts": "^1.0.0"
line in your package.json
file?
from react-native-highcharts.
@jonrh YES,you have a "react-native-highcharts": "^1.0.0" line in your package.json file.
I use the component like THIS:--AND it did not work
<+View style={{flex:1,...}} +>
<Hcharts /+ >
<View+>
---SO i should run the chart component had a parent component without a flex style attribute
IF it works that use the component like THIS:?
<+View style={{flex:1,...}} +>
<View+><Hcharts /+ >
<View+>
from react-native-highcharts.
I tested this a bit more and it seems it's not the flex
that is causing the issue. Wrapping it in another <View>
does not help either. The problem seems to be the alignItems
style attribute on a parent component. The chart is displayed as empty when alignItems
is flex-start
, center
, or flex-end
but it works for stretch
. Source for the <Hcharts />
component.
export default class RNHighchartsDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text>Begin</Text>
<Hcharts />
<Text>End</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center', // <- this seems to cause the issue
}
});
At the moment I'm unfortunately not sure how to fix it. In my own app I don't have alignItems
, didn't need it.
from react-native-highcharts.
OK, Thanks!
from react-native-highcharts.
use another device. for android , htc is better
from react-native-highcharts.
Related Issues (20)
- Highchart 1.0.2 not rendering properly in real device in react-native 0.57.8 HOT 5
- Multiple Chart on the same View
- the events callback functions can`t do console.log(1) but can alert(1)
- High Chart is not supporting in React Native HOT 1
- Is it possible to use 'nodata' with the react native version?
- Charts not show data HOT 4
- Invalid SemVer Version HOT 2
- Is there any way of implementing Organisation chart ?
- the chart is not rendering in ios. HOT 4
- WebView has been removed from React Native. HOT 4
- charts not visible ... HOT 7
- Can't access external variables inside events.load method and I want to access all the highchart apis outside the scope, please help HOT 3
- Show loading before the charts is loaded,
- Can't use word cloud in this package
- Tooltip not showing on Android but on iOS it does.
- variablepie chart not working HOT 1
- Time and Date both are not showing on X-Axis.
- Highlight chart Organizational hierarchy
- Data Points(Marker as a SVG) do not fully render when compiling Android Build HOT 1
- Unable to sync zooming of multiple charts.Is there any choice to sync zoom of charts in React native.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-highcharts.