Actually I'm trying to set value of the animation with setValue() after Animated.timing() is finished and want to use this updated animated value then in a loop animation.
//Initialising animation value=50
const leftAnim = useRef(new Animated.Value(50)).current
useEffect(() => {
Animated.timing(leftAnim,{
toValue:360,
duration:3000,
easing:Easing.linear,
useNativeDriver:false,
}).start(({finished}) => {
//Updating animation value=100
leftAnim.setValue(100)
//Animated API is not considering the setValue and starting the loop animation with the first value i.e 50 instead of 100
Animated.loop(
Animated.timing(leftAnim,{
toValue:360,
duration:5000,
easing:Easing.linear,
useNativeDriver:false
})
).start()
})
},[])
Am I doing something wrong? Is there a better way to do it?
You can use leftAnim.setOffset(nextStart) and inside loop adjust end accordingly.
Demo on snack expo
import React, { Component, useRef, useEffect, useState } from 'react';
import { Easing, StyleSheet, View, Animated, Button, Text } from 'react-native';
const start = 0;
const end = 100;
export default Anim = () => {
const leftAnim = useRef(new Animated.Value(start)).current;
const [curValue, setCurValue] = useState(start);
useEffect(() => {
leftAnim.addListener((v) => {
setCurValue(v.value.toFixed(0));
});
Animated.timing(leftAnim, {
toValue: end,
duration: 5000,
easing: Easing.linear,
useNativeDriver: false,
}).start(({ finished }) => {
//setting value to 80
leftAnim.setOffset(80);
// increment only by 20, 80 + 20 = 100
Animated.loop(
Animated.timing(leftAnim, {
toValue: end - 80,
duration: 2000,
easing: Easing.linear,
useNativeDriver: false,
})
).start();
});
}, [leftAnim]);
return (
<View style={styles.container}>
<Animated.Image
source={require('./assets/snack-icon.png')}
style={{ width: 40, height: 40, transform: [{ translateY: leftAnim }] }}
/>
<Text>Current Value: {curValue}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'start',
alignItems: 'center',
padding: 10,
paddingTop: 50,
},
input: {
height: 50,
marginHorizontal: 15,
backgroundColor: '#ededed',
marginTop: 10,
paddingHorizontal: 9,
},
});
Repalce this:
leftAnim.setValue(100)
With this:
leftAnim._startingValue = 100
Now, when the loop animation starts, it will start from 100 because we've changed the starting value.
Snack Link
Related
I tried to "change" the default refresh indicator of a Flatlist in React Native. I thought about to have something like Snapchat or Instagram or the default IOS refresh indicator instead of the ugly Android indicator. Now I tried following:
const screenHeight = Dimensions.get("screen").height;
const lockWidth = screenHeight;
const finalPosition = lockWidth;
const pan = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
const translateBtn = pan.y.interpolate({
inputRange: [0, finalPosition / 0.75],
outputRange: [0, finalPosition / 2],
extrapolate: 'clamp',
});
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {},
onPanResponderMove: Animated.event([null, {dy: pan.y}], {
useNativeDriver: false,
}),
onPanResponderRelease: (e, g) => {
if (g.vy > 2 || g.dy > lockWidth / 2) {
unlock();
} else {
reset();
}
},
onPanResponderTerminate: () => reset(),
}),
).current;
const reset = () => {
setGeneralState(prevState => ({...prevState, scroll: true}))
Animated.spring(pan, {
toValue: {x: 0, y: 0},
useNativeDriver: true,
bounciness: 0,
}).start();
};
const unlock = () => {
setLoading(true)
Animated.spring(pan, {
toValue: {x: 0, y: 280},
useNativeDriver: true,
bounciness: 0,
}).start();
// alert("")
setTimeout(() => {
reset();
setLoading(false)
}, 1000)
};
It works just as I expect:
Now the problem:
When the Flatlist is so big that it can be scrolled (if there are many items) I cannot pull down to refresh anymore because React Native always tries to move the flatlist when I'm scrolling.
The FlatList:
<Animated.View
style={[
styles.receiverBox,
{transform: [{translateY: translateBtn}]},
]}
{...panResponder.panHandlers}>
<View>
<FlatList
data={["user1", "user2", "user3", "user4", "user5",]}
renderItem={({item}) => {
return(
<View style={{backgroundColor: colors.background, padding: 20, marginTop: -5, width: "100%",}}>
<Text style={{fontSize: Title1, color: colors.text, textAlign: "center",}}>{item}</Text>
</View>
)
}}
/>
</View>
</Animated.View>
Figured out that this may be a problem from react native or the combination of the flatlist with the pan responder.
I'd like to create this animation:
And here's my code:
import React, { FC, useEffect } from 'react';
import { Animated, StyleSheet, View, Easing } from 'react-native';
const styles = StyleSheet.create({
circle: {
borderWidth: 2,
borderColor: 'black',
position: 'absolute',
},
container: {
width: 100,
height: 100,
position: 'relative',
alignItems: 'center',
justifyContent: 'center',
},
});
const createSequence = (animation: Animated.Value, from: number, to: number) => Animated.sequence([
Animated.timing(animation, {
toValue: from,
duration: 0,
useNativeDriver: true,
}),
Animated.timing(animation, {
toValue: to,
duration: 1000,
easing: Easing.linear,
useNativeDriver: true,
}),
]);
const SpinnerCircle: FC<{ delay: number, color: string }> = ({ delay, color }) => {
const radius = new Animated.Value(35);
const opacity = new Animated.Value(0);
useEffect(() => {
Animated.sequence([
Animated.delay(delay),
Animated.loop(
Animated.parallel([
createSequence(radius, 0, 100),
createSequence(opacity, 1, 0),
]),
{ iterations: -1 },
),
]).start();
}, []);
return (
<Animated.View style={[styles.circle, {
width: radius,
height: radius,
borderRadius: radius,
borderColor: color,
opacity,
}]}/>
);
};
export const Spinner: FC = () => (
<View style={styles.container}>
<SpinnerCircle delay={0} color="#2626CC"/>
<SpinnerCircle delay={500} color="#E0E0E0"/>
</View>
);
The code DO work well in the web version. But when I'm trying to run it in android emulator, where's an error: Error: Style property 'width' is not supported by native animated module
How can I deal with it?
I know, I could use transform and scale. But scale also scales border width, which is required to be the same size.
as i am new in react native. i have no much knowledge of class component. i was stuck in code as class components are used in this code but i want to convert them into functional components. anyone please help me to convert this given code into functional component. this is a code of a swipeable card in react native all the given code in class component and use of constructor and this. i want to just convert it into functional component.
//This is an example of Tinder like Swipeable Card//
import React, { Component } from 'react';
//import react in our code.
import {
Platform, StyleSheet, View, Text,
Dimensions, Animated, PanResponder,
} from 'react-native';
//import all the components we are going to use.
const SCREEN_WIDTH = Dimensions.get('window').width;
class SwipeableCard extends React.Component {
constructor() {
super();
this.panResponder;
this.state = {
Xposition: new Animated.Value(0),
RightText: false,
LeftText: false,
};
this.Card_Opacity = new Animated.Value(1);
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => false,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => false,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderMove: (evt, gestureState) => {
this.state.Xposition.setValue(gestureState.dx);
if (gestureState.dx > SCREEN_WIDTH - 250) {
this.setState({
RightText: true,
LeftText: false,
});
} else if (gestureState.dx < -SCREEN_WIDTH + 250) {
this.setState({
LeftText: true,
RightText: false,
});
}
},
onPanResponderRelease: (evt, gestureState) => {
if (
gestureState.dx < SCREEN_WIDTH - 150 &&
gestureState.dx > -SCREEN_WIDTH + 150
) {
this.setState({
LeftText: false,
RightText: false,
});
Animated.spring(
this.state.Xposition,
{
toValue: 0,
speed: 5,
bounciness: 10,
},
{ useNativeDriver: true }
).start();
} else if (gestureState.dx > SCREEN_WIDTH - 150) {
Animated.parallel(
[
Animated.timing(this.state.Xposition, {
toValue: SCREEN_WIDTH,
duration: 200,
}),
Animated.timing(this.Card_Opacity, {
toValue: 0,
duration: 200,
}),
],
{ useNativeDriver: true }
).start(() => {
this.setState({ LeftText: false, RightText: false }, () => {
this.props.removeCard();
});
});
} else if (gestureState.dx < -SCREEN_WIDTH + 150) {
Animated.parallel(
[
Animated.timing(this.state.Xposition, {
toValue: -SCREEN_WIDTH,
duration: 200,
}),
Animated.timing(this.Card_Opacity, {
toValue: 0,
duration: 200,
}),
],
{ useNativeDriver: true }
).start(() => {
this.setState({ LeftText: false, RightText: false }, () => {
this.props.removeCard();
});
});
}
},
});
}
render() {
const rotateCard = this.state.Xposition.interpolate({
inputRange: [-200, 0, 200],
outputRange: ['-20deg', '0deg', '20deg'],
});
return (
<Animated.View
{...this.panResponder.panHandlers}
style={[
styles.card_Style,
{
backgroundColor: this.props.item.backgroundColor,
opacity: this.Card_Opacity,
transform: [
{ translateX: this.state.Xposition },
{ rotate: rotateCard },
],
},
]}>
<Text style={styles.Card_Title}> {this.props.item.card_Title} </Text>
{this.state.LeftText ? (
<Text style={styles.Left_Text_Style}> Left Swipe </Text>
) : null}
{this.state.RightText ? (
<Text style={styles.Right_Text_Style}> Right Swipe </Text>
) : null}
</Animated.View>
);
}
}
export default class App extends React.Component {
constructor() {
super();
this.state = {
Sample_Card_Array: [{
id: '1', card_Title: 'Card 1', backgroundColor: '#FFC107',
}, {
id: '2', card_Title: 'Card 2', backgroundColor: '#ED2525',
}, {
id: '3', card_Title: 'Card 3', backgroundColor: '#E7088E',
}, {
id: '4', card_Title: 'Card 4', backgroundColor: '#00BCD4',
}, {
id: '5', card_Title: 'Card 5', backgroundColor: '#FFFB14',
}],
No_More_Card: false,
};
}
componentDidMount() {
this.setState({
Sample_Card_Array: this.state.Sample_Card_Array.reverse(),
});
if (this.state.Sample_Card_Array.length == 0) {
this.setState({ No_More_Card: true });
}
}
removeCard = id => {
this.state.Sample_Card_Array.splice(
this.state.Sample_Card_Array.findIndex(x => x.id == id),
1
);
this.setState({ Sample_Card_Array: this.state.Sample_Card_Array }, () => {
if (this.state.Sample_Card_Array.length == 0) {
this.setState({ No_More_Card: true });
}
});
};
render() {
return (
<View style={styles.MainContainer}>
{this.state.Sample_Card_Array.map((item, key) => (
<SwipeableCard
key={key}
item={item}
removeCard={this.removeCard.bind(this, item.id)}
/>
))}
{this.state.No_More_Card ? (
<Text style={{ fontSize: 22, color: '#000' }}>No Cards Found.</Text>
) : null}
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Platform.OS === 'ios' ? 20 : 0,
},
card_Style: {
width: '75%',
height: '45%',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
borderRadius: 7,
},
Card_Title: {
color: '#fff',
fontSize: 24,
},
Left_Text_Style: {
top: 22,
right: 32,
position: 'absolute',
color: '#fff',
fontSize: 20,
fontWeight: 'bold',
backgroundColor: 'transparent',
},
Right_Text_Style: {
top: 22,
left: 32,
position: 'absolute',
color: '#fff',
fontSize: 20,
fontWeight: 'bold',
backgroundColor: 'transparent',
},
});
the part in the render method is what you return.
to create stateObjects in functional components you will need to use the useState method
const functionalComponent = (props)=>{//props are passed in via props arg...
const defaultState = Xposition: new Animated.Value(0),
RightText: false,
LeftText: false
}
const [state,setState] = useState(defaultState);
... // more stuff
return (
<Animated.View
{...this.panResponder.panHandlers}
style={[
styles.card_Style,
{
backgroundColor: props.item.backgroundColor,
opacity: Card_Opacity,
transform: [
{ translateX: state.Xposition },
{ rotate: rotateCard },
],
},
]}>
<Text style={styles.Card_Title}> {props.item.card_Title} </Text>
{this.state.LeftText ? (
<Text style={styles.Left_Text_Style}> Left Swipe </Text>
) : null}
{this.state.RightText ? (
<Text style={styles.Right_Text_Style}> Right Swipe </Text>
) : null}
</Animated.View>
);
}
you should really go watch some videos on useState, you can be much more granular
to set the state you will need to use the setState method returned from the useState call : setState({..state,{XPosition:55}) or something ... you do the ...state to include the old state values, as the state variable will be overwritten with exactly what you pass in... it wont "update" the existing state it will overwrite it
the next bit is hooking into the functionality in componentDidMount you can do this with useEffect
useEffect(()=>{ // this is setup
// do the stuff from componentDidMount
return ()=>{
// any required teardown can be done here
},[] //[] signifies only do this when component mounts... not every update
);// end useEffect componentDidMount
again there is alot more to useEffect, if you want to do stuff when specific state or props are updated
Description
I am working on a react-native project using expo SDK36.
I want to do a swipe left/right list view. I use react-native-swipe-list-view to achieve it.
So far everything worked perfectly, the default example uses a fixed height: 50 per row, while I want to set the height of each row dynamically.
Every attempt where a failure, note that I already use <SwipeListView recalculateHiddenLayout={true} />
This is bad for the UX, since the default line is having a small height: 50, it is nearly impossible to drag the line on iOS and android properly.
Reproduction
Snack: https://snack.expo.io/#kopax/react-native-swipe-list-view-408
import React from 'react';
import { Dimensions, Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import SwipeListView from './components/SwipeListView';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<Card>
<SwipeListView
dimensions={Dimensions.get('window')}
listViewData={Array(20).fill('').map((d, i) => ({
...d,
title: `Item ${i}`,
description: `This is a very long description for item number #${i},
it should be so long that you cannot see all the content,
the issue is about fixing the dynamic height for each row`
}))
}
minHeight={200}
/>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
This is my components/SwipeListView.js
import React, { Component } from 'react';
import {
Animated,
Image,
StyleSheet,
TouchableOpacity,
TouchableHighlight,
View,
} from 'react-native';
import {
Avatar,
Button,
Text,
Title,
Subheading,
TouchableRipple,
withTheme,
} from 'react-native-paper';
import { SwipeListView as SwipeListViewDefault } from 'react-native-swipe-list-view';
/* eslint-disable react/prop-types, react/destructuring-assignment, react/no-access-state-in-setstate */
class SwipeListView extends Component {
leftBtnRatio = 0.25;
rightBtnRatio = 0.75;
constructor(props) {
super(props);
this.state = {
listType: 'FlatList',
listViewData: props.listViewData
.map((data, i) => ({ key: `${i}`, ...data })),
};
this.rowTranslateAnimatedValues = {};
props.listViewData
.forEach((data, i) => {
this.rowTranslateAnimatedValues[`${i}`] = new Animated.Value(1);
});
}
getStyles() {
const { minHeight, theme } = this.props;
const { colors } = theme;
return StyleSheet.create({
rowFrontContainer: {
overflow: 'hidden',
},
rowFront: {
alignItems: 'center',
backgroundColor: colors.surface,
borderBottomColor: colors.accent,
borderBottomWidth: 1,
justifyContent: 'center',
minHeight: '100%',
flex: 1,
},
rowBack: {
alignItems: 'center',
backgroundColor: colors.surface,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 15,
minHeight: '100%',
},
backBtn: {
alignItems: 'center',
bottom: 0,
justifyContent: 'center',
position: 'absolute',
top: 0,
},
backLeftBtn: {
backgroundColor: colors.primary,
left: 0,
width: `${this.leftBtnRatio * 100}%`,
},
backRightBtn: {
backgroundColor: colors.accent,
right: 0,
width: `${this.rightBtnRatio * 100}%`,
},
});
}
onRowDidOpen = (rowKey) => {
console.log('This row opened', rowKey);
};
onSwipeValueChange = swipeData => {
const { dimensions } = this.props;
const { key, value } = swipeData;
if (value < -dimensions.width * this.rightBtnRatio && !this.animationIsRunning) {
this.animationIsRunning = true;
Animated.timing(this.rowTranslateAnimatedValues[key], {
toValue: 0,
duration: 200,
}).start(() => {
const newData = [...this.state.listViewData];
const prevIndex = this.state.listViewData.findIndex(item => item.key === key);
newData.splice(prevIndex, 1);
this.setState({listViewData: newData});
this.animationIsRunning = false;
});
}
};
closeRow(rowMap, rowKey) {
if (rowMap[rowKey]) {
rowMap[rowKey].closeRow();
}
}
deleteRow(rowMap, rowKey) {
this.closeRow(rowMap, rowKey);
const newData = [...this.state.listViewData];
const prevIndex = this.state.listViewData.findIndex(
(item) => item.key === rowKey,
);
newData.splice(prevIndex, 1);
this.setState({ listViewData: newData });
}
render() {
const { minHeight, dimensions, theme } = this.props;
const { colors } = theme;
const styles = this.getStyles();
return (
<SwipeListViewDefault
data={this.state.listViewData}
renderItem={data => (
<Animated.View
style={[styles.rowFrontContainer, {
height: this.rowTranslateAnimatedValues[data.item.key].interpolate({
inputRange: [0, 1],
outputRange: [0, minHeight],
})}]}
>
<TouchableRipple
onPress={() => console.log('You touched me')}
style={styles.rowFront}
underlayColor={colors.background}
>
<View>
<Title>{data.item.title}</Title>
<Text>
{data.item.description}
</Text>
</View>
</TouchableRipple>
</Animated.View>
)}
renderHiddenItem={(data, rowMap) => (
<View style={styles.rowBack}>
<TouchableOpacity
style={[
styles.backLeftBtn,
styles.backBtn,
]}
onPress={() => this.closeRow(rowMap, data.item.key)}
>
<Text>Tap pour annuler</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.backRightBtn,
styles.backBtn,
]}
onPress={() => this.deleteRow(rowMap, data.item.key)}
>
<Animated.View
style={[
styles.trash,
{
transform: [
{
scale: this.rowTranslateAnimatedValues[
data.item.key
].interpolate({
inputRange: [
45,
90,
],
outputRange: [0, 1],
extrapolate:
'clamp',
}),
},
],
},
]}
>
<Text>Swipe left to delete</Text>
</Animated.View>
</TouchableOpacity>
</View>
)}
leftOpenValue={dimensions.width * this.leftBtnRatio}
rightOpenValue={-dimensions.width * this.rightBtnRatio}
previewRowKey={'0'}
previewOpenValue={-40}
previewOpenDelay={3000}
onRowDidOpen={this.onRowDidOpen}
onSwipeValueChange={this.onSwipeValueChange}
recalculateHiddenLayout={true}
/>
);
}
}
export default withTheme(SwipeListView);
Expect
I expect when using recalculateHiddenLayout={true}, to get the hidden row height calculated dynamically
Result Screenshots
On the web, I am able to set the height:
but I when using iOS and Android, the height is forced.
Environment
OS: ios/android/web
RN Version: expo SDK36
How can I set the height of each row dynamically?
Important edit
The problem is the fixed value here in the animation:
height: this.rowTranslateAnimatedValues[data.item.key].interpolate({
inputRange: [0, 1],
outputRange: [0, 200], // <--- here
})}]}
I have replaced it in the example with props.minHeight:
height: this.rowTranslateAnimatedValues[data.item.key].interpolate({
inputRange: [0, 1],
outputRange: [0, this.props.minHeight],
})}]}
It doesn't permit dynamic height, how can I get the row height dynamically?
I'm making a short game with react native where one image at a time is moving from top to bottom of the screen using Animated. Now I need the moving image to be draggable so that I can programme the drop part after. I'm already using PanResponder but I still can't drag the image. You can see my code below. Any ideas on how to fix this? Thank you for your attention.
import React from 'react';
import { StyleSheet, Text, View, Image, StatusBar, Dimensions, Animated, TouchableOpacity, PanResponder } from 'react-native';
import { Actions } from 'react-native-router-flux';
const largura = Dimensions.get('window').width;
const altura = Dimensions.get('window').height;
export default class JogoArrasto extends React.Component {
constructor(props) {
super(props);
this.state = {
left: Math.floor(Math.random() * ((largura - 120) - 120)) + 120,
randomImg: Math.floor(Math.random() * (5 - 1)) + 1,
ingCair: null,
maca: require('../imgs/maca.png'),
doce: require('../imgs/doce.png'),
gema: require('../imgs/gema.png'),
corpoDeus: require('../imgs/corpoDeus.png'),
acucar: require('../imgs/acucar.png'),
pan: new Animated.ValueXY(), //Step 1 do drag & drop
ingCertos: 0,
ingErrados: 0
}
this.animatedValue2 = new Animated.Value(0);
this.panResponder = PanResponder.create({ //Step 2 do drag & drop
onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([null, { //Step 3 do drag & drop
dx: this.state.pan.x,
dy: this.state.pan.y
}]),
onPanResponderRelease: (e, gesture) => { } //Step 4 do drag & drop
});
}
componentDidMount() {
if (this.state.randomImg === 1) {
this.setState({
ingCair: this.state.maca
})
} else if (this.state.randomImg === 2) {
this.setState({
ingCair: this.state.doce
})
} else if (this.state.randomImg === 3) {
this.setState({
ingCair: this.state.gema
})
} else if (this.state.randomImg === 4) {
this.setState({
ingCair: this.state.corpoDeus
})
} else if (this.state.randomImg === 5) {
this.setState({
ingCair: this.state.acucar
})
}
this.moveIng2();
}
moveIng2 = () => {
console.log('ing: ' + this.state.randomImg);
this.animatedValue2.setValue(-120);
Animated.sequence([
Animated.timing(this.animatedValue2, {
toValue: -120,
duration: 1
}),
Animated.timing(this.animatedValue2, {
toValue: 600,
duration: 3000
})
]).start(() => {
this.animatedValue2.addListener(({
value
}) => this._value = value);
let valor = this.animatedValue2._value.toFixed(1);
this.confere(valor);
});
}
confere = (atualValorIng) => {
if (atualValorIng == 600) {
Animated.timing(this.animatedValue2).stop();
const novoRandom = Math.floor(Math.random() * (5 - 1)) + 1;
this.setState({
left: Math.floor(Math.random() * ((largura - 120) - 120)) + 120,
randomImg: novoRandom
})
if (this.state.randomImg === 1) {
this.setState({
ingCair: this.state.maca
})
} else if (this.state.randomImg === 2) {
this.setState({
ingCair: this.state.doce
})
} else if (this.state.randomImg === 3) {
this.setState({
ingCair: this.state.gema
})
} else if (this.state.randomImg === 4) {
this.setState({
ingCair: this.state.corpoDeus
})
} else if (this.state.randomImg === 5) {
this.setState({
ingCair: this.state.acucar
})
}
this.moveIng2();
}
}
render() {
return (
<View style={styles.main}>
<StatusBar hidden />
<TouchableOpacity style={styles.circle} onPress={() => { Actions.menu(); }}>
<Text style={styles.textoMenu}>Menu</Text>
</TouchableOpacity>
<View style={styles.viewImg}>
<Image style={styles.img1} source={require('../imgs/cestoOutros.png')} />
<Image style={styles.img2} source={require('../imgs/tacho.png')} />
</View>
<Animated.Image
{...this.panResponder.panHandlers}
style={[this.state.pan.getLayout(), {
position: 'absolute',
width: 90,
top: this.animatedValue2,
left: this.state.left
}]} source={this.state.ingCair} />
</View>
);
}
}
const styles = StyleSheet.create({
main: {
backgroundColor: '#324C5A',
flex: 1,
width: '100%',
height: '100%',
flexWrap: 'wrap',
alignItems: 'center',
alignContent: 'center',
},
circle: {
width: 160,
height: 80,
justifyContent: 'center',
borderBottomLeftRadius: 180,
borderBottomRightRadius: 180,
backgroundColor: '#fff',
marginBottom: 20
},
textoMenu: {
color: '#1D1D1D',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 18
},
img1: {
display: 'flex',
width: 128,
marginRight: 20
},
img2: {
display: 'flex',
width: 128
},
viewImg: {
flexDirection: 'row',
justifyContent: 'center',
position: 'absolute',
bottom: 10,
alignContent: 'center'
}
})
Update
If I comment these two lines top: this.animatedValue2, left: this.state.left I can drag the Image, but it stops falling from the top to the bottom of the screen. Help please...
I don't get what exactly do you want but after commenting out top: this.animatedValue2 left: this.state.left Your image response to draggable.
<Animated.Image
{...this.panResponder.panHandlers}
style={[this.state.pan.getLayout(), {
position: 'absolute',
width: 90,
height:500,
// top: this.animatedValue2, <--- comment out this line
// left: this.state.left <--- comment out this line
}]}source={this.state.ingCair} />
Not sure exactly what the issue is, but a few bits of advice that'll help:
when I keep animated values in state, sometimes setting state in the middle of an animation makes for weird behavior, so I'd keep it out of state and use a standard animated value.
instead of using top/left (which aren't supported by the native driver), use transform: [{ translateX }, { translateY }] that way you can use the native driver, it'll make the animation way more performant.
check out rn-gesture-handler