Animation not works on android

[razamsalem]

Description

Hey,
I'm using react-native-reanimated for animated comments that enter the chat, The problem is that the animation works for iOS but for android there is no animation at all.

This is the code I'm using:

`
<Animated.View
entering={SlideInRight.duration(200)}
exiting={SlideOutRight.duration(200)}

  <TouchableOpacity onPress={() => setIsCommentInput(true)}>
    {!isCommentInput && !isLandscape && (
      <CommentIcon
        style={{
          position: 'absolute',
          bottom: SIZES.xSmall,
          right: 22,
          zIndex: 99,
        }}
      />
    )}
  </TouchableOpacity>
</Animated.View>

`

Why can it work only for iOS?

Steps to reproduce

Ios works fine
Android not works at all

Reanimated version

3.8.1

React Native version

0.73.5

Platforms

Android, iOS

Device

Iphone 15 pro (animation works)
Pixel 7 emulator (animation does not work)
I tried on several Android devices, and the animation still does not work.

Acknowledgements

Yes

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[szydlovsky]

Hi @razamsalem 👋! Could you please provide a minimal and complete repro for the issue? The code you provided is taken out of context and there might be plenty things that make it not work. I tried creating some example based on the code you provided but it works - so a complete piece of code containing the issue would be great!

[dreiLDG]

Hello have you fix this already? i also encountered this issue.

[razamsalem]

Hello have you fix this already? i also encountered this issue.

Unfortunately not, I would be happy if you find a solution and share it with me

[szydlovsky]

@dreiLDG @razamsalem Hey! Please check whether you have reduce motion setting on your devices - having it enabled disables all the animations.

[dreiLDG]

@dreiLDG @razamsalem Hey! Please check whether you have reduce motion setting on your devices - having it enabled disables all the animations.

i can't find that settings both on my actual and emulator device on android.

[szydlovsky]

@dreiLDG https://mcmw.abilitynet.org.uk/how-to-disable-interface-animations-in-android-14

[dreiLDG]

@dreiLDG https://mcmw.abilitynet.org.uk/how-to-disable-interface-animations-in-android-14

upon checking on my device those settings on the developer mode. Are not turned off.
But still the animations of react native animated are not working.

[razamsalem]

@dreiLDG https://mcmw.abilitynet.org.uk/how-to-disable-interface-animations-in-android-14

upon checking on my device those settings on the developer mode. Are not turned off.

But still the animations of react native animated are not working.

Same here.

[dreiLDG]

@szydlovsky
package.json

   "react": "18.2.0",
    "react-native": "0.73.5",
    "react-native-reanimated": "^3.8.1",

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          '@components': './src/components',
          '@screens': './src/screens',
          '@navigation': './src/navigation',
          '@constants': './src/constants',
          '@utils': './src/utils',
          '@assets': './src/assets',
          '@interfaces': './src/interfaces',
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

[dreiLDG]

@szydlovsky any update about this issue?

[szydlovsky]

@dreiLDG @razamsalem Hi, sorry for the delay. Could you please try cloning our Reanimated repo and trying out animations in the Example app? If they work there, it means that you must have done something wrong setting up the animations on your side. If it still doesn't, then we can properly investigate.

[dreiLDG]

@szydlovsky hmmm i doubt there is a mistake setting up considering that the library works on ios so meaning it setup correctly and base on the docs there is no additional steps for setting up in android.

[dreiLDG]

I clone the repo and test the examples on my android device, and yes it works. But still i can't figured out what's the main cause why it's not working on my project considering that there are no additional steps setting up on android.

[dreiLDG]

import { View, Text, TouchableOpacity } from 'react-native';
import React, { useState } from 'react';
import { AppointmentType } from '@utils/enum';
import { ScaledSheet, moderateScale } from 'react-native-size-matters';
import Colors from '@constants/Color';
import AppointmentEventSVG from '@assets/icons/Events/Appointment';
import PhoneCallEventSVG from '@assets/icons/Events/PhoneCall';
import VideoCallEventSVG from '@assets/icons/Events/VideoCall';
import AppointmentDetails from '@components/AppointmentDetailsCard';
import Animated, { Easing, FlipInEasyX, FlipOutEasyX } from 'react-native-reanimated';

type Props = {
  timeRange: string;
  type: AppointmentType;
};
const AgendaCard = ({ timeRange, type }: Props) => {
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  let color: string;
  let icon: JSX.Element | null = null;

  if (type === AppointmentType.Appointment) {
    color = Colors.physicalAppointment;
    icon = <AppointmentEventSVG width={30} height={30} />;
  } else if (type === AppointmentType.PhoneCall) {
    color = Colors.phoneCall;
    icon = <PhoneCallEventSVG width={30} height={30} />;
  } else {
    color = Colors.videoCall;
    icon = <VideoCallEventSVG width={30} height={30} />;
  }
  return (
    <View style={{ position: 'relative', width: '100%' }}>
      <TouchableOpacity style={styles.cardContainer} onPress={() => setModalVisible(!modalVisible)}>
        <View style={{ width: moderateScale(8), backgroundColor: color }} />
        <View style={styles.cardDataContainer}>
          <View style={styles.dataContainer}>
            <Text style={styles.cardTitle}>{type}</Text>
            <Text style={styles.cardTime}>{timeRange}</Text>
          </View>
          {icon}
        </View>
      </TouchableOpacity>
      {modalVisible && (
        <Animated.View
          entering={FlipInEasyX.duration(200)}
          style={styles.modalContainer}
          // exiting={FlipOutEasyX.duration(200).easing(Easing.ease)}
        >
          <AppointmentDetails
            color={color}
            title="Physical Appointment"
            doctorName="Dr. White"
            date="Wednesday, April 12"
            time="13:00 - 13:30"
          />
        </Animated.View>
      )}
    </View>
  );
};

