fix: fix TouchableItem opacity on press on iOS

This commit is contained in:
Satyajit Sahoo
2020-07-29 00:33:40 +02:00
parent b0cafb3c49
commit 40e2dbaecf
2 changed files with 26 additions and 34 deletions

View File

@@ -10,27 +10,26 @@ type Props = React.ComponentProps<typeof BaseButton> & {
const useNativeDriver = Platform.OS !== 'web';
export default class BorderlessButton extends React.Component<Props> {
export default class TouchableItem extends React.Component<Props> {
static defaultProps = {
activeOpacity: 0.3,
borderless: true,
enabled: true,
};
private opacity = new Animated.Value(1);
private handleActiveStateChange = (active: boolean) => {
if (Platform.OS !== 'android') {
Animated.spring(this.opacity, {
stiffness: 1000,
damping: 500,
mass: 3,
overshootClamping: true,
restDisplacementThreshold: 0.01,
restSpeedThreshold: 0.01,
toValue: active ? this.props.activeOpacity : 1,
useNativeDriver,
}).start();
}
Animated.spring(this.opacity, {
stiffness: 1000,
damping: 500,
mass: 3,
overshootClamping: true,
restDisplacementThreshold: 0.01,
restSpeedThreshold: 0.01,
toValue: active ? this.props.activeOpacity : 1,
useNativeDriver,
}).start();
this.props.onActiveStateChange?.(active);
};
@@ -43,10 +42,7 @@ export default class BorderlessButton extends React.Component<Props> {
<AnimatedBaseButton
{...rest}
onActiveStateChange={this.handleActiveStateChange}
style={[
style,
Platform.OS === 'ios' && enabled && { opacity: this.opacity },
]}
style={[style, enabled && { opacity: this.opacity }]}
>
{children}
</AnimatedBaseButton>