Animating mapPadding prop on MapView from react-native-maps crashes on Android

[shashibheemanapally]

Hello,

I have been trying to animate mapPadding prop on MapView component of react-native-maps. To achieve this, I am using Animated.createAnimatedComponent() to create a custom animated MapView component and passing the mapPadding as animated prop.

import { View, StyleSheet, Button } from "react-native";
import Animated, {
  useSharedValue,
  withSpring,
  useAnimatedProps,
} from "react-native-reanimated";

import MapView, { PROVIDER_GOOGLE } from "react-native-maps";

const AnimatedMapView = Animated.createAnimatedComponent(MapView);

export default function AnimatedMapNative() {
  const mapPadding = useSharedValue({
    bottom: 0,
    top: 0,
    left: 0,
    right: 0,
  });

  const mapAnimatedProps = useAnimatedProps(() => {
    return {
      mapPadding: mapPadding.value,
    };
  });

  const changeMapPadding = () => {
    mapPadding.value = withSpring({
      bottom: 200,
      top: 0,
      left: 0,
      right: 0,
    });
  };

  const resetMapPadding = () => {
    mapPadding.value = withSpring({
      bottom: 0,
      top: 0,
      left: 0,
      right: 0,
    });
  };

  return (
    <View style={[styles.container]}>
      <AnimatedMapView
        style={styles.map}
        provider={PROVIDER_GOOGLE}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        animatedProps={mapAnimatedProps}
      ></AnimatedMapView>
      <Button
        title="change map padding"
        onPress={() => {
          changeMapPadding();
        }}
      />
      <Button
        title="reset map padding"
        onPress={() => {
          resetMapPadding();
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  map: {
    flex: 1,
    width: "100%",
    height: "100%",
  },
});

...
"expo": "~54.0.8",
"react-native-reanimated": "~4.1.0",
"react-native-maps": "^1.25.0",
"react-native": "0.81.4",

Animation works fine on iOS. However, on Android app simply crashes (on dev and preview builds) with error: Caused by java.lang.NullPointerException: null cannot be cast to non-null type expo.modules.devlauncher.DevLauncherController (I can provide more stack trace)

iOS.mp4

Android.mp4

I tried to animate other props (like region) and they work fine on both Android and iOS. It only crashes (on Android) when I add mapPadding in animatedProps.

Any help or workaround is much appreciated! Thank you!

Edit: I would like to achieve this behavior mainly because I am planning to use some kind of bottom sheet and I would want the "Google" logo to be shown on the map at all times.

[tomekzaw]

Hi @shashibheemanapally, thanks for reporting this. Could you please provide the full stack trace?

[shashibheemanapally]

Here is the full stack trace for Android:

Android Bundled 48ms node_modules\expo-router\entry.js (1 module)
 ERROR  Your app just crashed. See the error below.
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.shashib.expodefaultexample/expo.modules.devlauncher.launcher.errors.DevLauncherErrorActivity}: java.lang.reflect.InvocationTargetException
  android.app.ActivityThread.performLaunchActivity(ActivityThread.java:4270)
  android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:4418)
  android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:103)
  android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:139)
  android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:96)
  android.app.ActivityThread$H.handleMessage(ActivityThread.java:2820)
  android.os.Handler.dispatchMessage(Handler.java:106)
  android.os.Looper.loopOnce(Looper.java:226)
  android.os.Looper.loop(Looper.java:328)
  android.app.ActivityThread.main(ActivityThread.java:9156)
  java.lang.reflect.Method.invoke(Native Method)
  com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:594)
  com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1099)
