tomauty / react-native-chart

[NOT MAINTAINED] :bar_chart: Add line, area, pie, and bar charts to your React Native app
http://tomauty.github.io/react-native-chart
MIT License
1.57k stars 238 forks source link

Chart fail in 0.38.0 #155

Open lin493369 opened 7 years ago

lin493369 commented 7 years ago

RN Version:0.38.0 Chart Version:1.0.8-beta

When I run chart component in 0.37.0,it work well.But run in 0.38.0,when I set the chart height,it show the error:

View was rendered with explicitly set width/height but with a 0 flexBasis. (This might be fixed by changing flex: to flexGrow:) View: <RCTShadowView: 0x6080001ba940; viewName: RCTView; reactTag: 253; frame: {{0, 0}, {315, 0}}>

code is:

 <View style={styles.subContainer}>
                <View style={styles.upView}>
                    <Chart
                        style={styles.chart}
                        data={this._fetchData()}
                        verticalGridStep={4}
                        type="line"
                        showDataPoint={true}
                        color={'#5FC3E5'}
                        gridLineWidth={2}
                        showXAxisLabels={true}
                        gridColor={'#DCDCDC'}
                        axisColor={'#969696'}
                        xAxisHeight={15}
                        xAxisTransform={()=>(['aaaa','bbbb'])}
                    />
                </View>
                <View style={styles.bottomView}>
                    <Text>PushPage2</Text>
                </View>
            </View>

style:


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    subContainer:{
        flex:1,
    },
    upView:{
        flex:1
    },
    bottomView:{
        flex:1,
        backgroundColor:'gray'
    },
    chart: {
        flex:1,
        width:200,
        height:200,
    }
});

When I replace Chart with Text ,it work well I am so confuse to this error,could someone tell me how to fix it.Thx!

Crash-- commented 7 years ago

You have to edit the Chart.js. Replace line 13, flex:1 by flexGrow: 1 and rebundle the package

robcalcroft commented 7 years ago

@lin493369 https://github.com/tomauty/react-native-chart/issues/161

vtam311 commented 7 years ago

Replacing flex with flexGrow didn't solve the issue for me - instead I saw @robcalcroft's code and noticed that he deleted the flex property in line 13. Changing that line fixed it for me.

tomauty commented 7 years ago

As a generic FYI — I am no longer able to maintain this library. I recommend checking out victory-native as it's much more maintained.