Skip to main content

Developing a module in a sandbox

Module is a standalone part of your application that can be dropped-in into your production app at any time. To make sure this works, you develop your module in isolation in a specially created sandbox environment, called "Playground".

Playground is a React Native application where you can preview and develop all your screens. It is similar to Expo Go, Storybook and React Native Test App, but with a few differences. Most importantly, you can configure the Playground with an SDK to run with a predefined list of native modules and APIs. That allows anyone who has access to your SDK to spin up a test environment in isolation that mimics your production app.

Playground allows you to preview components that are available to be used by consumers of your package. Component can also be a React Navigation's navigator - in this case, we refer to it as flow.

Developing​

Starting the project​

To start the new project, run Xplat CLI:

$ xplat init

[!NOTE] If you were provided an SDK, you can pass --sdk path. This will automatically configure your local environment to mirror production environment. If you are an application owner and want to create an SDK, you can find more about it here

You should end up with the following package structure:

|- babel.config.js
|- index.tsx
|- package.json
|- README.md
|- tsconfig.json

[!NOTE] Actual project is available here

The project is configured to use TypeScript by default. Unlike typical React Native project, you won't find many additional files beyond Babel and TypeScript configs. Everything is configured for you automatically based on the SDK provided (or the defaults, if not).

[!TIP] If you want to explore build artefacts and things "under the hood", go to ".xplat" folder in your project.

Since the default workflow is to build up a monorepo with multiple standalone modules, monorepos are supported out of the box and do not require any special treatment. Above package can be a top-level package as well as a workspace package.

Running the project​

To run the project, simply run (depending on the platform):

$ xplat run-ios
$ xplat run-android

Registering a component​

To register a component, simply call registerComponent as follows:

import { registerComponent } from '@react-native-enterprise-toolkit/core'

function Settings(): React.JSX.Element {
  return (
    <View>
      <Text>Settings</Text>
      {/* presentation layer */}
    </View>
  )
}

registerComponent(Settings)

Registering a navigator​

You can register a React Navigation's navigator as well. In that case, its properties will be shared with the parent navigator for seamless integration. This is especially useful if you want to group a bunch of related screens together, typically representing a particular flow within your application.

import { registerComponent } from '@react-native-enterprise-toolkit/core'

function Settings(): React.JSX.Element {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Settings"
        component={Settings}
      />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Subscription" component={Subscription} />
    </Stack.Navigator>
  );
}

registerNavigator(Settings)

Adding a native module​

If your package needs to integrate with native modules, simply add them to your package.json dependencies and they will be auto-linked. Note that if you add new dependencies, you will need to re-start the application and this will take a bit more time, as we have to recompile.

If your module depends on native code or pulls native dependencies and is being used by another module (or directly in the application), the toolkit will detect it and CLI will automatically link its dependencies.

Testing​

If your registered components or navigators take props, you can provide different variations of them so that you can access them from the Playground.

They will not be available to the public consumer of your package, but will speed up your testing.

For example, if you have an Auth module and expose an Auth navigator, you may want to register two scenarios: "logged in" and "logged out", so that you can quickly access each state from the home screen.

[TBD]