Blank Chart on IOS

[HasanElfalt]

trafficstars

Hello everyone, I am trying to generate charts (Line, Pie, and MultiLine Charts), and they all appear blank (the chart place is empty just on IOS, and it is working fine on Android after updating React native to 0.76 or above.

Screenshots

Steps to Reproduce the Problem

• Create React Native with a version of 0.76 or above, or if you have an existing project, update your React Native project to a version equal to 0.76 or above.
• Install this library

Specifications

• Version: [v0.6.0] latest version of this library now
• Platform: IOS
• React Native version: 0.76 or above

[gigby]

I have the same issue with RN0.76: Android works fine but iOS shows empty space

[NikldjOne]

I have the same problem with 0.76 version. LineСhart and BarChart don't work

[NikldjOne]

there is this solution, but the BarChart does not work. Linear graph worked for me https://github.com/wuxudong/react-native-charts-wrapper/pull/1007/files

[NikldjOne]

added in node_modules/react-native-charts-wrapper/ios/ReactNativeCharts/bar/RNBarChartView.swift

   override func layoutSubviews() {
        super.layoutSubviews()
        _chart.frame = self.bounds // Adjust the chart's frame to fill the entire component's bounds
    }

It's work for me, for BarChart

[HasanElfalt]

@NikldjOne If it is solved using this PR, why hasn't it been merged until now?

[HasanElfalt]

@wuxudong

https://github.com/wuxudong/react-native-charts-wrapper/pull/1007/files This PR resolves this problem, so it is highly recommended that it be reviewed and merged, and it needs to be done to all kinds of charts.

    override func layoutSubviews() {
        super.layoutSubviews()
        _chart.frame = self.bounds // Adjust the chart's frame to fill the entire component's bounds
    }

and as @NikldjOne mentioned using the above lines in each chart kind will resolve the problem

[eugen-vg]

The same problem for me. I've just tried to run the example. On Android, it works when iOS shows a blank screen.

[HasanElfalt]

@eugen-vg check this PR solves the problem https://github.com/wuxudong/react-native-charts-wrapper/pull/1007/files

you will find that the piece of code added to the chart type you implement in node modules will solve the problem

override func layoutSubviews() {
       super.layoutSubviews()
       _chart.frame = self.bounds // Adjust the chart's frame to fill the entire component's bounds
   }

Example:

• if you use a Line chart, you can solve the problem by using the previous piece of code and adding it to this file node_modules/react-native-charts-wrapper/ios/ReactNativeCharts/line/RNLineChartView.swift

• if you use a Pie chart, you can solve the problem by using the previous piece of code and adding it to this file node_modules/react-native-charts-wrapper/ios/ReactNativeCharts/pie/RNPieChartView.swift

...etc

[eugen-vg]

Thank you @HasanElfalt . It works. I am still concerned about the approach to wrapping the native iOS/Android layers under one library. The history of this one says that Android drove it, and an unworking example doesn't add trust that iOS would work robustly. How do people use it in production? Is there another workaround that does not change the core code?

[baran-ozer]

For those who don't want to bother creating a new fork and release, I’ve published a package based on PR #1007: https://www.npmjs.com/package/enda-react-native-charts-wrapper

[ashish03-git]

@NikldjOne After following the steps mentioned for Line Chart in PR, line chart is visible in IOS, but I'm trying same solution for Bar Chart but it but it is not working.

[SamiChab]

This patch solves the problem : react-native-charts-wrapper+0.6.0.patch

[jonacds]

This patch solves the problem : react-native-charts-wrapper+0.6.0.patch

thanks @SamiChab that did the trick!