Caused by java.lang.reflect.InvocationTargetException
  java.lang.reflect.Constructor.newInstance0(Native Method)
  java.lang.reflect.Constructor.newInstance(Constructor.java:343)
  androidx.lifecycle.viewmodel.internal.JvmViewModelProviders.createViewModel(JvmViewModelProviders.kt:38)
  androidx.lifecycle.ViewModelProvider$NewInstanceFactory.create(ViewModelProvider.android.kt:185)
  androidx.lifecycle.ViewModelProvider$AndroidViewModelFactory.create(ViewModelProvider.android.kt:309)
  androidx.lifecycle.ViewModelProvider$AndroidViewModelFactory.create(ViewModelProvider.android.kt:291)
  androidx.lifecycle.ViewModelProvider$AndroidViewModelFactory.create(ViewModelProvider.android.kt:265)
  androidx.lifecycle.SavedStateViewModelFactory.create(SavedStateViewModelFactory.android.kt:142)
  androidx.lifecycle.SavedStateViewModelFactory.create(SavedStateViewModelFactory.android.kt:112)
  androidx.lifecycle.viewmodel.ViewModelProviderImpl_androidKt.createViewModel(ViewModelProviderImpl.android.kt:34)
  androidx.lifecycle.viewmodel.ViewModelProviderImpl.getViewModel$lifecycle_viewmodel_release(ViewModelProviderImpl.kt:60)
  androidx.lifecycle.viewmodel.ViewModelProviderImpl.getViewModel$lifecycle_viewmodel_release$default(ViewModelProviderImpl.kt:43)
  androidx.lifecycle.ViewModelProvider.get(ViewModelProvider.android.kt:92)
  androidx.lifecycle.ViewModelLazy.getValue(ViewModelLazy.kt:52)
  androidx.lifecycle.ViewModelLazy.getValue(ViewModelLazy.kt:35)
  expo.modules.devlauncher.launcher.errors.DevLauncherErrorActivity.getViewModel(DevLauncherErrorActivity.kt:17)
  expo.modules.devlauncher.launcher.errors.DevLauncherErrorActivity.onCreate(DevLauncherErrorActivity.kt:39)
  android.app.Activity.performCreate(Activity.java:8932)
  android.app.Activity.performCreate(Activity.java:8896)
  android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1456)
  android.app.ActivityThread.performLaunchActivity(ActivityThread.java:4246)
  android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:4418)
  android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:103)
  android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:139)
  android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:96)
  android.app.ActivityThread$H.handleMessage(ActivityThread.java:2820)
  android.os.Handler.dispatchMessage(Handler.java:106)
  android.os.Looper.loopOnce(Looper.java:226)
  android.os.Looper.loop(Looper.java:328)
  android.app.ActivityThread.main(ActivityThread.java:9156)
  java.lang.reflect.Method.invoke(Native Method)
  com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:594)
  com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1099)
Caused by java.lang.NullPointerException: null cannot be cast to non-null type expo.modules.devlauncher.DevLauncherController
  expo.modules.devlauncher.compose.models.ErrorViewModel.<init>(ErrorViewModel.kt:62)
  java.lang.reflect.Constructor.newInstance0(Native Method)
  java.lang.reflect.Constructor.newInstance(Constructor.java:343)
  androidx.lifecycle.viewmodel.internal.JvmViewModelProviders.createViewModel(JvmViewModelProviders.kt:38)
  androidx.lifecycle.ViewModelProvider$NewInstanceFactory.create(ViewModelProvider.android.kt:185)
  androidx.lifecycle.ViewModelProvider$AndroidViewModelFactory.create(ViewModelProvider.android.kt:309)
  androidx.lifecycle.ViewModelProvider$AndroidViewModelFactory.create(ViewModelProvider.android.kt:291)
  androidx.lifecycle.ViewModelProvider$AndroidViewModelFactory.create(ViewModelProvider.android.kt:265)
  androidx.lifecycle.SavedStateViewModelFactory.create(SavedStateViewModelFactory.android.kt:142)
  androidx.lifecycle.SavedStateViewModelFactory.create(SavedStateViewModelFactory.android.kt:112)
  androidx.lifecycle.viewmodel.ViewModelProviderImpl_androidKt.createViewModel(ViewModelProviderImpl.android.kt:34)
  androidx.lifecycle.viewmodel.ViewModelProviderImpl.getViewModel$lifecycle_viewmodel_release(ViewModelProviderImpl.kt:60)
  androidx.lifecycle.viewmodel.ViewModelProviderImpl.getViewModel$lifecycle_viewmodel_release$default(ViewModelProviderImpl.kt:43)
  androidx.lifecycle.ViewModelProvider.get(ViewModelProvider.android.kt:92)
  androidx.lifecycle.ViewModelLazy.getValue(ViewModelLazy.kt:52)
  androidx.lifecycle.ViewModelLazy.getValue(ViewModelLazy.kt:35)
  expo.modules.devlauncher.launcher.errors.DevLauncherErrorActivity.getViewModel(DevLauncherErrorActivity.kt:17)
  expo.modules.devlauncher.launcher.errors.DevLauncherErrorActivity.onCreate(DevLauncherErrorActivity.kt:39)
  android.app.Activity.performCreate(Activity.java:8932)
  android.app.Activity.performCreate(Activity.java:8896)
  android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1456)
  android.app.ActivityThread.performLaunchActivity(ActivityThread.java:4246)
  android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:4418)
  android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:103)
  android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:139)
  android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:96)
  android.app.ActivityThread$H.handleMessage(ActivityThread.java:2820)
  android.os.Handler.dispatchMessage(Handler.java:106)
  android.os.Looper.loopOnce(Looper.java:226)
  android.os.Looper.loop(Looper.java:328)
  android.app.ActivityThread.main(ActivityThread.java:9156)
  java.lang.reflect.Method.invoke(Native Method)
  com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:594)
  com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1099)