I'm developing an app. This app has a HomeScreen where 6 icons are displayed. When I press on an icon react navigator navigate to a new screen. When I press the icon, before transition, it has to happen an animation. I don't want to use Transitioner for previous problems. This is my screen when I press on an icon I want that the icon opacity goes to 0 and it moves at left-top of the screen (immediately below of header). But I am wanting it to support all device and I can't calculate the distance, the translation, the initial position etc for everyone, I have designed it with flexbox, not with absolute position.
I have tried to starting from position 0 the animated.view and arriving at the calculated position based on screen, but I could no longer manage the code
export default class Home extends React.Component {
//tester.retrieveDataById()
constructor(props) {
super(props);
this.state = {
value: [
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) }
]
};
}
static navigationOptions = {..}
_onPressButton = (info, icon, index) => {
Animated.parallel([
Animated.timing(
this.state.value[1].fadeAnim,
{
toValue: index === 1 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[0].fadeAnim,
{
toValue: index === 0 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[2].fadeAnim,
{
toValue: index === 2 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[3].fadeAnim,
{
toValue: index === 3 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[4].fadeAnim,
{
toValue: index === 4 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[5].fadeAnim,
{
toValue: index === 5 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
)
]).start(() => {
console.log("dasd");
this.props.navigation.navigate(info, { icon: icon });
setTimeout(() => {
this.setState({
value: this.state.value.map(
element => (element.fadeAnim = { fadeAnim: new Animated.Value(1) })
) //restore the state when I come back from navigate
});
}, 500);
});
};
// the space in text is need for alignment among them
render() {
return (
<View style={{ flex: 1, backgroundColor: "#fff" }}>
<View style={styles.container}>
<View
style={{
flexDirection: "column",
justifyContent: "space-around"
}}
>
<Animated.View style={{ opacity: this.state.value[0].fadeAnim }}>
<TouchableOpacity
onPress={() => this._onPressButton("VenetoWelfare", Medal, 0)}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Medal
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
</TouchableOpacity>
<Text style={styles.text}>
text {"\n"} text {"\n"} text
</Text>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[1].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("WelfareCollettivo", Collective, 1)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Collective
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[2].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("AssistenzaSanitaria", Care, 2)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Care
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4),
transform: [{ translateY: -0 }]
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"} text
</Text>
</TouchableOpacity>
</Animated.View>
</View>
<View
style={{
flexDirection: "column",
justifyContent: "space-around"
}}
>
<Animated.View style={{ opacity: this.state.value[3].fadeAnim }}>
<TouchableOpacity
onPress={() => this._onPressButton("Previdenza", Analysis, 3)}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Wallet
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} {""}
{"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[4].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("PrevidenzaComplementare", Wallet, 4)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Wallet
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[5].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("WelfareAziendale", Industry, 5)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Industry
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
flexDirection: "row",
justifyContent: "space-around"
},
text: {
fontSize: normalize(18),
textAlign: "center",
color: "#7A9DBC"
}
});
I have already obtained the opacity as you can see from the code above. I have no idea how to do the translations since the icons are inserted in a specific view.
