git clone https://github.com/{github-user-id}/stream-chat-react-native.git
Dev Setup & Sample Apps
If you’re thinking about contributing to our SDK, you may want to test your changes while developing locally. A good starting point its setting up our SampleApp application: A project which implements all of our main features. The following steps can be used to run all our internal sample projects like
Cloning the SDK repository
You can start by forking our repository and then cloning your fork into your local machine:
Setting up the SampleApp
First things first you should install the SDK dependencies:
cd stream-chat-react-native;
yarn install;
Now, navigate to the SampleApp folder and install its dependencies as well:
cd examples/SampleApp;
yarn install;
Running on iOS
In order to run things on iOS, you need to first install the native dependencies through CocoaPods:
cd ios;
npx pod-install;
Now, go back to the SampleApp folder and finally run the app on the simulator:
npx react-native run-ios
Running on Android
There is no additional steps to run the application on Android. You can just start the app on the emulator:
npx react-native run-android
Running a local SDK clone on your app
If you’re contributing and trying to link the SDK into your own React Native project, you may find some challenges on the way once Metro doesn’t follow symlinks. Because of that, there is a few specific steps you need to follow in order to run things properly.
Linking the SDK into your package.json
First step is to link the SDK dependency to the locally cloned repository.
Replace the stream-chat-react-native
dependency with following:
"stream-chat-react-native-core": "link:../stream-chat-react-native/package",
"stream-chat-react-native": "link:../stream-chat-react-native/package/native-package", // If youre using the native package
"stream-chat-expo": "link:../stream-chat-react-native/package/expo-package", // If youre using expo
Here I am assuming that the clone of stream-chat-react-native
and your app are under common directory. For example,
-- project-dir
-- stream-chat-react-native
-- my-chat-app
Metro configuration
If you run your app at this point, you will run into some issues related to dependency collision
.
Since metro bundler will have node_module
dependencies from your app
folder, stream-chat-react-native
folder and stream-chat-react-native/native-package
folder. And it doesn’t know how to resolve those
dependencies.
So you need to modify metro.config.js
. We added some helpers for that inside of our package.
You can copy-paste the following config:
If you’re using an older metro-config
version, you may need to replace
const blacklist = require('metro-config/src/defaults/exclusionList');
with
const blacklist = require('metro-config/src/defaults/blackList');
const PATH = require('path');
const blacklist = require('metro-config/src/defaults/exclusionList');
const extractLinkedPackages = require('stream-chat-react-native-core/metro-dev-helpers/extract-linked-packages');
const projectRoot = PATH.resolve(__dirname);
const { alternateRoots, extraNodeModules, moduleBlacklist } = extractLinkedPackages(projectRoot);
module.exports = {
resolver: {
blacklistRE: blacklist(moduleBlacklist),
extraNodeModules,
useWatchman: false,
},
watchFolders: [projectRoot].concat(alternateRoots),
};
And as last step, clean install your app.
rm -rf node_modules
rm yarn.lock
yarn install
watchman watch-del-all
yarn start --reset-cache
And that’s all. If you make code changes in stream-chat-react-native
, they should reflect in your application.
Samples repository
Apart from the samples we use for internal development, we also provide some other small clone projects like a Slack clone and an iMessage clone. You can check out the code in our repository and even run the apps yourself.