Having a problem here. Essentially trying to create an animation for a modal pop up when a button is tapped.
Because I have a tab bar in the application, To let the modal pop up over the tab bar, I need to wrap the Animated Component in a Modal (or maybe I don't? Would be good to know other solutions). This means that when I toggle the animation, I also want to toggle local state for the modal's visibility.
However, when I hit the button, the component updates through redux and calls the toggleModal function - the inclusion of this.setState(prevState => ({ modalVisible: !prevState.modalVisible })) is somehow causing a repetitive call of setState.
I have the animation working in a throwaway expo app without useNativeDriver and without a tab bar (thus not needing a modal component to wrap the animation).
How can I begin to fix this?
AddCircleModal:
const screenHeight = Dimensions.get("window").height
class AddCircleModal extends React.Component {
state = {
top: new Animated.Value(screenHeight),
modalVisible: false
}
componentDidUpdate() {
('modalDidUpdate')
this.toggleModal()
}
toggleModal = () => {
console.log('toggled')
this.setState(prevState => ({ modalVisible: !prevState.modalVisible })) //if I have this line I'm getting 'maximum update depth exceeded' error
if (this.props.action === 'openModal') {
Animated.spring(this.state.top, {
toValue: 174,
useNativeDriver: true
}).start()
}
if (this.props.action === 'closeModal') {
Animated.spring(this.state.top, {
toValue: screenHeight,
useNativeDriver: true
}).start()
}
}
render() {
return (
<Modal
transparent={true}
visible={this.state.modalVisible}
>
<AnimatedContainer style={{scaleY: this.state.top}}>
<TouchableOpacity
onPress={this.props.closeModal}
style={{ position: "absolute", top: 120, left: "50%", marginLeft: -22, zIndex: 1 }}
>
<Text>GO</Text>
</TouchableOpacity>
</AnimatedContainer>
</Modal>
)
}
}
const Container = styled.View`
position: absolute;
background: white;
width: 100%;
height: 100%;
z-index: 100;
border-radius: 22px;
`
const AnimatedContainer = Animated.createAnimatedComponent(Container)
function mapStateToProps(state) {
return { action: state.action }
}
function mapDispatchToProps(dispatch) {
return {
closeModal: () =>
dispatch({
type: "CLOSE_MODAL"
})
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AddCircleModal)
Related
Can anyone share a code example for a react-native animation that moves an image from left to right, then move back to the starting point and repeat the motion?
Update:
The answer below helped a lot, but it didn't work. I used it to create the following animation that moves an image from left to right (I am using RN 0.62.2).
import React from 'react'
import { StyleSheet, View, Animated, Easing } from 'react-native';
const test = require('../images/test.png');
export class Splash extends React.Component {
constructor(props) {
super(props);
this.state = { xValue: new Animated.Value(-100) }
}
moveLR = () => {
Animated.timing(
this.state.xValue,
{
toValue: 100,
duration: 1000, // the duration of the animation
easing: Easing.linear, // the style of animation
useNativeDriver: true
}
).start();
}
moveRL = () => {
Animated.timing(
this.state.xValue,
{
toValue: -100,
duration: 3000, // the duration of the animation
easing: Easing.linear, // the style of animation
useNativeDriver: true
}
).start();
}
componentDidMount = () => {
this.moveLR();
}
render = () => {
return (
<View style={styles.mainContainer}>
<Animated.Image
style={{ width: 170, height: 146 }}
source={test}
style={{ width: 170, height: 146,
transform: [{ translateX: this.state.xValue }] }}>
</Animated.Image>
</View>
)
}
}
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
animationView: {
backgroundColor: 'red',
width: 100,
height: 100
}
})
Update by Yossi:
The code below didn't work for me in RN 0.62.2. I am accepting the answer, but I modified it and the code that is working is included now in the question.
Original answer:
Before getting started, I need to introduce you to the two types of values for Animated animations:
Animated.Value () where we define a value, useful when we want to move an element on a single axis (X or Y), change the size of an element, etc. This is what we will use here, in this chapter, and this is what is used the most.
Animated.ValueXY () where we define a vector, useful for moving an element on two axes.
With these values, we can define several types of Animated animations. We will discover them one by one, testing them each time. in this example, I will only talk about Animated.timing ()
Here you can see an example of code which is gonna moove a red box from left to right and stop when the user decides, you can try it and tell if it worked for you :
// Test.js
import React from 'react'
import { StyleSheet, View, Animated, TouchableOpacity, Text, Easing } from 'react-native'
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
leftPosition : new Animated.Value (0)
}
this.mooveLR = this.mooveLR.bind(this);
this.mooveRL = this.mooveRL.bind(this);
this.stopAnimation = this.stopAnimation.bind(this);
}
stopAnimation () {
this.setState({
leftPosition : this.state.leftPosition // this forces the left position to remain the same considering the `componentDidMount` method already happened
})
}
mooveLR (){
Animated.timing(
this.state.leftPosition,
{
toValue: 100,
duration: 3000, // the duration of the animation
easing: Easing.linear, // the style of animation
}
).start() // starts this annimation once this method is called
}
mooveRL (){
Animated.timing(
this.state.leftPosition,
{
toValue: 0,
duration: 3000, // the duration of the animation
easing: Easing.linear, // the style of animation
}
).start() // starts this annimation once this method is called
}
componentDidMount(){
this.state.leftPosition === 0 ? this.mooveLR () : this.mooveRL () // repeats always when the red box return to its initial position : leftPosition === 0
}
render() {
return (
<View style={styles.main_container}>
<Animated.View style={[styles.animation_view, {left : this.state.leftPosition}]}>
</Animated.View>
<TouchableOpacity onPress = { () => this.stopAnimation ()}>
<Text>Stop animation</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
animation_view: {
backgroundColor: 'red',
width: 100,
height: 100
}
})
export default Test;
Hope it's gonna help
Regards
I have resolved this issue by doing:
import {
Easing
} from 'react-native';
Since I prefer using react hooks, I converted the solution Provided by #pacy.eth, and here it is for anyone who prefers to use react hooks.
import { View, Text, Animated, Easing } from 'react-native';
import React, { useEffect, useState } from 'react';
const Animate= ({ children, left, leftP, duration }) => {
const [leftPosition, setLeftPosition] = useState(new Animated.Value (leftP));
useEffect(() => {
left ? mooveLR() : mooveRL();
}, []);
const mooveLR = () => {
Animated.timing(leftPosition, {
toValue: 100,
duration, // the duration of the animation
easing: Easing.linear, // the style of animation
}).start(); // starts this annimation once this method is called
};
const mooveRL = () => {
Animated.timing(leftPosition, {
toValue: 0,
duration, // the duration of the animation
easing: Easing.linear, // the style of animation
}).start(); // starts this annimation once this method is called
};
return (
<Animated.View style={[{ left: leftPosition }]}>{children}</Animated.View>
);
};
export default Animate;
And with a little modifications, I made it reusable in severals ways:
one of my favorite ways, is by wrapping the component that I want to animate and I pass the the direction "left: true or false" I set the "leftP" which is the leftPosition (in my case I am hiding the view and with a click of a button I slide it in with the Animate component created) and the "duration" of the animation.
for ex:
<Animate left={false} duration={1000} leftP={-Dimensions.get('window').width}>
...
</Animate>
I'm fairly new to React-Native, so it's very likely I'm missing some core concepts.
I want to create a draggable element and be able to move it back to its original position.
The first part is ok, but when I try to update the position, it looks like it works (because when I click again, the element goes back to its original position), but the view isn't updated.
I tried calling setState and forceUpdate but it doesn't update the view.
Do you guys have any idea why ?
Here is a demo of what I have so far :
import React from 'react';
import {Button, StyleSheet, PanResponder, View, Animated} from 'react-native';
export default class Scene extends React.Component {
constructor(props) {
super(props)
const rectanglePosition = new Animated.ValueXY({ x: 0, y: 0 })
const rectanglePanResponder = this.createPanResponder();
this.state = {
rectanglePosition,
rectanglePanResponder
}
}
createPanResponder = () => {
return PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (event, gesture) => {
this.state.rectanglePosition.setValue({ x: gesture.dx, y: gesture.dy });
},
onPanResponderRelease: () => {
this.state.rectanglePosition.flattenOffset();
},
onPanResponderGrant: () => {
this.state.rectanglePosition.setOffset({
x: this.state.rectanglePosition.x._value,
y: this.state.rectanglePosition.y._value
});
}
});
}
resetPosition = () => {
const newPosition = new Animated.ValueXY({ x: 0, y: 0 })
this.setState({ rectanglePosition: newPosition }) // I thought updating the state triggered a re-render
this.forceUpdate() // doesn't work either
}
getRectanglePositionStyles = () => {
return {
top: this.state.rectanglePosition.y._value,
left: this.state.rectanglePosition.x._value,
transform: this.state.rectanglePosition.getTranslateTransform()
}
}
render() {
return (
<View style={styles.container}>
<Animated.View
style={[styles.rectangle, this.getRectanglePositionStyles()]}
{...this.state.rectanglePanResponder.panHandlers}>
</Animated.View>
<View style={styles.footer}>
<Button title="Reset" onPress={this.resetPosition}></Button>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
borderColor: 'red',
backgroundColor: '#F5FCFF',
},
footer: {
borderWidth: 1,
width: '100%',
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: 'blue',
},
rectangle: {
position: 'absolute',
height: 50,
width: 50,
backgroundColor: 'red'
}
});
If your only intention is to put it on upper left corner:
resetPosition = () => {
this.state.rectanglePosition.setValue({ x: 0, y: 0 });
};
Note! Refer to this snack to see how you do it without a state https://snack.expo.io/#ziyoshams/stack-overflow
I have a 300x300 orange View that can receive pan events using PanResponder. I have 100 circles that can be moved around together in this view. Each circle is rendered in my "Node" component when onPanResponderMove is called.
The code is ok for one circle but when there are 100 it lags. If panning quickly, there can be up to a 2s delay after touch is released where the circles continue to draw.
import React from 'react';
import {View, PanResponder} from 'react-native'
class App extends React.Component {
render(){
return <ReactSurface />
}
}
class ReactSurface extends React.Component {
constructor (props){
super(props)
console.log('ReactSurface constructor')
this.onTouchStart = this.onTouchStart.bind(this)
this.onTouchMove = this.onTouchMove.bind(this)
this.onTouchEnd = this.onTouchEnd.bind(this)
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderStart: this.onTouchStart,
onPanResponderMove: this.onTouchMove,
onPanResponderRelease: this.onTouchEnd,
})
this.coordinates = []
for(let i = 0; i < 100; i++){
this.coordinates.push(2*i)
}
this.state = {
xAxisY: 0,
yAxisX: 0,
}
}
onTouchStart(){
console.log('onTouchStart')
this.startYAxisX = this.state.yAxisX
this.startXAxisY = this.state.xAxisY
}
onTouchMove(e, gestureState) {
console.log('onTouchMove')
this.setState({
yAxisX: this.startYAxisX + gestureState.dx,
xAxisY: this.startXAxisY + gestureState.dy
})
}
onTouchEnd() {
console.log('onTouchEnd')
}
render(){
return(<View
{...this.panResponder.panHandlers}>
<View style={{
backgroundColor: 'orange',
position: 'absolute',
width:300,
height:300,
}}>
<AllNodes
xAxisY={this.state.xAxisY}
yAxisX={this.state.yAxisX}
nodeRad={25}
coordinates={this.coordinates}/>
</View>
</View>)
}
}
const AllNodes = props => {
return props.coordinates.map((value, index) => {
return <Node key={index}
rawX={value} rawY={value}
yAxisX={props.yAxisX} xAxisY={props.xAxisY}
nodeRad={props.nodeRad}/>
})
}
const Node = props => {
return <View style={{
position: 'absolute',
top: props.xAxisY + props.rawY - props.nodeRad,
left: props.yAxisX + props.rawX - props.nodeRad,
width: 2*props.nodeRad,
height: 2*props.nodeRad,
borderRadius: props.nodeRad,
borderWidth: 1,
}}/>
}
export default App
How can I make my PanResponder significantly faster?
Note: If I can't I'm considering switching to the Flutter framework as it is efficient at drawing.
Edit: here is a link to a video of the panning on react-native and flutter
https://drive.google.com/open?id=1OgvHkf56Ru_I1NVooIrqby1hy5WtSIVR
Below is my code, I try to fade out an image and after fade out go to the login page.
It goes to login page but the animation is not working.
The image comes and wait then disappears immediately. What I am doing wrong ?
state={
fadeAmin: new Animated.Value(0),
}
componentDidMount() {
this.setState({ fadeAnim: new Animated.Value(1) },
() => {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 0, // Animate to opacity: 1 (opaque)
duration: 2000,
}
).start();
})
}
componentWillMount() {
setInterval(() => {
this.props.navigation.navigate('login');
},2000) // Starts the animation
}
render() {
let { fadeAnim } = this.state;
console.log('props', this.props)
return (
<View style = {{flex:1 , alignItems:"center", justifyContent:'center'}}>
<Login navigation={this.props.navigation}/>
<Animated.View style={{ ...this.props.style, opacity: fadeAnim }} >
{this.props.children}
<Image style= {styles.logo} source={require('../../image/dataLogo.jpeg')} />
</Animated.View>
</View>
);
}
}
If I understood you correctly, after the fadeout you want to navigate to the login screen, in that case I am guessing the issue is with lifecycle methods.
So componentWillMount calls before componentDidMount, now even though you gave setTimeout (you really dont need that) its about exact time as your fade animation.
So to fix this I would suggest remove the componentWillMount and do all the logic in componentDidMount. The start takes a call back, it will be called after the animation is finished, you can take this opportunity to navigate wherever you want.
Also if you want additional time, add setTimeout then navigate.
componentDidMount() {
Animated.timing( // Animate over time
this.fadeAnim, // The animated value to drive
{
toValue: 0, // Animate to opacity: 1 (opaque)
duration: 2000,
}
).start(() => {
console.log('fading out');
// this.props.navigation.navigate('login');
/* setTimeout(() => {
this.fadeOut();
}, 2000); */
});
}
Example, https://snack.expo.io/SkFnm_x8E
I'm working with the animation of react-native lately and I'm trying to make a View component moving from side to side by click.
This is the code I have so far that works :
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Animated,
Easing,
TouchableOpacity,
Dimensions
} from 'react-native';
export default class App extends Component {
constructor () {
super()
this.state = {
isLeftSide: true,
}
this.animatedValue = new Animated.Value(0)
}
animate () {
this.animatedValue.setValue(0);
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 300,
easing: Easing.linear
}
).start()
}
fire = () => {
this.animate();
this.setState({isLeftSide: (!this.state.isLeftSide)});
}
direction = () => this.state.isLeftSide ? 'rtl' : 'ltr';
render() {
const screenWidth = Dimensions.get('screen').width;
const objectMaxCoord = screenWidth - 40;
const outputRange = {
rtl: [0, objectMaxCoord],
ltr: [objectMaxCoord, 0]
}
const marginLeft = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: outputRange[this.direction()]
})
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => this.fire()}><Text>Run</Text></TouchableOpacity>
<Animated.View
style={{
marginLeft,
height: 30,
width: 40,
backgroundColor: 'red'}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
marginTop: 30
}
});
Now, the problem is that the red cube starts on the left side, but as I click run, it jumps (without animation) to the right corner and then move smoothly(in animation) to the left side. what comes after that works just perfect. Why is this first jump happens ?
And is there any easier way to make this animation done ?
( P.S I'm working on android )
Here is a link to an expo
https://snack.expo.io/S1aAgNq6Z
Probably because the state might not update right away. Try to change your fire function like this:
this.setState({isLeftSide: (!this.state.isLeftSide)}, () => {
this.animate();
});
setState accepts a callback when done.
I was playing with a Snack for a while and the issue is clearly that the state gets unsync because it says is on the left side when actually is on the right. I don't see anything else messing with the state.
You can see it here: https://snack.expo.io/BJhb4-pAW
The snack is somehow limited so can you try this on your code?
finishedAnimation = (finished) => {
if (finished)
this.setState({isLeftSide: !(this.state.isLeftSide)});
}
fire = () => {
this.animatedValue.setValue(0);
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 300,
easing: Easing.linear
}
).start(this.finishedAnimation);
}