Develop Reference

React-native animation not working as intended

I have a problem and would like some help. I want to create button with right arrow that moves. But unfortunately the arrow starts to move from the beginning of the button itself. I only want to move that arrow at the right side. So for now it looks like that
I think it's happening because animation is affected from button container!
So my code so far -
<TouchableOpacity
style={{
position: "absolute",
bottom: 40,
paddingVertical: 10,
paddingHorizontal: 15,
justifyContent: "center",
width: "40%",
borderRadius: 20,
flexDirection: "row",
backgroundColor: "#a12f2f",
alignItems: "center",
textAlign: "center"
}}
activeOpacity={0.9}
onPress={() => onPressNext(count)}
>
<Text style={{ fontSize: 16,color: "white", marginRight: 10,}}>
{count === 0 ? "Explain steps" : "Next step"}
</Text>
{count === 0 && (
<Animatable.View
animation={"slideInLeft"}
iterationCount={"infinite"}
>
<VectorIconComponent
size={20}
name={"arrowright"}
color={"white"}
type={ICON_TYPES.AntDesign}
/>
</Animatable.View>
)}
</TouchableOpacity>
Also I used react-native-animatable to create that animation. So my question is how can I make this animation without crossing the text?

Try this !
import React, { useEffect } from 'react'
import { Animated, SafeAreaView, View, Text, TouchableOpacity, Image, Easing } from 'react-native'
export default function App() {
const animatedValue = new Animated.Value(0)
useEffect(() => {
_start()
}, [animatedValue])
function _start() {
const toValue = 35
Animated.loop(
Animated.timing(animatedValue, {
toValue,
duration: 1000,
useNativeDriver: true
})
).start()
}
function handlePress() {
alert('ok')
}
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<TouchableOpacity
activeOpacity={0.75}
style={{ position: 'absolute', bottom: 20, height: 60, width: 200, backgroundColor: 'tan', alignSelf: 'center', borderRadius: 20, flexDirection: 'row' }}
onPress={handlePress}>
<View style={{ height: 60, width: 140, alignItems: 'center', justifyContent: 'center', }}>
<Text>
Explain Steps
</Text>
</View>
<View style={{ height: 60, width: 60, justifyContent: 'center', }}>
<Animated.View
style={{ height: 30, width: 30, transform: [{ translateX: animatedValue }] }}>
<Image
source={{ uri: 'https://cdn.iconscout.com/icon/free/png-256/right-arrow-1438234-1216195.png' }}
style={{ height: '100%', width: '100%' }}
/>
</Animated.View>
</View>
</TouchableOpacity>
</View>
</SafeAreaView>
)
}
Output

Focus Shape Inside Expo Camera

I am trying to have a focus area shape in my live camera like the picture below (circle is where one would take the image while everything out of the circle is darkened). I am currently using the expo camera exactly how it is shown in the code below. Does anyone know how I could add in a circle or square on top of this so that the user would know exactly where to take a picture of an object. Any help would be appreciated.
<View style={{ flex: 1 }}>
<Camera
style={{ flex: 1 }}
type={this.state.type}
flashMode={this.state.flashMode}
ref={(camera) => (this.camera = camera)}
zoom={this.state.cameraZoomValue}
autoFocus={Camera.Constants.AutoFocus.on}
whiteBalance={Camera.Constants.WhiteBalance.auto}
faceDetectorSettings={{
mode: FaceDetector.Constants.Mode.accurate,
detectLandmarks: FaceDetector.Constants.Landmarks.all,
runClassifications: FaceDetector.Constants.Classifications.all,
minDetectionInterval: 500,
tracking: true,
}}
onFacesDetected={this.onFacesDetected}
onFacesDetectionError={this.onFacesDetectionError}
>
</Camera>
</View>

