React Native Telegram Integration: Building a Bridge with TDLib

This article details the creation of a React Native library for Telegram's TDLib, focusing on the challenges and solutions encountered during development.

Initial Approach and its Limitations

Initially, browser-based libraries like @mtproto/core and react-native-webview-crypto were used. However, this approach proved inefficient due to slow responses and limitations in functionality because of the reliance on a background browser.

Transition to Native Code and TDLib

The author transitioned to using Telegram's TDLib, a pre-built library requiring separate builds for iOS and Android. This involved using .sh scripts and handling the large library size (approximately 400MB). The author plans to address the large library size by using external storage for future releases.

Native Module Implementation

The core TDLib methods were wrapped in a native module. The article provides examples of the td_json_client_receive function in Java and Objective-C, highlighting the use of promises to handle asynchronous operations. A key challenge is that the receive function returns all events, requiring inefficient looping at the JavaScript layer to filter for specific events.

Optimized Solution: Native Code Logic

The author ultimately moved complex logic into native code, creating a client to handle the event filtering efficiently. The article shows an example of the getAuthorizationState function, demonstrating how the native code manages events without relying on inefficient JS looping.

JavaScript Layer Example

The article concludes with a JavaScript useEffect hook example showcasing the integration of the native module functions: startTdLib, getAuthorizationState, and getProfile.

<img src="https://opengraph.githubassets.com/11223ccc7d17a4550269fdfdcf74255e600850bba8dccf47c19cdfe6895ea04e/vladlenskiy/react-native-tdlib" alt="React Native TDLib Library">

Check out the repository for more details on the implementation.