Victory-native's VictoryBar labels not displaying correctly - react-native

I cannot get my VictoryBar charts to display labels correctly in my React Native application. The x-axis represents days and y-axis represents values. I would like the chart to display
values above each bar, but it displays the day. I have set the labels property but it does nothing. Nothing happens when I console.log(d) as illustrated. The result of this code is below.
"react-native": "0.59.9"
"victory-native": "^32.0.2"
"react-native-svg": "^9.5.1",
Thanks
<VictoryChart domainPadding={70}>
<VictoryBar
data={bars}
x="label"
y="value"
// animate={{ onLoad: { duration: 1000 } }}
style={{ data: { width: 20, fill: (d) => d.x === 3 ? "#000000" : "#49C6B7" }}}
labels={(d)=>{console.log(d);return d.y}}
/>
<VictoryAxis
//x
tickLabelComponent={<VictoryLabel angle={45} />}
style={{
axis: {stroke: 'grey'},
ticks: {stroke: 'white'},
tickLabels: {fontSize: 12, padding: 3, marginLeft:10, stroke:"white", verticalAnchor: "middle", textAnchor:'start'}
}}
/>
<VictoryAxis
//y
tickFormat={(d)=> numeral(d).format('0.0a')}
dependentAxis
style={{
axis: {stroke: "grey"},
grid: {stroke:'grey'},
tickLabels: {fontSize: 0, padding: 0, stroke:'white'}
}}
/>
</VictoryChart>

labels={({ datum }) => `${datum.y}`}
import { VictoryBar,VictoryChart,VictoryAxis,VictoryTheme } from "victory-native";
<>
<VictoryChart
domainPadding={{ x: 20 }}
>
<VictoryBar
data={[
{ x: "Year 1", y: 150 },
{ x: "Year 2", y: 250 },
{ x: "Year 3", y: 100 },
{ x: "Year 4", y: 750 },
{ x: "Year 5", y: 100 }
]}
style={{
data: { fill: "black", width: 12 }
}}
animate={{
onExit: {
duration: 500,
before: () => ({
_y: 0,
fill: "orange",
label: "BYE"
})
}
}}
/>
</VictoryChart>
<VictoryChart
responsive={false}
animate={{
duration: 500,
onLoad: { duration: 200 }
}}
domainPadding={{ x: 0 }}
theme={VictoryTheme.material}
>
<VictoryAxis />
<VictoryBar
barRatio={1}
cornerRadius={0}
style={{ data: { fill: "#6DB65B" } }}
alignment="middle"
labels={({ datum }) => `${datum.y}`} // <-- important
data={[
{ x: "Year 1", y: 150 },
{ x: "Year 2", y: 250 },
{ x: "Year 3", y: 100 },
{ x: "Year 4", y: 750 },
{ x: "Year 5", y: 100 }
]}
/>
</VictoryChart>
</>

Related

I am trying to show scroll indicator in bottom when get to limit

I am trying to show the bottom indicator and then show more data when it reach the limit, I need only to know what the name of the footer indicator in ScrollView in react native
I am trying to show the bottom indicator and then show more data when it reach the limit, I need only to know what the name of the footer indicator in ScrollView in react native
`
import React, { Component } from "react";
import { Text, Button, View, StyleSheet, ScrollView } from "react-native";
class App extends Component {
state = {
// Sample data
items: [
{ item: "Item 1", price: "10", id: 1 },
{ item: "Item 2", price: "20", id: 2 },
{ item: "Item 3", price: "30", id: 3 },
{ item: "Item 4", price: "40", id: 4 },
{ item: "Item 5", price: "50", id: 5 },
{ item: "Item 6", price: "60", id: 6 },
{ item: "Item 7", price: "70", id: 7 },
{ item: "Item 8", price: "80", id: 8 },
{ item: "Item 9", price: "90", id: 9 },
{ item: "Item 10", price: "100", id: 10 },
{ item: "Item 11", price: "110", id: 11 },
{ item: "Item 12", price: "120", id: 12 },
{ item: "Item 13", price: "130", id: 13 },
{ item: "Item 14", price: "140", id: 14 },
{ item: "Item 15", price: "150", id: 15 },
],
};
render() {
return (
<View style={styles.screen}>
<ScrollView> // use of ScrollView Component
{this.state.items.map((item, index) => (
<View key={item.id}>
<View style={styles.summary}>
<Text style={styles.summaryText}>
{item.item} <Text style={styles.amount}>
${item.price}</Text>
</Text>
<Button title="Order" color="#FFC107"
onPress={() => { }} />
</View>
</View>
))}
</ScrollView>
</View>
);
}
}
// Screen styles
const styles = StyleSheet.create({
screen: {
margin: 20,
},
summary: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginBottom: 20,
padding: 10,
shadowColor: "black",
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: "white",
},
summaryText: {
fontFamily: "openSansBold",
fontSize: 18,
},
amount: {
color: "#C2185B",
},
});
export default App;
`
For illustration it is better to for provide an example.
import React, { Component } from "react";
import { Text, Button, View, StyleSheet, ScrollView, ActivityIndicator } from "react-native";
class TestScreen extends Component {
state = {
items: [...],
loading: false
};
isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
let paddingToBottom = 20;
return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
};
render() {
return (
<View style={styles.screen}>
<ScrollView
onScroll={({nativeEvent}) => {
//Check whether the scrollview is reaching bottom
if (this.isCloseToBottom(nativeEvent)) {
this.setState({loading: true});
}
}}
scrollEventThrottle={400}
>
{...Your Map Function}
{
this.state.loading && <ActivityIndicator />
}
</ScrollView>
</View>
);
}
}
It is better to implement this kind of list in a FlatList, but it is up to you. Enjoy :)
Edit: added FlatList Component for your reference
<FlatList
keyExtractor={item => item.id}
data={this.state.items}
onEndReached={()=>{
this.setState({loading: true});
}}
renderItem={({item, index}) => {
return(
<View key={item.id}>
<View style={styles.summary}>
<Text style={styles.summaryText}>
{item.item} <Text style={styles.amount}>
${item.price}</Text>
</Text>
<Button title="Order" color="#FFC107"
onPress={() => { }} />
</View>
</View>
)
}}
ListFooterComponent={()=>{
return (this.state.loading && <ActivityIndicator />)
}}
/>

