Develop Reference

Custom Circular Progress Bar Using React-Native (Without using any third party libraries)

Hi I am designing a reporting page for my react-native app. I need to show a circular progress bar and an integer value (0-8) in the middle. I have tried multiple third parties libraries and I am getting similar errors in all of the SVG libraries. So, I want to build a custom circular bar using react-native components. I have already developed a code for it, but the circle is always filled to the full value. I want to change it to the percentage completion of the variable I am passing.
For instance, I passed 4 (the range of the variable is 0-8). So the circle should be 50% filled. But as per my code, it seems not to change at all and always appears full.
I am pasting my full code below and my current output as well.
Can someone please help me with this circle progress-filling issue?
import React from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';
const CircularProgressBar = ({ value }) => {
const circumference = 2 * Math.PI * (100 / 2);
const strokeDashoffset = new Animated.Value(circumference);
React.useEffect(() => {
Animated.timing(strokeDashoffset, {
toValue: (1 - value / 100) * circumference,
duration: 1000,
useNativeDriver: false
}).start();
}, [value]);
return (
<View style={styles.container}>
<View style={styles.circle}>
<Animated.View
style={[
styles.bar,
{
strokeDashoffset,
strokeDasharray: `${circumference} ${circumference}`
}
]}
/>
<Text style={styles.text}>{value}</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center'
},
circle: {
width: 200,
height: 200,
borderRadius: 100,
borderWidth: 20,
borderColor: "#FF4433",
alignItems: 'center',
justifyContent: 'center'
},
bar: {
width: 100,
height: 100,
borderRadius: 50,
borderColor: '#FFD580',
borderWidth: 20,
transform: [{ rotate: '-90deg' }],
position: 'absolute'
},
text: {
fontSize: 43,
color: '#FFD580'
}
});
export default CircularProgressBar;
The output of this code looks like this

How to Solve ERROR Warning: Failed prop type: Invalid prop `style` of type `array` supplied to `Row`, expected `object` (react-native-table-component)

Here i'm working on a react-native-table-compornent.
when i try to run my project, and display my data in table (react native),
i get this type of error ( ERROR Warning: Failed prop type: Invalid prop textStyle of type array supplied to Cell, expected object.) on my project;
how can solve this error warning?
where is the problem in my codes? i am sharing here in below my codes.
when i excute this code, i can able to view those data in table but besides i also get this error warning in my project, so i want to solve this Warning.
anyone can help me how to fix this error or where i should do what in my project?
i appreciate your helping, thankyou in advance!
Here i am sharing my codes, i have use in vs code(react native):
import React from "react";
import { StyleSheet, View, ScrollView } from "react-native";
import { Table, Row } from "react-native-table-component";
const TT = () => {
const th = ["Name", "Age", "Gmail", "Occupation"];
const widthArr = [150, 150, 150, 150];
const td = [
["John", 32, "john01#gmail.com", "Doctor"],
["Paul", 39, "poul09#gmail.com", "Teacher"],
["Rokey", 45, "rokey03#gmail.com", "Engineer"]
];
return (
<View style={styles.container}>
<ScrollView horizontal={true}>
<View>
<Table
style={{ marginTop: 12, marginLeft: 12 }}
borderStyle={{ borderColor: "#FAEBD7", borderWidth: 1 }}
>
<Row
data={th}
widthArr={widthArr}
style={styles.header}
textStyle={styles.headerText}
/>
</Table>
<ScrollView style={styles.dataWrapper}>
<Table
style={{ marginLeft: 12 }}
borderStyle={{ borderColor: "#FAEBD7", borderWidth: 1 }}
>
{td?.map((rowData, index) => (
<Row
key={index}
data={rowData}
widthArr={widthArr}
style={[
styles.row,
index % 2 && { backgroundColor: "#212733" }
]}
textStyle={styles.text}
/>
))}
</Table>
</ScrollView>
</View>
</ScrollView>
</View>
);
};
export default TT;
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
paddingBottom: 18,
backgroundColor: "#212732"
},
header: {
height: 50,
backgroundColor: "#2F4F4F"
},
headerText: {
textAlign: "center",
fontWeight: "400",
color: "white"
},
text: {
textAlign: "center",
fontWeight: "300",
color: "#fefefe"
},
dataWrapper: {
marginTop: -1
},
row: {
height: 40,
backgroundColor: "#2c3445"
}
});
output of error:

react-native-table-component isn't being maintained by its original developer. Warnings like this are covered in the repo's issues section, and there are great forks that fix some errors.
So in my case i choose to use different library which is react native paper;
libraries: npm i react-native-paper
using dataTable i finished my project. for more information https://callstack.github.io/react-native-paper/data-table.html

How to make a view height fit the content inside in react native?

