0.72 Animation not work correctly

[edstbbz]

Description

After update to 0.72 animation does't work

React Native Version

0.72.0

Output of npx react-native info

System:
OS: macOS 12.6.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 38.58 MB / 16.00 GB
Shell:
version: 5.8.1
path: /bin/zsh
Binaries:
Node:
version: 16.13.0
path: /usr/local/bin/node
Yarn:
version: 3.2.1
path: /usr/local/bin/yarn
npm:
version: 8.1.0
path: /usr/local/bin/npm
Watchman:
version: 2022.10.24.00
path: /usr/local/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms:

• DriverKit 21.4
• iOS 16.0
• macOS 12.3
• tvOS 16.0
• watchOS 9.0
  Android SDK: Not Found
  IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9514443
  Xcode:
  version: 14.0.1/14A400
  path: /usr/bin/xcodebuild
  Languages:
  Java:
  version: 11.0.11
  path: /usr/bin/javac
  Ruby:
  version: 2.6.5
  path: /Users/user/.rvm/rubies/ruby-2.6.5/bin/ruby
  npmPackages:
  "@react-native-community/cli": Not Found
  react:
  installed: 18.2.0
  wanted: 18.2.0
  react-native:
  installed: 0.72.0
  wanted: 0.72.0
  react-native-macos: Not Found
  npmGlobalPackages:
  "react-native": Not Found
  Android:
  hermesEnabled: true
  newArchEnabled: false
  iOS:
  hermesEnabled: false
  newArchEnabled: false

Steps to reproduce

const Searchbar = (
{
onChange,
onInputShow = noop,
onHide,
onShow,
iconStyle,
showOnMount = false,
showOnQuery,
withDebounce = true,
debounceTime = 200,
placeholder = 'Поиск',
closeButtonText = 'Отмена',
keyboardType = null,
multiline = false,
},
ref
) => {
const [value, setValue] = useState(null);
const [isShowInput, hideInput, showInput] = useToggleState(false);
const [keyboardTypeValue, setKeyboardTypeValue] = useState(keyboardType);
const [mount, setMount] = useState(false);

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

const inputRef = useRef(null);

const debouncedChange = useCallback(debounce(onChange, debounceTime), [onChange]);

useEffect(() => {
showOnMount && showSearchInput();
}, []);

useEffect(() => {
setKeyboardTypeValue(keyboardType);
}, [keyboardType]);

useEffect(() => {
!!showOnQuery && mount && showSearchInputOnQuery();
if (!mount) {
setMount(true);
}
}, [showOnQuery]);

useEffect(() => {
searchOnChange();
}, [value]);

const searchOnChange = () => {
if (value !== null) {
if (withDebounce) {
debouncedChange(value);
} else {
onChange(value);
}
}
};

const handleChange = searchValue => setValue(searchValue);

const runAnimate = (to = 1, start = false) => {
Animated.timing(scale, {
toValue: to,
duration: 200,
useNativeDriver: true,
}).start(() => start && inputRef.current?.focus());
};

const showSearchInput = () => {
onInputShow();
!!onShow && onShow();
showInput();
runAnimate(0, true);
};

const showSearchInputOnQuery = () => {
!!onShow && onShow();
showInput();
runAnimate(0, false);
};

const hideSearchInput = () => {
inputRef.current?.blur();
setValue(null);
!!onHide && onHide();
Animated.timing(scale, {
toValue: 1,
duration: 150,
useNativeDriver: true,
}).start(hideInput);
};

const inputAnimation = scale.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});

useImperativeHandle(ref, () => ({
focus: () => inputRef.current.focus(),
serachBarShowed: isShowInput,
}));

return (
<>
{!isShowInput && (
<Animated.View style={[styles.searchIcon, { transform: [{ scale }] }, iconStyle]}>

</Animated.View>
)}
{isShowInput && (
<Animated.View
style={[styles.searchView, { transform: [{ scaleY: inputAnimation }] }, { opacity: inputAnimation }]}
>

<View style={{ flex: 0.8 }}>


<View style={{ flex: 0.25, alignItems: 'center' }}>



</Animated.View>
)}
</>
);
};

const styles = StyleSheet.create({
searchView: {
position: 'absolute',
left: 0,
right: 0,
backgroundColor: 'white',
paddingTop: 6,
paddingBottom: 8,
paddingLeft: 10,
paddingRight: 0,
zIndex: 3,
},
searchIcon: {
flex: 1,
position: 'absolute',
right: 20,
top: 13,
overflow: 'hidden',
zIndex: 3,
},
searchContainer: {
flex: 1,
flexDirection: 'row',
},
});

