Not working with react-navigation

[jcsdelaico]

I made an app that works fine sharing url both on android and ios. I share an url, open up a shareScreen, and link to my app. All working well. Recently i added react-navigation and on ios the app is not working anymore.

Only importing in App.js my MainNavigation (createStackNavigator, createAppContainer, and screens) without using it in render, make the share extesion crash. If i comment that line, the app works again.

It's like the AppRegistry.registerComponent('shareExtension', () => Share) is not getting called.

import { AppRegistry } from 'react-native'; import App from './App'; import { name as appName } from './app.json'; import Share from './share.android';

AppRegistry.registerComponent(appName, () => App); AppRegistry.registerComponent('mysharescreen', () => Share);

react: 16.86 react-native: 0.59.9 react-navigation: 3.11.0

[jcsdelaico]

Solved! I separated the index.js and index.ios.js. The share extension goes to index.ios.js and the main app to index.js.

index.ios.js import { AppRegistry } from 'react-native'; import Share from './share.android'; AppRegistry.registerComponent('mysharescreen', () => Share);

Working great

[vivekjne]

@Zulmero i am having issues with dev server how did you solve it.

[jcsdelaico]

@Zulmero i am having issues with dev server how did you solve it.

What's your issue?

[ajaykumar97]

@Zulmero Hi Zulmero! I am facing the similar issue on iOS. I have installed and configured the library and described in the Readme.md and also able to run it on the device. The issue I am facing is that I am using the react-navigation(as you did) and if I use a simple view and register it, everything works fine. But If I use it with the react-navigation, nothing shows on the share button press. I have also registered the separate component for the share extension like ShareModule and replaced it in the ShareModule.m in the configuration also. But as I use it with the react-navigation, nothing happens and the Photos app on the iOS just stucks.

My index.js file is like:

/** @format */

import {AppRegistry,Platform} from 'react-native';
import {name as appName} from './app.json';
import Setup from './App'

AppRegistry.registerComponent(appName, () => Setup);

My ShareModule.js file is like:

import { AppRegistry } from 'react-native';
import Share from './Share'

AppRegistry.registerComponent('ShareModule', () => Share);

My Share.js file is like:

import React, { Component } from 'react';
import {
    Text,
    TextInput,
    View,
    TouchableOpacity,
    Image,
    AsyncStorage,
    Alert
} from 'react-native';

import Modal from 'react-native-modalbox'
import ShareExtension from 'react-native-share-extension'
import { createStackNavigator } from 'react-navigation';
import Screen1 from './Screen1';

const ShareStack = createStackNavigator({
    Screen1
},
    {
        navigationOptions: {
            header: null,
        }
    });

export default class Share extends Component {
    onClose() {
        ShareExtension.close()
    }
    render() {
        return (
           <Modal backdrop={false}
                style={{
                    backgroundColor: 'transparent'
                }} position="center"
                isOpen={this.state.isOpen}
                onClosed={this.onClose}
            >
            <View
                style={{
                    flex: 1,
                    backgroundColor: 'orange',
                    paddingTop: 20
                }}
            >
                <TouchableOpacity
                    style={{
                        padding: 20,
                        backgroundColor: 'blue'
                    }}
                    onPress={() => this.onClose()}
                >
                    <Text>Close</Text>
                </TouchableOpacity>
               </View>
            </Modal>
        )
}

If I remove react-navigation, everything is working fine. On android, everything is working fime even with the react-navigation.

My library versions are:

"react": "16.8.0" "react-native": "0.59.1" "react-navigation": "^2.14.2" "react-native-share-extension": "^2.0.0" "react-native-modalbox": "^1.7.1"

Update After investigating from start, I found that the issue was not with the react-navigation. The issue was with the third party dependencies which were needed to be linked with the share extension also. For example, I was using the react-native-fast-image for the images. For this, I had to add libFastImage.a to Link Binary With Libraries under Build Phases of my share extension. Also I needed to enable App Groups in the app capabilities of my main app and my share extension. To get common data of the user, I used react-native-swiss-knife