#rneui/base/dist/AirbnbRating/index could not be found within the project or in these directories:

The below code is resulting in the error:
#rneui/base/dist/AirbnbRating/index could not be found within the project or in these directories
This is not in my main App.js class but in a separate class.
I have imported the following library elements
import { StyleSheet, View, Text } from 'react-native';
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart,
} from 'react-native-chart-kit';
I have used the React Native Chart Kit documentation to
const barData = [{ value: 15 }, { value: 30 }, { value: 26 }, { value: 40 }];
return (
<View>
<View>
<Text>Bezier Line Chart</Text>
<LineChart
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
],
},
],
}}
width={Dimensions.get('window').width} // from react-native
height={220}
yAxisLabel="$"
yAxisSuffix="k"
yAxisInterval={1} // optional, defaults to 1
chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#fb8c00',
backgroundGradientTo: '#ffa726',
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16,
},
propsForDots: {
r: '6',
strokeWidth: '2',
stroke: '#ffa726',
},
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</View>
</View>
);

How do I render vertical victory native legend to the right of chart?

I have the following code and the associated result. However, my goal is to render the pie chart to the left and the legend to the right. Sometimes, my categories are a lot, so I would like to make the legend scrollable.
In summary, what I need help with is displaying the two with 50-50 split of the screen
export default () => {
const { Layout } = useTheme()
return <View style={Layout.rowCenter}>
<VictoryContainer width={400} height={400} style={{ padding: 10 }}>
<VictoryLegend
standalone={false}
centerTitle
orientation="horizontal"
style={{ labels: { fontSize: 20, fill: "white" } }}
gutter={20}
width={400}
colorScale={colorScale || ["tomato", "lightgreen", "gold", "cyan", "navy", 'teal', 'magenta', 'green', 'orange', 'aqua', 'fuchsia', 'purple']}
data={[
{ name: "one" },
{ name: "Two", },
{ name: "Three", },
{ name: "four", },
{ name: "five", }
]}
/>
<VictoryPie
standalone={false}
margin={{
top: 20
}}
width={400}
height={400}
colorScale={colorScale || ["tomato", "lightgreen", "gold", "cyan", "navy", 'teal', 'magenta', 'green', 'orange', 'aqua', 'fuchsia', 'purple']}
labels={() => null}
data={[
{ x: "one", y: 35 },
{ x: "Two", y: 40 },
{ x: "Three", y: 25 },
{ x: "four", y: 55 },
{ x: "five", y: 55 }
]}
/>
</VictoryContainer>
</View>
}
use react native svg and adjust the height, width and distance from left and right using viewBox prop of react native svg, this way we can arrange and display the items in 50-50 split of the screen. Hope this answer helps.

Make curve in Bottom Tab navigation React native

