Creating Standalone JS File For Each Native Component

[elicwhite]

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

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

[nissy-dev]

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

[a-dilettante]

I'll take the RCTProgressView 😄

[leanmazzu]

I'll take AndroidDialogPicker 🙋🏻‍♂️

[Leko]

I'll work on RCTTabBarItem.

[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.