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 – Make View bigger than container View

I need to implement such two Views:
enter image description here
I made it this way:
<View
style={{
backgroundColor: colors.bigStone,
height: 2,
width: '100%',
}}>
<View style={styles.bluePoint} />
</View>
const styles = StyleSheet.create({
bluePoint: {
alignSelf: 'center',
backgroundColor: colors.bluePoint,
borderRadius: 64,
height: 4,
justifyContent: 'flex-start',
marginBottom: 2,
width: 4,
},
}
But it looks this way:
enter image description here
How can I center it?
Adding margin and padding doesn't help.
As I think, my view can't go upper of the top of its container.

Try this
<View style={styles.container}>
<View style={styles.separatorWrap}>
<View style={[styles.separator, styles.marginright]}/>
<Text style={styles.separatorText}><Avatar.Icon size={36} /></Text>
<View style={[styles.separator, styles.marginleft]}/>
</View>
</View>
i used react-native-paper icons you can use something else also
container: {
backgroundColor: "red",
flex: 1,
justifyContent: 'space-between',
},
separatorWrap: {
paddingVertical: 10,
flexDirection: "row",
alignItems: "center",
},
separator: {
borderBottomWidth: 15,
flexGrow: 1,
borderColor: "#8BDA9F",
},
separatorText: {
color: "#eee",
fontSize: 13,
zIndex:1
},
marginright:{
marginRight: -20
},
marginleft:{
marginLeft: -20
}
Example working code: https://snack.expo.io/nbAKOYFlr
Output :

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.

Why is the screen not clickable when changing backgroundColor on react-native to transparent?

I have a code which will pop up and close the popup with a little animation in it. The problem arises when I add color to the background of the popup. Because when the popup is closed and the background color has changed, the screen can't be clicked.
I thought about removing the background, but I didn't know how. I think setting backgroundColor to transparent will solve my problem. But it only removes the previous color and makes the screen not clickable.
Previously I tried to use if else to close the background, but the animation on the application doesn't even work anymore.
Here is the code I attached:
import React, { useState, useRef } from 'react';
import { Text, View, TouchableHighlight, TouchableWithoutFeedback, Animated, KeyboardAvoidingView, Dimensions, ScrollView } from 'react-native';
const testScreen = () => {
const windowHeight = Dimensions.get('window').height;
const bounceValue = useRef(new Animated.Value(windowHeight)).current;
const [reportBackgroundColor, setReportBackgroundColor] = useState("");
const _toggleSubviewAppear = () => {
var toValue = 0;
Animated.spring(
bounceValue,
{
toValue: toValue,
velocity: 3,
tension: 2,
friction: 8,
}
).start();
setReportBackgroundColor("rgba(0, 0, 0, 0.2)");
};
const _toggleSubviewDisappear = () => {
var toValue = windowHeight;
Animated.spring(
bounceValue,
{
toValue: toValue,
velocity: 3,
tension: 2,
friction: 8,
}
).start();
};
console.log(JSON.stringify(reportBackgroundColor));
return (
<View style={{ flex: 1, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center' }}>
<TouchableHighlight onPress={() => {
_toggleSubviewAppear();
}}>
<View style={{borderRadius: 100, height: 50, width: 50, backgroundColor: 'pink', justifyContent: 'center', alignItems: "center"}}>
<Text>
Click to show
</Text>
</View>
</TouchableHighlight>
<View style={{ backgroundColor: reportBackgroundColor, flex: 1, top: 0, bottom: 0, right: 0, left: 0, position: 'absolute' }}>
<Animated.View style={{ transform: [{ translateY: bounceValue }], flex: 1, zIndex: 1000, position: 'absolute', bottom: 0, left: 0, right: 0 }} >
<KeyboardAvoidingView style={{ flex: 1 }}>
<View style={{ borderColor: "#E0E0E0", borderWidth: 1, borderTopLeftRadius: 40, borderTopRightRadius: 40, backgroundColor: 'white' }}>
<ScrollView showsVerticalScrollIndicator={false}>
<TouchableWithoutFeedback onPress={() => {
_toggleSubviewDisappear();
setReportBackgroundColor("transparent");
}}>
<View style={{ position: 'absolute', right: 27, top: 27, justifyContent: 'center', alignItems: 'center', borderRadius: 100, backgroundColor: 'white', borderWidth: 1, borderColor: '#E0E0E0', height: 29, width: 29 }}>
<Text>
X
</Text>
</View>
</TouchableWithoutFeedback>
<Text style={{ marginTop: 27, alignSelf: "center", fontSize: 19, color: "#333333" }}>Laporkan Penjual</Text>
<View style={{ marginBottom: 25 }}></View>
</ScrollView>
</View>
</KeyboardAvoidingView>
</Animated.View>
</View>
</View>
)
}

You are changing Animated parent view's background color, although you change it to transparent, it still there so that couldn't click the bottom view, is there you wand to change backgroundcolor? It seems have to change this one? backgroundColor: 'white' And then confirm the animated view truly closed, and the button should be clickable.

Creating shadow design in react native

I am trying to create a UI in react-native like in the below picture:
Until now I can do only like this:
But is there any proper way to do that?
<View style={styles.frame1}>
<View style={styles.frameBefore}></View>
<View style={styles.frame2}>
<TextInput/>
</View>
</View>
frame1: {
flexDirection: 'row',
margin: 10,
borderColor: LightColorLine,
borderStyle:'solid',
borderWidth: 0.5,
backgroundColor: LightColorBackgr,
padding:10,
},
frame2:{
backgroundColor: LightColorTextBackgr,
padding: -50,
flex: 0.98,
},
frameBefore:{
width: 0,
height: 60,
borderRightWidth: 0.9,
borderColor: LightColorLine,
borderStyle:'solid',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 10,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
flex: 0.01,
transform: [{
rotate: '45deg'
}]
},

Here is the closest I was able to get
The tricky part was creating the shadow on an angle, especially considering the API's React-Native provide for shadows differ so much between iOS and Android.
To overcome this I used a linear gradient which is not included by React Native by default. I used expo-linear-gradient but there a few others you can use if you would prefer.
export const Triangle = props => (
<View style={props.style}>
<LinearGradient
colors={['black', 'transparent']}
start={[0, 0]}
end={[0.5, 0.5]}
style={styles.triangleShadow}
/>
<View style={styles.triangle} />
</View>
);
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.card}>
<Text style={styles.text}>Be Cool.</Text>
<Triangle style={styles.topLeftTriangle} />
<Triangle style={styles.bottomRightTriangle} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 32,
},
text: {
fontSize: 18,
padding: 32,
paddingVertical: 48,
fontWeight: 'bold',
borderWidth: 1,
backgroundColor: '#F66F6F',
color: 'white',
borderColor: 'gray',
},
card: {
borderWidth: 1,
padding: 8,
borderColor: 'gray',
},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 80,
borderTopWidth: 80,
borderRightColor: 'transparent',
borderTopColor: '#ecf0f1',
},
triangleShadow: {
height: 90,
width: 90,
position: 'absolute',
top: 0,
left: 0,
},
topLeftTriangle: {
position: 'absolute',
top: -10,
left: -10,
},
bottomRightTriangle: {
position: 'absolute',
bottom: -10,
right: -10,
transform: [{ rotate: '180deg' }],
},
});