I want to implement this design using React Native. For navigation
purpose I am using React Navigation 5. I tried using react-native SVG. Not having good knowledge in svg designing.
Here is the sample code.
import Svg, { Path } from 'react-native-svg';
import * as shape from 'd3-shape';
const { width } = Dimensions.get('window');
const height = 64;
const tabWidth = width / 4;
const AnimatedSvg = Animated.createAnimatedComponent(Svg)
const left = shape.line()
.x(d => d.x)
.y(d => d.y)
([
{ x: 0, y: 0 },
{ x: width, y: 0 }
]);
const right = shape.line()
.x(d => d.x)
.y(d => d.y)
([
{ x: width + tabWidth, y: 0 },
{ x: width * 2, y: 0 },
{ x: width * 2, y: height },
{ x: 0, y: height },
{ x: 0, y: 0 },
])
const tab = shape.line()
.x(d => d.x)
.y(d => d.y)
.curve(shape.curveBasis)
([
{ x: width, y: 0 },
{ x: width + 5, y: 0 },
{ x: width + 10, y: 0 },
{ x: width + 15, y: height },
{ x: width + tabWidth - 15, y: height },
{ x: width + tabWidth - 10, y: 10 },
{ x: width + tabWidth -5, y: 0 },
])
const d = `${right} ${left} ${tab}`;
const Test = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, backgroundColor: '#ea3345', justifyContent: 'flex-end' }}>
<View style={{ height }}>
<AnimatedSvg
style={{
transform:[
{
translateX:-100
}
]
}}
width={width*2}
{...{height}}>
<Path {...{ d }} fill="white" />
</AnimatedSvg>
</View>
</View>
</SafeAreaView>
)
}
export default Test
Please help me to achieve this kind of design. Thanks in advance.

Show loader until live link image does not load completely React native 0.58

I am receiving a JSON array from an api where images have a live link. So, after the success I am rendering the data, problem is I want to show an gif until the images load completely.
The array is:-
[{
"category": "Loose Flower",
"id": "7",
"product_name": "Drb,Tls,Blpt,Nlknt",
"unit_price": "0",
"img_path": "http://prabhujionline.com/bo/upload/product_img/1513948635octa_pooja_basket_w_handle6_580x#2x.jpg",
"count": 0,
"is_loaded": true
},
{
"category": "Loose Flower",
"id": "1",
"product_name": "Genda",
"unit_price": "0.5",
"img_path": "http://prabhujionline.com/bo/upload/product_img/1513947159genda.png",
"count": 0,
"is_loaded": true
}]
<Image
style={{ height: 212 / 3, width: 300 / 3, borderRadius: 5 }}
source={(this.state.singlepack.is_loaded) ? { uri:
this.state.singlepack.img_path } :
require('../../../../assets/flower-loader.gif')}
onLoadStart={(e) => {
this.changeImageLoadStatusOnStart(this.props.singleData.id) }}
onLoadEnd={(e) =>
this.changeImageLoadStatusOnEnd(this.props.singleData.id) }
/>
changeImageLoadStatusOnStart = (id)=>{
this.setState({
singlepack: {
...this.state.singlepack,
is_loaded : false
}
})
}
changeImageLoadStatusOnEnd = (id) => {
this.setState({
singlepack: {
...this.state.singlepack,
is_loaded: true
}
})
}
I have tried the onLoadStart and onLoadEnd but I am unable to make the logic, can I have some help?
defaultSource and loadingIndicatorSource is not working properly. I found a solution
const loaderImage = require('./../assets/img/spinner.png');
var {width} = Dimensions.get('window');
this.state = {
imageloading: true,
};
_renderItemFood(item) {
return (
<TouchableOpacity
style={styles.divFood}>
<Image
style={styles.imageFood}
resizeMode="contain"
source={{uri: 'https://api.example.com/images/' + item.image}}
onLoadEnd={e => this.setState({imageloading: false})}
/>
{this.state.imageloading && (
<Image
style={styles.imageFood}
resizeMode="contain"
source={loaderImage}
/>
)}
<Text>Some Product name</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
imageFood: {
width: width / 2.5 - 20 - 10,
height: width / 2.5 - 20 - 30,
backgroundColor: 'transparent',
position: 'absolute',
top: -45,
},
divFood: {
width: width / 2 - 20,
padding: 10,
borderRadius: 10,
marginTop: 55,
marginBottom: 5,
marginLeft: 10,
alignItems: 'center',
elevation: 8,
shadowOpacity: 0.3,
shadowRadius: 50,
backgroundColor: 'white',
},
});
Try this:
class YourComponent extends React.Component {
render() {
return data.map(({ img_path }) => (
<Image
style={{ height: 212 / 3, width: 300 / 3, borderRadius: 5 }}
source={{ uri: img_path }}
loadingIndicatorSource={{
uri: require('../../../../assets/flower-loader.gif'),
}}
/>
));
}
}
}
OR THIS
class YourComponent extends React.Component {
state = {
imgsLoaded: data.map(() => false),
};
componentDidMount() {
for (let i = 0; i < data.length; i++) {
Image.prefetch(data[i].img_path, () => {
const { imgsLoaded } = this.state;
const imgsLoadedUpdated = imgsLoaded.slice();
imgsLoadedUpdated[i] = true;
this.setState({ imgsLoaded: imgsLoadedUpdated });
});
}
}
render() {
const { imgsLoaded } = this.state;
return data.map(({ img_path }, index) => (
<Image
source={{
uri: imgsLoaded[index]
? img_path
: require('../../../../assets/flower-loader.gif'),
}}
/>
));
}
}