Expo Snack crashes when running my code in Android, but not in Web or iOS

Hi, all,
I am just starting out learning how to code in React Native, and I am planning to create a joystick for one of my future project. Can you help me out on identifying why my code crashes? Here’s what I am working on:

import React, { useRef, useState } from 'react';
import { View, Text, StyleSheet, Animated, PanResponder } from 'react-native';

const MyComponent = () => {
  const [myBorderColor, setBorderColor] = useState('white');
  const [myBorderWidth, setBorderWidth] = useState(10);

  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        setBorderColor('lightgreen');
        setBorderWidth(20);
      },
      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }]),
      onPanResponderRelease: () => {
        Animated.spring(pan, { toValue: { x: 0, y: 0 } }).start();
        setBorderColor('white');
        setBorderWidth(10);
      },
    })
  ).current;

  return (
    <View style={MyStyle.mainView}>
      <View style={MyStyle.steerArea}>
        <Animated.View
          {...panResponder.panHandlers}
          style={[
            {
              height: 100,
              width: 100,
              backgroundColor: 'gray',
              borderWidth: myBorderWidth,
              borderColor: myBorderColor,
              borderRadius: 50,
              top: pan.y,
              left: pan.x,
            },
          ]}
        />
      </View>
    </View>
  );
};

export default MyComponent;

const MyStyle = StyleSheet.create({
  mainView: {
    flex: 1,
    borderWidth: 10,
    borderRadius: 10,
    justifyContent: 'center',
    backgroundColor: 'lightblue',
  },
  steerArea: {
    height: 200,
    width: 200,
    backgroundColor: 'lightgray',
    borderRadius: 100,
    justifyContent: 'center',
    alignItems: 'center',
    left: 50,
  },
});

It was working just fine until I added the part

const [myBorderWidth, setBorderWidth] = useState(10);

I apologize ahead of time if I happen to post my question on the wrong sub. And please pardon any novice mistake I committed. I’d appreciate if you can point them out so avoid them in the future.

I don’t see anything wrong there.

Do you get any error message?

Does it start working again if you remove the border width stuff?

No error at all. It tries to load then just closes on itself. Works just fine if I remove the 2nd useState from my code.

Edit: tested it again and it’s now giving me an error code

Hey @kaiserv

Did you manage to get to the bottom of this issue?

If I copy your code into a snack it works for me.

Hi! Thanks for checking this out. I just moved on and re-created my code. But based on your input, it might be an issue with my computer not having enough resources to run the code as I’m only using a very low-end PC for this project. But thanks anyway and more power to you.

Hello. I am having the same issue with several of my Snacks.
They work fine in web and iOS (both on my device and on expo snack emulator), but they just crash Expo Go app on Android (also both on my device and on expo emulator).

Expo Go gives no error report, just crashes on startup.

Goes without saying that I’ve tried to clean the cache, erase all data, and even reinstall Expo Go on Android.

Here are the links to two of my snacks that are causing trouble.

Can someone help me with this?
Thanks

I found the following in the adb logcat output:

08-10 10:27:58.250 10007 10469 E unknown:ViewManager: Error while updating prop margin
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: java.lang.reflect.InvocationTargetException
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at java.lang.reflect.Method.invoke(Native Method)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:7)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:2)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:14)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:1)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:11)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:5)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at java.lang.reflect.Method.invoke(Native Method)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:18)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:2)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at android.os.Handler.handleCallback(Handler.java:873)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at android.os.Handler.dispatchMessage(Handler.java:99)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:1)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at android.os.Looper.loop(Looper.java:214)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:8)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at java.lang.Thread.run(Thread.java:764)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: Caused by: java.lang.IllegalArgumentException: Unknown value: 1em
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.uimanager.LayoutShadowNode$MutableYogaValue.setFromDynamic(LayoutShadowNode.java:12)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	at abi42_0_0.com.facebook.react.uimanager.LayoutShadowNode.setMargins(LayoutShadowNode.java:4)
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: 	... 17 more

In particular:

08-10 10:27:58.250 10007 10469 E unknown:ViewManager: Error while updating prop margin
[...]
08-10 10:27:58.250 10007 10469 E unknown:ViewManager: Caused by: java.lang.IllegalArgumentException: Unknown value: 1em

After changing the paragraph margin to an integer it works on Android.

Thank you

You are a life saver.

Now that we (I) know what is the cause, should it be reported as bug? It seems strange that this works on iOS and not Android, and at least this should be caught by Expo Go on Android and reported to user on error screen.

As far as I know it’s a known React Native issue and I think they might be unwilling to fix it to avoid negatively affecting performance. But I might be wrong. See what you can find in the Issues in the React Native repository on GitHub.

At least you know for next time :slight_smile:
adb logcat can be useful, although there’s a lot of junk to wade through.

1 Like