how can i use it with react-native

[silencedcoder]

I want to use it with react-native,but i cant't find the way which to do this.please help me. thank you.

[moeinrahimi]

@silencedcoder any luck on using matrix on react-native ?

[Sekhmet]

Please mention what does exactly not work for you, so others can help you if someone encountered the same problem.

[ara4n]

there's no reason why js-sdk shouldn't work on react-native.

[jm90m]

thanks @ara4n, it works for me on react native with expo, me and @Sekhmet were working on this and we had to install the following libraries as dev dependancies on our end

yarn add --dev babel-plugin-transform-async-to-bluebird babel-preset-es2015

Also my console.log and emulator is filled with a bunch of these:

But you guys might already know this :)

[moeinrahimi]

@Sekhmet @ara4n i get this error message after importing matrix js sdk

Loading dependency graph, done. error: bundling failed: Error: Unable to resolve module events from F:\projec ts\myApp\node_modules\matrix-js-sdk\lib\models\event.js: Module events does n ot exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968 To resolve try the following:

1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm star t -- --reset-cache. 4. Remove haste cache: rm -rf /tmp/haste-map-react-native -packager-*. at ModuleResolver.resolveDependency (F:\projects\myApp\node_modules\metro\sr c\node-haste\DependencyGraph\ModuleResolution.js:161:1460) at ResolutionRequest.resolveDependency (F:\projects\myApp\node_modules\metro \src\node-haste\DependencyGraph\ResolutionRequest.js:91:16) at DependencyGraph.resolveDependency (F:\projects\myApp\node_modules\metro\s rc\node-haste\DependencyGraph.js:272:4579) at dependencies.map.relativePath (F:\projects\myApp\node_modules\metro\src\D eltaBundler\traverseDependencies.js:376:19) at Array.map () at resolveDependencies (F:\projects\myApp\node_modules\metro\src\DeltaBundle r\traverseDependencies.js:374:16) at F:\projects\myApp\node_modules\metro\src\DeltaBundler\traverseDependencie s.js:212:33 at Generator.next () at step (F:\projects\myApp\node_modules\metro\src\DeltaBundler\traverseDepen dencies.js:297:313) at F:\projects\myApp\node_modules\metro\src\DeltaBundler\traverseDependencie s.js:297:473

[jm90m]

@moeinrahimi looks like you're missing some dependancies, try installing the ones I had above... also are you using vanilla React Native? or React Native with Expo?

[moeinrahimi]

@jm90m yes i'm testing this on a fresh vanilla react native project and i installed the package you mentioned at first along with matrix js sdk

[jm90m]

try using expo @moeinrahimi, https://expo.io/, and see if it works with that, other than that, I would try to clear your node modules and do a fresh yarn

[moeinrahimi]

@jm90m @ara4n i removed node_modules and did a clean yarn installation , but when i require the sdk it gets me the same error as before .

var sdk = require("matrix-js-sdk");
OR 
import sdk from 'matrix-js-sdk'

update : so i tested matrix on expo , at first i got transform-async-to-bluebird error , i installed it , then i got me with tranform-runtime so i installed that too and now i get this

The package at ".F:\projects\talktebExpo\node_modules\matrix-js-sdk\lib\models\event.js" attempted to import the Node standard library module "events". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo

[moeinrahimi]

@ara4n @Sekhmet @jm90m any idea how to fix these issues i have mentioned , both vanilla react native and expo have their own errors . read my earlier comments for details .

[moeinrahimi]

@ara4n @Sekhmet @jm90m so after installing events and url module now i can require the lib , but when i createClient i get error state for SYNC event with message of Can't find variable: document

[jm90m]

@moeinrahimi You are going to need to polyfill it.. see solution here - https://github.com/expo/browser-polyfill/issues/10

[moeinrahimi]

@jm90m would you please explain details, i have no idea how to do that

[moeinrahimi]

@jm90m now i get this error on sync event , it looks like i get this because there is no str.normalize method on react native ,

console.error: "Caught /sync error", "TypeError: undefined is not an object (evaluating 'str.normalize('NFD').replace')
    removeHiddenChars@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61818:32
    _updateDisplayNameCache@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:70792:69
    forEach@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61517:11
    setStateEvents@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:70572:18
    initialiseState@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:70354:36
    _processRoomEvents@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73653:37
    _callee7$@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73354:72
    tryCatch@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:60541:44
    invoke@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:60700:30
From previous event:
    _callee8$@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73248:83
    tryCatch@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:60541:44
    invoke@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:60700:30
From previous event:
    _callee5$@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73017:80
From previous event:
    _callee3$@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:72815:39
From previous event:
    getFilter@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:72826:31
    _callee2$@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:72752:38
    tryCatch@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:60541:44
    invoke@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:60700:30
From previous event:
    getPushRules@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:72763:31
    sync@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:72855:21
    startClient@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:66918:23
    _callee2$@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:51802:33
    tryCatch@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:11296:44
    invoke@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:11484:30
    tryCatch@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:11296:44
    invoke@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:11354:28
    tryCallOne@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:10652:14
    _callTimer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:11863:15
    _callImmediatesPass@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:11899:17
    callImmediates@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:12103:31
    __callImmediates@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2067:30
    __guard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2053:11
    flushedQueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:1945:19
    flushedQueue@[native code]
    callFunctionReturnFlushedQueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:1915:31
    callFunctionReturnFlushedQueue@[native code]"
