Android activity reagent content is only displayed after transition animation is completed

Question

Android activity reagent content is only displayed after transition animation is completed

I am trying to apply some transitional animation when switching actions. However, the content of the next action is always displayed only after the animation is completed, which leads to a white flash when switching to the next activity.

This problem does not exist if I use the Android layout as the content of the next operation, so the problem due to React-Native is obvious.

Below is the symbol RouterModule. When the JS-code is to switch to another activity, he just calls the method push, and this module will call startActivity()and overridePendingTransition()you want to animate:

RouterModule

public class RouterModule extends ReactContextBaseJavaModule {

    public RouterModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "RouterModule";
    }

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<String, Object>();
        return constants;
    }

    @ReactMethod
    public void push(String uri, @Nullable ReadableMap config, String transition) {
        Uri intentData = Uri.parse(uri);
        Intent pageIntent = RedirectActivity.getPageIntentFromUri(intentData);

        MyReactNativeApplication.CURRENT_VIEW_CONTEXT.startActivity(pageIntent);
        switch(transition){
            case "leftToRight":                      
                MyReactNativeApplication.CURRENT_VIEW_CONTEXT.overridePendingTransition(R.anim.right_to_left_in, R.anim.right_to_left_out);               
                break;
            default:
                MyReactNativeApplication.CURRENT_VIEW_CONTEXT.overridePendingTransition(0, 0);
                break;
    }
}

    @ReactMethod
    public void pop(@Nullable ReadableMap config, String transition) {
        final AppCompatActivity currentContext = CoinReactNativeApplication.CURRENT_VIEW_CONTEXT;
        currentContext.finish();

        switch(transition){
            case "rightToLeft":
                currentContext.overridePendingTransition(R.anim.left_to_right_in,  R.anim.left_to_right_out);
                break;
            default:
                break;
        }
    }    
}

PageActivity. , React-Native JS-, .

PageActivity

public class PageActivity extends AppCompatActivity {

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    private ReactContext mReactContext;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = getIntent();
        Bundle config = parseIntent(intent);

        String uriString = (String) config.get("uriString");
        Bundle initProps = (Bundle) config.get("config");

        NavigatorHelper.handleNavbar(this, config);
        render(uriString, config, initProps);
    }

    private void render(String uriString, Bundle config, Bundle initProps) {

        mReactInstanceManager = MyReactNativeApplication.getApplication().getReactInstanceManager();
        mReactRootView = new ReactRootView(this);
        mReactRootView.startReactApplication(mReactInstanceManager, uriString, initProps);

        setContentView(mReactRootView);

        mReactContext = mReactInstanceManager.getCurrentReactContext();
    }    
}