I am facing an issue with using React Native Swiper (https://github.com/leecade/react-native-swiper). When I render my View which wraps the Swiper component, all the components inside the Swiper component are displayed on the screen for a split second, before the first page is shown.
import React from 'react'
import CircularProgress from 'react-native-circular-progress-indicator';
import { StyleSheet, View, Text, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';
import { BarChart } from 'react-native-chart-kit'
const FillPercentCircle = ({ fillPercent }) => {
const getColour = () => {
// red
if (fillPercent >= 75) return '#FF0000'
// orange
if (fillPercent >= 50) return '#f39c12'
// green
return '#03AC0A'
}
const data = {
labels: ["5am", "6am", "7am", "8am", "9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm",],
datasets: [
{
data: [70, 100, 20, 45, 28, 80, 99, 43, 30, 95, 85,]
},
]
};
return (
<View style={styles.bottomPanel}>
<Swiper loadMinimal={true} loadMinimalSize={1}>
<View>
<Text style={styles.fillPanelText}>
Fill Chart
</Text>
<View style={styles.circle}>
<CircularProgress
value={fillPercent}
valueSuffix={'%'}
activeStrokeColor={getColour()}
textColor={getColour()}
/>
</View>
</View>
<BarChart
style={{
marginTop:20,
marginBottom:20,
borderRadius: 0,
// alignSelf: 'center',
}}
data={data}
fromZero={true}
width={Dimensions.get("window").width * 0.95}
height={Dimensions.get("window").height * 0.25}
yAxisSuffix="%"
yAxisInterval={25}
chartConfig={{
barPercentage: 0.35,
backgroundColor: "white",
backgroundGradientFrom: "white",
backgroundGradientTo: "white",
fillShadowGradient: 'black',
fillShadowGradientOpacity: 1,
decimalPlaces: 0, // optional, defaults to 2dp
labelColor: () => 'black',
color: () => 'transparent',
style: {
borderRadius: 16,
marginVertical:8,
padding:5,
paddingRight:0,
},
}}
verticalLabelRotation={315}
/>
</Swiper>
</View>
)
}
Basically, the second page in the Swiper (BarChart) displays on the screen for a split second, before the View (containing CircularProgress). Appreciate the assistance!
Also, if there is a way to increase the margin between the labels and x-axis of the BarChart component from react-native-chart-kit, please let me know. I can't seem to figure it out.