Develop Reference

React Native animate an arc view, on the path of a circular view

I am making a custom circular loader component, I used one view with some borderWidth to make ring like structure and inside that View I have another view which is an arc of the same on the same path, which I want to animate, the code and current ui is attached below.
<View style={styles.container('white')}>
<View style={[styles.emptyCircle, styles.circleBase]}>
<View style={[styles.indicator, styles.circleBase]}></View>
</View>
</View>
const styles = StyleSheet.create({
container: (color) => ({
backgroundColor: color,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
width: '70%',
height: '60%',
}),
circleBase: {
height: size,
width: size,
borderRadius: size / 2,
borderWidth: size / 9,
},
emptyCircle: {
borderColor: color,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
marginTop: 40,
},
indicator: {
position: 'absolute',
borderTopColor: '#575757',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: 'transparent',
marginTop: 40,
},
Now I want to animate it so that the arc goes around the circle path.
How do I do that ?

React Native react-native-responsive-screen package not working on some devices

I am currently using:
react-native-responsive-screen package: "^1.4.2",
"react-native": "^0.64.0",
and I have the following problem:
One user claims that the UI layout does not fit the screen. He sent me the screenshot. (Attached)
size: 1080x2009
dpi: 420
I am using the package: react-native-responsive-screen in order to make the layout responsive.
It seems to work everywhere including an android emulator with the same screen characteristics like the device from the user. Same dpi, width & height.
Here is the code from my stylesheet Account.js:
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
container: {
flexDirection: "row",
flex: 1,
flexWrap: 'wrap',
alignItems: "center",
backgroundColor: "black"
},
menuContainer: {
flex: 1
},
onboardingWhole: {
justifyContent: 'center',
alignSelf: 'center',
marginTop: hp('20%'),
flex: 1,
alignItems: 'center',
padding: 10,
borderRadius: 5,
zIndex: 3,
elevation: 3,
position: 'absolute'
},
onboardingText: {
fontSize: hp('2%'),
marginTop: hp('1.5%'),
marginLeft: wp('5%'),
marginBottom: hp('1.5%'),
marginRight: wp('5%'),
color: "white",
textAlign: 'center',
fontFamily: "Anton-Regular"
},
onboardingTextHeadline: {
fontSize: hp('3%'),
marginTop: hp('1.5%'),
marginLeft: wp('5%'),
marginBottom: hp('1.5%'),
marginRight: wp('5%'),
color: orangeStyle,
textAlign: 'center',
fontFamily: "Anton-Regular"
},
cancelButtonOnboarding: {
justifyContent: 'center',
padding: 6,
width: wp('45%'),
margin: 5,
borderRadius: 5,
borderColor: redStyle,
borderWidth: 2,
height: hp('8%')
}
And my HTML:
<View style={styles.menu}>
<View style={styles.menuContainer}>
<View style={styles.onboardingWhole}><Text style={styles.onboardingTextHeadline}>WELCOME TO SAGLY! LETS IMPROVE YOUR SUSPENSION SETUP OF YOUR MTB. </Text><Text style={styles.onboardingText}>We would recommend to follow the following steps: </Text><Text style={styles.onboardingText}>1) Set up your profile so that SAGLY can make SMART SUGGESTIONS.</Text><Text style={styles.onboardingText}>2) Create a new setup. Optionally with the EASY SETUP GUIDE.</Text><Text style={styles.onboardingText}> 3) Inspect setups with MANAGE SETUPS and tune them with the WHAT SHOULD I DO WHEN ... guide.</Text><TouchableOpacity style={styles.submitButtonOnboarding} onPress={this.nextOnboardingView.bind(this)} title="next"><Text style={styles.buttonTextNext}>GOT IT!</Text></TouchableOpacity></View>
</View>
</View>
Is it bad practice what I doing here? Should I not use this package? Or am I doing smt wrong?
Thanks for your help!

To me this looks like the user has increased their OS font-size in the accessibility features. And since you are using relative font sizes (which is great, exactly for that reason) you might just want to wrap this screen inside a scroll view.

React Native borderRadius one corner not round

Hello this is the code I'm using:
menuItemButtonContainer: {
marginRight: 1,
marginLeft: 1,
marginTop: 1,
marginBottom: 1,
paddingRight: 1,
paddingLeft: 1,
paddingTop: 1,
paddingBottom: 1,
borderRadius: 10,
overflow: 'hidden',
position: "absolute",
backgroundColor: 'white',
borderWidth: 1,
borderColor: colors.navy
},
but for some reason the top right corner is not round. I've been cudgeling my brain for a day.
This is the component code
<Native.View
style={[styles.menuItemButtonContainer, {width: 50, height: 30, marginLeft: 0}]}><Native.TouchableHighlight
underlayColor={colors.darkGray}
onPress={this.orderObjectChange.bind(this, 'ADD', item.id)}
style={{
justifyContent: 'center',
alignItems: 'center'
}}><Native.View><Components.Text
style={{color: colors.navy}}>ADD</Components.Text></Native.View></Native.TouchableHighlight></Native.View>

Styles you written works, Please see the below. May be border style getting overridden by some other styles in your application.Inspect that element to see.

As I have reviewed your code and as per that, you try by using below property to give corner radius one bye one for all the corner
borderBottomLeftRadius: 10
borderBottomRightRadius: 10
borderTopLeftRadius: 10
borderTopRightRadius: 10

