Closed Norfeldt closed 2 years ago
The UI thread dip is likely due to frequent react renders. This should get fixed with transitions in react 18.
Try wrapping your sprinter in React.memo
?
are you using hasFocus
for anything other than animating? if not, you should just fire the animation state changes in onFocus
/onBlur
to avoid an extra render
The UI thread dip is likely due to frequent react renders. This should get fixed with transitions in react 18.
Try wrapping your sprinter in
React.memo
?
That worked like a charm 👍 thanks a ton!
export const LoadingSpinner = React.memo(
({ color = Colors['sand'], size = Typography.fontSize['md'] - 1, ...props }: Props) => {
return (
<MotiText
from={{
rotate: '0deg',
}}
animate={{
rotate: '360deg',
}}
transition={{
loop: true,
repeatReverse: false,
type: 'timing',
easing: Easing.linear,
duration: 4000,
}}
>
<Feather
name="loader"
size={size}
style={{
paddingBottom: 5,
color,
}}
{...props.featherProps}
/>
</MotiText>
)
}
)
are you using
hasFocus
for anything other than animating? if not, you should just fire the animation state changes inonFocus
/onBlur
to avoid an extra render
I'm using it to hide the placeholder when it gets focus - I'm very open to suggestions.
Is there an existing issue for this?
Current Behavior
I see a dip in the UI thread and then it stops animating
Expected Behavior
firstly that the UI thread doesn't dip and if it does that it won't get stuck in the animation.
Another expected behavior is that I messed something up since I'm new to animations in React Native 🙈
Steps To Reproduce
Versions
Screenshots
Reproduction
Create an via
create-react-native-app
example herehttps://github.com/Norfeldt/moti-loading-spinner-issue