React-native: Creating Standalone JS File For Each Native Component

[TheSavior]

We are going to be generating native code from flow types in JS for our native components. In order to do this we need to have an individual JS file for each native component with complete flow types.

Step 1, Step 2, Step 3, and Step 4 have all been steps towards this goal.

In a bunch of our JS files we choose a component based on platform, typically looking something like this:

const SwitchNativeComponent: SwitchNativeComponentType =
  Platform.OS === 'android'
    ? (requireNativeComponent('AndroidSwitch'): any)
    : (requireNativeComponent('RCTSwitch'): any);

we want to change this code so that each requireNativeComponent call lives in its own file, thus changing the above code to look like this:

const SwitchNativeComponent: SwitchNativeComponentType =
  Platform.OS === 'android'
    ? require('AndroidSwitchNativeComponent')
    : require('RCTSwitchNativeComponent');

We need your help to make this change!

How to help

Pick one of the native components from the list below. Comment that you are working on that file and try to choose one that nobody else has commented about already.

Search the codebase for .js files that include that name. We are specifically looking for requireNativeComponent calls. So if you pick the component AndroidCheckBox we'd be looking for this callsite.

Create a new js file suffixed with 'NativeComponent' right next to the file that you found. In this case we'd create a AndroidCheckBoxNativeComponent.js file in Libraries/Components/CheckBox.

We should move the call to requireNativeComponent from Checkbox.android.js to this file, including the flow type if one exists, or defining one if it doesn't.

A pastebin of what I think the changes look like for this component are here: https://pastebin.com/RFpdT76V

One thing to note is that the majority of types necessary for these files shouldn't be imported from other files. Our codegen can't yet handle importing types from other files so in most cases I'd prefer to duplicate the type in this new file if it is needed. There are some exceptions to this that the codegen can handle that I'd expect most of these files will need. Specifically:

import type {ViewProps} from 'ViewPropTypes';
import type {SyntheticEvent} from 'CoreEventTypes';
import type {NativeComponent} from 'ReactNative';

If you come across other types that you think are sufficiently complex that you think shouldn't be duplicated tag me on your PR. Perhaps we should be adding knowledge of that type to the codegen. 😄

Testing Your Changes

For the highest confidence in your change, we recommend testing your changes using the RNTester App. Instructions to install and test the app are in the readme in the RNTester directory. If your component is an Android component you should test it on Android. If it is iOS, then test on iOS. 😄

The Files

• [x] AndroidCheckBox
• [x] AndroidDialogPicker
• [x] AndroidDrawerLayout
• [x] AndroidDropdownPicker
• [x] AndroidProgressBar
• [x] AndroidSwipeRefreshLayout
• [x] AndroidViewPager
• [x] RCTActivityIndicatorView
• [x] RCTDatePicker
• [x] RCTInputAccessoryView
• [x] RCTMaskedView
• [x] RCTModalHostView
• [x] RCTPicker
• [x] RCTProgressView
• [x] RCTRefreshControl
• [x] RCTSafeAreaView
• [x] RCTSegmentedControl
• [x] RCTSlider
• [x] RCTSnapshot
• [x] RCTTabBar
• [x] RCTTabBarItem
• [x] ToolbarAndroid

[nd-02110114]

I'll take AndroidCheckBox

[Naturalclar]

I'd like to contribute! I'll work on AndroidDropdownPicker

[ni3t]

Hello! RCTDatePicker

[Kriyszig]

Would love to help with AndroidViewPager

[vickywane]

I'll take RCTTabBar

[ajstrand]

I'll take the AndroidProgressBar.

[Chi-AnTai]

I will try to help with RCTPicker

[Illu]

Hello! I will take the RCTSafeAreaView

[OdaDaisuke]

Hello! I’ll work on RCTSlider

[stu60610]

I'll take the RCTSegmentedControl

[sasurau4]

I'll take the ToolbarAndroid

[Leko]

I'll take the RCTMaskedView

[RCiesielczuk]

I'll take the RCTProgressView 😄

[leanmazzu]

I'll take AndroidDialogPicker 🙋🏻‍♂️

[Leko]

I'll work on RCTTabBarItem.

[dulmandakh]

does this mean that native files (java and objective c) for above components will be removed in the future?

[nerandell]

I will take RCTRefreshControl

[zsajjad]

I will take RCTSlider

[arcodergh]

I will take RCTSnapshot

[doniyor2109]

Hi. I will take RCTInputAccessoryView

[hramos]

You're all awesome ❤ Thanks for signing up to help.

[emmajam]

I will take RCTActivityIndicatorView 😄

[nd-02110114]

I'll take RCTModalHostView

[HeinrichTremblay]

I'll take a stab at AndroidDrawerLayout✌️

[Naturalclar]

I'll take AndroidSwipeRefreshLayout

[mdvacca]

does this mean that native files (java and objective c) for above components will be removed in the future?

No, this is required to autogenerate C++ code for components in Fabric. Java code will remain the same.

[andrescalco]

Hello, I really want to help. Are there any components left?

[RobinCsl]

I will take a stab at RCTRefreshControl.

EDIT: @TheSavior, it looks like it was already tackled by @Naturalclar, so you probably could check that box in the original post. 🙂

https://github.com/facebook/react-native/blob/b864b6cf3e4feea2b3f8b085d8b7042f2ce848d6/Libraries/Components/RefreshControl/RCTRefreshControlNativeComponent.js#L48-L50

[TheSavior]

You all are so amazing. These PRs have been super helpful. It looks like nobody has claimed RCTActivityIndicatorView yet.

@vickywane, do you still plan on working on RCTTabBar?

[Kriyszig]

I'll take RCTActivityIndicatorView

[TheSavior]

RCTSnapshotNativeComponent.js was pulled out into a standalone file but without types. It would be great if someone could add the types for that component too. Types can be found in SnapshotViewIOS.ios.js

[Naturalclar]

I'll work on RCTSnapshotNativeComponent

[cpojer]

This is amazing. In just 8 days, all of you helped us with this migration. Talk about moving fast!

Thank you so so much. This is seriously awesome and will help us make the communication between JS and native modules type safe.

[reemtariqq]

i think all is taken right ? :)

[doniyor2109]

@reemtariqq Unfortunately all are taken. However you can search for issues with "Good first issue" label. There are many of them

[RSNara]

Thank you guys for all the work here! We have another opportunity to contribute to an RN project: TurboModules. Please check out #24875.