Related
Hello i have issue with range slider it goes out of bounds when I move the thumbs.
I spend a lot time to find what is going wrong but i can't find solution.
unexpected result:
issue result
const RangeSlider = ({ sliderWidth, min, max, step }: RangeSliderProps) => {
const position = useSharedValue(0);
const position2 = useSharedValue(sliderWidth);
const zIndex = useSharedValue(0);
const zIndex2 = useSharedValue(0);
const gestureHandler = useAnimatedGestureHandler<
PanGestureHandlerGestureEvent,
{ x: number; y: number }
>({
onStart: (_, ctx) => {
ctx.x = position.value;
},
onActive: (e, ctx) => {
if (ctx.x + e.translationX < 0) {
position.value = 0;
} else if (ctx.x + e.translationX > position2.value) {
position.value = position2.value;
zIndex.value = 1;
zIndex2.value = 0;
} else {
position.value = ctx.x + e.translationX
}
},
onEnd: () => {
},
});
const gestureHandler2 = useAnimatedGestureHandler<
PanGestureHandlerGestureEvent,
{ x: number; y: number }
>({
onStart: (_, ctx) => {
ctx.x = position2.value;
},
onActive: (e, ctx) => {
if (ctx.x + e.translationX > sliderWidth) {
position2.value = sliderWidth;
} else if (ctx.x + e.translationX < position.value) {
position2.value = position.value;
zIndex.value = 0;
zIndex2.value = 1;
} else {
position2.value = ctx.x + e.translationX;
}
},
onEnd: () => {
},
});
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateX: position.value }],
zIndex: zIndex.value,
}));
const animatedStyle2 = useAnimatedStyle(() => ({
transform: [{ translateX: position2.value }],
zIndex: zIndex2.value,
}));
const minLabelText: any = useAnimatedProps(() => {
return {
text: `${min +
Math.floor(position.value / (sliderWidth / ((max - min) / step))) * step
}`,
};
});
const maxLabelText: any = useAnimatedProps(() => ({
text: `${min +
Math.floor(position2.value / (sliderWidth / ((max - min) / step))) *
step
}`,
}));
const sliderStyle2 = useAnimatedStyle(() => {
return {
width: position2.value - position.value,
transform: [{ translateX: position.value }]
}
});
return (
<View style={[styles.sliderContainer, { width: sliderWidth }]} >
<Animated.View style={[styles.label]}>
<AnimatedTextInput
style={styles.labelText}
editable={false}
animatedProps={minLabelText}
/>
</Animated.View>
<View style={[styles.sliderBack, { width: sliderWidth }]} />
<Animated.View style={[styles.sliderFront, sliderStyle2]} />
<PanGestureHandler onGestureEvent={gestureHandler}>
<Animated.View style={[animatedStyle, styles.thumb]} />
</PanGestureHandler>
<PanGestureHandler onGestureEvent={gestureHandler2} >
<Animated.View style={[animatedStyle2, styles.thumb]} >
</Animated.View>
</PanGestureHandler>
<Animated.View style={[styles.label]}>
<AnimatedTextInput
style={styles.labelText}
editable={false}
animatedProps={maxLabelText}
/>
</Animated.View>
</View>
);
};
const styles = StyleSheet.create({
sliderContainer: {
justifyContent: 'center',
alignSelf: 'center',
},
sliderBack: {
height: 4,
backgroundColor: '#444444',
borderRadius: 20,
},
sliderFront: {
height: 4,
backgroundColor: '#0088D1',
borderRadius: 20,
position: 'absolute',
},
thumb: {
left: -10,
width: 13,
height: 13,
position: 'absolute',
backgroundColor: '#0088D1',
borderColor: 'white',
borderWidth: 2,
borderRadius: 10,
},
label: {
width: 35,
backgroundColor: "#444444",
borderRadius: 5,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
marginLeft: 4,
marginRight: 4
},
labelText: {
textAlign: "right",
color: '#EEEEEE',
padding: 5,
fontWeight: '500',
lineHeight: 14,
fontSize: 12,
width: '100%',
},
});
export default RangeSlider;
possible issue
const sliderStyle2 = useAnimatedStyle(() => {
return {
transform: [{ translateX: position.value }],
width: position2.value - position.value,
}
}, []);
expected result: expected image
Slider not goes out of bounds when I move the slider
overflow: 'hidden' not working as expected.
I am making an animation. There is a boxes array, that will contain seven boxes of info to render. Each box will appear at different times. Now the problem is that when the first box is being displayed, the animation plays as expected, but never runs again and all upcoming boxes is being displayed without animation. Where could be the problem? Here is my current code:
interface Styles {
wrap: ViewStyle;
front: ViewStyle;
back: ViewStyle;
}
const styles: Styles = {
wrap: {
position: 'relative',
},
front: {
width: '100%',
height: '100%',
position: 'absolute',
},
back: {
width: '100%',
height: '100%',
backfaceVisibility: 'hidden',
},
};
type Props = {
boxes: Box;
}
export const Component: React.FC<Props> = ({ boxes }) => {
const animation = useRef(new Animated.Value(0));
useEffect(() => {
const anim = Animated.timing(animation.current, {
toValue: 180,
duration: 2000,
useNativeDriver: false,
});
if (anim) {
anim.start();
}
return () => {
anim.stop();
};
}, [ animation ]);
return (
<View>
{boxes.map((box) => (
<View key={box}>
<View style={styles.wrap}>
<Animated.View
style={[ styles.front, {
transform: [ { rotateY: animation.current.interpolate({
inputRange: [ 0, 180 ],
outputRange: [ '180deg', '360deg' ],
}) } ],
}]}
>
<FrontBox box={box} />
</Animated.View>
<Animated.View
style={[ styles.back, {
transform: [ { rotateY: animation.current.interpolate({
inputRange: [ 0, 180 ],
outputRange: [ '360deg', '180deg' ],
}) } ],
}]}
>
<BackBox />
</Animated.View>
</View>
</View>
))}
</View>
);
};
suppose I have an array of data which in this context is store names. I need to animate them in a way like first one store enters about 10px from above to the box with scale of 0.5 and after a short delay it continues the get a bit of center and get bigger sanctimoniously (parallel) and after another delay it goes down of the box and desperate. like below:
so far I achieve this. and what I need is the next store to come after this one and wait for getting bigger, something like below:
the little above waits for the big one to drop and then start the same animation.
here is my code so far:
const TrackOrder = () => {
const [listData, setListData] = useState([
{
id: 1,
storeName: 'papa jones besiktas',
},
{
id: 2,
storeName: 'levent store',
},
{
id: 3,
storeName: 'sariyer store',
},
]);
const {colors} = useTheme();
// let fadeAni = useRef(new Animated.Value(0.2)).current;
let bounceLittleItem = useRef(new Animated.Value(-80)).current;
let bounceBigItem = useRef(new Animated.Value(-100)).current;
let scaleUp = useRef(new Animated.Value(0.5)).current;
const styles = useMemo(
() =>
StyleSheet.create({
mainContainer: {
backgroundColor: colors.CONTRAST_PRIMARY,
height: 100,
borderRadius: 30,
marginHorizontal: `${(100 - GUTTERS.SCREEN_WIDTH_IN_NUMBER) / 2}%`,
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'center',
paddingHorizontal: 15,
marginTop: 25,
overflow: 'hidden',
},
orderContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
},
storeImage: {
width: 45,
height: 45,
backgroundColor: 'yellow',
borderRadius: 40,
marginRight: 20,
},
orderStatusText: {
color: '#fff',
fontFamily: 'BalooPaaji2-SemiBold',
},
storeContainer: {
backgroundColor: '#fff',
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 20,
},
storeOneBeforeLastImage: {
width: 25,
height: 25,
backgroundColor: 'yellow',
borderRadius: 40,
// marginRight: 20,
opacity: 0.5,
},
}),
[colors],
);
useEffect(() => {
const inter = setInterval(() => {
let copyArr = [...listData];
let last = copyArr.pop();
copyArr.unshift(last);
setListData(copyArr);
}, 6000);
return () => clearInterval(inter);
}, [listData]);
useEffect(() => {
Animated.timing(bounceBigItem, {
toValue: -30,
duration: 2000,
useNativeDriver: true,
});
}, [bounceBigItem]);
const runAnimation = useCallback(() => {
Animated.sequence([
Animated.timing(bounceLittleItem, {
toValue: -30,
duration: 2000,
useNativeDriver: true,
}),
Animated.parallel([
Animated.timing(bounceLittleItem, {
toValue: 20,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(scaleUp, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
]),
Animated.delay(2000),
Animated.timing(bounceLittleItem, {
toValue: 100,
duration: 1000,
useNativeDriver: true,
}),
]).start(() => {
bounceLittleItem.setValue(-80);
scaleUp.setValue(0.5);
runAnimation();
});
}, [bounceLittleItem, scaleUp]);
useEffect(() => runAnimation(), [runAnimation]);
const renderViewItem = useMemo(() => {
if (listData?.length === 0) return;
return listData.map((el, i) => {
return (
<Animated.View
key={el.id}
style={[
styles.orderContainer,
i === 0
? {
transform: [{translateY: bounceLittleItem}, {scale: scaleUp}],
}
: {
transform: [{translateY: bounceBigItem}, {scale: 0.5}],
},
]}
>
<View style={[styles.storeImage]} />
<Text style={styles.orderStatusText}>{el.storeName}</Text>
</Animated.View>
);
});
}, [bounceBigItem, bounceLittleItem, listData, scaleUp, styles.orderContainer, styles.orderStatusText, styles.storeImage]);
return <View style={styles.mainContainer}>{renderViewItem}</View>;
};
so, how can I achieve my desired animation which once again is first come down and as soon as getting bigger next store come down and step on first store footprints? if you have any idea I really appreciate.
I devised a solution that works by firing the animation for every item and applying a delay according to the item's position in the list (index). The changes consist in piling up all items at the top with position: absolute, and each one comes down with a delay. Additionally, I used Animated.loop function since it seems to work more consistently.
import React, {useRef, useEffect, useCallback} from 'react';
import {StyleSheet, View, Text, Animated} from 'react-native';
const Item = ({children, index, len}) => {
let bounceLittleItem = useRef(new Animated.Value(-80)).current;
let scaleUp = useRef(new Animated.Value(0.5)).current;
const runAnimation = useCallback(
delay => {
Animated.sequence([
Animated.delay(delay),
Animated.loop(
Animated.sequence([
Animated.timing(bounceLittleItem, {
toValue: -30,
duration: 2000,
useNativeDriver: true,
}),
Animated.parallel([
Animated.timing(bounceLittleItem, {
toValue: 20,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(scaleUp, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
]),
Animated.delay(1000),
Animated.timing(bounceLittleItem, {
toValue: 100,
duration: 1000,
useNativeDriver: true,
}),
Animated.delay((2 * len - 5) * 1000),
]),
),
]).start();
},
[bounceLittleItem, scaleUp, len],
);
useEffect(() => {
console.log(`running animation ${index}`);
runAnimation(index * 2000);
}, [index, runAnimation]);
return (
<Animated.View
style={[
styles.orderContainer,
{
transform: [{translateY: bounceLittleItem}, {scale: scaleUp}],
},
]}>
{children}
</Animated.View>
);
};
const App = () => {
const listData = [
{
id: 1,
storeName: 'papa jones besiktas',
},
{
id: 2,
storeName: 'levent store',
},
{
id: 3,
storeName: 'sariyer store',
},
];
return (
<View style={styles.mainContainer}>
{listData.map(({id, storeName}, index) => (
<Item key={id} index={index} len={listData.length}>
<View style={[styles.storeImage]} />
<Text style={styles.orderStatusText}>{storeName}</Text>
</Item>
))}
</View>
);
};
const styles = StyleSheet.create({
mainContainer: {
backgroundColor: 'black',
height: 100,
borderRadius: 30,
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'center',
paddingHorizontal: 15,
marginTop: 25,
overflow: 'hidden',
},
orderContainer: {
width: '100%',
position: 'absolute',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
},
storeImage: {
width: 45,
height: 45,
backgroundColor: 'yellow',
borderRadius: 40,
marginRight: 20,
},
orderStatusText: {
color: '#fff',
fontFamily: 'BalooPaaji2-SemiBold',
},
storeContainer: {
backgroundColor: '#fff',
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 20,
},
storeOneBeforeLastImage: {
width: 25,
height: 25,
backgroundColor: 'yellow',
borderRadius: 40,
// marginRight: 20,
opacity: 0.5,
},
});
export default App;
https://snack.expo.dev/#diedu89/animation-loop
Be aware values are tailored to the duration of the animations and how close you want to run them in "parallel". I came up with the formula (2 * len - 5) for the delay of the next loop by tabulating a set of points and using an online tool to get it
For instance, with a timeline looking like this for the animation during 5000 ms and each one fired with a 2000 difference
start
finish
0
5000
2000
7000
4000
9000
6000
11000
8000
13000
I could determine that for a array with length of 3 I'd need 1000 of delay, for 4 3000, for 5 5000, and so on
length
delay
3
1000
4
3000
5
5000
6
7000
7
9000
Goal: create an OptionFan button that when pressed, rotates on its Z axis, and FanItems release from behind the main button and travel along their own respective vectors.
OptionFan.js:
import React, { useState, useEffect } from 'react';
import { Image, View, Animated, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
import FanItem from './FanItem';
const { height, width } = Dimensions.get('window');
export default class OptionFan extends React.Component {
constructor (props) {
super(props);
this.state = {
animatedRotate: new Animated.Value(0),
expanded: false
};
}
handlePress = () => {
if (this.state.expanded) {
// button is opened
Animated.spring(this.state.animatedRotate, {
toValue: 0
}).start();
this.refs.option.collapse();
this.setState({ expanded: !this.state.expanded });
} else {
// button is collapsed
Animated.spring(this.state.animatedRotate, {
toValue: 1
}).start();
this.refs.option.expand();
this.setState({ expanded: !this.state.expanded });
}
};
render () {
const animatedRotation = this.state.animatedRotate.interpolate({
inputRange: [ 0, 0.5, 1 ],
outputRange: [ '0deg', '90deg', '180deg' ]
});
return (
<View>
<View style={{ position: 'absolute', left: 2, top: 2 }}>
{this.props.options.map((item, index) => (
<FanItem ref={'option'} icon={item.icon} onPress={item.onPress} index={index} />
))}
</View>
<TouchableOpacity style={styles.container} onPress={() => this.handlePress()}>
<Animated.Image
resizeMode={'contain'}
source={require('./src/assets/img/arrow-up.png')}
style={{ transform: [ { rotateZ: animatedRotation } ], ...styles.icon }}
/>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
borderRadius: 30,
backgroundColor: '#E06363',
elevation: 15,
shadowOffset: {
height: 3,
width: 3
},
shadowColor: '#333',
shadowOpacity: 0.5,
shadowRadius: 5,
height: width * 0.155,
width: width * 0.155
},
icon: {
height: width * 0.06,
width: width * 0.06
},
optContainer: {
justifyContent: 'center',
alignItems: 'center',
borderRadius: 30,
backgroundColor: '#219F75',
elevation: 5,
shadowOffset: {
height: 3,
width: 3
},
shadowColor: '#333',
shadowOpacity: 0.5,
shadowRadius: 5,
height: width * 0.13,
width: width * 0.13,
position: 'absolute'
}
});
FanItem.js:
import React, { useState } from 'react';
import { Image, Animated, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const { width } = Dimensions.get('window');
export default class FanItem extends React.Component {
constructor (props) {
super(props);
this.state = {
animatedOffset: new Animated.ValueXY(0),
animatedOpacity: new Animated.Value(0)
};
}
expand () {
let offset = { x: 0, y: 0 };
switch (this.props.index) {
case 0:
offset = { x: -50, y: 20 };
break;
case 1:
offset = { x: -20, y: 50 };
break;
case 2:
offset = { x: 20, y: 50 };
break;
case 3:
offset = { x: 75, y: -20 };
break;
}
Animated.parallel([
Animated.spring(this.state.animatedOffset, { toValue: offset }),
Animated.timing(this.state.animatedOpacity, { toValue: 1, duration: 600 })
]).start();
}
collapse () {
Animated.parallel([
Animated.spring(this.state.animatedOffset, { toValue: 0 }),
Animated.timing(this.state.animatedOpacity, { toValue: 0, duration: 600 })
]).start();
}
render () {
return (
<Animated.View
style={
(this.props.style,
{
left: this.state.animatedOffset.x,
top: this.state.animatedOffset.y,
opacity: this.state.animatedOpacity
})
}
>
<TouchableOpacity style={styles.container} onPress={this.props.onPress}>
<Image resizeMode={'contain'} source={this.props.icon} style={styles.icon} />
</TouchableOpacity>
</Animated.View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
borderRadius: 30,
backgroundColor: '#219F75',
elevation: 5,
shadowOffset: {
height: 3,
width: 3
},
shadowColor: '#333',
shadowOpacity: 0.5,
shadowRadius: 5,
height: width * 0.13,
width: width * 0.13,
position: 'absolute'
},
icon: {
height: width * 0.08,
width: width * 0.08
}
});
Implementation:
import React from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';
import Component from './Component';
const { height, width } = Dimensions.get('window');
const testArr = [
{
icon: require('./src/assets/img/chat.png'),
onPress: () => alert('start chat')
},
{
icon: require('./src/assets/img/white_video.png'),
onPress: () => alert('video chat')
},
{
icon: require('./src/assets/img/white_voice.png'),
onPress: () => alert('voice chat')
},
{
icon: require('./src/assets/img/camera.png'),
onPress: () => alert('request selfie')
}
];
const App = () => {
return (
<View style={styles.screen}>
<Component options={testArr} />
</View>
);
};
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#E6E6E6'
}
});
export default App;
Problem: The issue is, only the last FanItem item runs its animation. (opacity, and vector translation). before implementing the opacity animation I could tell the first three FanItems did in fact render behind the main button, because I could see them when pressing the main button, as the opacity temporarily changes for the duration of the button click.
My question is 1) why are the first three mapped items not animating? and 2) how to resolve this?
You are storing ref of FanItem in option. but, ref gets overridden in each iteration of map. so, at the end it only stores ref of last FanItem in option. So, first declare one array in constructor to store ref of each FanItem:
constructor(props) {
super(props);
// your other code
this.refOptions = [];
}
Store ref of each FanItem separately like this:
{this.props.options.map((item, index) => (
<FanItem ref={(ref) => this.refOptions[index] = ref} icon={item.icon} onPress={item.onPress} index={index} />
))}
and then to animate each FanItem:
for(var i = 0; i < this.refOptions.length; i++){
this.refOptions[i].expand(); //call 'expand' or 'collapse' as required
}
This is expo snack link for your reference:
https://snack.expo.io/BygobuL3JL
I am making a quiz. And all options will render in for loop.
Expected Behaviour:
When I click on an option, if it is the wrong answer then it should change the background color to red and it should shake.
Below is the code I am trying.
import React, { Component } from "react";
import {
View,
Text,
TouchableWithoutFeedback,
Animated,
Easing
} from "react-native";
class MCQOptions extends Component {
state = {
optionSelectedStatus: 0 // 0: unselected, 1: correct, -1: wrong
};
constructor() {
super();
this.animatedValue = new Animated.Value(0);
this.shakeAnimValue = new Animated.Value(0);
}
onOptionSelected(i) {
// this.props.showNextQuestion();
var answer = this.props.answer;
if (answer == i) {
this.setState({ optionSelectedStatus: 1 });
this.showCorrectAnimation();
} else {
this.setState({ optionSelectedStatus: -1 });
this.showErrorAnimation();
}
}
showErrorAnimation() {
this.shakeAnimValue.setValue(0);
Animated.timing(this.shakeAnimValue, {
toValue: 1,
duration: 300,
easing: Easing.linear
}).start();
}
showCorrectAnimation() {}
getOptions() {
var options = [];
var optionSelectedStyle = styles.optionUnselected;
var optionShadowStyle = styles.optionShadow;
if (this.state.optionSelectedStatus == 1) {
optionSelectedStyle = styles.optionCorrect;
optionShadowStyle = null;
} else if (this.state.optionSelectedStatus == -1) {
optionSelectedStyle = styles.optionWrong;
optionShadowStyle = null;
}
const marginLeft = this.shakeAnimValue.interpolate({
inputRange: [0, 0.2, 0.4, 0.6, 0.8, 0.9, 1],
outputRange: [0, -10, 10, -10, 10, -10, 0]
});
for (var i = 0; i < this.props.options.length; i++) {
options.push(
<TouchableWithoutFeedback
onPress={this.onOptionSelected.bind(this, this.props.indexes[i])}
key={"options_" + i}
>
<View style={styles.optionBox}>
<View style={optionShadowStyle} />
<Animated.Text
style={[
styles.option,
optionSelectedStyle,
{ marginLeft: marginLeft }
]}
key={"option" + i}
>
{this.props.options[i]}
</Animated.Text>
</View>
</TouchableWithoutFeedback>
);
}
return options;
}
render() {
const marginTop = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [100, 0]
});
const opacity = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
});
return (
<Animated.View style={{ marginTop: marginTop, opacity: opacity }}>
{this.getOptions()}
</Animated.View>
);
}
// Animations
componentDidMount() {
this.slideUpOptionsContainer();
}
componentWillReceiveProps() {
this.slideUpOptionsContainer();
this.setState({ optionSelectedStatus: 0 });
}
slideUpOptionsContainer() {
this.animatedValue.setValue(0);
Animated.timing(this.animatedValue, {
toValue: 1,
duration: 300,
easing: Easing.linear
}).start();
}
}
const styles = {
optionBox: {
margin: 5
},
optionsContainer: {
marginTop: 100
},
option: {
padding: 10,
textAlign: "center",
borderRadius: 10,
overflow: "hidden",
width: "100%"
},
optionUnselected: {
backgroundColor: "#FFF"
},
optionWrong: {
backgroundColor: "red"
},
optionCorrect: {
backgroundColor: "green"
},
optionShadow: {
backgroundColor: "rgba(255,255,255,0.85)",
position: "absolute",
width: "100%",
height: "100%",
left: -5,
top: 5,
borderRadius: 10
}
};
export default MCQOptions;
The above code animating(shake) all the options (Which is proper according to the login written), and I am stuck how to make only the clicked option get animated instead all?
Edited:
Parent component with props feed:
class MCQ extends Component<{}> {
render() {
var options = ["yes", "no", "can't define"];
var indexes = [1,2,3];
var answer = 1;
optionsObj = <MCQOptions
options={options}
indexes={indexes}
answer={answer}/>;
return (
<View style={styles.container} >
<View style={styles.optionsContainer}>
{optionsObj}
</View>
</View>
);
}
}
const styles = {
container: {
flex: 1,
backgroundColor: "blue",
paddingTop: 20,
justifyContent: 'flex-start',
padding: 20
},
};
export default MCQ;
Second EDIT:
Trying to simplify problem.
Below is the simplified code with zero props. I want to animate clicked element only.
import React, { Component } from "react";
import {
View,
Text,
TouchableWithoutFeedback,
Animated,
Easing
} from "react-native";
class MCQOptions extends Component {
constructor() {
super();
this.shakeAnimValue = new Animated.Value(0);
}
showErrorAnimation() {
this.shakeAnimValue.setValue(0);
Animated.timing(this.shakeAnimValue, {
toValue: 1,
duration: 300,
easing: Easing.linear
}).start();
}
getOptions() {
const marginLeft = this.shakeAnimValue.interpolate({
inputRange: [0, 0.2, 0.4, 0.6, 0.8, 0.9, 1],
outputRange: [0, -10, 10, -10, 10, -10, 0]
});
var options = [];
for (var i = 0; i < 4; i++) {
options.push(
<TouchableWithoutFeedback
onPress={this.showErrorAnimation.bind(this)}
key={"options_" + i}
>
<View style={styles.optionBox}>
<Animated.Text style={[
styles.option,
{ marginLeft: marginLeft }
]}
key={"option" + i}
>
{"Option "+i}
</Animated.Text>
</View>
</TouchableWithoutFeedback>
);
}
return options;
}
render() {
return (
<View style={{ marginTop: 100}}>
{this.getOptions()}
</View>
);
}
}
const styles = {
optionBox: {
margin: 5
},
optionsContainer: {
marginTop: 100
},
option: {
padding: 10,
textAlign: "center",
borderRadius: 10,
overflow: "hidden",
width: "100%"
},
optionUnselected: {
backgroundColor: "#FFF"
},
optionWrong: {
backgroundColor: "red"
},
};
export default MCQOptions;
Since you want to animate them separately, they cannot bind to the same Animated object. You have to make them multiple, for example:
Example:
export class App extends Component {
constructor() {
super();
this.getOptions = this.getOptions.bind(this);
this.originalOptions = [0,1,2,3];
this.shakeAnimations = this.originalOptions.map( (i) => new Animated.Value(0) );
}
showErrorAnimation(i) {
this.shakeAnimations[i].setValue(0);
Animated.timing(this.shakeAnimations[i], {
toValue: 1,
duration: 300,
easing: Easing.linear
}).start();
}
getOptions() {
var options = this.originalOptions.map( (i) => {
const marginLeft = this.shakeAnimations[i].interpolate({
inputRange: [0, 0.2, 0.4, 0.6, 0.8, 0.9, 1],
outputRange: [0, -10, 10, -10, 10, -10, 0]
});
return (
<TouchableWithoutFeedback
onPress={() => this.showErrorAnimation(i)}
key={"options_" + i}
>
<View style={styles.optionBox}>
<Animated.Text style={[
styles.option,
{ marginLeft: marginLeft }
]}
key={"option" + i}
>
{"Option "+i}
</Animated.Text>
</View>
</TouchableWithoutFeedback>
)
});
return options;
}
render() {
return (
<View style={{ marginTop: 100}}>
{this.getOptions()}
</View>
);
}
}
const styles = {
optionBox: {
margin: 5
},
optionsContainer: {
marginTop: 100
},
option: {
padding: 10,
textAlign: "center",
borderRadius: 10,
overflow: "hidden",
width: "100%"
},
optionUnselected: {
backgroundColor: "#FFF"
},
optionWrong: {
backgroundColor: "red"
},
};
Result: