Blank charts in react native 0.78.1 after build apk

[marciogabrielsf]

Hi guys! So, i'm here to report a really strange bug that is happening with me at react native 0.78.1.

I updated my app from RN 0.74.3 to 0.78.1 and updated the Victory native from 36 to 41.16.2. I've successfully updated the lib and it works on dev mode. But then when i try to generate a .apk for internal testing, the charts simply goes blank.

To check if the problem was with my implementation, i created a new react app (RN CLI), implemented the basic Line chart from the docs and for my surprise the problem still happens.

I'm using React native CLI.

Dev mode:

After build:

What I've tried so far

• Cleared node modules and Gradle.
• Tested with skia 2.0.0-next.2 and 2.0.0-next.1
• Created a new blank project with only the lib, skia, reanimated and RNGH
• Tested with multiple devices

Nothing worked.
It doesn't show any logs, warnings or errors. It simply doesn't show the chart.

I Only tested in Android, idk if it happens on iOS

To build the app i'm running cd android && ./gradlew assembleRelease

Package

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@shopify/react-native-skia": "2.0.0-next.2",
    "react": "19.0.0",
    "react-native": "0.78.1",
    "react-native-gesture-handler": "^2.25.0",
    "react-native-reanimated": "^3.17.2",
    "victory-native": "^41.16.2"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.78.1",
    "@react-native/eslint-config": "0.78.1",
    "@react-native/metro-config": "0.78.1",
    "@react-native/typescript-config": "0.78.1",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.0.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

App.tsx Implementation

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {ScrollView, StatusBar, useColorScheme, View} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

import {CartesianChart, Line} from 'victory-native';

const DATA = Array.from({length: 31}, (_, i) => ({
  day: i,
  highTmp: 40 + 30 * Math.random(),
}));

function MyChart() {
  return (
    <View style={{height: 300}}>
      <CartesianChart data={DATA} xKey="day" yKeys={['highTmp']}>
        {/* 👇 render function exposes various data, such as points. */}
        {({points}) => (
          // 👇 and we'll use the Line component to render a line path.
          <Line points={points.highTmp} color="red" strokeWidth={3} />
        )}
      </CartesianChart>
    </View>
  );
}

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const safePadding = '5%';

  return (
    <View style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView style={backgroundStyle}>
        <View style={{paddingRight: safePadding}}>
          <MyChart />
        </View>
      </ScrollView>
    </View>
  );
}

export default App;

[vaibhavgadekarapptware]

@marciogabrielsf In my case for first render it showing blank screen but when we click on the screen it shows the charts. It only happening on Android 14+ devices

1744089707426400.mp4

[JennieCrowel]

any updates on this? 😢

[vaibhavgadekarapptware]

any updates on this? 😢

In my case it was not rendering chart when we have conditional rendering; I removed it and now it's working fine.

[JennieCrowel]

In my case it was not rendering chart when we have conditional rendering; I removed it and now it's working fine.

Thanks, that's really strange. Was it working for you in debug mode but not in release mode?

[JennieCrowel]

I have the exact same issue as @marciogabrielsf, and I’ve tried everything he did, but nothing works.

[zibs]

Hey all, do you think it's maybe related to #509 which landed last week?

If your data is empty/null we're just not showing anything in the chart, whereas it would previously crash, but maybe there is an unintended side effect?

[JennieCrowel]

Hi, I don't think so.
I downgraded the version to 41.16.1, but it's still not working.

Also, regarding the DATA from the first comment:
const DATA = Array.from({length: 31}, (_, i) => ({ day: i, highTmp: 40 + 30 * Math.random(), }));
This is just generated mock data, so it always contains values — it’s never empty.