diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js --- a/native/media/camera-modal.react.js +++ b/native/media/camera-modal.react.js @@ -176,25 +176,11 @@ +focusIndicatorStyle: ViewStyle, +stagingModeProgress: SharedValue, +overlayStyle: ViewStyle, + +sendButtonProgress: Animated.Value, + +sendButtonStyle: ViewStyle, }; class CameraModal extends React.PureComponent { - sendButtonProgress: Animated.Value = new Animated.Value(0); - sendButtonStyle: ViewStyle; - - constructor(props: Props) { - super(props); - - const sendButtonScale = this.sendButtonProgress.interpolate({ - inputRange: [0, 1], - outputRange: ([1.1, 1]: number[]), // Flow... - }); - this.sendButtonStyle = { - opacity: this.sendButtonProgress, - transform: [{ scale: sendButtonScale }], - }; - } - componentDidUpdate(prevProps: Props) { if (this.props.deviceOrientation !== prevProps.deviceOrientation) { this.props.setAutoFocusPointOfInterest(null); @@ -220,7 +206,7 @@ } if (this.props.pendingPhotoCapture && !prevProps.pendingPhotoCapture) { - Animated.timing(this.sendButtonProgress, { + Animated.timing(this.props.sendButtonProgress, { ...sendButtonAnimationConfig, toValue: 1, }).start(); @@ -229,7 +215,7 @@ prevProps.pendingPhotoCapture ) { void cleanUpPendingPhotoCapture(prevProps.pendingPhotoCapture); - this.sendButtonProgress.setValue(0); + this.props.sendButtonProgress.setValue(0); } } @@ -301,7 +287,7 @@ onPress={this.props.sendPhoto} pointerEvents={pendingPhotoCapture ? 'auto' : 'none'} containerStyle={styles.sendButtonContainer} - style={this.sendButtonStyle} + style={this.props.sendButtonStyle} /> @@ -899,6 +885,7 @@ const isOutsideFlashButton = isOutsideButton( flashButtonDimensions.value, ); + return ( isOutsideCloseButton && isOutsidePhotoButton && @@ -1055,6 +1042,19 @@ [overlayAnimatedStyle], ); + const sendButtonProgress = React.useRef(new Animated.Value(0)); + + const sendButtonStyle = React.useMemo(() => { + const sendButtonScale = sendButtonProgress.current.interpolate({ + inputRange: [0, 1], + outputRange: ([1.1, 1]: number[]), // Flow... + }); + return { + opacity: sendButtonProgress.current, + transform: [{ scale: sendButtonScale }], + }; + }, []); + return ( ); });