you could try to add some view with border(top, left, right, bottom) and setting position absolutely to achieve it. Here is my code(not sort out very clean), but I think it could help.
import { StyleSheet, View ,Dimensions} from "react-native";
class App extends Component {
render() {
const { height, width } = Dimensions.get("window");
const maskRowHeight = Math.round((height - 200) / 20);
const maskColWidth = (width - 200) / 2;
return (
<View style={styles.app}>
<View style={styles.maskOutter}>
<View
style={[
{ flex: maskRowHeight },
styles.maskRow,
styles.maskFrame
]}
/>
<View style={[{ flex: 40 }, styles.maskCenter]}>
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
<View style={styles.maskInner}>
<View
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: 10,
borderColor: "#FFFFFF",
borderTopWidth: 1,
}}
/>
<View
style={{
position: "absolute",
bottom: 0,
left: 0,
width: "100%",
height: 10,
borderColor: "#FFFFFF",
borderBottomWidth: 1,
}}
/>
<View
style={{
position: "absolute",
top: 0,
left: 0,
width: 20,
height: "100%",
borderColor: "#FFFFFF",
borderLeftWidth: 1,
}}
/>
<View
style={{
position: "absolute",
top: 0,
right: 0,
width: 20,
height: "100%",
borderColor: "#FFFFFF",
borderRightWidth: 1,
}}
/>
<View
style={{
position: "absolute",
top: 0,
left: 0,
width: 30,
height: 30,
borderColor: "#00BED6",
borderTopWidth: 4,
borderLeftWidth: 4
}}
/>
<View
style={{
position: "absolute",
top: 0,
right: 0,
width: 30,
height: 30,
borderColor: "#00BED6",
borderTopWidth: 4,
borderRightWidth: 4
}}
/>
<View
style={{
position: "absolute",
bottom: 0,
left: 0,
width: 30,
height: 30,
borderColor: "#00BED6",
borderBottomWidth: 4,
borderLeftWidth: 4
}}
/>
<View
style={{
position: "absolute",
bottom: 0,
right: 0,
width: 30,
height: 30,
borderColor: "#00BED6",
borderBottomWidth: 4,
borderRightWidth: 4
}}
/>
</View>
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
</View>
<View
style={[
{ flex: maskRowHeight },
styles.maskRow,
styles.maskFrame
]}
>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
app: {
flex:1
},
cameraView: {
flex: 1,
justifyContent: "flex-start"
},
maskOutter: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
alignItems: "center",
justifyContent: "space-around"
},
maskInner: {
width: 300,
backgroundColor: "transparent"
},
maskFrame: {
backgroundColor: "#1C355E",
opacity: 0.7
},
maskRow: {
width: "100%"
},
maskCenter: { flexDirection: "row" },
rectangleText: {
justifyContent: "center",
alignItems: "center",
width: "100%",
flex: 1,
textAlign: "center",
color: "white"
}
});
export default App;
looks like this...
And you could change color what you want.
Code on sandbox

How to vertically and horizontally align child components 'on top' of parent in React Native?

I'm having a lot of trouble getting two child components to vertically and horizontally align 'on top' of their parent element in React Native.
I am trying to place Loader and Button on top of RTCView.
I currently have this JSX returning in the parent:
if (localStream) {
return (
<View style={styles.videoViewWrapper}>
<RTCView style={styles.android} streamURL={localStream.toURL()} />
<View
style={{ justifyContent: 'center', position: 'absolute', }}
>
<Loader
title={callDetails}
>
</Loader>
<Button
mode="contained"
style={{ width: 150, margin: 100 }}
onPress={handleCancelCall}>
Cancel
</Button>
</View>
</View>
);
}
And this inside Loader:
Loader = props => {
return (
<>
<StatusBar
hidden
/>
<View style={{
flex: 1,
alignItems: 'center',
}}>
<Text
style={styles.text}
>
{props.title}
</Text>
<ProgressBar color={Colors.green800} indeterminate={true} style={{ width: 100, height: 1 }} />
</View>
</>
)
}
const styles = StyleSheet.create({
text: {
fontFamily: "Quicksand-Light",
fontSize: 22,
textAlign: "center",
color: "#333333",
marginBottom: 25,
justifyContent: 'center',
}
});
Whilst I have achieved getting Loader to display 'on top' of it's parent, I cannot move them to their position at the top of the screen.
Any help would be much appreciated!

