I have an animation that moves a card to the middle while scaling it up, and then it flips over. There is a clickable icon on the flipped side of the card that reverses the animation, bringing the card back to where it was. The problem is that the right side of this icon, which is outside the view boundary of the card's initial position, is not clickable, even though it appears on top. I have also tried using a button with the same results.
Screen before flipping the card:
Screen after flipping the card:
Here is the code, simplified as much as I could for this:
import React, {Component} from 'react';
import ReactNative,
{
View,
Text,
StyleSheet,
Image,
TouchableWithoutFeedback,
TouchableHighlight,
Dimensions,
Animated
}
from 'react-native';
import colors from '../config/colors';
import {PrimaryButton} from '../components/PrimaryButton';
import AsyncStorage from '@react-native-community/async-storage';
import Icon from 'react-native-vector-icons/Ionicons';
const { width, height } = Dimensions.get('window');
class choose_game_screen extends Component {
constructor (props) {
super(props);
this.state = {
card_flipped: false,
owns_app: false,
animation1: new Animated.ValueXY(),
scale_animation1: new Animated.Value(1),
flip_animation1: new Animated.Value(0),
index1: 1,
index2: 1,
card_disabled: false,
card_flipped1: false,
card_flipped2: false,
}
}
ownsAppTrue = () => {
//flip animation code
}
reverseFlip() {
//reverse flip animation code
}
saveDimensions = e => {
this._width = e.nativeEvent.layout.width;
this._height = e.nativeEvent.layout.height;
};
test = () => {
this.setState({card_flipped: false});
this.setState({owns_app: false});
}
render() {
// animated styles are here
return (
<View style={styles.container}>
<View style={{flexDirection: 'row'}}>
<View style={{flex: 1, alignItems: 'center', zIndex: this.state.index1}}>
<TouchableWithoutFeedback
onPress={() => this.ownsAppTrue()}
disabled={this.state.card_disabled}
>
<View style={{paddingBottom: 10}}>
<Animated.View style={parent_animation1} onLayout={this.saveDimensions}>
<Animated.View style={[styles.cardBack, front_animation1]}>
<Image
source={require('../components/ChooseGameCard/images/TestImage.png')}
style={styles.imageSize}
/>
</Animated.View>
<Animated.View style={[back_animation1, styles.cardBack, styles.flipCard]}>
<Text>This is Front</Text>
<View>
<TouchableHighlight
onPress={() => this.reverseFlip()}
>
<Icon
name='ios-close-circle'
size={35}
style={{alignSelf: 'flex-start'}}
color={colors.primaryText}
/>
</TouchableHighlight>
</View>
</Animated.View>
</Animated.View>
</View>
</TouchableWithoutFeedback>
</View>
<View style={{flex: 1, alignItems: 'center', zIndex: this.state.index2}}>
<View
style={{paddingBottom: 10}}
>
<Image
source={require('../components/ChooseGameCard/images/TestImage.png')}
style={styles.imageSize}
/>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: colors.backgroundColor,
margin: 10,
borderWidth: 1,
borderColor: colors.borderColor,
},
flipCard: {
backgroundColor: colors.cardFront,
position: 'absolute',
},
cardBack: {
width: (Dimensions.get('window').width) * 0.4,
height: ((Dimensions.get('window').width) * 0.4) * 1.5,
alignItems: 'center',
backfaceVisibility: 'hidden',
},
imageSize: {
width: (Dimensions.get('window').width) * 0.4,
height: ((Dimensions.get('window').width) * 0.4) * 1.5,
},
})
export default choose_game_screen;Any idea what is going on? I don't see why the whole icon appears on top but only works if it is inside the card's original view boundary. The animation moves the icon outside this boundary.