callstack / react-native-brownfield

Set of helpers to make your brownfield integration smooth and easy.

Set of helpers to make your brownfield integration smooth and easy.

---

Features

• Easily integrate React Native with existing native app
• Start React Native with one method and invoke code as soon as it's loaded
• Reuse the same instance of React Native bridge between different components
• Use predefined native building blocks - crafted for React Native
• Disable and enable native gestures and hardware buttons from JavaScript
• Works well with any native navigation pattern, as well as every React Native JavaScript based navigation
• Compatible with all native languages Objective-C, Swift, Java and Kotlin

Installation

npm install @callstack/react-native-brownfield

or

yarn add @callstack/react-native-brownfield

Usage

React Native Brownfield library works with all major native programming languages. Majority of its API is exposed on the native side. Click on the logo to choose the one that interests you:

Objective-C	Swift	Java	Kotlin

JavaScript Module

Besides native components, we are exposing JavaScript functions to control the behavior of those components.

To use the module, simply import it:

import ReactNativeBrownfield from '@callstack/react-native-brownfield';

JavaScript API Reference:

setNativeBackGestureAndButtonEnabled(enabled: boolean)

A method used to toggle iOS native back gesture and Android hardware back button.

ReactNativeBrownfield.setNativeBackGestureAndButtonEnabled(true);

popToNative(animated[iOS only]: boolean)

A method to pop to native screen used to push React Native experience.

ReactNativeBrownfield.popToNative(true);

NOTE: Those methods works only with native components provided by this library.

Made with ❤️ at Callstack

React Native Brownfield is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥

Contributors

Thanks goes to these wonderful people (emoji key):

Michał Chudziak 💻 📖 🤔	Piotr Drapich 💻 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

react-native-brownfield's Issues

Add support for bottom tabs

• Double click to reset nav stack (iOS)
• Ability to hide fragments on Android
• Cross fragment (containers) deep links

New project generator

Run RN init + rn brownfield init?

Set up TypeScript

Describe the feature

Let's migrate from Flow to TypeScript. We can use https://github.com/react-native-community/cli as an example.

Acceptance criteria:

• Flow removed from the repo (dependency, config)
• Typescript working in bridge and cli packages
• /* @flow */ annotations and Flow types removed from bridge, cli and example-bridge project
• All of the JS code in cli and bridge packages covered with TS types
• Appropriate commands to build project available & working

Set up CI

Make it work with autolinking

Documentation

Migrate to RN v61 and monorepo structure

Update bridge to latest RN

Add support for configuration file

Description

We need to add support for configuration file instead of adding various CLI options.

A react-native-brownfield config can be created in these three ways (ordered by priority):

react-native-brownfield.config.js
react-native-brownfield.config.json
The react-native-brownfield field in package.json

Acceptance criteria

• a readConfiguration function available in cli/helpers directory
• the function in question accepts path to config file as the only argument
• the function returns correctly parsed configuration object

OTA updates

We can add an option to integrate OTA updates to the artifact (codepush?)

Write a kotlin example

Add support to initial parameters

CLI command: build-android

Description

Build commands are core CLI features, they take care of building the final artifact. The command should be invokable as follows:

yarn react-native-brownfield build-android

The command should utilize underlying Android project, please check out the diagram:

The command should:

• bundle JS
• build fat aar

The produced output should be a working .aar file.

Additional command options:
--dev -D flag should build an artifact with no bundle or assets and fetch it from the remote
--config <path/to/config> path to config file

Acceptance criteria

Functional:

• build-android command works on example app (produces working artifact on root level)
• build-android command works on the newly created react-native init application (produces working artifact on root level)
• native modules are linked and embedded into artifact
• assets & resources are linked and embedded into artifact
• configuration file is respected
• dev flag should be supported

Non-functional:

• 100% typescript coverage
• command is tested with unit tests

Simulate fragment in iOS

Hi,

Thanks for the great library, it's been really helpful to reuse an existing native code.

Just to give some context, I have a tabbar/bottom navigation and I'm redoing an entire menu screen in React Native but the others menus also edit the information that is passed as initial props, because I implemented a fragment in android every time I go to this menu the initiallProps are loaded.
In iOS this is not possible?
Can you help?

Thank you,
Diogo Rosa

Add TypeScript types

Integrate React Native Brownfield to existing project

1. brownfield directory is created on the root level
2. brownfield directory contains engine directory that stores native project files
   2.1. Contains ios and android directories similar to ones generated by rn init, with project files relevant for encapsulating RN to artifact
3. react-native-brownfield native module is integrated to an application

Usage in New Architecture projects

We have an upcoming project that is expected to use RN 73 and we'd like if this package could still be relevant for us.

how can app release ?

what if use this library, how can i release my app for publishing app store ?
there is no code for handling index.bundle.js

Move files from private repo

CLI command: build-ios

Description

Build commands are core CLI features, they take care of building the final artifact. The command should be invokable as follows:

yarn react-native-brownfield build-ios

The command should utilize underlying iOS project, please check out the diagram:

The command should:

• bundle JS
• install pods (along with linking native modules)
• build frameworks for different architectures
• merge frameworks into a universal one

The produced output should be a working .xcframework file.

Additional command options:

• --dev -D flag should build an artifact with no bundle or assets and fetch it from the remote.
• --config <path/to/config> path to config file

Acceptance criteria

Functional:

• build-ios command works on example app (produces working artifact on root level)
• build-ios command works on the newly created react-native init application (produces working artifact on root level)
• native modules are linked and embedded into artifact
• assets & resources are linked and embedded into artifact
• configuration file is respected
• dev flag should be supported

Non-functional:

• 100% typescript coverage
• command is tested with unit tests

Write docs

Add support for dynamic frameworks

Bump to RN 0.61-rc

java.lang.UnsatisfiedLinkError: dlopen failed: library "libhermes.so" not found

I updated my React Native to latest version and I get the following error:

java.lang.UnsatisfiedLinkError: dlopen failed: library "libhermes.so" not found.

Does anyone happen to know how to resolve this bug?

Tests for library

• Integrate jest and write some simple unit tests.
• Integrate detox and write some simple e2e tests.
• Use JUnit / XCtest to test native code.

Still active?

Ask your Question

👋 Hello friends! Wanted to see if this project was still active

Write a swift example

It should use dynamic frameworks.

Native bindings generator

1. We either specify a file or directory of files that would serve as input to generator
2. Files should be structured in some way? (investigate RN codegen)
   2.1 We need to have TS/Flow types to generate native containers out of it
   2.2 We need the component to be registered to AppRegistry

Common network layer

Implement an ability to provide unified network layer for native and RN (ability to add custom driver)