Skip to content

Commit 90ac3ac

Browse files
huntiefacebook-github-bot
authored andcommitted
Expose unstable_NativeText and unstable_NativeView components (#53777)
Summary: Pull Request resolved: #53777 Expose `unstable_NativeText` and `unstable_NativeView` components as root exports of the `react-native` package. These are exposed as `unstable_` APIs which have no semver guarantee. **Motivation** There is significant community interest / dependance on the currently private `TextNativeComponent` and `ViewNativeComponent` deep imports, to access the faster-performing inner versions of these UI components. Using `<Text>` and `<View>`, while recommended and stable, has led to measurable performance overhead in some apps when compared with these `<Native*>` counterparts. Notably, these APIs are also referenced by low-level libraries such as React Strict DOM. I am proposing this change in order to: - Unblock libraries which safely use these. - Meet users where they are at. - Unblock us from enabling the Strict TypeScript API (no deep imports). References: - react-native-community/discussions-and-proposals#893 (comment) - https://javascript.plainenglish.io/optimizing-text-component-rendering-in-react-native-b9d3565659d9 - https://github.com/search?type=code&q=react-native%2FLibraries%2FText%2FTextNativeComponent **Ideal future state** We are exposing these as unstable APIs because they should not be part of React Native's final API. The ideal end state is we improve the regular `<Text>` and `<View>` components to eliminate performance overhead and the need to access any lower level API. Changelog: [General][Added] - `unstable_NativeText` and `unstable_NativeView` are now exported from the `react-native` package Reviewed By: javache Differential Revision: D81588145 fbshipit-source-id: 2ea9b7f822286de85f49607944c6a484d1fcf242
1 parent dba8dbd commit 90ac3ac

File tree

4 files changed

+29
-0
lines changed

4 files changed

+29
-0
lines changed

packages/react-native/Libraries/Components/View/ViewNativeComponent.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
2929
supportedCommands: ['hotspotUpdate', 'setPressed'],
3030
});
3131

32+
/**
33+
* `ViewNativeComponent` is an internal React Native host component, and is
34+
* exported to provide lower-level access for libraries.
35+
*
36+
* @warning `<unstable_NativeView>` provides no semver guarantees and is not
37+
* intended to be used in app code. Please use
38+
* [`<View>`](https://reactnative.dev/docs/view) instead.
39+
*/
40+
// Additional note: Our long term plan is to reduce the overhead of the <Text>
41+
// and <View> wrappers so that we no longer have any reason to export these APIs.
3242
export default ViewNativeComponent;
3343

3444
export type ViewNativeComponentType = HostComponent<Props>;

packages/react-native/Libraries/Text/TextNativeComponent.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,16 @@ const virtualTextViewConfig = {
6565
uiViewClassName: 'RCTVirtualText',
6666
};
6767

68+
/**
69+
* `NativeText` is an internal React Native host component, and is exported to
70+
* provide lower-level access for libraries.
71+
*
72+
* @warning `<unstable_NativeText>` provides no semver guarantees and is not
73+
* intended to be used in app code. Please use
74+
* [`<Text>`](https://reactnative.dev/docs/text) instead.
75+
*/
76+
// Additional note: Our long term plan is to reduce the overhead of the <Text>
77+
// and <View> wrappers so that we no longer have any reason to export these APIs.
6878
export const NativeText: HostComponent<NativeTextProps> =
6979
(createReactNativeComponentClass('RCTText', () =>
7080
/* $FlowFixMe[incompatible-type] Natural Inference rollout. See

packages/react-native/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,12 @@ module.exports = {
6666
get Modal() {
6767
return require('./Libraries/Modal/Modal').default;
6868
},
69+
get unstable_NativeText() {
70+
return require('./Libraries/Text/TextNativeComponent').NativeText;
71+
},
72+
get unstable_NativeView() {
73+
return require('./Libraries/Components/View/ViewNativeComponent').default;
74+
},
6975
get Pressable() {
7076
return require('./Libraries/Components/Pressable/Pressable').default;
7177
},

packages/react-native/index.js.flow

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,8 @@ export {default as Switch} from './Libraries/Components/Switch/Switch';
127127

128128
export type {TextProps} from './Libraries/Text/Text';
129129
export {default as Text} from './Libraries/Text/Text';
130+
export type {NativeTextProps as unstable_NativeTextProps} from './Libraries/Text/TextNativeComponent';
131+
export {NativeText as unstable_NativeText} from './Libraries/Text/TextNativeComponent';
130132
export {default as unstable_TextAncestorContext} from './Libraries/Text/TextAncestorContext';
131133

132134
export type {
@@ -180,6 +182,7 @@ export type {
180182
ViewPropsIOS,
181183
} from './Libraries/Components/View/ViewPropTypes';
182184
export {default as View} from './Libraries/Components/View/View';
185+
export {default as unstable_NativeView} from './Libraries/Components/View/ViewNativeComponent';
183186

184187
export type {
185188
ListRenderItemInfo,

0 commit comments

Comments
 (0)