Creating Standalone JS File For Each Native Component
See original GitHub issueWe 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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:26
- Comments:36 (23 by maintainers)
Top GitHub Comments
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.
You’re all awesome ❤ Thanks for signing up to help.