Your absolute positioned View needs to cover its parent. You can achieve this by adding top: 0, left: 0, right: 0, bottom: 0 to its style
You may need to edit your Button style. I removed it from your code, add it if you need margin or a specific width.
<View style={{ justifyContent: 'center', alignItems: 'center', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
<Loader title={callDetails} />
<Button mode="contained" onPress={handleCancelCall}>Cancel</Button>
</View>

Trying to bring my button to the front, tried zIndex?

Trying to bring a button.js component to the front of my background carousel. Tried using zIndex, worked fine with my logo but not with my button?
Button code:
return (
<View style={styles.buttonContainer} >
<TouchableOpacity onPress={onPress} style={buttonStyle} >
<Text style={textStyle} >
{children}
</Text>
</TouchableOpacity>
</View>
);
const styles = {
buttonContainer: {
zIndex: 999,
alignItems: 'center'
},
buttonStyle: {
zIndex: 999,
position: 'absolute',
bottom: -200,
flex: .3,
alignSelf: 'auto',
backgroundColor: '#ffff00',
borderRadius: 10,
borderWidth: 1,
borderColor: '#000000',
marginLeft: 5,
marginRight: 5,
width: 250,
borderWidth: 1
},
textStyle: {
zIndex: 999,
alignSelf: 'center',
color: '#000000',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
}
};
export default Button;
Code for my app. Notice how i have literally added zIndex 999 for my button, and it still has not worked.
export default function App() {
return (
<View style={styles.carouselContainer}>
<BackgroundCarousel images={images}>
<View style={styles.logoContainer}>
<Image source={logo} style={styles.logo} />
<Text style={styles.logoText}>Hello World</Text>
</View>
<View>
<Button style={{ zIndex: 999 }}>
Let's Get Started
</Button>
</View>
</BackgroundCarousel>
</View>
);
}
const styles = StyleSheet.create({
carouselContainer: {
zIndex: 1,
height: "100%",
width: "100%",
backgroundColor: '#fff',
flex: 1
},
logoContainer: {
zIndex: 2,
alignItems: 'center',
position: 'absolute',
justifyContent: "center",
top: 0, left: 0, right: 0, bottom: 450
},
logo: {
zIndex: 2,
width: 125,
height: 125,
},
logoText: {
zIndex: 2,
color: 'black',
fontSize: 25,
fontWeight: '500',
borderColor: 'white',
fontFamily: "Baskerville-Bold",
},
button: {
flex: 1,
zIndex: 999,
}
});
Basically, is there another way to bring the button forward? Seeing as how zIndex is not working for me in this case.

z-index is only relative to that element's parent so as mentioned by #prakash-karena delete the view that surrounding your button.
<View style={styles.carouselContainer}>
<BackgroundCarousel images={images}>
<View style={styles.logoContainer}>
<Image source={logo} style={styles.logo} />
<Text style={styles.logoText}>Hello World</Text>
</View>
<Button style={{ zIndex: 999 }}>
Let's Get Started
</Button>
</BackgroundCarousel>
</View>

I believe zIndex is supported in the latest version of react native for iOS only, order that you place the elements in determines its layout order. you can try making overflow visible of scrollview.

How to resize the height of a ReactJS component according to the height of the parent div?

I have a React component (Cartouche in the code) that I call x times in a div, depending on what div in which I call it.
For example, I have a div with height:690px and another with height:450px and I call the same component x times in each div, depending on the div.
I want the component to resize for it fit perfectly in each div.
Already try to change component size in CSS with % but it doesn't work.
//Component
export default function Cartouche(props) {
return (
<div style={{ width: '100%', backgroundColor: '#E5E2E2', marginTop: '2%', marginBottom: '5%', borderRadius: 30, height: 'auto' }}>
<div style={{ fontWeight: 'bold' }}>{props.data.STRING_1}</div><br />
<div style={{ textTransform: 'uppercase' }}>{props.data.STRING_2}</div>
<div style={{ border: 'solid 1px black', width: '25%', position: 'absolute', zIndex: '-1', height: 20, marginLeft: '2%', borderRadius: '0 0 10px 10px' }}>
<div style={{ position: "absolute", bottom: 3, left: 5 }}>
{props.data.TIME}
</div>
</div>
</div >
)
//First div in which I call it 5 times
return (
< div >
<div style={{ width: document.body.scrollWidth / 2.165, backgroundColor: 'white', height: 690, margin: '1% 0', padding: 25, borderRadius: 25, position: 'absolute', left: 11, zIndex: -1 }}>
<div id='parent' style={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'center' }}>
<div style={{ textAlign: 'center', border: '2px solid black', borderRadius: '50px', padding: '0 5%', display: 'flex' }}>
<h3 style={{ margin: 0 }}>PLAYLIST</h3>
</div>
</div>
<div id="cartouchePlaylist" style={{}}>
{Playlist ? displayPlaylist() : null}
</div>
</div>
</div>
);
//Second div in which I call it 6 times
< div >
<div style={{ width: document.body.scrollWidth / 2.165, backgroundColor: 'white', height: 360, marginTop: '17.6%', marginLeft: '-48.2%', padding: 25, borderRadius: 25, position: 'absolute', right: 18, top: -118 }}>
<div id='parent' style={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'center' }}>
<div style={{ textAlign: 'center', border: '2px solid black', borderRadius: '50px', padding: '0 5%', display: 'flex' }}>
<h3 style={{ margin: 0 }}>CARTOUCHIER</h3>
</div>
</div>
<div style={{}}>
{Cartouchier ? displayCartouchier() : null}
</div>
</div>
</div>
);

Use minHeight instead of height, so if the height exceeds it will resize accordingly, but never less than minHeight that we specify.