Expo support

[julian-gargicevich]

It'd be great if this library worked with expo managed workflow. Do you have any idea how to get it to work with it?

I've tried adding it to the managed workflow and then creating a new dev client but it's the AppDelegate section that I really don't know how to get it working.

[galias11]

Hi @julian-gargicevich, I know you asked long ago but I have just had to get this working and maybe this can be useful. I found a workaround for this to work with expo if you are using EAS for building.

• At app.json you have to add this:

"ios": {
... other config ...
   "infoPlist": {
       "TikTokAppID": "<tiktok_app_id>",
       "LSApplicationQueriesSchemes": ["tiktokopensdk", "tiktoksharesdk", "snssdk1180", "snssdk1233"], 
   }
}

• For modifying AppDelegate.m is a bit tricky:
• • First step is to run expo prebuild --clean. Ensure first not to have any ongoing changes you want to commit. You will have to rollback all this changes after checking something. Basically this will create android / ios directory with contents similar to the ones you would have if you had ejected the app.
• • Once you do this go to ios directory and copy AppDelegate.m contents (you will need them later). After that, rollback all changes.
• • No we need to create a new plugin. For this create a plugins directory and under react-native-tiktok dir an index.js file. Dir names can be whatever you want.
• • Now add a new entry at app.json at expo object:

"plugins": [
      "./plugins/react-native-tiktok/index.js"
  ],

• • At the new index.js file you will need to have the following code:

const { withAppDelegate, withPlugins } = require('@expo/config-plugins');
const { resolve } = require('path');
const { readFileSync, writeFileSync } = require('fs');

function withReactNativeTiktoktAppDelegate(config) {
  return withAppDelegate(config, cfg => {
    cfg.modResults.contents = `<your modified AppDelegate.m>`;
    return cfg;
  });
}

const withUrlScheme = (config) => {
  return withInfoPlist(config, config => {
    config.modResults.CFBundleURLTypes.push({
      CFBundleURLSchemes: [config.ios.infoPlist.TikTokAppID],
    });
    return config;
  });
};

function withReactNativeTiktok(config) {
  return withPlugins(config, [
    withReactNativeTiktoktAppDelegate,
    withUrlScheme,
  ]);
}

module.exports = withReactNativeTiktok; 

Where it says you will have to fill it with the AppDelegate.m content you got before and add to it the lines required by https://developers.tiktok.com/doc/getting-started-ios-quickstart-objective-c step 4.

Also for not running into this issue: #11, be sure to register and get your app approved at tiktok developers portal.

Edit: One update. I mentioned below that callback was not working properly and it was not returning to app after sharing a video. This is because this line "CFBundleURLTypes": [{"CFBundleURLSchemes":["<tiktok_app_id>"]}], does not update info.plist correctly. For making this work we need to add this to the plugin index:

const withUrlScheme = (config) => {
  return withInfoPlist(config, config => {
    config.modResults.CFBundleURLTypes.push({
      CFBundleURLSchemes: [config.ios.infoPlist.TikTokAppID],
    });
    return config;
  });
};

I will update what I wrote on the steps above just for the post to be clearer.

[julian-gargicevich]

Thank you @galias11 !! I'm currently on holidays but will try it out and let you know how it goes once I get back

[Lg0gs]

@galias11
Did you try and worked for you?

[galias11]

Hey @Lg0gs, yes it did. I only used it for video sharing. The only thing I have not fully tested yet is the go back to my App feature, but the video is shared correctly. As a note for development I use an EAS development build: https://docs.expo.dev/development/build/

[mkhanbas]

@galias11 Could you please share a snippet of your code where you are calling 'auth' and could you also please share the AppDelegate.m file you created for the react-native-tiktok expo plugin? It seems like the SDK is not being called when I call 'auth' and I think the problem is in one of those two areas. Any help would be greatly appreciated 🙏

[development-zzp]

How to use it. Can you share me file react native code