td icon indicating copy to clipboard operation
td copied to clipboard

react native support

Open ajai06 opened this issue 4 years ago • 23 comments

is there any support or package for react-native ?

ajai06 avatar Jun 26 '20 07:06 ajai06

You can build TDLib for any platform that is supported by React Native. You need just to load and use the prebuilt shared library in React Native project.

levlam avatar Jun 26 '20 08:06 levlam

not seeing anything that is supporting for react-native

ajai06 avatar Jun 26 '20 08:06 ajai06

You need to just wrap TDLib JSON interface, containing only 5 methods in pure C, using Native module: https://reactnative.dev/docs/native-modules-android.html.

levlam avatar Jun 26 '20 08:06 levlam

You need to just wrap TDLib JSON interface, containing only 5 methods in pure C, using Native module: https://reactnative.dev/docs/native-modules-android.html.

Sorry for silly question. What exactly I need to wrap ?

Ilya93 avatar Jul 15 '20 19:07 Ilya93

@Ilya93 TDLib JSON interface: https://github.com/tdlib/td/blob/master/td/telegram/td_json_client.h.

levlam avatar Jul 15 '20 22:07 levlam

@ajai06 reach out to me I have a full fledged react native component working for both android and ios

vidit-bhatia avatar Jan 24 '21 10:01 vidit-bhatia

I'm also looking to build a react-native app using the telegram API, though I'm having trouble finding many resources for help. I've successfully built tdlib for node.js, but I'm unsure what to do from here. I'm still fairly new to this stuff, so if anyone has any tips id greatly appreciate it!

AndrewEyesman avatar Feb 02 '21 18:02 AndrewEyesman

if you want to work with nodejs i can recommend you to use https://github.com/airgram/airgram.

jumoog avatar Feb 03 '21 11:02 jumoog

Thanks for the response @jumoog,

I'm actually already using Airgram, but I can't figure out how to integrate it with my react-native project. This is what I have so far:

const airgram = new Airgram({
    apiId: API_ID,
    apiHash: API_HASH',
    command: '../tdlib/bin/tdjson.dll',
    logVerbosityLevel: 1,
});

airgram.use(
    new Auth({
        code: () => prompt(`Please enter the secret code:\n`),
        phoneNumber: () => prompt(`Please enter your phone number:\n`),
    })
);

I can log in with my telegram account and make API calls, but I don't know where to begin with react-native. My understanding of node and server-side programming is quite limited, so I'm really lost at this point. Am I supposed to create and express server and make calls to my API instance? How would I get real-time updates to my react-native app? I have too many questions and barely any answers, I can hardly find anything online. If you have any additional information please let me know, thanks!

AndrewEyesman avatar Feb 03 '21 14:02 AndrewEyesman

hello @AndrewEyesman, how have you made airgram js work for you? I passed the tdlib folder to my node project and entered the path in command tdlib / bin / tdjson.dll and I get an error if you could explain me

C:\Users\Oscar Humberto\Desktop\javascript\telenode\node_modules\airgram\node_modules\ffi-napi\lib\dynamic_library.js:75 throw new Error('Dynamic Linking Error: ' + err); ^

Error: Dynamic Linking Error: Win32 error 126 at new DynamicLibrary (C:\Users\Oscar Humberto\Desktop\javascript\telenode\node_modules\airgram\node_modules\ffi-napi\lib\dynamic_library.js:75:11) at Object.Library (C:\Users\Oscar Humberto\Desktop\javascript\telenode\node_modules\airgram\node_modules\ffi-napi\lib\library.js:47:10) at new TdJsonClient (C:\Users\Oscar Humberto\Desktop\javascript\telenode\node_modules\airgram\components\TdJsonClient.js:86:27) at new Airgram (C:\Users\Oscar Humberto\Desktop\javascript\telenode\node_modules\airgram\Airgram.js:50:116) at Object. (C:\Users\Oscar Humberto\Desktop\javascript\telenode\src\tdlib.js:6:17) at Module._compile (node:internal/modules/cjs/loader:1091:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1120:10) at Module.load (node:internal/modules/cjs/loader:971:32) at Function.Module._load (node:internal/modules/cjs/loader:812:14) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) [nodemon] app crashed - waiting for file changes before starting...

oscar-rey-mosquera avatar Feb 20 '21 16:02 oscar-rey-mosquera

@xvitaly

@ajai06 reach out to me I have a full fledged react native component working for both android and ios

Hi, I need this too. How do I reach out?

