How to trigeer two function with one react component? - react-native

Question

I create a class component with animation for common button:
import React, { Component } from 'react';
import { Text, TouchableOpacity, StyleSheet, Animated, Easing, View } from 'react-native';
class AnimatedPrimaryButton extends Component {
constructor(props) {
super(props);
this.state = {
toggle: false,
animated: new Animated.Value(0)
}
}
animatedButton = (toggle) => {
this.state.animated.setValue(toggle ? 1 : 0);
Animated.timing(this.state.animated, {
toValue: toggle ? 0 : 1,
duration: 250,
easing: Easing.bounce
}).start();
this.setState({ toggle: !toggle });
}
render() {
const { toggle, animated } = this.state;
const { onPress, disabled, width, height } = this.props;
return (
<TouchableOpacity
disabled={disabled}
onPress={onPress}
style={[styles.buttonStyle, { width, height }]}
>
<Animated.View style={{
// other styles
transform: [{ scale: animated.interpolate({ inputRange: [0, 1], outputRange: [0, 1]})
}
]
}}>
</Animated.View>
<Text style={[styles.textStyle, { fontSize }]}>
{children}
</Text>
</TouchableOpacity>
);
};
}
const styles = StyleSheet.create({
// some styles
});
export default AnimatedPrimaryButton;
I use the create component on other screen like:
import AnimatedPrimaryButton from '../Shared/Button/AnimatedPrimaryButton';
doSomething = () => {
// do something...
}
render() {
return (
<View>
<AnimatedPrimaryButton
onPress={() => this.doSomething()}
width={400}
height={57}
fontSize={20}
backgroundColor={confirmButtonBg}
disabled={disabledConfirmButton}
>
{I18n.t('SIGN_IN_BUTTON')}
</AnimatedPrimaryButton>
</View>
);
}
Now I want to use doSomething function and trigger animatedButton at the same time.
In some conditions my disable will switch true or false, so I try to set the code on my AnimatedPrimaryButton is not working.
onPress={() => !disabled ? this.animatedButton(toggle) : onPress}
It looks like use the props onPress under arrow function won't work.
How to use doSomething and animatedButton function on class component AnimatedPrimaryButton ?
Any help would be appreciated.

Answer 1

in AnimatedPrimaryButton component you can make a onPress function
onPress(){
this.props.onPress();
this. animatedButton();
}
and rest you are sending the doSomething() function correctly on onPress while calling AnimatedPrimaryButton on other screen.