export default AgendaCard;

const styles = ScaledSheet.create({
  modalContainer: {
    position: 'absolute',
    top: '100%',
    right: '23%',
    zIndex: 5,
    width: '272@ms',
    flex: 1,
    borderRadius: 7,
    backgroundColor: '#FFF',
    overflow: 'hidden',
    marginTop: '7@ms',
  },
  cardTitle: {
    fontSize: '14@ms',
    fontWeight: '600',
    lineHeight: '20@vs',
  },
  dataContainer: {
    flexDirection: 'row',
    gap: 8,
    alignItems: 'center',
  },
  cardContainer: {
    borderRadius: '6@ms',
    flexDirection: 'row',
    overflow: 'hidden',
    backgroundColor: '#F5FAFA',
    zIndex: 1000,
  },
  cardTime: {
    color: '#848784',
    fontSize: '10@ms',
    lineHeight: '12@vs',
    fontWeight: '500',
  },
  cardDataContainer: {
    flex: 1,
    padding: '8@ms',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});

@szydlovsky i've notice that it seems the Animated.View is not working on android. I copy one of the animation on your repo the 'ChessboardExample' to be exact and it works very well. But im confuse since im just implementing a very basic animation and it's not working.

[szydlovsky]

Alright @dreiLDG I put your example in Reanimated Example app and launched on android simulator (Pixel XL API 34) - it works fine:

Screen.Recording.2024-04-25.at.18.21.37.mov

I've used your code except some imports that I don't have access to:

import { View, Text, TouchableOpacity } from 'react-native';
import React, { useState } from 'react';
import { ScaledSheet, moderateScale } from 'react-native-size-matters';
import Animated, {
  Easing,
  FlipInEasyX,
  FlipOutEasyX,
} from 'react-native-reanimated';

const AgendaCard = ({ timeRange }: { timeRange: string }) => {
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  return (
    <View style={{ position: 'relative', width: '100%' }}>
      <TouchableOpacity
        style={styles.cardContainer}
        onPress={() => setModalVisible(!modalVisible)}>
        <View style={{ width: moderateScale(8), backgroundColor: 'pink' }} />
        <View style={styles.cardDataContainer}>
          <View style={styles.dataContainer}>
            <Text style={styles.cardTitle}>test</Text>
            <Text style={styles.cardTime}>{timeRange}</Text>
          </View>
        </View>
      </TouchableOpacity>
      {modalVisible && (
        <Animated.View
          entering={FlipInEasyX.duration(200)}
          style={styles.modalContainer}
          exiting={FlipOutEasyX.duration(200).easing(Easing.ease)}>
          <View style={{ width: 200, height: 200, backgroundColor: 'blue' }} />
        </Animated.View>
      )}
    </View>
  );
};

export default AgendaCard;

const styles = ScaledSheet.create({
  modalContainer: {
    position: 'absolute',
    top: '100%',
    right: '23%',
    zIndex: 5,
    width: '272@ms',
    flex: 1,
    borderRadius: 7,
    backgroundColor: '#FFF',
    overflow: 'hidden',
    marginTop: '7@ms',
  },
  cardTitle: {
    fontSize: '14@ms',
    fontWeight: '600',
    lineHeight: '20@vs',
  },
  dataContainer: {
    flexDirection: 'row',
    gap: 8,
    alignItems: 'center',
  },
  cardContainer: {
    borderRadius: '6@ms',
    flexDirection: 'row',
    overflow: 'hidden',
    backgroundColor: '#F5FAFA',
    zIndex: 1000,
  },
  cardTime: {
    color: '#848784',
    fontSize: '10@ms',
    lineHeight: '12@vs',
    fontWeight: '500',
  },
  cardDataContainer: {
    flex: 1,
    padding: '8@ms',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});

Try using this modified one - if it still doesn't work I suggest removing code from it until you get the simplest possible not-working example.

[Victor-Sun]

I am also experiencing this issue on my side as well with SDK 48. It is specifically the Animation.View that doesn't seem to want to work on Android.

[dreiLDG]

Hoping there will be an update for this.

[szydlovsky]

@dreiLDG To be honest - if the Reanimated Example app works for you yet your app doesn't - it has to be something with your project setup. The only thing I can suggest for you is to compare both projects in terms of setup and try finding any suspicious differences - apart from that I don't see anything that could cause the issues. In the meantime, if anything comes to my mind - I will inform you

[dreiLDG]

thank you @szydlovsky

[szydlovsky]

Anyway, the issue is kinda stale taking into consideration that it most likely isn't a Reanimated fault. If anyone comes up with a repro that showcases the mistake is on the Reanimated side - feel free to open new issue and I will happily look into it

[dreiLDG]

@razamsalem @Victor-Sun
i found a solution.
set to false the newArchEnabled in android/gradle.properties

[razamsalem]

@razamsalem @Victor-Sun i found a solution. set to false the newArchEnabled in android/gradle.properties

@szydlovsky
Great!
But what if I need newArchEnabled true?, it cant be the only solution...

[razamsalem]

@Victor-Sun @szydlovsky @dreiLDG @odogono
Only entering/exiting dosen't works on android, useSharedValue that I add value withSpring the animation works.
But I need the entering effect, any idea?

[dreiLDG]

@razamsalem have you set to false the newArchEnabled?