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:

git clone https://github.com/{github-user-id}/stream-chat-react-native.git

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:

const blacklist = require("metro-config/src/defaults/exclusionList");

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.