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

Google Charts Timeline change bar height with react-google-charts

I have this google chart timeline (using react-google-charts).
<Chart
chartType="Timeline"
data={data}
width="100%"
options={{
allowHtml: true
bar: { groupWidth: 10 },
}}
/>
I tried adding bar: { groupWidth: 10 } and its working on the normal bar chart but not on the timeline.
Try for example this jsfiddle here: https://jsfiddle.net/c5hyknfr/2/
Doesnt work for the timeline. Any other way to do that?
EDIT: Added a bounty, in case someone knows also any workaround with CSS and/or using classes. Hacky solutions approved.

You can increase the font size for the bar's labels. This will also increase the bar's height. You need to add the barLabelStyle.fontSize-property in the options-object:
var options = {
timeline: {
groupByRowLabel: true,
showRowLabels: true,
rowLabelStyle: {
fontName: 'Helvetica',
fontSize: 9,
color: '#000000'
},
barLabelStyle: {
fontSize: 30
}
},
'width': 1100,
'height': 2200,
'chartArea': {
width: '80%', // make sure this is the same for the chart and control so the axes align right
height: '80%'
},
'backgroundColor': '#ffd',
'view': {
'columns': [0, 1, 4, 5]
}
};
Then you could adjust your CSS to decrease the font-size again, but your bars will remain bigger. Please note that the labels of the bars aren't correctly centered anymore. That's why you need to transform the position, so the labels are centered again:
rect + text {
font-size: 12px;
transform: translate(0, -5px);
}
With the values from the example it will look like this:

How to change the underline thickness in react native

I have been using reactive native for a few weeks and I have stuck at a point. I have a text and it is underlined. But I need to make the thickness of the underline higher so that it is clearly visible. I tried finding a solution and didn't get any. Can someone help me here?
My code is like the following. :
<Text style={{textDecorationLine: 'underline'}}>Underlined Text</Text>

<TextInput style={styles.textInput}/>
const styles = StyleSheet.create({
textInput: {
borderBottomColor: '#000', // Add this to specify bottom border color
borderBottomWidth: 10 // Add this to specify bottom border thickness
}
});

Underline Text
const styles = StyleSheet.create(
{
Container:
{
justifyContent: 'center',
flex: 1,
},
TextStyle:
{
textAlign: 'center',
fontSize: 20,
textDecorationLine: 'underline',
}
}

React-select: background color does not fill full width on wordWrap:"scroll"

I am trying use react-select in one of my projects. The wordWrap needs to be "scroll". However, if the option length exceeds the width of the menu and if I scroll to the right, the hover color does not fill to the full width.
Following is the code for reference. Taken from https://codesandbox.io/s/modest-curie-etoj3 with some modifications.
import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import "./styles.css";
function App() {
const customStyles = {
control: (base, state) => ({
...base,
width: 300,
background: "#023950",
// match with the menu
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
// Overwrittes the different states of border
borderColor: state.isFocused ? "yellow" : "green",
// Removes weird border around container
boxShadow: state.isFocused ? null : null,
"&:hover": {
// Overwrittes the different states of border
borderColor: state.isFocused ? "red" : "blue"
}
}),
menu: base => ({
...base,
width: 300,
// override border radius to match the box
borderRadius: 0,
// beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
hyphens: "auto",
// kill the gap
marginTop: 0,
textAlign: "left",
// prevent menu to scroll y
wordWrap: "normal"
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
})
};
const options = [
{
label: "option 1 akjbalskej",
value: 1
},
{
label: "option 2 akjbalskej",
value: 2
},
{
label: "option 3 akjbalskej",
value: 3
},
{
label: "option 4 akjbalskej",
value: 4
},
{
label: "option 5 akjbalskej",
value: 5
},
{
label:
"supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious",
value: 6
}
];
return (
<div className="App">
<Select styles={customStyles} options={options} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I am fairly new to react and frontend development. Can someone please help me on this? Thanks in advance.

You should use text-overflow, white-space and overflow instead of word-wrap:
Change your menu object to this:
menu: base => ({
...
// wordWrap: "normal",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
}),

This issue has been evoked in the following post by an other user.
Change your wordWrap: 'normal' for wordWrap: 'break-word' like in this example https://codesandbox.io/s/jj3r81l3.
Full style props:
const customStyles = {
control: (base, state) => ({
...base,
background: "#023950",
// match with the menu
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
// Overwrittes the different states of border
borderColor: state.isFocused ? "yellow" : "green",
// Removes weird border around container
boxShadow: state.isFocused ? null : null,
"&:hover": {
// Overwrittes the different states of border
borderColor: state.isFocused ? "red" : "blue"
}
}),
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 0,
// beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
hyphens: "auto",
// kill the gap
marginTop: 0,
textAlign: "left",
// prevent menu to scroll y
wordWrap: "break-word"
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
})
};

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.