react-native-tvos 0.72.4-0rc0 → 0.72.5-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Libraries/Components/Pressable/Pressable.js +11 -5
- package/Libraries/Components/ScrollView/ScrollView.d.ts +7 -0
- package/Libraries/Components/ScrollView/ScrollView.js +8 -0
- package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js +1 -0
- package/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js +1 -0
- package/Libraries/Components/ScrollView/ScrollViewViewConfig.js +1 -0
- package/Libraries/Core/ReactNativeVersion.js +2 -2
- package/README-core.md +147 -0
- package/README.md +32 -39
- package/React/Base/RCTBundleURLProvider.h +33 -2
- package/React/Base/RCTBundleURLProvider.mm +78 -15
- package/React/Base/RCTVersion.m +2 -2
- package/React/CoreModules/RCTTiming.mm +5 -0
- package/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm +4 -0
- package/React/Fabric/RCTThirdPartyFabricComponentsProvider.h +29 -0
- package/React/Fabric/RCTThirdPartyFabricComponentsProvider.mm +29 -0
- package/React/Views/ScrollView/RCTScrollView.h +1 -0
- package/React/Views/ScrollView/RCTScrollView.m +12 -0
- package/React/Views/ScrollView/RCTScrollViewManager.m +1 -0
- package/ReactAndroid/gradle.properties +1 -1
- package/ReactAndroid/hermes-engine/build.gradle +1 -1
- package/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/ReactNativeVersion.java +2 -2
- package/ReactAndroid/src/main/java/com/facebook/react/views/scroll/MaintainVisibleScrollPositionHelper.java +4 -0
- package/ReactAndroid/src/main/jni/CMakeLists.txt +5 -0
- package/ReactCommon/React-Fabric.podspec +1 -1
- package/ReactCommon/ReactCommon.podspec +1 -1
- package/ReactCommon/cxxreact/ReactNativeVersion.h +2 -2
- package/ReactCommon/jsc/JSCRuntime.cpp +10 -0
- package/ReactCommon/react/debug/React-debug.podspec +1 -1
- package/ReactCommon/react/nativemodule/core/platform/ios/React-NativeModulesApple.podspec +1 -1
- package/ReactCommon/react/nativemodule/samples/ReactCommon-Samples.podspec +1 -1
- package/ReactCommon/react/renderer/components/rncore/ComponentDescriptors.h +29 -0
- package/ReactCommon/react/renderer/components/rncore/EventEmitters.cpp +111 -0
- package/ReactCommon/react/renderer/components/rncore/EventEmitters.h +186 -0
- package/ReactCommon/react/renderer/components/rncore/Props.cpp +157 -0
- package/ReactCommon/react/renderer/components/rncore/Props.h +395 -0
- package/ReactCommon/react/renderer/components/rncore/RCTComponentViewHelpers.h +257 -0
- package/ReactCommon/react/renderer/components/rncore/ShadowNodes.cpp +26 -0
- package/ReactCommon/react/renderer/components/rncore/ShadowNodes.h +111 -0
- package/ReactCommon/react/renderer/components/rncore/States.cpp +18 -0
- package/ReactCommon/react/renderer/components/rncore/States.h +141 -0
- package/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.cpp +15 -1
- package/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h +1 -0
- package/ReactCommon/react/renderer/core/RawPropsKeyMap.cpp +2 -0
- package/ReactCommon/react/renderer/core/RawPropsParser.cpp +1 -0
- package/ReactCommon/react/renderer/core/RawPropsPrimitives.h +4 -4
- package/ReactCommon/react/renderer/graphics/React-graphics.podspec +1 -1
- package/ReactCommon/react/renderer/imagemanager/platform/ios/React-ImageManager.podspec +1 -1
- package/ReactCommon/react/renderer/runtimescheduler/React-runtimescheduler.podspec +1 -1
- package/ReactCommon/react/utils/React-utils.podspec +1 -1
- package/package.json +7 -6
- package/scripts/cocoapods/helpers.rb +16 -0
- package/scripts/cocoapods/utils.rb +98 -8
- package/scripts/react_native_pods.rb +6 -2
- package/sdks/.hermesversion +1 -1
- package/sdks/hermes-engine/utils/build-apple-framework.sh +8 -1
- package/sdks/hermes-engine/utils/build-hermes-xcode.sh +8 -0
- package/sdks/hermesc/osx-bin/hermesc +0 -0
- package/sdks/hermesc/win64-bin/hermesc.exe +0 -0
- package/template/ios/HelloWorld.xcodeproj/project.pbxproj +95 -13
- package/template/package.json +5 -4
- package/types/index.d.ts +1 -0
- package/types/public/ReactNativeTVTypes.d.ts +192 -0
- package/scripts/cocoapods/__tests__/codegen-test.rb +0 -242
- package/scripts/cocoapods/__tests__/codegen_utils-test.rb +0 -602
- package/scripts/cocoapods/__tests__/fabric-test.rb +0 -68
- package/scripts/cocoapods/__tests__/flipper-test.rb +0 -161
- package/scripts/cocoapods/__tests__/jsengine-test.rb +0 -130
- package/scripts/cocoapods/__tests__/local_podspec_patch-test.rb +0 -167
- package/scripts/cocoapods/__tests__/new_architecture-test.rb +0 -303
- package/scripts/cocoapods/__tests__/test_utils/CodegenScriptPhaseExtractorMock.rb +0 -21
- package/scripts/cocoapods/__tests__/test_utils/CodegenUtilsMock.rb +0 -108
- package/scripts/cocoapods/__tests__/test_utils/DirMock.rb +0 -72
- package/scripts/cocoapods/__tests__/test_utils/EnvironmentMock.rb +0 -21
- package/scripts/cocoapods/__tests__/test_utils/FileMock.rb +0 -113
- package/scripts/cocoapods/__tests__/test_utils/FileUtilsMock.rb +0 -40
- package/scripts/cocoapods/__tests__/test_utils/FinderMock.rb +0 -28
- package/scripts/cocoapods/__tests__/test_utils/InstallerMock.rb +0 -222
- package/scripts/cocoapods/__tests__/test_utils/LocalPodspecPatchMock.rb +0 -14
- package/scripts/cocoapods/__tests__/test_utils/Open3Mock.rb +0 -43
- package/scripts/cocoapods/__tests__/test_utils/PathnameMock.rb +0 -42
- package/scripts/cocoapods/__tests__/test_utils/PodMock.rb +0 -144
- package/scripts/cocoapods/__tests__/test_utils/SpecMock.rb +0 -30
- package/scripts/cocoapods/__tests__/test_utils/SysctlCheckerMock.rb +0 -21
- package/scripts/cocoapods/__tests__/test_utils/TargetDefinitionMock.rb +0 -12
- package/scripts/cocoapods/__tests__/test_utils/podSpy.rb +0 -39
- package/scripts/cocoapods/__tests__/test_utils/systemUtils.rb +0 -14
- package/scripts/cocoapods/__tests__/utils-test.rb +0 -766
- package/scripts/codegen/__test_fixtures__/fixtures.js +0 -132
- package/scripts/codegen/__tests__/generate-artifacts-executor-test.js +0 -500
- package/scripts/codegen/__tests__/generate-specs-cli-executor-test.js +0 -88
|
@@ -305,7 +305,8 @@ function Pressable(props: Props, forwardedRef): React.Node {
|
|
|
305
305
|
accessibilityLiveRegion,
|
|
306
306
|
accessibilityLabel,
|
|
307
307
|
accessibilityState: _accessibilityState,
|
|
308
|
-
focusable:
|
|
308
|
+
focusable:
|
|
309
|
+
focusable !== false && disabled !== true && ariaDisabled !== true,
|
|
309
310
|
isTVSelectable: isTVSelectable !== false && accessible !== false,
|
|
310
311
|
accessibilityValue,
|
|
311
312
|
hitSlop,
|
|
@@ -380,7 +381,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
|
|
|
380
381
|
if (evt?.eventType === 'focus') {
|
|
381
382
|
setFocused(true);
|
|
382
383
|
onFocus && onFocus(evt);
|
|
383
|
-
|
|
384
|
+
// $FlowFixMe[prop-missing]
|
|
384
385
|
} else if (evt.eventType === 'blur') {
|
|
385
386
|
onBlur && onBlur(evt);
|
|
386
387
|
setFocused(false);
|
|
@@ -391,12 +392,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
|
|
|
391
392
|
if (Platform.isTVOS) {
|
|
392
393
|
// $FlowFixMe[prop-missing]
|
|
393
394
|
if (focused && evt.eventType === 'select') {
|
|
394
|
-
|
|
395
|
+
// $FlowFixMe[incompatible-exact]
|
|
395
396
|
onPress && onPress(evt);
|
|
396
397
|
}
|
|
397
398
|
// $FlowFixMe[prop-missing]
|
|
398
399
|
if (focused && evt.eventType === 'longSelect') {
|
|
399
|
-
|
|
400
|
+
// $FlowFixMe[incompatible-exact]
|
|
400
401
|
onLongPress && onLongPress(evt);
|
|
401
402
|
}
|
|
402
403
|
}
|
|
@@ -426,7 +427,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
|
|
|
426
427
|
nextFocusLeft={tagForComponentOrHandle(props.nextFocusLeft)}
|
|
427
428
|
nextFocusRight={tagForComponentOrHandle(props.nextFocusRight)}
|
|
428
429
|
nextFocusUp={tagForComponentOrHandle(props.nextFocusUp)}
|
|
429
|
-
isTVSelectable={
|
|
430
|
+
isTVSelectable={
|
|
431
|
+
isTVSelectable !== false &&
|
|
432
|
+
accessible !== false &&
|
|
433
|
+
disabled !== true &&
|
|
434
|
+
ariaDisabled !== true
|
|
435
|
+
}
|
|
430
436
|
style={typeof style === 'function' ? style({pressed, focused}) : style}
|
|
431
437
|
tvParallaxProperties={tvParallaxProperties}
|
|
432
438
|
collapsable={false}>
|
|
@@ -528,6 +528,13 @@ export interface ScrollViewPropsIOS {
|
|
|
528
528
|
* The current scale of the scroll view content. The default value is 1.0.
|
|
529
529
|
*/
|
|
530
530
|
zoomScale?: number | undefined;
|
|
531
|
+
|
|
532
|
+
/**
|
|
533
|
+
* (TvOS only)
|
|
534
|
+
* Defines if UIScrollView index should be shown when fast scrolling.
|
|
535
|
+
* Defaults to true.
|
|
536
|
+
*/
|
|
537
|
+
showsScrollIndex?: boolean;
|
|
531
538
|
}
|
|
532
539
|
|
|
533
540
|
export interface ScrollViewPropsAndroid {
|
|
@@ -355,6 +355,12 @@ type IOSProps = $ReadOnly<{|
|
|
|
355
355
|
| 'never'
|
|
356
356
|
| 'always'
|
|
357
357
|
),
|
|
358
|
+
/**
|
|
359
|
+
* (TvOS only)
|
|
360
|
+
* Defines if UIScrollView index should be shown when fast scrolling.
|
|
361
|
+
* Defaults to true.
|
|
362
|
+
*/
|
|
363
|
+
showsScrollIndex?: ?boolean,
|
|
358
364
|
|}>;
|
|
359
365
|
|
|
360
366
|
type AndroidProps = $ReadOnly<{|
|
|
@@ -1796,6 +1802,8 @@ class ScrollView extends React.Component<Props, State> {
|
|
|
1796
1802
|
snapToStart: this.props.snapToStart !== false,
|
|
1797
1803
|
// default to true
|
|
1798
1804
|
snapToEnd: this.props.snapToEnd !== false,
|
|
1805
|
+
// default to true
|
|
1806
|
+
showsScrollIndex: this.props.showsScrollIndex !== false,
|
|
1799
1807
|
// pagingEnabled is overridden by snapToInterval / snapToOffsets
|
|
1800
1808
|
pagingEnabled: Platform.select({
|
|
1801
1809
|
// on iOS, pagingEnabled must be set to false to have snapToInterval / snapToOffsets work
|
|
@@ -149,6 +149,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
|
|
|
149
149
|
scrollsToTop: true,
|
|
150
150
|
showsHorizontalScrollIndicator: true,
|
|
151
151
|
showsVerticalScrollIndicator: true,
|
|
152
|
+
showsScrollIndex: true,
|
|
152
153
|
snapToAlignment: true,
|
|
153
154
|
snapToEnd: true,
|
|
154
155
|
snapToInterval: true,
|
|
@@ -68,6 +68,7 @@ export type ScrollViewNativeProps = $ReadOnly<{
|
|
|
68
68
|
scrollsToTop?: ?boolean,
|
|
69
69
|
sendMomentumEvents?: ?boolean,
|
|
70
70
|
showsHorizontalScrollIndicator?: ?boolean,
|
|
71
|
+
showsScrollIndex?: ?boolean,
|
|
71
72
|
showsVerticalScrollIndicator?: ?boolean,
|
|
72
73
|
snapToAlignment?: ?('start' | 'center' | 'end'),
|
|
73
74
|
snapToEnd?: ?boolean,
|
package/README-core.md
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
<h1 align="center">
|
|
2
|
+
<a href="https://reactnative.dev/">
|
|
3
|
+
React Native
|
|
4
|
+
</a>
|
|
5
|
+
</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<strong>Learn once, write anywhere:</strong><br>
|
|
9
|
+
Build mobile apps with React.
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
<p align="center">
|
|
13
|
+
<a href="https://github.com/facebook/react-native/blob/HEAD/LICENSE">
|
|
14
|
+
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="React Native is released under the MIT license." />
|
|
15
|
+
</a>
|
|
16
|
+
<a href="https://circleci.com/gh/facebook/react-native">
|
|
17
|
+
<img src="https://circleci.com/gh/facebook/react-native.svg?style=shield" alt="Current CircleCI build status." />
|
|
18
|
+
</a>
|
|
19
|
+
<a href="https://www.npmjs.org/package/react-native">
|
|
20
|
+
<img src="https://img.shields.io/npm/v/react-native?color=brightgreen&label=npm%20package" alt="Current npm package version." />
|
|
21
|
+
</a>
|
|
22
|
+
<a href="https://reactnative.dev/docs/contributing">
|
|
23
|
+
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
|
24
|
+
</a>
|
|
25
|
+
<a href="https://twitter.com/intent/follow?screen_name=reactnative">
|
|
26
|
+
<img src="https://img.shields.io/twitter/follow/reactnative.svg?label=Follow%20@reactnative" alt="Follow @reactnative" />
|
|
27
|
+
</a>
|
|
28
|
+
</p>
|
|
29
|
+
|
|
30
|
+
<h3 align="center">
|
|
31
|
+
<a href="https://reactnative.dev/docs/getting-started">Getting Started</a>
|
|
32
|
+
<span> · </span>
|
|
33
|
+
<a href="https://reactnative.dev/docs/tutorial">Learn the Basics</a>
|
|
34
|
+
<span> · </span>
|
|
35
|
+
<a href="https://reactnative.dev/showcase">Showcase</a>
|
|
36
|
+
<span> · </span>
|
|
37
|
+
<a href="https://reactnative.dev/docs/contributing">Contribute</a>
|
|
38
|
+
<span> · </span>
|
|
39
|
+
<a href="https://reactnative.dev/help">Community</a>
|
|
40
|
+
<span> · </span>
|
|
41
|
+
<a href="https://github.com/facebook/react-native/blob/HEAD/.github/SUPPORT.md">Support</a>
|
|
42
|
+
</h3>
|
|
43
|
+
|
|
44
|
+
React Native brings [**React**'s][r] declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.
|
|
45
|
+
|
|
46
|
+
- **Declarative.** React makes it painless to create interactive UIs. Declarative views make your code more predictable and easier to debug.
|
|
47
|
+
- **Component-Based.** Build encapsulated components that manage their state, then compose them to make complex UIs.
|
|
48
|
+
- **Developer Velocity.** See local changes in seconds. Changes to JavaScript code can be live reloaded without rebuilding the native app.
|
|
49
|
+
- **Portability.** Reuse code across iOS, Android, and [other platforms][p].
|
|
50
|
+
|
|
51
|
+
React Native is developed and supported by many companies and individual core contributors. Find out more in our [ecosystem overview][e].
|
|
52
|
+
|
|
53
|
+
[r]: https://reactjs.org/
|
|
54
|
+
[p]: https://reactnative.dev/docs/out-of-tree-platforms
|
|
55
|
+
[e]: https://github.com/facebook/react-native/blob/HEAD/ECOSYSTEM.md
|
|
56
|
+
|
|
57
|
+
## Contents
|
|
58
|
+
|
|
59
|
+
- [Requirements](#-requirements)
|
|
60
|
+
- [Building your first React Native app](#-building-your-first-react-native-app)
|
|
61
|
+
- [Documentation](#-documentation)
|
|
62
|
+
- [Upgrading](#-upgrading)
|
|
63
|
+
- [How to Contribute](#-how-to-contribute)
|
|
64
|
+
- [Code of Conduct](#code-of-conduct)
|
|
65
|
+
- [License](#-license)
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
## 📋 Requirements
|
|
69
|
+
|
|
70
|
+
React Native apps may target iOS 12.4 and Android 5.0 (API 21) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like [Expo](https://expo.dev) can be used to work around this.
|
|
71
|
+
|
|
72
|
+
## 🎉 Building your first React Native app
|
|
73
|
+
|
|
74
|
+
Follow the [Getting Started guide](https://reactnative.dev/docs/getting-started). The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:
|
|
75
|
+
|
|
76
|
+
- [Trying out React Native][hello-world]
|
|
77
|
+
- [Creating a New Application][new-app]
|
|
78
|
+
- [Adding React Native to an Existing Application][existing]
|
|
79
|
+
|
|
80
|
+
[hello-world]: https://snack.expo.dev/@samples/hello-world
|
|
81
|
+
[new-app]: https://reactnative.dev/docs/getting-started
|
|
82
|
+
[existing]: https://reactnative.dev/docs/integration-with-existing-apps
|
|
83
|
+
|
|
84
|
+
## 📖 Documentation
|
|
85
|
+
|
|
86
|
+
The full documentation for React Native can be found on our [website][docs].
|
|
87
|
+
|
|
88
|
+
The React Native documentation discusses components, APIs, and topics that are specific to React Native. For further documentation on the React API that is shared between React Native and React DOM, refer to the [React documentation][r-docs].
|
|
89
|
+
|
|
90
|
+
The source for the React Native documentation and website is hosted on a separate repo, [**@facebook/react-native-website**][repo-website].
|
|
91
|
+
|
|
92
|
+
[docs]: https://reactnative.dev/docs/getting-started
|
|
93
|
+
[r-docs]: https://reactjs.org/docs/getting-started.html
|
|
94
|
+
[repo-website]: https://github.com/facebook/react-native-website
|
|
95
|
+
|
|
96
|
+
## 🚀 Upgrading
|
|
97
|
+
|
|
98
|
+
Upgrading to new versions of React Native may give you access to more APIs, views, developer tools, and other goodies. See the [Upgrading Guide][u] for instructions.
|
|
99
|
+
|
|
100
|
+
React Native releases are discussed [in this discussion repo](https://github.com/reactwg/react-native-releases/discussions).
|
|
101
|
+
|
|
102
|
+
[u]: https://reactnative.dev/docs/upgrading
|
|
103
|
+
[repo-releases]: https://github.com/react-native-community/react-native-releases
|
|
104
|
+
|
|
105
|
+
## 👏 How to Contribute
|
|
106
|
+
|
|
107
|
+
The main purpose of this repository is to continue evolving React Native core. We want to make contributing to this project as easy and transparent as possible, and we are grateful to the community for contributing bug fixes and improvements. Read below to learn how you can take part in improving React Native.
|
|
108
|
+
|
|
109
|
+
### [Code of Conduct][code]
|
|
110
|
+
|
|
111
|
+
Facebook has adopted a Code of Conduct that we expect project participants to adhere to.
|
|
112
|
+
Please read the [full text][code] so that you can understand what actions will and will not be tolerated.
|
|
113
|
+
|
|
114
|
+
[code]: https://code.fb.com/codeofconduct/
|
|
115
|
+
|
|
116
|
+
### [Contributing Guide][contribute]
|
|
117
|
+
|
|
118
|
+
Read our [**Contributing Guide**][contribute] to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native.
|
|
119
|
+
|
|
120
|
+
[contribute]: https://reactnative.dev/docs/contributing
|
|
121
|
+
|
|
122
|
+
### [Open Source Roadmap][roadmap]
|
|
123
|
+
|
|
124
|
+
You can learn more about our vision for React Native in the [**Roadmap**][roadmap].
|
|
125
|
+
|
|
126
|
+
[roadmap]: https://github.com/facebook/react-native/wiki/Roadmap
|
|
127
|
+
|
|
128
|
+
### Good First Issues
|
|
129
|
+
|
|
130
|
+
We have a list of [good first issues][gfi] that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
|
|
131
|
+
|
|
132
|
+
[gfi]: https://github.com/facebook/react-native/labels/good%20first%20issue
|
|
133
|
+
|
|
134
|
+
### Discussions
|
|
135
|
+
|
|
136
|
+
Larger discussions and proposals are discussed in [**@react-native-community/discussions-and-proposals**][repo-meta].
|
|
137
|
+
|
|
138
|
+
[repo-meta]: https://github.com/react-native-community/discussions-and-proposals
|
|
139
|
+
|
|
140
|
+
## 📄 License
|
|
141
|
+
|
|
142
|
+
React Native is MIT licensed, as found in the [LICENSE][l] file.
|
|
143
|
+
|
|
144
|
+
React Native documentation is Creative Commons licensed, as found in the [LICENSE-docs][ld] file.
|
|
145
|
+
|
|
146
|
+
[l]: https://github.com/facebook/react-native/blob/HEAD/LICENSE
|
|
147
|
+
[ld]: https://github.com/facebook/react-native/blob/HEAD/LICENSE-docs
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
## react-native-tvos
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Apple TV and Android TV support for React Native are maintained here and in the corresponding `react-native-tvos` NPM package, and not in the [core repo](https://github.com/facebook/react-native/). This is a full fork of the main repository, with only the changes needed to support Apple TV and Android TV.
|
|
4
4
|
|
|
5
5
|
Releases of `react-native-tvos` will be based on a public release of `react-native`; e.g. the 0.72.4-0 release of this package will be derived from the 0.72.4 release of `react-native`. All releases of this repo will follow the 0.xx.x-y format, where x digits are from a specific RN core release, and y represents the additional versioning from this repo.
|
|
6
6
|
|
|
@@ -22,15 +22,8 @@ As of the 0.71 release, Hermes is fully working on both Apple TV and Android TV,
|
|
|
22
22
|
|
|
23
23
|
### React Native new architecture (Fabric) support
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```sh
|
|
28
|
-
export RCT_NEW_ARCH_ENABLED=1
|
|
29
|
-
```
|
|
30
|
-
Notes:
|
|
31
|
-
|
|
32
|
-
- _Apple TV_: `pod install` will pick up the additional pods needed for the new architecture. There are some issues with interactions between Apple TV parallax properties implementation and the new renderer. TabBarIOS has not been reimplemented in the new architecture so it will show up as an "unimplemented component".
|
|
33
|
-
- _Android TV_: As in the core repo, Android builds use prebuilt artifacts published in Maven Central.
|
|
25
|
+
- _Apple TV_: Modify your app's Podfile to set the `:fabric_enabled` value to `true` in both iOS and tvOS targets. After that, run `pod install` to pick up the additional pods needed for the new architecture. Some components (TVTextScrollView, TabBarIOS) have not been reimplemented in the new architecture so they will show up as an "unimplemented component".
|
|
26
|
+
- _Android TV_: To enable Fabric, modify `android/gradle.properties` in your app and set `newArchEnabled=true`, then rebuild your app.
|
|
34
27
|
|
|
35
28
|
### Typescript
|
|
36
29
|
|
|
@@ -48,25 +41,19 @@ TV device support has been implemented with the intention of making existing Rea
|
|
|
48
41
|
|
|
49
42
|
The RNTester app supports Apple TV and Android TV. In this repo, `RNTester/Podfile` and `RNTester/RNTesterPods.xcodeproj` have been modified to work for tvOS. Run `pod install`, then open `RNTesterPods.xcworkspace` and build.
|
|
50
43
|
|
|
51
|
-
## Pitfall
|
|
52
|
-
|
|
53
|
-
Make sure you do not globally install `react-native` or `react-native-tvos`. You should only install `@react-native-community/cli` to use the commands below. If you have done this the wrong way, you may get error messages like:
|
|
54
|
-
|
|
55
|
-
```
|
|
56
|
-
ld: library not found for -lPods-TestApp-tvOS
|
|
57
|
-
```
|
|
58
44
|
|
|
59
45
|
You should also install `yarn` globally, as it should be used instead of `npm` for working in React Native projects.
|
|
60
46
|
|
|
61
47
|
## Build changes
|
|
62
48
|
|
|
63
|
-
- _Native
|
|
64
|
-
-
|
|
65
|
-
- _Maven artifacts_: In 0.71, the React Native Android prebuilt archives are published to Maven instead of being included in the NPM. We are following the same model, except that the Maven artifacts will be in group `io.github.react-native-tvos` instead of `com.facebook.react`. The `react-native-gradle-plugin` has been upgraded so that the Android dependencies will be detected correctly during build.
|
|
49
|
+
- _Native layer for Apple TV_: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.
|
|
50
|
+
- _Maven artifacts for Android TV_: In 0.71, the React Native Android prebuilt archives are published to Maven instead of being included in the NPM. We are following the same model, except that the Maven artifacts will be in group `io.github.react-native-tvos` instead of `com.facebook.react`. The `@react-native/gradle-plugin` module has been upgraded so that the Android dependencies will be detected correctly during build.
|
|
66
51
|
|
|
67
52
|
## New project creation
|
|
68
53
|
|
|
69
|
-
|
|
54
|
+
> _Pitfall:_ Make sure you do not globally install `react-native` or `react-native-tvos`. You should only install `@react-native-community/cli` to use the commands below. If you have done this the wrong way, you may get error messages like `ld: library not found for -lPods-TestApp-tvOS`.
|
|
55
|
+
|
|
56
|
+
Creating a new project that uses this package is done using the react-native CLI. New projects created this way will automatically have properly configured Apple TV targets created in their XCode projects. To use this NPM package in a new project, you can reference it as in the following example using the React Native community CLI:
|
|
70
57
|
|
|
71
58
|
```sh
|
|
72
59
|
# Make sure you have the CLI installed globally (this only needs to be done once on your system)
|
|
@@ -75,17 +62,25 @@ npm install -g @react-native-community/cli
|
|
|
75
62
|
react-native init TestApp --template=react-native-tvos@latest
|
|
76
63
|
# Now start the app in the tvOS Simulator - this will only work on a macOS machine
|
|
77
64
|
cd TestApp && react-native run-ios --simulator "Apple TV" --scheme "TestApp-tvOS"
|
|
65
|
+
# The Expo CLI may also be used -- see below for more details
|
|
78
66
|
```
|
|
79
67
|
|
|
68
|
+
## Expo CLI support
|
|
69
|
+
|
|
80
70
|
To run Apple TV (and Android TV) targets from the command line, it is now possible to use the Expo CLI, using the following steps:
|
|
81
71
|
|
|
82
|
-
- In your app, install the required Expo
|
|
72
|
+
- In your app, install the required Expo module: `yarn add expo`
|
|
83
73
|
- Add a file `react-native.config.js` at the top level of your app directory, with [these contents](https://github.com/byCedric/custom-prebuild-example/blob/main/app/react-native.config.js).
|
|
84
74
|
- Then an Apple TV target can be run: `npx expo run:ios --scheme MyApp-tvOS --device "Apple TV"`
|
|
85
75
|
- To run Android TV: `npx expo run:android`
|
|
86
|
-
See [this document](https://docs.expo.dev/bare/using-expo-cli/) for more details on Expo CLI functionality. Note that many of these features require that Expo SDK modules be built into your app, which is not yet supported on Apple TV.)
|
|
87
76
|
|
|
88
|
-
|
|
77
|
+
The Expo dependency and `react-native.config.js` are included in the new app template.
|
|
78
|
+
|
|
79
|
+
See [this document](https://docs.expo.dev/bare/using-expo-cli/) for more details on Expo CLI functionality. (Note that many of these features require that Expo SDK modules be built into your app, which is not yet supported on Apple TV.)
|
|
80
|
+
|
|
81
|
+
## Code changes
|
|
82
|
+
|
|
83
|
+
- _JavaScript layer_: Support for TV has been added to the `Platform` React Native API.
|
|
89
84
|
|
|
90
85
|
```javascript
|
|
91
86
|
var Platform = require('Platform');
|
|
@@ -96,19 +91,21 @@ var running_on_tv = Platform.isTV;
|
|
|
96
91
|
var running_on_apple_tv = Platform.isTVOS;
|
|
97
92
|
```
|
|
98
93
|
|
|
99
|
-
## Code changes
|
|
100
94
|
|
|
101
|
-
- _General support for tvOS_: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
|
|
102
95
|
|
|
103
|
-
- _Common
|
|
96
|
+
- _Common codebase for iOS and tvOS_: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS. Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
|
|
104
97
|
|
|
105
|
-
-
|
|
98
|
+
- _Common codebase for Android phone and Android TV_: Apps built for Android using this repo will run on both Android phone and Android TV. Most of the changes for TV are specific to handling focus-based navigation on a TV using the D-Pad on the remote control.
|
|
99
|
+
|
|
100
|
+
- _Access to touchable controls_: The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight` and `TouchableOpacity` will "just work" on both Apple TV and Android TV. In particular:
|
|
106
101
|
|
|
107
102
|
- `onFocus` will be executed when the touchable view goes into focus
|
|
108
103
|
- `onBlur` will be executed when the touchable view goes out of focus
|
|
109
104
|
- `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
|
|
110
105
|
|
|
111
|
-
-
|
|
106
|
+
- _Pressable controls_: The `Pressable` API works with TV. Additional `onFocus` and `onBlur` props are provided to allow you to customize behavior when a Pressable enters or leaves focus. Similar to the `pressed` state that is true while a user is pressing the component on a touchscreen, the `focused` state will be true when it is focused on TV. `PressableExample` in RNTester has been modified appropriately.
|
|
107
|
+
|
|
108
|
+
- _TV remote/keyboard input_: Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events. For a more convenient API, we provide `useTVEventHandler`.
|
|
112
109
|
|
|
113
110
|
```javascript
|
|
114
111
|
|
|
@@ -177,21 +174,17 @@ class Game2048 extends React.Component {
|
|
|
177
174
|
}
|
|
178
175
|
```
|
|
179
176
|
|
|
180
|
-
-
|
|
181
|
-
|
|
182
|
-
- _Flipper_: Working in the 0.62.2-x releases. Working in the 0.63.x releases; however, tvOS requires the Flipper pods from 0.62.2-x. `scripts/react_native_pods.rb` contains macros for both versions. The new project template Podfile is correctly set up to provide the older Flipper for both iOS and tvOS targets. In 0.64.x and later, Flipper support is removed until issues can be resolved with newer Xcode versions.
|
|
183
|
-
|
|
184
|
-
- _LogBox_: The new LogBox error/warning display (which replaced YellowBox in 0.63) is working as expected in tvOS, after a few adjustments to make the controls accessible to the focus engine.
|
|
177
|
+
- _Flipper_: We do not support Flipper.
|
|
185
178
|
|
|
186
|
-
-
|
|
179
|
+
- _LogBox_: The new LogBox error/warning display (which replaced YellowBox in 0.63) is working as expected on TV platforms, after a few adjustments to make the controls accessible to the focus engine.
|
|
187
180
|
|
|
188
|
-
- _Dev Menu support_: On the simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
|
|
181
|
+
- _Dev Menu support_: On the Apple TV simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) ). Android TV dev menu behavior is the same as on Android phone.
|
|
189
182
|
|
|
190
|
-
- _TV remote
|
|
183
|
+
- _TV remote animations on Apple TV_: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.
|
|
191
184
|
|
|
192
|
-
- _Back navigation with the TV remote menu button_: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.
|
|
185
|
+
- _Back navigation with the TV remote menu button_: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button or '<' button on the Apple TV remote, and the back button as usual on Android TV remote.
|
|
193
186
|
|
|
194
|
-
-
|
|
187
|
+
- _TVEventControl for AppleTV_: (Formerly "TVMenuControl") This module provides methods to enable and disable features on the Apple TV Siri remote:
|
|
195
188
|
- `enableTVMenuKey`/`disableTVMenuKey`: Method to enable and disable the menu key gesture recognizer, in order to fix an issue with Apple's guidelines for menu key navigation (see https://github.com/facebook/react-native/issues/18930). The `RNTester` app uses these methods to implement correct menu key behavior for back navigation.
|
|
196
189
|
- `enableTVPanGesture`/`disableTVPanGesture`: Methods to enable and disable detection of finger touches that pan across the touch surface of the Siri remote. See `TVEventHandlerExample` in the `RNTester` app for a demo.
|
|
197
190
|
- `enableGestureHandlersCancelTouches`/`disableGestureHandlersCancelTouches`: Methods to turn on and turn off cancellation of touches by the gesture handlers in `RCTTVRemoteHandler` (see #366). Cancellation of touches is turned on (enabled) by default in 0.69 and earlier releases.
|
|
@@ -101,6 +101,7 @@ RCT_EXTERN void RCTBundleURLProviderAllowPackagerServerAccess(BOOL allowed);
|
|
|
101
101
|
|
|
102
102
|
@property (nonatomic, assign) BOOL enableMinification;
|
|
103
103
|
@property (nonatomic, assign) BOOL enableDev;
|
|
104
|
+
@property (nonatomic, assign) BOOL inlineSourceMap;
|
|
104
105
|
|
|
105
106
|
/**
|
|
106
107
|
* The scheme/protocol used of the packager, the default is the http protocol
|
|
@@ -125,13 +126,32 @@ RCT_EXTERN void RCTBundleURLProviderAllowPackagerServerAccess(BOOL allowed);
|
|
|
125
126
|
+ (NSURL *)jsBundleURLForBundleRoot:(NSString *)bundleRoot
|
|
126
127
|
packagerHost:(NSString *)packagerHost
|
|
127
128
|
enableDev:(BOOL)enableDev
|
|
128
|
-
enableMinification:(BOOL)enableMinification
|
|
129
|
+
enableMinification:(BOOL)enableMinification
|
|
130
|
+
__deprecated_msg(
|
|
131
|
+
"Use `jsBundleURLForBundleRoot:packagerHost:enableDev:enableMinification:inlineSourceMap:` instead");
|
|
132
|
+
|
|
133
|
+
+ (NSURL *)jsBundleURLForBundleRoot:(NSString *)bundleRoot
|
|
134
|
+
packagerHost:(NSString *)packagerHost
|
|
135
|
+
packagerScheme:(NSString *)scheme
|
|
136
|
+
enableDev:(BOOL)enableDev
|
|
137
|
+
enableMinification:(BOOL)enableMinification
|
|
138
|
+
modulesOnly:(BOOL)modulesOnly
|
|
139
|
+
runModule:(BOOL)runModule
|
|
140
|
+
__deprecated_msg(
|
|
141
|
+
"Use jsBundleURLForBundleRoot:packagerHost:enableDev:enableMinification:inlineSourceMap:modulesOnly:runModule:` instead");
|
|
142
|
+
|
|
143
|
+
+ (NSURL *)jsBundleURLForBundleRoot:(NSString *)bundleRoot
|
|
144
|
+
packagerHost:(NSString *)packagerHost
|
|
145
|
+
enableDev:(BOOL)enableDev
|
|
146
|
+
enableMinification:(BOOL)enableMinification
|
|
147
|
+
inlineSourceMap:(BOOL)inlineSourceMap;
|
|
129
148
|
|
|
130
149
|
+ (NSURL *)jsBundleURLForBundleRoot:(NSString *)bundleRoot
|
|
131
150
|
packagerHost:(NSString *)packagerHost
|
|
132
151
|
packagerScheme:(NSString *)scheme
|
|
133
152
|
enableDev:(BOOL)enableDev
|
|
134
153
|
enableMinification:(BOOL)enableMinification
|
|
154
|
+
inlineSourceMap:(BOOL)inlineSourceMap
|
|
135
155
|
modulesOnly:(BOOL)modulesOnly
|
|
136
156
|
runModule:(BOOL)runModule;
|
|
137
157
|
/**
|
|
@@ -142,6 +162,17 @@ RCT_EXTERN void RCTBundleURLProviderAllowPackagerServerAccess(BOOL allowed);
|
|
|
142
162
|
+ (NSURL *)resourceURLForResourcePath:(NSString *)path
|
|
143
163
|
packagerHost:(NSString *)packagerHost
|
|
144
164
|
scheme:(NSString *)scheme
|
|
145
|
-
query:(NSString *)query
|
|
165
|
+
query:(NSString *)query
|
|
166
|
+
__deprecated_msg("Use version with queryItems parameter instead");
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* Given a hostname for the packager and a resource path (including "/"), return the URL to the resource.
|
|
170
|
+
* In general, please use the instance method to decide if the packager is running and fallback to the pre-packaged
|
|
171
|
+
* resource if it is not: -resourceURLForResourceRoot:resourceName:resourceExtension:offlineBundle:
|
|
172
|
+
*/
|
|
173
|
+
+ (NSURL *)resourceURLForResourcePath:(NSString *)path
|
|
174
|
+
packagerHost:(NSString *)packagerHost
|
|
175
|
+
scheme:(NSString *)scheme
|
|
176
|
+
queryItems:(NSArray<NSURLQueryItem *> *)queryItems;
|
|
146
177
|
|
|
147
178
|
@end
|