I'm building a mobile chat application and I came across this problem where I display the messages as text inside of a view, but apparently I can't make the messages appear in a certain height where it would fit inside the view. It's either the message is too long so it won't be displayed completely (there isn't enough space in the view) or the message appears but there is a lot of spaces after the text.
Please see the image that describes exactly the problem :
Here is my code :
1- Views :
if (chat.from !== CurrentUser) {
temp_chat.push(
<View key={i} style={styles.messageContainer1}>
<View style={styles.thisUserText}>
<Text style={styles.message}>{chat.msg}</Text>
</View>
<View style={styles.empty}></View>
</View>
);
} else {
temp_chat.push(
<View key={i} style={styles.messageContainer2}>
<View style={styles.empty}></View>
<View style={styles.otherUserText}>
<Text style={styles.message}>{chat.msg}</Text>
</View>
</View>
);
}
2- Style :
messageContainer1: {
flexDirection: "row",
marginBottom: 10,
flex: 1,
},
messageContainer2: {
flexDirection: "row",
justifyContent: "flex-end",
marginBottom: 10,
flex: 1,
},
message: {
fontSize: 16,
color:"#fff",
padding:10
},
empty: {
flex: 1,
},
thisUserText: {
backgroundColor: "#bf0010", // red
flex: 1,
height: 100,
borderRadius: 5,
color:"#fff",
},
otherUserText: {
backgroundColor: "#13283E", // dark blue
flex: 2,
height: 100,
borderRadius: 5,
},
What I need to have is a dynamic height for the red and dark blue views, to make the text inside fit perfectly whether it's a long or short text. How can I achieve this ?
Thanks in advance 🙏

You can use flexBasis: auto
Read here for more information

general questions regarding react native. props and style

I was tasked with making some tweaks on a react native app. while it's not my skill there is no one available to work on this so I am stuck with it. for the most part I was able to make the edits needed, however I have few questions about the code if anyone can help me understand better.
1 - what is the difference between
color={Colors.myColorGold}
color: Colors.myColorGold
2 - if I want to use the predefined style but change one parameter like color, or font size how can I do it while keeping the rest of the parameters
<Text style={{ color: Colors.ochsnerGold, fontWeight: 'bold' }}>
<Text style={styles.emphasized}>{alert.SensorType}</Text>
3 -
what is the differance between the two below
this.props.navigation.navigate('NotificationPreferences');
this.navigate('NotificationPreferences')
4 - and lastly, I wanted to change the color of the placeholder, I have tried everything without success, below is the code and all the things I tried.
const ItemPicker = ({itemOptions, handleChangeitem, selectedItemID}) => {
return Platform.OS === 'ios' ? (
<RNPickerSelect
placeholder={{label: 'Select an item', value: null, placeholderTextColor: Colors.myGold}}
placeholderTextColor={Colors.myGold} //tried this
items={itemOptions}
onValueChange={handleChangeItem}
style={{inputIOS: styles.inputIOS, inputAndroid: styles.inputAndroid, Color: Colors.myGold}} //tried this
value={selectedItemID}
textColor={Colors.myGold} //tried this
/>
) : (
<Picker
selectedValue={selectedItemID}
style={styles.inputAndroid}
onValueChange={handleChangeItem}
textColor={Colors.myGold} //tried this
Color={Colors.myGold} //tried this
>
<Picker.Item label="Select a Item" value="null" textColor={Colors.myGold} Color={Colors.myGold}/> //tried this
{
itemOptions.map((item) => (
<Picker.Item key={item.value} label={item.label} value={item.value} textColor={Colors.myGold} Color={Colors.myGold} /> //tried this
))
}
</Picker>
)
}

For
1. If you are using a component which has style as its props so you can use as color={Colors.myColorGold} . like suppose in
<MaterialIcon color={Colors.myColorGold} />
and if you want to add a color property in the styles object you do :
const proAppHeaderStyles=StyleSheet.create({
hederStyle:{
color:"#4f58ff",
}
})
suppose you want to change in
<Text style={styles.emphasized}> {alert.SensorType}</Text> just go to styles.emphasized object where its defined and add color or fontsize whatever you want to change. e.g
emphasized:{
color:'red'
}
3.this.props.navigation.navigate('NotificationPreferences') is same as the below one. Only that the above one states in explicitly and below syntax will only work if you first destructure navigate. i.e
const {navigate} = this.props.navigation; and after that use navigate as below
this.navigate('NotificationPreferences')
SO you have to apply styles as below
<RNPickerSelect
placeholder={{
label: 'Select a number or add another...',
value: null,
color: 'red',
}}
items={this.state.numbers}
onValueChange={value => {
this.setState({
favNumber: value,
});
}}
style={{
...pickerSelectStyles,
iconContainer: {
top: 20,
right: 10,
},
placeholder: {
color: 'purple',
fontSize: 12,
fontWeight: 'bold',
},
}}
value={this.state.favNumber}
Icon={() => {
return (
<View
style={{
backgroundColor: 'transparent',
borderTopWidth: 10,
borderTopColor: 'gray',
borderRightWidth: 10,
borderRightColor: 'transparent',
borderLeftWidth: 10,
borderLeftColor: 'transparent',
width: 0,
height: 0,
}}
/>
);
}}
/>
so basically inside the style object you need to pass placeholder object and then the style :
style={{
...pickerSelectStyles,
iconContainer: {
top: 20,
right: 10,
},
placeholder: { // this is the part
color: 'purple',
fontSize: 12,
fontWeight: 'bold',
},
}}
Do check out this link : example
ask me for doubts.

Scrollview cutting off the bottom of tiled-list

I have a scrollview in my React project that is supposed to list a map of data. these tiles also open accordion style in order to display more info. Nine items should be mapped and viewable, however scrollview only shows 7 and the last is cut off/the accordion and the tile itself.
Attempted: Creating a View around it with flex: 1, using FlexGrow instead of flex, adding height: 100.
<ScrollView style={styles.contentContainer}>
<View style={styles.accordianContainer}>
<Accordion
sections={this.props.gyms}
activeSections={this.state.activeSections}
renderHeader={this._renderHeader}
renderContent={this._renderContent}
onChange={this._updateSections}
underlayColor={"#ffffff"}
/>
</View>
</ScrollView>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
contentContainer: {
flex: 1,
borderColor: 'red',
borderWidth: 1,
},
accordianContainer: {
height: ( Layout.noStatusBarHeight)* .9,
width: Layout.window.width,
marginBottom: Layout.window.height / 4,
}

I had similar issue and I found a solution by adding an extra view with certain height on bottom of scrollview as :
<View style={{height: 54}} />
Hope it helps you.