Skip to content

GetSocial UI on React Native

Prerequisites

Control GetSocial View State

GetSocial UI provides you with all the instruments to control the state of its views. You have already read how to show GetSocial View. Now let’s try closing it. Do this with:

boolean saveState = false;
GetSocialUI.closeView(saveState);

It will close current visible GetSocial View or do nothing, if there is no GetSocial View.

It you want to close GetSocial View saving its current state and restore it later, pass true as saveState parameter:

//close and save
boolean saveState = true;
GetSocialUI.closeView(saveState);

//and restore
GetSocialUI.restoreView();

Warning

If you want to show new GetSocial view after you closed other with saving state, your saved state will be lost, and the view will be opened as usual. Calling restoreView after that will not affect anything.

Note

If you have some problems showing an alert or view while GetSocial UI View is opened, call GetSocialUI.closeView(true). Later, after your view is closed, call GetSocialUI.restoreView() to get back to GetSocial UI View.

Load UI Configuration

To customize GetSocial UI you have to provide custom assets (drawables, fonts) and JSON configuration file. The easiest way to start, is to download one of the included themes (Default, Dark or Light) and do small tweaks on the JSON configuration (see the reference) or resources.

Android

On Android, all assets and UI configuration JSON should be located in the assets/ folder.

For instance, to make GetSocial UI wider for landscape orientation you have to:

  1. Create a UI configuration file, e.g. assets/getsocial-landscape/ui-landscape.json with the following content:
{
    "base-design": {
        "scale-mode": "scale-with-screen-size",
        "width": 640,
        "height": 320,
        "ppi": 72
    },
    "elements": {
        "window": {
            "width": 500,
            "height": 320
        }
    }
}

  1. Load UI configuration. Add uiConfig property to the GetSocial configuration in the Android application build.gradle:

    getsocial {
    ...
    uiConfig "getsocial/ui-landscape.json"
}

    Or you can load it dynamically in the application code:

    GetSocialUI.loadConfiguration('getsocial-landscape/ui-config.json').then(() => {
    console.log('UI Config', 'UI Configuration has been changed');
}, (error) => {
    console.log('Error', error.message);
});

    GetSocialUI.loadConfiguration(…) is Deprecated

    Loading UI Configuration from code has a limitation: you have to load it at each entry point to the app, e.g., when users open the app from a push notification.
    On the contrary, if you provide the path to UI Configuration via GetSocial Gradle plugin, we will handle UI Configuration loading automatically.

iOS

On iOS, all assets, as well as UI configuration JSON, should be located inside the main bundle under the Resources/ folder.

For instance, to make GetSocial UI wider for landscape orientation you have to:

  1. Create a UI configuration file, e.g. Resources/getsocial/ui-landscape.json with the following content:

    {
    "base-design": {
        "scale-mode": "scale-with-screen-size",
        "width": 640,
        "height": 320,
        "ppi": 72
    },
    "elements": {
        "window": {
            "width": 500,
            "height": 320
        }
    }
}

  2. Load UI Configuration.

    • If you are using GetSocial iOS Installer Script you have to add ui-config parameter to getsocial.sh in the Xcode project Build Phases section:

      getsocial.sh --app-id=[GetSocial App Id] --ui-config="getsocial/ui-landscape.json"

    • Or if you want to load UI Configuration dynamically from the code:

      GetSocialUI.loadConfiguration('getsocial-landscape/ui-config.json').then(() => {
    console.log('UI Config', 'UI Configuration has been changed');
}, (error) => {
    console.log('Error', error.message);
});

      1
2
3
      !!! warning "GetSocialUI.loadConfiguration(...) is Deprecated"
Loading UI Configuration from code has the limitation: you have to load it on every entry point to the app, e.g., when the user opens the app from push notification.
When you provide the path to UI Configuration in the .plist file we handle UI Configuration loading automatically.

Next Steps

Give us your feedback! Was this article helpful?

😀 🙁