Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding share action/extension in React Native

Tags:

react-native

Trying to build a React Native app that injects a menu item in the Share menu (Share Action for Android, Share Extension for iOS) and receives shared items in the app. Is there a component for this, and if not what's the best way to build one?

like image 935
infojunkie Avatar asked Nov 17 '15 20:11

infojunkie


People also ask

What is Share extension?

Learn how to use the Android share extension to save and shop recipes from any app that uses the native share menu. You can save pages directly from your mobile browser and from most apps that use the default share menu. When you find something you want to save, look for the Share button.

Is react Native better than flutter?

Flutter is easier to use as it is more resistant to system updates. It means that when iOS or Android update the OS, the app will remain the same. On the contrary, React Native depends on native elements, so when the update is released, some problems may appear in the launch app.

What is share in react native?

React Native Share, a simple tool for share message and file to other apps.


1 Answers

I implemented a module for that: https://www.npmjs.com/package/react-native-share-menu (currently just works for Android).

That's how to use it:

Install the module:

npm i --save react-native-share-menu

In android/settings.gradle:

...
include ':react-native-share-menu', ':app'
project(':react-native-share-menu').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share-menu/android')

In android/app/build.gradle:

...
dependencies {
    ...
    compile project(':react-native-share-menu')
}

Register module (in MainActivity.java):

import com.meedan.ShareMenuPackage;  // <--- import 

public class MainActivity extends ReactActivity {
......
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ShareMenuPackage()  // <------ add here      
        );
    }
......
}

Example:

import React, {
    AppRegistry,
    Component,
    Text,
    View
} from 'react-native';
import ShareMenu from 'react-native-share-menu';

class Test extends Component {
    constructor(props) {
        super(props); 
        this.state = {
            sharedText: null
        };
    }

    componentWillMount() {
        var that = this;
        ShareMenu.getSharedText((text :string) => {
            if (text && text.length) {
                that.setState({ sharedText: text });
            }
        })
    }

    render() {
        var text = this.state.sharedText;
        return (
            <View>
                <Text>Shared text: {text}</Text>
            </View>
        );
    }
}

AppRegistry.registerComponent('Test', () => Test);
like image 197
Caio Almeida Avatar answered Sep 17 '22 21:09

Caio Almeida