I don't find the answer to my problem for my react native app.
If you have an idea how to achieve that, that would be great :)
What I'm trying to do:
In a page, when I press somewhere, I want to display an animation (for example a square apparition) on the press position.
What I have achieved:
When I click, a square is display with an animation on the right position.
But when i click somewhere else, The position of the square changes but the animation doesn't restart.
What I have tried:
To do the animation, I place a < View/> (with position: 'absolute') on the press position.
This < View/> is embeded in a component that I call 1 time in my App render:
<ClickAnimation x={item.x} y={item.y}/>
where item.x and item.y are are the coordinate.
This is the code of my component:
import React from 'react';
import {Animated, View} from 'react-native';
export default class ClickAnimation extends React.Component {
state = {
scaleAnim: new Animated.Value(0)
};
componentWillMount() {
Animated
.timing(this.state.scaleAnim, {
toValue: 2,
duration: 500
})
.start();
}
componentWillUpdate(nextProps) {
if (nextProps.x != this.props.x && nextProps.y != this.props.y) {
this.setState({
scaleAnim: new Animated.Value(0)
})
}
}
componentDidUpdate() {
console.log("componentDidUpdate",this.state.scaleAnim)
Animated
.timing(this.state.scaleAnim, {
toValue: 2,
duration: 500
})
.start();
}
render() {
return (<Animated.View
style={{
position: "absolute",
top: this.props.y,
left: this.props.x,
width: 50,
height: 50,
backgroundColor: "red",
transform: [
{
scaleY: this.state.scaleAnim
}, {
scaleX: this.state.scaleAnim
}, {
translateX: -25
}, {
translateY: -25
}
]
}}/>);
}
}
The console.log in componentDidUpdate give me for each click 2 logs:
{_children: Array(2), _value: 2, ..., _animation: null…}
{_children: Array(2), _value: 0,..., _animation: null…}
I really don't know what to do next.
PS: In NativeScript, that was more easy. I had just to add the new component to the DOM.
According to React docs you cannot this.setState() inside componentWillUpdate(),if you need to update state in response to a prop change, use componentWillReceiveProps(nextProps) instead.
https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops
Read the above link for more details on that and check its caveats.
I hope this is what is causing the problem
It seems that EXPO XDE make the application too slow and this is why the animation part doesn't work properly.
I have found the solution.
This come with this issue:
https://github.com/facebook/react-native/issues/6278
I had seen it and this is why I wrote first 0,001. But 0,001 is still to little. With 0,01 it works great.
So the answer is:
Just replace 0 by 0.01 because it was too little.
Related
I cannot find a way to change the style the IconButton of the status: 'error' Toast component in native base v3, which under the hood is using an IconButton component.
Here is the link to the main Toast functions such as useToast and their props
The simplified code to render a toast looks like the following:
import { useToast } from 'native-base';
...
const Toast = useToast():
...
Toast.show({
title: 'title',
status: 'error',
style: { backgroundColor: 'blue.200' },
})
But how would I increase the padding of the close icon button for example? It would be nice to do something like
I understand I can use the render prop to render a custom component, but I would prefer to use the default styling from native base and my extended theme - instead of having to style and render a component that looks exactly the same as the current Toast. This poses an issue if there are default style changes from native base or the app's extended theme, as changes would have to be hardcoded and changed in this render fn as well. Which is not practical!
Toast.show({
style: {
_icon: {
padding: 10,
},
}
// or
iconButtonStyle: { padding: 10 },
})
I can extend the theme and set a default style for IconButton component like so, but this would change every single IconButton in the app - which is not practical.
const myTheme = extendTheme({
components: {
IconButton: {
baseStyle: {
rounded: 'full',
padding: 10,
},
},
...
Is it possible to change the base styles like so?
const myTheme = extendTheme({
components: {
Toast: {
baseStyle: {
_icon: {
padding: 10,
},
},
},
...
It would be great to know how to change the styling of either:
the icon button of one specific Toast component (like in toast.show() above)
or the default styling for the close icon button of all Toast's, but not other IconButtons
Thanks!
I'm trying to animate some component. I Just want to change the size of the width of a View. I'm been looking the simplest way to make simple animations.I'm using the library "Animated".I can't make this work
I'm looking for some tutorials and it doesn't work.For some reason the code doesn't reconize the initial width of a "Animated.View" it is a variable declarated on the constructor just like this "animationwidth = new Animated.Value(11);".I dont know if the problem is in the declaration of the variable, in the style of the "Animated.View"or in the "animated.timing" function
import React, { Component } from 'react';
import {Animated,Text,Alert,View, Image, Button} from 'react-native';
export default class Game extends Component {
constructor(props) {
super(props);
this.state = {
opa: 1
};
animationwidth = new Animated.Value(11);
}
componentDidmount(){
Animated.timing(this.animationwidth, {
toValue: 300
}).start()
}
render(){
return(
<View style={{flex:1,alignItems:'center',backgroundColor:'green',justifyContent:'center'}}>
<Animated.View style={{ height:250, width:this.animationwidth ,backgroundColor:'blue'}}/>
</View>
)
}
}
You forgot to include state to animationwidth:
change your Animated.View component style like this:
<Animated.View style={{ height:250, width:this.state.animationwidth ,backgroundColor:'blue'}}/>
if does not animate. add duration property inside Animated timing function and also add state to animationwidth like this :
Animated.timing(this.state.animationwidth, {
toValue: 300,
duration: 1000
}).start()
}
base on your code the width of your View will start at 11 and end with 300
The problem here is the render method not called again as the state is not updated again. You need to update some state variable in componentDidmount and thus the render method will call again.
Add a state variable and toggle that variable in componentDidMount
this.state = {
isShowing : false
};
componentDidmount(){
this.setState({isShowing:!this.state.isShowing})
Animated.timing(this.animationwidth, {
toValue: 300
}).start()
}
I am using Flatlist in my rn project and when I push new data into my flatlist, my item 1 will automatically move from position A to position B. But my question is I don't want it to just change the position, I want to use animation to move my item(from position A to position B). How can I implement that? Thank you!
Please check the demo picture and video from the link down below:
https://photos.app.goo.gl/WypswNyA38A2EAPQA
https://photos.app.goo.gl/Ev1RYMduDj7mxrHn7
You can use Animated component to do the animation. As per your attached video, 2 steps animation comes into play, one which pushes the items up in the list and another one which increases the opacity of the list item. A simple approach would be to add the list item with height 0 and increase the height to desired height using animation, this will complete the first step. Once the first step is completed, control the opacity to go from 0 to 1.
Next, you need to start the animation when the list item is added to the list, componentDidMount is the right place to do so. Please consider the following component which does the above steps.
import React from 'react';
import { Animated } from 'react-native';
class AnimatedListItem extends React.Component {
constructor(...props) {
super(...props);
this.state = {
height: new Animated.Value(0),
opacity: new Animated.Value(0)
};
}
componentDidMount() {
Animated.sequence([
Animated.timing(
this.state.height,
{
toValue: this.props.height,
duration: this.props.duration || 1000
}
),
Animated.timing(
this.state.opacity,
{
toValue: 1,
duration: this.props.duration || 1000
}
)
]).start();
}
render() {
const { height, opacity } = this.state;
return (
<Animated.View
style={{
...this.props.style,
height: height,
opacity: opacity
}}
>
{this.props.children}
</Animated.View>
);
}
}
export default AnimatedListItem;
In the above snippet, two animations are passed to Animated.sequence([...]) method to animate one after the other.
You can now use the above component in the renderItem method like
renderItem = () => {
return (
<AnimatedListItem height={50} duration={800} style={...}>
/* render actual component here */
</AnimatedListItem>
);
}
Hope this will help!
Note: This is a bare minimum example to achieve what you are looking for.
I want to have accordion / toggle functionality which will have slide or similar kind of animation
I have tried out this solution. But while closing animation do not work
constructor(props) {
super(props);
height: new Animated.Value(0)
};
}
_toggle = () => {
this.state.height.setValue(0);
Animated.spring(
this.state.height,
{
toValue: expanded ? 200 : 0,
duration: 200
}
).start();
}
Thanks in advance for your answers!!!
The first line in _toggle sets the value to 0.
That's why when it's expanded, the animation goes from 0 to 0.
Removing that line should sort it.
Is there a way to get pixel measurements of native elements in React Native? For example:
Right now I'm hardcoding how much padding needs to exist so that the content isn't covered by the nav bar:
const styles = StyleSheet.create({
container: {
paddingTop: 64
}
});
IMO this is not acceptable. Is there some way to measure these elements?
Yes, you can use the onLayout event:
getInitialState() {
return { }
}
<View onLayout={(event) => this.measureView(event)}>
measureView(event) {
console.log('event properties: ', event);
this.setState({
x: event.nativeEvent.layout.x,
y: event.nativeEvent.layout.y,
width: event.nativeEvent.layout.width,
height: event.nativeEvent.layout.height
})
}
As far as calling these on Native elements, I have not tried, but possibly passing the function into the component may do it, or wrapping the native element in a view and calling the function on the outer view.