JSApplicationIllegalArgumentException with React Native Android

Question

Recently we've integrated react native into our app with just simple text view. We're getting this crash on all kind of devices.

Fatal Exception: com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'flex' in shadow node of type: RCTView
       at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:109)
       at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:148)
       at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:52)
       at com.facebook.react.uimanager.ReactShadowNode.updateProperties(ReactShadowNode.java:222)
       at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:177)
       at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:222)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:318)
       at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:739)
       at android.os.Handler.dispatchMessage(Handler.java:95)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
       at android.os.Looper.loop(Looper.java:234)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
       at java.lang.Thread.run(Thread.java:818)
Caused by java.lang.IllegalArgumentException: method com.facebook.react.uimanager.LayoutShadowNode.setFlex argument 1 has type float, got java.lang.String
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:99)
       at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:148)
       at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:52)
       at com.facebook.react.uimanager.ReactShadowNode.updateProperties(ReactShadowNode.java:222)
       at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:177)
       at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:222)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:318)
       at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:739)
       at android.os.Handler.dispatchMessage(Handler.java:95)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
       at android.os.Looper.loop(Looper.java:234)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
       at java.lang.Thread.run(Thread.java:818)

We show simple text with React Native

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <Text style={{color: 'white'}}>React Native is running</Text>
    )
  }
}

AppRegistry.registerComponent('8fit', () => HelloWorld);

We use React Native 0.35.0-rc.0 but we've been getting same crash also with stable release 0.33.1.

You can find full crash report here. https://gist.github.com/sealskej/1e2398ef1cd9dda2d1b2630348fa612a

Any help leading to fixing issue would be much appreciated!

Answer 1

I don't see why this doesn't work but perhaps a solution would be to wrap it in a View and set the value of flex there. For example:

  render() {
    return (
      <View style={{flex: 1}}>
         <Text style={{color: 'white'}}>React Native is running</Text>
      </View>
    )
  }