Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free


3 months ago
Bit React Native TypeScript compiler. Compiles ReactNative components with Bit.
1 contributor
Install react-native-typescript as a package?
npm i @bit/bit.envs.compilers.react-native-typescript
Set Bit as a scoped registryLearn more
npm config set '@bit:registry'
Component Example
React Native
Add dependency... help_outline
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout

React-Native-Typescript Compiler

A React Native TypeScript component compiler for Bit. Check out the best practices and also the specific React guidelines.

The compiler is also heavily based on typescript compiler.

How to use?

In order to run this extension your must have a bit workspace with at least one component defined, for more information on how to build please read the docs section on the bit website. TL;DR version:

Install the React-Native-Typescript compiler

$ bit import -c bit.envs/compilers/react-native-typescript

Then, you can simply build the component using bit build

$ bit build


  • Type checking - Uses the typescript compiler to perform type checking.

  • Compile components in isolation - Compiling shared components in true isolation is both challenging and important. It helps to find reusability issues quickly and early throughout the development process. It makes sure your components will compile identically anywhere and without side-effects. Read more about isolation here.

  • Styles and static file support - When developing a UI component it can include more then just Typescript code. You may have images, svg files, css etc. Transpiling shared components without bundling can get complicated in both build time and runtime.

    • Build time: TypeScript type checker tries to resolve those files, to get the types information and fails. We resolve this issue by automatically providing type definitions for common imported files.
    • Runtime: Import statements may be broken in the target code, because the file system structure changed. To resolve that we employ a copy policy which copies the assets to the appropriate location in the target directory.
  • Configuration - This compiler is configured according to best practices for shared components compiling learned from our experience. For general concepts on how to approach shared components compilation and testing, please see the main readme. Feel free to open an issue or submit a PR if you think something should be different or there is a bug in the implementation.

Configuration Reference

When first importing the compiler the bit entry in the package.json will look as following:

    "bit": {
        "env": {
            "compiler": "bit.envs/compilers/react--native-typescript@[version]"

This config state is as if you would configure the compiler as following by hand:

    "bit": {
        "env": {
            "compiler": {
                "bit.envs/compilers/react-typescript@[version]": {
                    "rawConfig": {
                        "compilerPath": "typescript/bin/tsc",
                        "compilerArguments": ["--declaration"],
                        "compiledFileTypes": [".ts", ".tsx"],
                        "configFileName": "tsconfig.json",
                        "tsconfig": {},
                        "development": true
                        "copyPolicy": {
                            "ignorePatterns": ["package.json", "package-lock.json", "tsconfig.json"],
                            "disable": false
  • compilerPath - set the path to the compiler.
  • compilerArguments - arguments options to run with the compiler.
  • compiledFileTypes - file types to be compiled.
  • configFileName - config file that the compiler should have. E.g: for a Babel based compiler, it will be .babelrc.
  • tsconfig - override tsconfig.json configuration.
  • development - enable or disable dev mode to include source maps and better debugging capabilities.
  • copyPolicy - manage the copy policy.
  • copyPolicy.ignorePatterns - Array of patterns to exclude files from being copied.
  • copyPolicy.disable - turn off the copy policy.


What are my configuration ?

The default configuration without overrides is here.

Whats to do component builds in workspace and doesn’t build in capsule?

Most odds you missing a dependency which influences the global scope like @types/node or @types/mocha. Use overrides to add it to the dependencies.

Missing types in consumer environment?

Some type dependency should be in th dependencies section and not in devDependencies. This is because your component exposes a type from that dependency. In order for the consumer environment to get access to that type, you must get when installing the component with NPM.

How to include custom-types folder from the author environment?

You have some custom-types folder which extend other types with your own type definition. You want to reuse it in capsule. Do the following:

  • create a component from the types.
  • add it in overrides to all other components.
  • include it in tsconfig.include as following:
"bit.envs/compilers/react-typescript@[version]": {
    "rawConfig": {
        "tsconfig": {
            "compilerOptions": {},
            "include": [

Common issues

Metro has encountered an error while trying to resolve module 'react-native’…

If you get this error, you need to expend the metro-config blacklist to ignore .bit folder. Link to the issue
Edit the metro.config.js file:

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

module.exports = {
  resolver: {
    blacklistRE: blacklist([/.bit\/.*/]),

Expo “jest-haste-map” error after bit import of a component - naming collision

If you get this error, you need to expend the metro-config blacklist to ignore all the non ‘dist’ files from imported components, and also to ignore the bit folder under .git.
Link to the issue

The default directory is: "componentsDefaultDirectory": "components/{name}" According to the directory, edit the metro.config.js file:

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

module.exports = {
  resolver: {
    blacklistRE: blacklist([/^[^/]components\/(?!.*dist).*/, /.git\/bit\/.*/]),

Got any issues or questions?

Collaboration on this Bit environment happens in this repository. Please open an issue or submit pull request there.