---
id: dev-setup-and-sample-apps
sidebar_position: 10
title: 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 repo

You can start by [forking our repository](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) 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, navitate 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](https://github.com/facebook/metro/issues/1).
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:

```json
"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. e.g.,

```
-- project-dir
    -- stream-chat-react-native
    -- my-chat-app
```

### Metro config

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:

:::note
If you're using an older `metro-config` version, you may need to replace

```js
const blacklist = require('metro-config/src/defaults/exclusionList');
```

with

```js
const blacklist = require('metro-config/src/defaults/blackList');
```

:::

```js
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 thats 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](https://github.com/GetStream/react-native-samples) and even run the apps yourself!