export default forwardRef(Searchbar); - dont work animation, Fixed only by creating a separate animation value for each element

Snack, code example, screenshot, or link to a repository

const Searchbar = (
{
onChange,
onInputShow = noop,
onHide,
onShow,
iconStyle,
showOnMount = false,
showOnQuery,
withDebounce = true,
debounceTime = 200,
placeholder = 'Поиск',
closeButtonText = 'Отмена',
keyboardType = null,
multiline = false,
},
ref
) => {
const [value, setValue] = useState(null);
const [isShowInput, hideInput, showInput] = useToggleState(false);
const [keyboardTypeValue, setKeyboardTypeValue] = useState(keyboardType);
const [mount, setMount] = useState(false);

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

const inputRef = useRef(null);

const debouncedChange = useCallback(debounce(onChange, debounceTime), [onChange]);

useEffect(() => {
showOnMount && showSearchInput();
}, []);

useEffect(() => {
setKeyboardTypeValue(keyboardType);
}, [keyboardType]);

useEffect(() => {
!!showOnQuery && mount && showSearchInputOnQuery();
if (!mount) {
setMount(true);
}
}, [showOnQuery]);

useEffect(() => {
searchOnChange();
}, [value]);

const searchOnChange = () => {
if (value !== null) {
if (withDebounce) {
debouncedChange(value);
} else {
onChange(value);
}
}
};

const handleChange = searchValue => setValue(searchValue);

const runAnimate = (to = 1, start = false) => {
Animated.timing(scale, {
toValue: to,
duration: 200,
useNativeDriver: true,
}).start(() => start && inputRef.current?.focus());
};

const showSearchInput = () => {
onInputShow();
!!onShow && onShow();
showInput();
runAnimate(0, true);
};

const showSearchInputOnQuery = () => {
!!onShow && onShow();
showInput();
runAnimate(0, false);
};

const hideSearchInput = () => {
inputRef.current?.blur();
setValue(null);
!!onHide && onHide();
Animated.timing(scale, {
toValue: 1,
duration: 150,
useNativeDriver: true,
}).start(hideInput);
};

const inputAnimation = scale.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});

useImperativeHandle(ref, () => ({
focus: () => inputRef.current.focus(),
serachBarShowed: isShowInput,
}));

return (
<>
{!isShowInput && (
<Animated.View style={[styles.searchIcon, { transform: [{ scale }] }, iconStyle]}>

</Animated.View>
)}
{isShowInput && (
<Animated.View
style={[styles.searchView, { transform: [{ scaleY: inputAnimation }] }, { opacity: inputAnimation }]}
>

<View style={{ flex: 0.8 }}>


<View style={{ flex: 0.25, alignItems: 'center' }}>



</Animated.View>
)}
</>
);
};

const styles = StyleSheet.create({
searchView: {
position: 'absolute',
left: 0,
right: 0,
backgroundColor: 'white',
paddingTop: 6,
paddingBottom: 8,
paddingLeft: 10,
paddingRight: 0,
zIndex: 3,
},
searchIcon: {
flex: 1,
position: 'absolute',
right: 20,
top: 13,
overflow: 'hidden',
zIndex: 3,
},
searchContainer: {
flex: 1,
flexDirection: 'row',
},
});

export default forwardRef(Searchbar);

[edstbbz]

0.67.5

2.mov

0.72.0

1.mov

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[edstbbz]

@cortinico Repro: https://github.com/edstbbz/animated_bug

[edstbbz]

Is there any progress in this matter?

[vksgautam1986]

any idea or direction how to resolve it

[redpanda-bit]

Hey @edstbbz try running the animation inside a useEffect that reacts to isShowInput like so:

useEffect(() => {
  if (isShowInput) {
    runAnimate(0, true);
  } else {
    runAnimate(1, false);
  }
}, [isShowInput]);

My best guess is that it you are mounting the component and running the animation right after mounting the component. This reactive approach waits for the isShowInput flag to be true before animating.

[ArjunPatidarRadix]

I'm getting the same issue as well
webraptor/react-native-deck-swiper#109
with the latest version 0.72.4

[DeniferSantiago]

This only happens in version 0.72.x with useNativeDriver, without useNativeDriver everything is fine

[stianjensen]

Also seeing laggy and broken animations with useNativeDriver on 0.72.5 now.
The issue I was seeing is fixed here, so I backported that on my version of RN:
ae0d714

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[lucas-samuel01]

Im facing the same problem in react native 0.74.5, my animation does not start when the component mounts

[RichardLindhout]

web-ridge/react-native-paper-dates#442

Seems also the case in our library.