React Native: react-native-android-function
📖 Getting started
$ npm install react-native-android-function --save
$ react-native link react-native-android-function
Android
- 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
- 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')
- 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. |
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 | 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
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 | |
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,
paramTwo: "James Bond",
paramThree: 0.07,
....
}
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.