react-native: android.view.WindowManager$BadTokenException

Question

I have a bug that I don't know where to begin. Tried to update the react-native version - but it didn't do the trick..

Environment

react-native-cli: 2.0.1
react-native: 0.54.2

Production build

The app is build and release to the google play store. So it is the compiled production version. Think it's an issue with the module perhaps.. but not quite sure..

this is my imports in the main component

import React, { Component } from 'react'
import { View, Modal, Text, TextInput, StyleSheet } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

Fullstack

java.lang.RuntimeException: 

  at com.facebook.react.bridge.ReactContext.handleException (ReactContext.java:313)

  at com.facebook.react.bridge.GuardedRunnable.run (GuardedRunnable.java:23)

  at android.os.Handler.handleCallback (Handler.java:739)

  at android.os.Handler.dispatchMessage (Handler.java:95)

  at android.os.Looper.loop (Looper.java:158)

  at android.app.ActivityThread.main (ActivityThread.java:7225)

  at java.lang.reflect.Method.invoke (Native Method)

  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run (ZygoteInit.java:1230)

  at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:1120)
Caused by: android.view.WindowManager$BadTokenException: 

  at android.view.ViewRootImpl.setView (ViewRootImpl.java:849)

  at android.view.WindowManagerGlobal.addView (WindowManagerGlobal.java:337)

  at android.view.WindowManagerImpl.addView (WindowManagerImpl.java:91)

  at android.app.Dialog.show (Dialog.java:350)

  at com.facebook.react.views.modal.ReactModalHostView.showOrUpdate (ReactModalHostView.java:256)

  at com.facebook.react.views.modal.ReactModalHostManager.onAfterUpdateTransaction (ReactModalHostManager.java:107)

  at com.facebook.react.views.modal.ReactModalHostManager.onAfterUpdateTransaction (ReactModalHostManager.java:28)

  at com.facebook.react.uimanager.ViewManager.updateProperties (ViewManager.java:35)

  at com.facebook.react.uimanager.NativeViewHierarchyManager.createView (NativeViewHierarchyManager.java:233)

  at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute (UIViewOperationQueue.java:153)

  at com.facebook.react.uimanager.UIViewOperationQueue$1.run (UIViewOperationQueue.java:816)

  at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches (UIViewOperationQueue.java:929)

  at com.facebook.react.uimanager.UIViewOperationQueue.access$2100 (UIViewOperationQueue.java:47)

  at com.facebook.react.uimanager.UIViewOperationQueue$2.runGuarded (UIViewOperationQueue.java:887)

  at com.facebook.react.bridge.GuardedRunnable.run (GuardedRunnable.java:21)

UPDATE

I use the modal 3 different places.

const Credits = ({ display, toggle }) => (
  <View>
    <TouchableOpacity
      style={[styles.button, styles.info]}
      onPress={() => toggle()}
    >
      <Icon name="question" size={30} color="#000" />
    </TouchableOpacity>

    {display && (
      <Modal
        animationType="slide"
        transparent={true}
        onRequestClose={() => toggle()}
      >
        <View style={styles.card}>
          <ScrollView>
            { ... code ...  }
          </ScrollView>
          <TouchableOpacity
            style={[styles.button, styles.close]}
            onPress={() => toggle()}
          >
            <Icon name="close" size={30} color="#000" />
          </TouchableOpacity>
        </View>
      </Modal>
    )}
  </View>
)

Don't know if it is because I use { display && <Modal .../> } logic instead of using the prop visible={display}???

Any help would be highly appreciated!

Does [this answer](https://stackoverflow.com/questions/18662239/android-view-windowmanagerbadtokenexception-unable-to-add-window-on-buider-s) help you? — Kyle Richardson, Mar 26 '18 at 15:36
It's probably the issue, but how am I going to fix it with react native - javascript and not pure JAVA? — Norfeldt, Mar 26 '18 at 15:46
@Norfeldt, please provide step how to reproduce it. or better provide code sample — hendrathings, Mar 29 '18 at 12:46
Can you show the this file that uses modal? according to the error, It seems you are using modal after the activity is destroyed — jay shah, Apr 03 '18 at 07:00
Try one of these three things: 1. remove animationType 2. remove transparent attribute 3. move out of JSX brackets i.e. { } — jay shah, Apr 04 '18 at 06:34
Okay will give it a try @jayshah thank you. Don't you wanna post it as an answer? — Norfeldt, Apr 04 '18 at 15:35

ygngy · Answer 1 · 2018-04-05T12:20:26.947

0

Because React native works asynchronous; after getting results from React native and before updating any UI, check for activity.isFinishing() and if the activity is finishing do not change UI

Another solution is to save activity state in onResume() and onPause() in some instance variable then check for activity state when getting results from React if activity is resumed just show the results but if your activity is paused save results of React somewhere and show the results in activity's onResume() method. Also, do not forget to check above life cycles for showing any error from React to the user. Any Android UI updates from react should consider Android activity life cycles.

void onResume(){
    super.onResume();
    activityResumed = true;
    if(showResultsOnResume){
        showResultsOnResume = false;
       //you have saved results from react waiting to show, show it here
     }
}
void onPause(){
       super.onPause();
       activityResumed = false;
}

// use this method to update any UI from React
void onReactResult(/*Results or Errors from React*/){ 
       if(activityResumed){
           // show the result
       }else{
           showResultsOnResume = true;
           // save result
       }
}

edited Apr 05 '18 at 12:20

answered Mar 29 '18 at 12:00

ygngy

2,809
2
12
27

In what life cycle method and how exactly? – Norfeldt Mar 29 '18 at 12:01
@Norfeldt get some of codes you use in Javascript and Java – ygngy Mar 29 '18 at 12:17
@Norfeldt in method of Java that is called with React when the result is ready – ygngy Mar 29 '18 at 12:18
Thank you so much for taking the time to try and answer my question. Unfortunately I don't see how and where I would do as you suggest. Sorry for being so a newbie asking for hand hold guidance. – Norfeldt Mar 31 '18 at 06:41
@Norfeldt this line `at android.app.Dialog.show (Dialog.java:350)` in stack trace shows that you are trying to show a dialog when there is no activity from your app on the screen. use my code to show the dialog only when your activity is resumed – ygngy Mar 31 '18 at 09:51
Brief of answer which is given by @Shadow [Take a Look at this one](https://stackoverflow.com/questions/18662239/android-view-windowmanagerbadtokenexception-unable-to-add-window-on-buider-s) – Mayur Dusane Apr 02 '18 at 17:00
There is already a proper check about isFinishing in react-native here (https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java#L253), so isFinishing is not a problem. – jay shah Apr 03 '18 at 16:04
Thanks @jayshah do you think it's the modal component or something else causing the issue? – Norfeldt Apr 04 '18 at 15:33

react-native: android.view.WindowManager$BadTokenException

Environment

Fullstack

UPDATE

1 Answers1