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 PushNotificationIOS https://facebook.github.io/react-native/docs/pushnotificationios.html (iOS only)

1.2.13. Install react-native-incall-manager https://github.com/zxcpoiu/react-native-incall-manager

1.2.14. Install react-native-zip-archive https://github.com/mockingbot/react-native-zip-archive

2. Usage

    import AZStackSdk from 'azstack-react-native/sdk/'; 

    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 getPaidCallTags = (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,
                getPaidCallTags: getPaidCallTags,
                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