react-native-android-function

React native library, contains a set of functions.

Usage no npm install needed!

<script type="module">
  import reactNativeAndroidFunction from 'https://cdn.skypack.dev/react-native-android-function';
</script>

README

React Native: react-native-android-function

GitHub package version npm home platforms github home npm

github issues github closed issues Issue Stats github 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
  1. 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')
    
  2. 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);

|Prop|Type|Default|Note| | - | - | - | - | |url|string||URL of the Youtube video to open. |fullscreen|boolean |true|It allows you to choose whether to view the video in fullscreen mode.

AndroidFunction.Youtube(url,fullscreen);

|Prop|Type|Default|Note| | - | - | - | - | |url|string||URL of the YouTube video to open. |fullscreen|boolean ||It allows you to choose whether to view the video in fullscreen mode.

Facebook

AndroidFunction.Facebook(id);

|Prop|Type|Default|Note| | - | - | - | - | |id|string||Id of Facebook profile to open.

Instagram

AndroidFunction.Instagram(id);

|Prop|Type|Default|Note| | - | - | - | - | |id|string||Id of Instagram profile to open.

Twitter

AndroidFunction.Twitter(id);

|Prop|Type|Default|Note| | - | - | - | - | |id|string||Id of Twitter profile to open.

Google Play Store

AndroidFunction.GooglePlayStore(id);

|Prop|Type|Default|Note| | - | - | - | - | |id|string||Id of Google Play Store profile to open.

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);

|Prop|Type|Default|Note| | - | - | - | - | |appIntent|string||| |setPackage|string||| |webIntent|string||||

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

|Prop|Type|Default|Note| | - | - | - | - | |urlImg|string ||Url of the image. |cropped|boolean||Ability of skill the rounding of the image. |shortLabel|string ||| |longLabel|string ||| |appUri|string ||| |setPackage|string ||||

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

|Prop|Type|Default|Note| | - | - | - | - | |urlImg|string ||Url of the image. |cropped|boolean||Ability of skill the rounding of the image. |shortLabel|string || |longLabel|string || |type|string || What kind of intent to use: facebook,instagram,twitter,googleplaystore| |id|string || id of the user to pass|

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 #FFFFFF| Text color, you can only use it as the typeImg is letter. |colorCircle|string|#64B5F6 #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 #FFFFFF| Text color. |colorCircle|string|#64B5F6 #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

|appUri|setPackage|Note| | - | - | - | |https://www.google.com/||||

Facebook

|appUri|setPackage|Note| | - | - | - | |https://www.facebook.com/+id|com.facebook.katana|| |fb://facewebmodal/f?href=https://www.facebook.com/+id|com.facebook.katana|||

Instagram

|appUri|setPackage|Note| | - | - | - | |http://instagram.com/+id|com.instagram.android|| |http://instagram.com/_u/+id|com.instagram.android||

Twitter

|appUri|setPackage|Note| | - | - | - | |https://twitter.com/+id|com.twitter.android|| |twitter://user?screen_name=+id|com.twitter.android||| |https://twitter.com/intent/tweet?text=%23+text||| |https://twitter.com/search?f=tweets&q=+text||||

Google Play Store

|appUri|setPackage|Note| | - | - | - | |https://play.google.com/store/apps/details?id=+id|com.android.vending|| |market://details?id=+id|com.android.vending|||

Youtube

|appUri|setPackage|Note| | - | - | - | |http://www.youtube.com/watch?v=+id||| |vnd.youtube:+id||||

Some examples of infoIntent

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

Some suggested colors

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

📜 License

This library is provided under the Apache License.