React Native: react-native-android-function

• Usage
• License

📖 Getting started

$ npm install react-native-android-function --save

$ react-native link react-native-android-function

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.zappi.android.function.AndroidFunctionPackage; to the imports at the top of the file
• Add new AndroidFunctionPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

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

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-android-function')
   

💻 Usage

import AndroidFunction from 'react-native-android-function';

Intents

Youtube

AndroidFunction.Youtube(url);

AndroidFunction.Youtube(url,fullscreen);

Facebook

AndroidFunction.Facebook(id);

Instagram

AndroidFunction.Instagram(id);

Twitter

AndroidFunction.Twitter(id);

Google Play Store

AndroidFunction.GooglePlayStore(id);

AndroidFunction.GooglePlayStore();

Open as intent the google play store passing id in the app in use it is on the google play store.

General intent

AndroidFunction.General(appIntent,setPackage,webIntent);

AndroidFunction.ShortCuts(urlImg,cropped,shortLabel,longLabel,appUri,setPackage);

AndroidFunction.ShortCutsType(urlImg,cropped,shortLabel,longLabel,type,id);

Pinned ShortCuts

import * as React from 'react';
import { Text, View, StyleSheet, ToastAndroid } from 'react-native';
import AndroidFunction from 'react-native-android-function';

AndroidFunction.pinnedShortcuts.setShortcutItems([
  {
    typeImg: 'icon',
    icon: {
      family: 'Entypo',
      name: 'browser',
      colorIcon: '#90a4ae',
      colorCircle: '#000000',
    },
    shortLabel: 'Browser',
    longLabel: 'Open Browser',
    typeIntent: 'uri',
    appUri: 'https://www.google.com/',
  },
  {
    typeImg: 'url',
    urlImg:
      'http://images.amcnetworks.com/bbcamerica.com/wp-content/uploads/2017/05/anglo_2000x1125_larapulver-e1495023889751-640x360.jpg',
    shortLabel: 'Pulver',
    longLabel: 'Lara Pulver',
    typeIntent: 'uri',
    appUri: 'https://twitter.com/larapulver',
    setPackage: 'com.twitter.android',
  },
  {
    typeImg: 'letter',
    colorText: '#ffffff',
    colorCircle: '#e57373',
    shortLabel: 'Watson',
    longLabel: 'Emma Watson',
    typeIntent: 'uri',
    appUri: 'https://www.instagram.com/_u/emmawatson/',
    setPackage: 'com.instagram.android',
  },
  {
    typeImg: 'icon',
    icon: {
      family: 'MaterialCommunityIcons',
      name: 'emoticon-happy',
    },
    shortLabel: 'App pass param',
    longLabel: 'Open App',
    typeIntent: 'app',
    infoIntent: {
      name: 'Megan',
      surname: 'Fox',
      urlImg:
        'https://scontent-mxp1-1.cdninstagram.com/vp/3c4732c2cd3566727dad10f03c04b7bd/5C9241C4/t51.2885-19/s150x150/34706107_1875460276079648_8096847319644766208_n.jpg',
      age: 32,
      height: '1.63 m',
    },
  },
]);

export default class ExampleShortcuts extends React.Component {
  constructor() {
    super();
    this.state = {
      data: {},
    };
  }

  componentDidMount() {
    AndroidFunction.pinnedShortcuts
      .popInitialAction()
      .then(data => {
        if (Object.keys(data).length == 0 || Object.keys(data.obj).length == 0)
          return;
        console.log('App3:', data);
        this.setState({ data: data.obj });
        ToastAndroid.show(data.obj.name, ToastAndroid.SHORT);
      })
      .catch(console.error);
  }

  render() {
    const { data } = this.state;
    return (
      <View style={styles.container}>
      <Text style={styles.paragraph}>Quick Action: {(data.name && data.name+" "+data.surname) || 'None'}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

AndroidFunction.pinnedShortcuts.setShortcutItem

Prop	Type	Default	Note
typeImg	string	letter	url, icon, letter
icon	object		icon, you can only use it as the typeImg is icon.
colorText	string	#FFFFFF	Text color, you can only use it as the typeImg is letter.
colorCircle	string	#64B5F6	Circle color, you can only use it as the typeImg is letter.
urlImg	string		Image url, you can only use it as the typeImg is url.
shortLabel	string
longLabel	string
typeIntent	string	app	Uri, allows you to open an intent to an external app, see: examples App, allows you to open the app itself by passing the objects defined in infoIntent, see: infoIntent
appUri	string
setPackage	string
infoIntent	object		infoIntent, you can only use it as the typeIntent is app.

icon

Prop	Type	Default	Note
family	string		Icon family type
name	string		Icon name
colorText	string	#FFFFFF	Text color.
colorCircle	string	#64B5F6	Circle color.

See: react-native-vector-icons To search for icons: react-native-vector-icons

Some examples of appUri and setPackage

Open page browser

Facebook

Instagram

Twitter

Google Play Store

Youtube

Some examples of infoIntent

infoIntent: {
paramOne: 21,//int
paramTwo: "James Bond",//string
paramThree: 0.07,//float
....
}

Some suggested colors

• #e57373
• #f06292
• #ba68c8
• #9575cd
• #7986cb
• #64b5f6
• #4fc3f7
• #4dd0e1
• #4db6ac
• #81c784
• #aed581
• #dce775
• #fff176
• #ffd54f
• #ffb74d
• #ff8a65
• #a1887f
• #e0e0e0
• #90a4ae
• #000000

📜 License

This library is provided under the Apache License.