Try the border radius on each corner as follows:
menuItemButtonContainer: {
marginRight: 1,
marginLeft: 1,
marginTop: 1,
marginBottom: 1,
paddingRight: 1,
paddingLeft: 1,
paddingTop: 1,
paddingBottom: 1,
borderTopLeftRadius: 10, //Top Left Corner
borderTopRightRadius: 10,// Top Right Corner
borderBottomLeftRadius: 10,// Bottom Left Corner
borderBottomRightRadius: 10, // Bottom Right Corner
overflow: 'hidden',
position: "absolute",
backgroundColor: 'white',
borderWidth: 1,
borderColor: colors.navy
},

You may also use the sx prop like this:
sx={{"& .MuiOutlinedInput-root": {
borderRadius: '0 10px 0 0'
}}}

React Native border radius makes outline

I would like to make the circle view by using react-native.
Here what I did:
circle: {
position: 'absolute',
borderWidth: 10,
borderColor: '#fff',
top: 20,
left: 30,
width: 150,
height: 150,
borderRadius: 150 / 2,
backgroundColor: '#ED1D27',
}
And view
<View style={styles.circle}></View>
The result is:
There is and outline rounded the circle.
I don't want that outline. I checked by remove the border radius and it has no outline like below:
I have no idea for this issue, please help me...

So I am not entirely sure why it gives that very small red border with your current rule. It could be an actual bug. Regardless if I understand correctly, you want a circle without that small red border. You can achieve that by removing your border property:
position: 'absolute',
top: 20,
left: 30,
width: 150,
height: 150,
borderRadius: 150 / 2,
backgroundColor: '#ED1D27',
Resulting in:
If you do want a border, a potential workaround could be:
inner: {
position: 'relative',
width: 150,
height: 150,
borderRadius: 150 / 2,
backgroundColor: '#ED1D27',
},
outter:{
position: 'absolute',
paddingTop:10,
paddingLeft:10,
top: 20,
left: 30,
width: 170,
height: 170,
borderRadius: 160 / 2,
backgroundColor: '#000',
},
With a view heirarchy like:
<View style={styles.container}>
<View style={styles.outter}>
<View style={styles.inner}></View>
</View>
</View>
Resulting in:

RE-EDIT: Turns out that this border-radius issue is not isolated to working with react alone, but a general css known issue, that has been raised [and marked as fixed] numerous times. I found this link, that cites they found a solution, but also states the cause. The link in question's problem cites it initially as being related to box-shadow but from a quick google search there seems to many issues with border-radius.
Given cause:
It turns out that if your border radius is larger than the height of
the element (taking in to account padding, font-size, and so forth)
this visual error will occur.
A fiddle is given in the github link http://jsfiddle.net/2HqTZ/ (with html2canvas)
Earlier proposed solution answer 1- link to expo
Edited earlier proposed solution answer 2 - expo link
Current/ best solution (of mine) IMHO link
I think this is the best solution. I noted that if the border color was left out in the circedge css but left in only the circle css, the border 'outline' effect is greatly reduced. I also replaced borderRadius with borderTopLeftRadius etc after reading the known issues on caniuse.com
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.square} />
<View style={styles.circedge}/>
<View style={styles.circle}>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 2,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#fff',
},
square: {
position: 'absolute',
top: 30,
left: 30,
width: 200,
height: 100,
backgroundColor: 'red'
},
circle: {
position: 'absolute',
borderColor: '#fff',
top: 60,
left: 60,
width: 150,
height: 150,
borderTopLeftRadius:150/2,
borderTopRightRadius:150/2,
borderBottomLeftRadius:150/2,
borderBottomRightRadius:150/2,
backgroundColor: '#ED1D27',
},
circedge:{
position: 'absolute',
paddingTop:10,
paddingLeft:10,
top: 50,
left: 50,
width: 170,
height: 170,
borderTopLeftRadius:170/2,
borderTopRightRadius:170/2,
borderBottomLeftRadius:170/2,
borderBottomRightRadius:170/2,
backgroundColor: '#fff',
}
});

Add overflow: hidden along with the borderRadius & borderWidth property.
I think this is caused due to some extra pixels outside the element, when adding overflow as hidden it gets removed.
Actually RN issue https://github.com/facebook/react-native/issues/17267

Binding Jagged Array with knockout

I have having problem to binding jagged array in knockout-js. I have search a lot but could not found any thing. Let make a simple example,
<div data-bind="foreach: items">
<div data-bind="style: { textAlign: align, backgroundColor: bgColor, fontFamily: fontFamily, fontSize: size, color: color }, text: title"></div>
</div>
and here is the my array,
var items = [{
title: 'A',
align: 'right',
fontFamily: 'helvetica',
color: '#777777',
bgColor: '#ffffff'
},
{
title: 'A',
align: 'right',
size: 'large',
fontFamily: 'helvetica'
}
{
size: 'large',
fontFamily: 'helvetica',
color: '#777777'
}]
Clearly sometime some property(ies) are missing? So I get * is not defined* error. How to handle this situation.

you have two options. You can make sure your ViewModels aren't jagged. This is accomplished well by using the knockout mapping plugin against your model and having it use a constructor of your type. this way you can even define defaults
the other option is to reference the values off of the $data context. IE:
<div data-bind="style: { textAlign: $data.align, backgroundColor: $data.bgColor, fontFamily: $data.fontFamily, fontSize: $data.size, color: $data.color }, text: $data.title"></div>
fiddle: http://jsfiddle.net/drdamour/Xp9Er/