error
    F:\projects\talkteb\test10\node_modules\react-native\Libraries\ReactNative\YellowBox.js:71:16
_callee5$
    F:\projects\talkteb\test10\node_modules\matrix-js-sdk\lib\sync.js:793:38
tryCatch
    F:\projects\talkteb\test10\node_modules\babel-runtime\node_modules\regenerator-runtime\runtime.js:62:44
invoke
    F:\projects\talkteb\test10\node_modules\babel-runtime\node_modules\regenerator-runtime\runtime.js:296:30
<unknown>
    F:\projects\talkteb\test10\node_modules\babel-runtime\node_modules\regenerator-runtime\runtime.js:114:28
tryCatcher
    F:\projects\talkteb\test10\node_modules\bluebird\js\browser\bluebird.js:5256:28
_promiseRejected
    F:\projects\talkteb\test10\node_modules\bluebird\js\browser\bluebird.js:2138:14
_settlePromise
    F:\projects\talkteb\test10\node_modules\bluebird\js\browser\bluebird.js:3342:42
_settlePromise0
    F:\projects\talkteb\test10\node_modules\bluebird\js\browser\bluebird.js:3380:24
_settlePromises
    F:\projects\talkteb\test10\node_modules\bluebird\js\browser\bluebird.js:3455:33
_drainQueue
    F:\projects\talkteb\test10\node_modules\bluebird\js\browser\bluebird.js:185:12
_drainQueues
    F:\projects\talkteb\test10\node_modules\bluebird\js\browser\bluebird.js:195:21
drainQueues
    F:\projects\talkteb\test10\node_modules\bluebird\js\browser\bluebird.js:69:8
<unknown>
    F:\projects\talkteb\test10\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:301:23
_callTimer
    F:\projects\talkteb\test10\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:154:6
_callImmediatesPass
    F:\projects\talkteb\test10\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:202:17
callImmediates
    F:\projects\talkteb\test10\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:470:11
__callImmediates
    F:\projects\talkteb\test10\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:278:4
<unknown>
    F:\projects\talkteb\test10\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:145:6
__guard
    F:\projects\talkteb\test10\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:265:6
flushedQueue
    F:\projects\talkteb\test10\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:144:17
callFunctionReturnFlushedQueue
    F:\projects\talkteb\test10\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:119:11

[moeinrahimi]

@ara4n @jm90m so i finally got the sdk working on react native , now how can i use placevideocall method since there is no audio and video tag

[moeinrahimi]

i finally polyfill the whole call.js with react-native

[Ryuno-Ki]

@moeinrahimi It could help others if you'd take some time to list the installed polyfills. Thank you.

[nikhiltechzillaindiacom]

npm i events url buffer worked for me

[annie-elequin]

I wrote an article about how to fix the earlier "Unable to resolve module 'events'" issue.

However I'm running into a new problem - when I try to run expo publish, I get an error about an "unterminated string constant in unhomoglyph.json".

"unhomoglyph" is a library that matrix is specifically using in their project. I have posted issues about this on both matrix github and unhomoglyph github (Found here) and typically people have not been willing to look into it.

I'm starting to lose hope that the matrix-js-sdk can work with React Native after all. Has anybody else run into this? @moeinrahimi , how far did you get with getting the sdk to work with react native?

[moeinrahimi]

@aaronraimist I will write a walkthrough on how to set up matrix-js-sdk on react-native in my free time.

[moeinrahimi]

hi, I have created a walkthrough in order to set up matrix-js-sdk on react-native

https://gist.github.com/moeinrahimi/c1f30a94be6cbc7a0fd5a3eb14b7cb4c

[hannojg]

I was thinking about using the native android and iOS matrix client SDKs and writing a wrapper for react-native. This way we could take advantage of the optimized native implementations.

[rajscet]

I was thinking about using the native android and iOS matrix client SDKs and writing a wrapper for react-native. This way we could take advantage of the optimized native implementations.

any update?

[annie-elequin]

I was thinking about using the native android and iOS matrix client SDKs and writing a wrapper for react-native. This way we could take advantage of the optimized native implementations.

any update?

@rajscet

https://github.com/cuvent/react-native-matrix-sdk

[jpschw]

This polyfill almost works. Now I get an error regarding webRTC not being supported by the browser. Any ideas?

[throwaway34241]

Is supporting RN still on the roadmap?

Today, use 23.1.1, importing import sdk from "matrix-js-sdk"; in a fresh Expo project gives the following error:

Android Bundling complete 64ms
 ERROR  ReferenceError: Can't find variable: Intl
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

[t3chguy]

Is supporting RN still on the roadmap?

Sorry, where was it ever stated that it was? This library is intended for Web & Node. It'll work in many more places than that with a bit of extra work using Node polyfills.

[throwaway34241]

Sorry for the confusion, I'm new here, saw comments like https://github.com/matrix-org/matrix-js-sdk/issues/657#issuecomment-415015485 and jumped to conclusions. Thanks for clearing up that React Native is not officially supported.