[Touchable] press event not responding after pushed to stack.

[wqyfavor]

My test is simple.

In didFinishLaunchingWithOptions, I create a UINavigationController and a UIViewController which contains RCTRootView. Then push the UIViewController to UINavigationController' s stack.

#import "AppDelegate.h"
#import "RCTRootView.h"

UINavigationController* theNavi = nil;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"TouchableFeedbackEvents"
                                                     launchOptions:launchOptions];

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    UIViewController *rootViewController = [[UIViewController alloc] init];
    rootViewController.view = rootView;

    UINavigationController* nav = theNavi = [[UINavigationController alloc] init];
    [nav pushViewController:rootViewController animated:YES];

    self.window.rootViewController = nav;
    [self.window makeKeyAndVisible];
    return YES;
}

@end

And I write a bridger which can load another RCTRootView, and push the new UIViewController to navigation controller.

#import "ReactNativeBridger.h"
#import "RCTRootView.h"

extern UINavigationController* theNavi;

@implementation ReactNativeBridger

- (void)startReactApp:(NSString*)componentName title:(NSString*)title
{
    RCT_EXPORT();

    NSURL *jsCodeLocation;
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:componentName
                                                     launchOptions:@{}];


    UIViewController* vc = [[UIViewController alloc] init];
    vc.view = rootView;
    vc.title = title;

    dispatch_async(dispatch_get_main_queue(), ^{
        [theNavi pushViewController:vc animated:YES];
    });
}

@end

The js just do one thing. On press, the script will invoke startReactApp method and push a new RCTRootView.

'use strict';

var React = require('react-native');
var {
    StyleSheet,
    AppRegistry,
    Text,
    TouchableOpacity,
    View,
} = React;

var ReactNativeBridger = require('NativeModules').ReactNativeBridger;

var TouchableFeedbackEvents = React.createClass({
                                                getInitialState: function() {return {};},

                                                render: function() {
                                                return (
                                                        <View style={{top: 100}}>
                                                        <TouchableOpacity
                                                        style={styles.wrapper}
                                                        onPress={() => this._press('press')}>
                                                        <Text style={styles.button}>Press Me</Text>
                                                        </TouchableOpacity>
                                                        </View>
                                                        );
                                                },
                                                _press: function(eventName) {
                                                ReactNativeBridger.startReactApp('TouchableFeedbackEvents', 'AAAA');}
                                                });

var styles = StyleSheet.create({
                               row: {
                               justifyContent: 'center',
                               flexDirection: 'row',
                               },
                               button: {
                               color: '#007AFF',
                               },
                               wrapper: {
                               borderRadius: 8,
                               },
                               });

AppRegistry.registerComponent('TouchableFeedbackEvents', () => TouchableFeedbackEvents);

The first view works perfectly. Press the button, another view will be pushed. But when I click the same button on the second view, nothing happens. It cannot respond to my pressing event.

[christopherdro]

@wqyfavor Did you ever get this resolved?

I'm seeing that your trying to call startReactApp from the native module but aren't actually exporting that method through the bridge.

First, you'll need to include RCT_EXPORT_MODULE() in order for your component to work in React Native.
Next, your going to have to export the method that your trying to call. Something like this might work...

@implementation ReactNativeBridger
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(startReactApp:(NSString *)componentName title:(NSString *)title 
{
    NSURL *jsCodeLocation;
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:componentName
                                                     launchOptions:@{}];

    UIViewController* vc = [[UIViewController alloc] init];
    vc.view = rootView;
    vc.title = title;

    dispatch_async(dispatch_get_main_queue(), ^{
        [theNavi pushViewController:vc animated:YES];
    });
}

@end

You can find more info here...
https://facebook.github.io/react-native/docs/nativemodulesios.html

[brentvatne]

Sorry for never getting back to you here, this is pretty old now - if you're still having this issue please ping me and we can reopen. Lots has changed since this was originally posted so it's very likely that this problem has been resolved! 😄

[wqyfavor]

Thanks. I think this has been solved. Thank you.