Clicking on the action extension will open the default, example view controller, so let's make that our own instead.

Show React Native View in Action Extension

As mentioned previously, the generated Action Extension included a default view controller in ActionViewController.m . That view controller implements viewDidLoad to implement the example functionality. We're going to replace that method with a loadView method that creates an RCTRootView with our app's JavaScript bundle (see also this commit in our example app):

- (void)loadView { NSURL *jsCodeLocation; jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"RNActionExtension" initialProperties:nil launchOptions:nil]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; self.view = rootView; }

Note that most of this code was gently lifted straight from the AppDelegate.m file in the React Native app (with nil replacing launchOptions , since the view does not accept any options).

Show Custom React Native View from Action Extension

If you were to try out your Action Extension now (after rebuilding first), you'd see the whole React Native app loaded after clicking on the action. Since the goal of an Action Extension is to provide some single piece of functionality, we need to update our app to allow showing a special view in our Action Extension.

We'll accomplish this by passing in an initial property to designate when our app is started inside an Action Extension and render a different component based on that property. (See also this commit in our example app.)

First, update the loadView method in ActionViewController.m to pass in a dictionary with isActionExtension set to true for the initialProperties argument of initWithBundleURL :

NSDictionary *initialProps = [NSDictionary dictionaryWithObject:[NSNumber numberWithBool: TRUE] forKey:@"isActionExtension"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"RNActionExtension" initialProperties:initialProps launchOptions:nil];

Next, in our JavaScript code we can add a new screen to be displayed, ActionExtensionScreen :

// @flow import React from 'react' import { Text, View } from 'react-native' import { Metrics } from '../Themes' // Styles import styles from './Styles/ActionExtensionScreenStyle' export default class ActionExtensionScreen extends React.Component { render () { return ( <View style={styles.container}> <Text style={styles.text}>Hello from our Action Extension!</Text> </View> ) } }

We can update the root component of our application to render this new screen when the desired prop is true . In an Ignite application, this component is in App/Containers/App.js . Update the component to check the isActionExtension prop:

class App extends Component { static propTypes = { isActionExtension: React.PropTypes.bool } static defaultProps = { isActionExtension: false } render () { const component = this.props.isActionExtension ? <ActionExtensionScreen /> : <RootContainer /> return ( <Provider store={store}> { component } </Provider> ) } }

Now, when we rebuild the app and open our Action Extension, we should see our new view!