ymsstudios avatar Mar 14 '21 19:03 ymsstudios

@ymsstudios @xvitaly I would have to do some work to open source the implementation as I have not added any examples to it.

If you guys are interested and ready to contribute we can work towards taking it out as open source we would need to add test cases and some use case example

vidit-bhatia avatar Mar 15 '21 05:03 vidit-bhatia

@ymsstudios @xvitaly if you guys want I can setup and initial meeting or add a slack or gitter to kick start this

vidit-bhatia avatar Mar 15 '21 06:03 vidit-bhatia

@vidit-bhatia I just did some research regarding react-native and tdlib and stumbled upon this issue. Did you already kick-start anything or have a repo/slack/gitter set up? Your progress sounds awesome! 👏

@zaunermax and me are currently trying to build a minimal RN telegram client and might be able to help to add examples or tests.

bemayr avatar Mar 16 '21 21:03 bemayr

Hey @oscar-rey-mosquera sorry for the late response. I honestly can't remember exactly what I did to get it working. Have you tried installing node-gyp?

npm i node-gyp

AndrewEyesman avatar Mar 16 '21 23:03 AndrewEyesman

@bemayr I added you guys a to a gitter workspace to initiate the discussion around this

vidit-bhatia avatar Mar 19 '21 06:03 vidit-bhatia

@vidit-bhatia @bemayr Hey guys, I find myself in a similar situation where I need to use TDLib with React Native. Will the approach discussed above work on both Android and iOS? Or only Android?

rashadg1030 avatar Apr 19 '21 01:04 rashadg1030

Hi @rashadg1030, I did not try the solution above yet so sadly I can't say whether it will work or not. But @vidit-bhatia, are there any updates on on your project or gitter.im? Thanks in advance!

bemayr avatar Apr 19 '21 19:04 bemayr

Hi @vidit-bhatia @bemayr, Can you please show me some example repo, how can I use TDlib in a react-native project?

ankitjain-1 avatar May 16 '21 13:05 ankitjain-1

Hi @ankitjain-1, unfortunately I didn't get any response from @vidit-bhatia and didn't have the time to continue with this project, but if I get back to it, I will ping you 👌

bemayr avatar Jun 01 '21 09:06 bemayr

Hey @oscar-rey-mosquera sorry for the late response. I honestly can't remember exactly what I did to get it working. Have you tried installing node-gyp?

npm i node-gyp

Has anyone found out how to make it work? I have been doing research about this for 24hours and am at a dead end now. @bemayr

gaithoben avatar Oct 20 '21 06:10 gaithoben

@bemayr I added you guys a to a gitter workspace to initiate the discussion around this

Bring me on board please

gaithoben avatar Oct 20 '21 08:10 gaithoben

I don't have much experience in React Native, but here's probably what you need to do.

Get compiled TDLib

Link libraries to your native iOS & Android apps

Make sure to have pre-generated ios and android paths with CLI, such as expo run:ios, expo run:android. Then add TDLib binary as dependency with possible solutions

  • iOS: Locally or SPM or CocoaPods
  • Android: Locally or Gradle or Bazel afaik.

Connect libraries to ReactNative via native modules

wrap TDLib JSON interface, containing only 5 methods in pure C

For async code with td_json_client_send you will probably need to implement Callbacks as described in docs.

Use TDLib in your ReactNative (JS) code

You will get something like this after Native module setup.

const {
  TDLibModule
} = ReactNative.NativeModules;

// Sync code
var client = TDLibModule.td_json_client_create();
var tdlibResponse = TDLibModule.td_json_client_execute(client, {
  "@type": "getTextEntities",
  "text": "@telegram /test_command https://telegram.org telegram.me",
  "@extra": ["5", 7.0, "\\u00e4"]
});
console.log(`Response from TDLib ${tdlibResponse}`);

// Async Code
TDLibModule.td_json_client_send({
    "@type": "setTdlibParameters",
    "parameters": {
      "database_directory": "tdlib",
      "use_message_database": true,
      "use_secret_chats": true,
      "api_id": 94575,
      "api_hash": "a3406de8d171bb422bb6ddf3bbd800e2",
      "system_language_code": "en",
      "device_model": "mobile",
      "application_version": "1.0",
      "enable_storage_optimizer": true
    }
  }
  (jsonResponse) => {
    console.log(`Response from TDLib ${responseJson}`);
  }
);

Well, it's not very trivial, but still possible.

Kylmakalle avatar Nov 08 '21 16:11 Kylmakalle