It seems to me that React Native adds default LayoutAnimations only on iOS. I have the exact same code for iOS & Android and on iOS layout and CSS changes are animated. For example hiding/showing some Views have spring or easeIn animations. Or changing Text values seems to have some kind of fade animation. But I have not defined them anywhere in my code. I'm also using react-native-paper which I thought to be the reason for that at first but I removed that along with other libraries that might cause that and it was still happening. Basically it is happening with just the components from react-native. I'll put my package.json down below as well just in case. Has anybody had the same issue? Is it possible to completely disable LayoutAnimations on iOS?
"dependencies": {
"@react-native-community/async-storage": "^1.9.0",
"@react-native-community/geolocation": "^2.0.2",
"@react-native-community/masked-view": "^0.1.7",
"@react-native-community/netinfo": "^5.6.1",
"@react-native-community/push-notification-ios": "^1.1.1",
"@react-native-firebase/analytics": "7.4.2",
"@react-native-firebase/app": "8.3.1",
"@react-native-firebase/auth": "8.3.3",
"@react-native-firebase/crashlytics": "8.3.1",
"@react-native-firebase/firestore": "7.5.3",
"@react-native-firebase/in-app-messaging": "7.3.2",
"@react-native-firebase/messaging": "7.7.1",
"@react-native-firebase/perf": "7.3.2",
"@react-native-firebase/storage": "7.3.3",
"@react-navigation/native": "^5.0.9",
"@react-navigation/stack": "^5.1.1",
"axios": "^0.20.0",
"firestore-parser": "^0.9.0",
"geolib": "^3.2.1",
"google-polyline": "^1.0.3",
"i18n-js": "^3.7.0",
"moment": "^2.24.0",
"react": "16.13.1",
"react-moment": "^0.9.7",
"react-native": "0.63.3",
"react-native-app-intro-slider": "^4.0.2",
"react-native-awesome-card-io": "^0.9.0",
"react-native-camera": "^3.19.0",
"react-native-country-picker-modal": "^2.0.0",
"react-native-fbsdk": "^3.0.0",
"react-native-gesture-handler": "^1.6.0",
"react-native-localize": "^1.4.0",
"react-native-map-clustering": "^3.1.2",
"react-native-maps": "0.26.1",
"react-native-masked-text": "^1.13.0",
"react-native-paper": "^4.0.1",
"react-native-push-notification": "^5.0.1",
"react-native-raw-bottom-sheet": "^2.0.6",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^3.1.4",
"react-native-screens": "^2.2.0",
"react-native-status-bar-height": "^2.5.0",
"react-native-svg": "^12.1.0",
"react-native-vector-icons": "7.0.0",
"react-native-version-number": "^0.3.6",
"react-native-webview": "^10.7.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
}
As a workaround I tried to overwrite the animations by defining my own LayoutAnimation. Then I got the following warning:
Warning: Overriding previous layout animation with new one before the first began: <RCTLayoutAnimationGroup: 0x283352f70; creatingLayoutAnimation: <RCTLayoutAnimation: 0x282628f80; duration: 0.700000; delay: 0.000000; property: opacity; springDamping: 0.000000; initialVelocity: 0.000000; animationType: 1;>; updatingLayoutAnimation: <RCTLayoutAnimation: 0x2826285c0; duration: 0.700000; delay: 0.000000; property: (null); springDamping: 0.400000; initialVelocity: 0.000000; animationType: 0;>; deletingLayoutAnimation: <RCTLayoutAnimation: 0x282628040; duration: 0.700000; delay: 0.000000; property: opacity; springDamping: 0.000000; initialVelocity: 0.000000; animationType: 1;>> -> <RCTLayoutAnimationGroup: 0x2832836f0; creatingLayoutAnimation: <RCTLayoutAnimation: 0x282629880; duration: 0.100000; delay: 0.000000; property: opacity; springDamping: 0.000000; initialVelocity: 0.000000; animationType: 4;>; updatingLayoutAnimation: <RCTLayoutAnimation: 0x2826298c0; duration: 0.100000; delay: 0.000000; property: (null); springDamping: 0.000000; initialVelocity: 0.000000; animationType: 4;>; deletingLayoutAnimation: (null)>.
Inside of the props on your map view set animationEnabled={false}. For some reason the animationEnabled prop is affecting other views and adding animation to them as well.