Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29457

React-native app loses performance when displaing chart

$
0
0

I want to use react-native-chart-kit for displaying chart, but when I add it to the app, app loses performance. It can be noticed by pressing TouchableOpacity, when chart is displayd, it takes like 0,5 secund and without char being displayed action is instant.

I am using expo, but same issue occures if I use bare react-native project. I have also tested diffrent package 'victory-native' for displaing charts, but effect is the same.

I don't know what can be the problem. I've tested it on two diffrent devices (both android) so I think this is not a case.

Here is the simple app in which problem dose occures( created by 'expo init', and then 'expo install react-native-chart-kit' and 'expo install react-native-svg' ):

App.js:

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { LineChart } from "react-native-chart-kit";

export default class App extends React.Component {

    state = {
        visible: false,
        chartConfig: {
            backgroundGradientFrom: "#1E2923",
            backgroundGradientFromOpacity: 0,
            backgroundGradientTo: "#08130D",
            backgroundGradientToOpacity: 0.5,
            color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
            barPercentage: 0.5
        },
        data: {
            labels: ["January", "February", "March", "April", "May", "June"],
            datasets: [{data: [20, 45, 28, 80, 99, 43],}],
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={{height: 40, width: 100, backgroundColor: '#ddd'}}
                    onPress={() => this.setState({visible: !this.state.visible})}
                >
                    <Text>Click</Text>
                </TouchableOpacity>
                { this.state.visible && <Text>Surprise</Text>}
                <LineChart
                    data={this.state.data}
                    width={300}
                    height={220}
                    chartConfig={this.state.chartConfig}
                />
            </View>
        );
    }
}

package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~36.0.0",
    "latest": "^0.2.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-chart-kit": "^5.2.0",
    "react-native-svg": "^9.13.6",
    "react-native-web": "~0.11.7",
    "victory-native": "^34.1.0"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

Viewing all articles
Browse latest Browse all 29457

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>