Skip to content

Commit

Permalink
[RNMobile] Remove opacity change when images are being uploaded (#59264)
Browse files Browse the repository at this point in the history
* Remove opacity when media is being uploaded

* Update CHANGELOG

Co-authored-by: derekblank <derekblank@git.wordpress.org>
Co-authored-by: SiobhyB <siobhyb@git.wordpress.org>
  • Loading branch information
3 people authored Feb 23, 2024
1 parent 908e3ed commit 57470e9
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 16 deletions.
21 changes: 5 additions & 16 deletions packages/components/src/mobile/image/index.native.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { Animated, Image as RNImage, Text, View } from 'react-native';
import { Image as RNImage, Text, View } from 'react-native';
import FastImage from 'react-native-fast-image';

/**
Expand All @@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/components';
import { image, offline } from '@wordpress/icons';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { useEffect, useState, useRef, Platform } from '@wordpress/element';
import { useEffect, useState, Platform } from '@wordpress/element';

/**
* Internal dependencies
Expand Down Expand Up @@ -218,19 +218,8 @@ const ImageComponent = ( {
focalPoint && styles.focalPointContainer,
];

const opacityValue = useRef( new Animated.Value( 1 ) ).current;

useEffect( () => {
Animated.timing( opacityValue, {
toValue: isUploadInProgress ? 0.3 : 1,
duration: 100,
useNativeDriver: true,
} ).start();
}, [ isUploadInProgress, opacityValue ] );

const imageStyles = [
{
opacity: opacityValue,
height: containerSize?.height,
},
! resizeMode && {
Expand Down Expand Up @@ -319,7 +308,7 @@ const ImageComponent = ( {
{ Platform.isAndroid && (
<>
{ networkImageLoaded && networkURL && (
<Animated.Image
<Image
style={ imageStyles }
fadeDuration={ 0 }
source={ { uri: networkURL } }
Expand All @@ -331,7 +320,7 @@ const ImageComponent = ( {
/>
) }
{ ! networkImageLoaded && ! networkURL && (
<Animated.Image
<Image
style={ imageStyles }
fadeDuration={ 0 }
source={ { uri: localURL } }
Expand All @@ -345,7 +334,7 @@ const ImageComponent = ( {
) }
{ Platform.isIOS && (
<>
<Animated.Image
<Image
style={ imageStyles }
source={ {
uri:
Expand Down
1 change: 1 addition & 0 deletions packages/react-native-editor/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label to i

## Unreleased
- [*] Prevent crash when autoscrolling to blocks [#59110]
- [*] Remove opacity change when images are being uploaded [#59264]
- [*] Media & Text blocks correctly show an error message when the attached video upload fails [#59288]

## 1.112.0
Expand Down

1 comment on commit 57470e9

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 57470e9.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8013577431
📝 Reported issues:

Please sign in to comment.