Package Exports
- azstack-react-native
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (azstack-react-native) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
1. Installation
Install package
npm install --save azstack-react-native
1.1. Core
1.1.1. Install socket.io-client https://github.com/socketio/socket.io-client
1.1.2. Install jsencrypt https://github.com/travist/jsencrypt
1.1.3. Install react-native-webrtc https://github.com/oney/react-native-webrtc
1.2. Sdk
1.2.1. Install react-native-image-crop-picker https://github.com/ivpusic/react-native-image-crop-picker
1.2.2. Install react-native-document-picker https://github.com/Elyx0/react-native-document-picker
1.2.3. Install react-native-video https://github.com/react-native-community/react-native-video
1.2.4. Install react-native-swiper https://github.com/leecade/react-native-swiper
1.2.5. Install react-native-audio https://github.com/jsierles/react-native-audio
1.2.6. Install react-native-fs https://github.com/itinance/react-native-fs
1.2.7. Install react-native-sketch-canvas https://github.com/terrylinla/react-native-sketch-canvas
1.2.8. Install react-native-maps https://github.com/react-community/react-native-maps
1.2.9. Install react-native-google-places https://github.com/tolu360/react-native-google-places
1.2.10. Install react-native-device-info https://github.com/rebeccahughes/react-native-device-info
1.2.11. Install react-native-fcm https://github.com/evollu/react-native-fcm (Android only)
1.2.12. Install react-native-incall-manager https://github.com/zxcpoiu/react-native-incall-manager
1.2.13. Install react-native-zip-archive https://github.com/mockingbot/react-native-zip-archive
2. Usage
import {AZStackSdk} from 'azstack-react-native';
componentDidMount() {
this.refs.AZStackSdk.connect().then((result) => {
this.setState({ authenticatedUser: result });
}).catch((error) => {});
};
render() {
...
let azstackConfig = {
requestTimeout: 60000,
intervalPingTime: 60000,
autoReconnect: true,
autoReconnectLimitTries: 10,
autoReconnectIntervalTime: 5000,
logLevel: 'ERROR',
authenticatingData: {
appId: '',
publicKey: '',
azStackUserId: '',
userCredentials: '',
fullname: '',
namespace: ''
}
};
let defaultLayout = {
withStatusbar: true,
withHeader: true,
screenStyle: {},
statusbarStyle: {}
};
let languageCode = 'en';
let themeName = 'classic';
let getInitialMembers = (options) => {
return new Promise((resolve, reject) => {
resolve(['test_user_1', 'test_user_2', 'test_user_3'].filter((member) => {
return member.indexOf(options.searchText) > -1;
}));
});
};
let getMoreMembers = (options) => {
return new Promise((resolve, reject) => {
resolve(false);
});
};
let getFromPhoneNumbers = (options) => {
return new Promise((resolve, reject) => {
resolve([]);
});
};
let onBeforeMessageSend = (message) => {
return new Promise((resolve, reject) => {
resolve(message);
});
};
let onBeforeCalloutStart = (calloutData) => {
return new Promise((resolve, reject) => {
resolve(calloutData);
});
};
...
return (
<AZStackSdk
ref={"AZStackSdk"}
options={{
azstackConfig: azstackConfig,
defaultLayout: defaultLayout,
languageCode: languageCode,
getInitialMembers: getInitialMembers,
getMoreMembers: getMoreMembers,
getFromPhoneNumbers: getFromPhoneNumbers,
onBeforeMessageSend: onBeforeMessageSend,
onBeforeCalloutStart: onBeforeCalloutStart
}}
>
)
...
}
APIS
List conversations
this.refs.AZStackSdk.showConversations(screenOptions)
How to start chat
this.refs.AZStackSdk.startChat({
chatType: '', // 1: CHAT_TYPE_USER, 2: CHAT_TYPE_GROUP
chatId: 0,
// other screenOptions
});
Show number pad for callout
this.refs.AZStackSdk.showNumberPad(screenOptions)
How to start callout
this.refs.AZStackSdk.startCallout({
callData: {
fullname: 'Some name',
toPhoneNumber: '0123456789',
fromPhoneNumber: '0123456789',
},
onEndCall: () => {
// or whatever you want here
},
// other screenOptions
});
How to start video call
this.refs.AZStackSdk.startVideoCall({
callData: {
fullname: 'User 2',
toUserId: 387212, // must be number
},
onEndCall: () => {
// or whatever you want here
},
// other screenOptions
});
How to start audio call
this.refs.AZStackSdk.startAudioCall({
callData: {
fullname: 'User 2',
toUserId: 387212, // must be number
},
onEndCall: () => {
// or whatever you want here
},
// other screenOptions
});
Show call logs
this.refs.AZStackSdk.showCallLogs(screenOptions)
Show user info
this.refs.AZStackSdk.showUser(screenOptions)
Show group info
this.refs.AZStackSdk.showGroup(screenOptions)
screenOptions
{
onBackButtonPressed: () => {},
screenStyle: {},
statusbarStyle: {},
withStatusbar: true | false, // true by default, overwrite defaultLayout
withHeader: true | false, // true by default, overwrite defaultLayout
}
For more detail about how it work
Visit https://github.com/azstack/azstack-react-native/blob/master/docs/Usage.md