Skip to content

installation.md

Latest commit

 

History

History
163 lines (119 loc) · 5.99 KB

installation.md

File metadata and controls

163 lines (119 loc) · 5.99 KB

Installation

Index

Preliminary steps

Firstly, commit all your previous changes. Messing with native modules can sometimes break your project, and it's a good idea to have a restore point.

Secondly, configure your vk.com app.

For iOS, you will need to fill in App Bundle for iOS field.

For Android, you will need to fill in Package name for Android, Main Activity for Android, Signing certificate fingerprint for Android fields. To obtain the fingerprint, you can follow the guide from VK Android SDK documentation. There is also helpful API method that does the same, you can use while developing. For production version you can find this fingerprint in google plat store settings iof your app.

VK App Settings

Thirdly, install npm package with

yarn add react-native-vkontakte-login

Or alternative npm command

Helper script

To install this module automatically, run

yarn rn-vk-postlink

Answer y or n to three questions about automatic installation. You will be also asked for your VK APP ID. It will be stored in .env file in your project root, which is handy if you use react-native-config or something similar.

The script has several dependencies, all of them listed as peer dependencies of this package. These dependencies are also part of default react-native project dependency tree, so you should not require them unless you tamper with default react-native dependencies. Otherwise you can install what's missing as dev dependencies.

What the script does:

Manual installation

This module supports autolinking, so since RN v0.60 you don't need to modify your gradle files, xcode project or poodfile. If for some reason you need to, read instructions from v0.4

Android

  1. In your AndroidManifest.xml, add following line inside <application> element:

    <activity android:name="com.vk.sdk.VKServiceActivity" android:label="ServiceActivity" android:theme="@style/VK.Transparent" />

  2. (Optional) Add VK Application ID to resources (main/res/values/strings.xml) so the module will initialize with it at startup:

    <integer name="com_vk_sdk_AppId">VK_APP_ID</integer>

    (In this example, VK_APP_ID should be replaced with 5514471) If you do so, you won't need to call VKLogin.initialize(vkAppId) from your JS code.

iOS

  1. Add following fragment to your info.plist:

    <key>LSApplicationQueriesSchemes</key>
<array>
    <string>vk</string>
    <string>vk-share</string>
    <string>vkauthorize</string>
</array>

  2. To use authorization via VK App you need to setup a url-schema of your application. Open your application settings then select the Info tab. In the URL Types section click the plus sign. Enter vk+APP_ID (e.g. vk5514471) to the Identifier and URL Schemes fields.

    ![URL Types](images/url_types.png)

Alternatively, you can add following to your info.plist (of course, you should replace 5514471 with your VK Application ID):

```xml
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>vk5514471</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>vk5514471</string>
        </array>
    </dict>
</array>
```

  3. In your AppDelegate.m, you need to import VK SDK:

    #import <VKSdkFramework/VKSdkFramework.h>

    and then add following code (both methods are required):

    //iOS 9 workflow
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options {
   [VKSdk processOpenURL:url fromApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]];
   return YES;
}

//iOS 8 and lower
-(BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
   [VKSdk processOpenURL:url fromApplication:sourceApplication];
   return YES;
}

  4. (Optional) You can add your VK Application ID to info.plist so the module will initialize with it at startup:

    <key>VK_APP_ID</key>
<integer>5514471</integer>

    If you do so, you won't need to call VKLogin.initialize(vkAppId) from your JS code.

Known issues

onActivityResult may not be called if activity started from native module in react context. It is a well known issue that happens from one to another version of react-native. The fix is in forwarding onActivityResult call from your MainActivity. If your app has been created without Expo

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        mReactInstanceManager.onActivityResult(this, requestCode, resultCode, data);
    }

It is a bit different if you detached the app from ExpoKit. Expo overrides instance of mReactInstanceManager so we have to look up method in runtime

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        mReactInstanceManager.callRecursive("onActivityResult", this, requestCode, resultCode, data);
    }