react-native-tvos 0.75.2-0 → 0.75.2-0rc0
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/TV/TVViewPropTypes.js +1 -1
- package/Libraries/Core/ReactNativeVersion.js +1 -1
- package/Libraries/NativeComponent/TVViewConfig.js +1 -1
- package/README-core.md +5 -5
- package/README.md +41 -76
- package/React/Base/RCTVersion.m +1 -1
- package/ReactAndroid/gradle.properties +1 -1
- package/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/ReactNativeVersion.java +1 -1
- package/ReactCommon/cxxreact/ReactNativeVersion.h +1 -1
- package/ReactCommon/react/renderer/components/view/BaseViewProps.cpp +3 -3
- package/package.json +2 -2
package/README-core.md
CHANGED
|
@@ -50,7 +50,7 @@ React Native brings [**React**'s][r] declarative UI framework to iOS and Android
|
|
|
50
50
|
|
|
51
51
|
React Native is developed and supported by many companies and individual core contributors. Find out more in our [ecosystem overview][e].
|
|
52
52
|
|
|
53
|
-
[r]: https://
|
|
53
|
+
[r]: https://reactjs.org/
|
|
54
54
|
[p]: https://reactnative.dev/docs/out-of-tree-platforms
|
|
55
55
|
[e]: https://github.com/facebook/react-native/blob/HEAD/ECOSYSTEM.md
|
|
56
56
|
|
|
@@ -67,7 +67,7 @@ React Native is developed and supported by many companies and individual core co
|
|
|
67
67
|
|
|
68
68
|
## 📋 Requirements
|
|
69
69
|
|
|
70
|
-
React Native apps may target iOS
|
|
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
71
|
|
|
72
72
|
## 🎉 Building your first React Native app
|
|
73
73
|
|
|
@@ -90,7 +90,7 @@ The React Native documentation discusses components, APIs, and topics that are s
|
|
|
90
90
|
The source for the React Native documentation and website is hosted on a separate repo, [**@facebook/react-native-website**][repo-website].
|
|
91
91
|
|
|
92
92
|
[docs]: https://reactnative.dev/docs/getting-started
|
|
93
|
-
[r-docs]: https://
|
|
93
|
+
[r-docs]: https://reactjs.org/docs/getting-started.html
|
|
94
94
|
[repo-website]: https://github.com/facebook/react-native-website
|
|
95
95
|
|
|
96
96
|
## 🚀 Upgrading
|
|
@@ -143,5 +143,5 @@ React Native is MIT licensed, as found in the [LICENSE][l] file.
|
|
|
143
143
|
|
|
144
144
|
React Native documentation is Creative Commons licensed, as found in the [LICENSE-docs][ld] file.
|
|
145
145
|
|
|
146
|
-
[l]: https://github.com/facebook/react-native/blob/
|
|
147
|
-
[ld]: https://github.com/facebook/react-native/blob/
|
|
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
|
@@ -2,7 +2,7 @@
|
|
|
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
|
-
Releases of `react-native-tvos` will be based on a public release of `react-native`; e.g. the 0.
|
|
5
|
+
Releases of `react-native-tvos` will be based on a public release of `react-native`; e.g. the 0.74.0-0 release of this package will be derived from the 0.74.0 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
|
|
|
7
7
|
Releases will be published on npmjs.org and you may find the latest release version here: https://www.npmjs.com/package/react-native-tvos?activeTab=versions or use the tag `@latest`
|
|
8
8
|
|
|
@@ -27,10 +27,12 @@ As of the 0.71 release, Hermes is fully working on both Apple TV and Android TV,
|
|
|
27
27
|
|
|
28
28
|
### React Native new architecture (Fabric) support
|
|
29
29
|
|
|
30
|
-
- _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.
|
|
30
|
+
- _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".
|
|
31
31
|
- _Android TV_: To enable Fabric, modify `android/gradle.properties` in your app and set `newArchEnabled=true`, then rebuild your app.
|
|
32
32
|
|
|
33
|
-
As of the 0.74 release, bridgeless is the default when Fabric is enabled.
|
|
33
|
+
As of the 0.74 release, bridgeless is the default when Fabric is enabled.
|
|
34
|
+
|
|
35
|
+
Known issue: The `TVFocusGuide` `autofocus` API has problems on Apple TV when bridgeless is enabled. If you need to use Fabric without bridgeless on Apple TV, you can override the default by adding the method below in `AppDelegate.mm`:
|
|
34
36
|
|
|
35
37
|
```objc
|
|
36
38
|
- (BOOL)bridgelessEnabled
|
|
@@ -61,83 +63,43 @@ Minimum operating system versions:
|
|
|
61
63
|
- _Native layer for Apple TV_: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'. Changes in the React Native podspecs in 0.73 now require that your application `Podfile` only have one target. This repo supports either an iOS target or a tvOS target, but both targets should not be active at the same time. The new app template now has the iOS target commented out.
|
|
62
64
|
- _Maven artifacts for Android TV_: In 0.71 and later releases, 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.
|
|
63
65
|
|
|
64
|
-
## _(New)_
|
|
66
|
+
## _(New)_ Project creation using the Expo CLI
|
|
65
67
|
|
|
66
|
-
>
|
|
68
|
+
> _Pitfall:_ Make sure you do not globally install `react-native` or `react-native-tvos`. If you have done this the wrong way, you may get error messages like `ld: library not found for -lPods-TestApp-tvOS`.
|
|
67
69
|
|
|
68
70
|
We strongly recommend [Yarn](https://classic.yarnpkg.com/en/docs/install) as the package manager.
|
|
71
|
+
You should install `yarn` globally, as it should be used instead of `npm` for working in React Native projects.
|
|
69
72
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
As of React Native version 0.75.x, the core team [recommends Expo for new projects](https://reactnative.dev/docs/environment-setup).
|
|
73
|
-
|
|
74
|
-
See the [Building Expo apps for TV](https://docs.expo.dev/guides/building-for-tv/) guide from Expo for details on how to set up a new Expo project, including supported Expo modules and limitations.
|
|
75
|
-
|
|
76
|
-
Using Expo's [continuous native generation (CNG)](https://docs.expo.dev/workflow/continuous-native-generation/) model, projects created this way can be used to build either mobile or TV apps, taking advantage of the full support for both mobile and TV platforms in this repo.
|
|
77
|
-
|
|
78
|
-
### Project creation using the React Native Community CLI
|
|
79
|
-
|
|
80
|
-
As of React Native 0.75.x, the template that used to reside in the `react-native` core package has been moved to a [new community repo](https://github.com/react-native-community/template) and will be maintained there. To support developers that wish to continue using the community CLI, we have created a [new TV template repository](https://github.com/react-native-tvos/template-tv) and will maintain a TV port of this template.
|
|
73
|
+
To create a new project, use `yarn create react-native-app` as shown below. (This will install the Expo tool `create-react-native-app` for you if it is not already present.)
|
|
81
74
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
To create a new project:
|
|
75
|
+
New projects created this way will automatically have properly configured iPhone and Apple TV targets created in their XCode projects, and will have the Android manifest correctly configured for both Android phone and Android TV. New projects are set up to use the Expo CLI; the Expo dependency and `react-native.config.js` are included in the new app template.
|
|
85
76
|
|
|
86
77
|
```sh
|
|
87
|
-
#
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
###### ######
|
|
92
|
-
### #### #### ###
|
|
93
|
-
## ### ### ##
|
|
94
|
-
## #### ##
|
|
95
|
-
## #### ##
|
|
96
|
-
## ## ## ##
|
|
97
|
-
## ### ### ##
|
|
98
|
-
## ######################## ##
|
|
99
|
-
###### ### ### ######
|
|
100
|
-
### ## ## ## ## ###
|
|
101
|
-
### ## ### #### ### ## ###
|
|
102
|
-
## #### ######## #### ##
|
|
103
|
-
## ### ########## ### ##
|
|
104
|
-
## #### ######## #### ##
|
|
105
|
-
### ## ### #### ### ## ###
|
|
106
|
-
### ## ## ## ## ###
|
|
107
|
-
###### ### ### ######
|
|
108
|
-
## ######################## ##
|
|
109
|
-
## ### ### ##
|
|
110
|
-
## ## ## ##
|
|
111
|
-
## #### ##
|
|
112
|
-
## #### ##
|
|
113
|
-
## ### ### ##
|
|
114
|
-
### #### #### ###
|
|
115
|
-
###### ######
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
Welcome to React Native 0.75.2!
|
|
119
|
-
Learn once, write anywhere
|
|
120
|
-
|
|
121
|
-
✔ Downloading template
|
|
122
|
-
✔ Copying template
|
|
123
|
-
✔ Processing template
|
|
124
|
-
✔ Installing dependencies
|
|
125
|
-
✔ Do you want to install CocoaPods now? Only needed if you run your project in Xcode directly … yes
|
|
126
|
-
✔ Installing Ruby Gems
|
|
127
|
-
✔ Installing CocoaPods dependencies (this may take a few minutes)
|
|
128
|
-
.
|
|
129
|
-
.
|
|
130
|
-
.
|
|
131
|
-
$ cd TVTest
|
|
78
|
+
# Init an app called 'TestApp', note that you must not be in a node module (directory with node_modules sub-directory) for this to work
|
|
79
|
+
yarn create react-native-app TestApp --template https://github.com/react-native-tvos/react-native-template-typescript-tv/tree/tv-release-0.73.0 --template-path template
|
|
80
|
+
cd TestApp
|
|
132
81
|
# Now build and start the app in the tvOS Simulator - this will only work on a macOS machine.
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
82
|
+
# This command can also be run via "yarn tvos".
|
|
83
|
+
npx expo run:ios --scheme MyApp-tvOS --device "Apple TV"
|
|
84
|
+
# You can also build and start the app on an iOS phone simulator.
|
|
85
|
+
# This command can also be run via "yarn ios".
|
|
86
|
+
npx expo run:ios
|
|
87
|
+
# or specify a simulator:
|
|
88
|
+
npx expo run:ios --scheme MyApp --device "iPhone 15"
|
|
89
|
+
# This command builds and starts the app in an Android TV emulator or a phone emulator (needs to be created in advance).
|
|
90
|
+
# This command can also be run via "yarn android".
|
|
91
|
+
npx expo run:android --device tv_api_31
|
|
136
92
|
```
|
|
137
93
|
|
|
138
94
|
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. Expo SDK support requires a different project configuration as described below.)
|
|
139
95
|
|
|
140
|
-
##
|
|
96
|
+
## _(New)_ Using the Expo SDK with TV apps
|
|
97
|
+
|
|
98
|
+
See the [Building Expo apps for TV](https://docs.expo.dev/guides/building-for-tv/) guide from Expo for details, including supported Expo modules and limitations.
|
|
99
|
+
|
|
100
|
+
Expo SDK 50 or greater, and react-native-tvos 0.73.x or later, are required.
|
|
101
|
+
|
|
102
|
+
## _(New)_ How to support TV specific file extensions
|
|
141
103
|
|
|
142
104
|
The template contains an [example Metro configuration](./packages/react-native/template/metro.config.js) that allows Metro to resolve application source files with TV-specific code, indicated by specific file extensions (e.g. `*.ios.tv.tsx`, `*.android.tv.tsx`, `*.tv.tsx`). The config will work the same way with the other standard source file extensions (`.js`, etc.), as documented in [Metro docs](https://metrobundler.dev/docs/configuration/#sourceexts)
|
|
143
105
|
|
|
@@ -210,10 +172,11 @@ const TVEventHandlerView: () => React.Node = () => {
|
|
|
210
172
|
// Class based component
|
|
211
173
|
|
|
212
174
|
class Game2048 extends React.Component {
|
|
213
|
-
|
|
175
|
+
_tvEventHandler: any;
|
|
214
176
|
|
|
215
177
|
_enableTVEventHandler() {
|
|
216
|
-
this.
|
|
178
|
+
this._tvEventHandler = new TVEventHandler();
|
|
179
|
+
this._tvEventHandler.enable(this, function(cmp, evt) {
|
|
217
180
|
if (evt && evt.eventType === 'right') {
|
|
218
181
|
cmp.setState({board: cmp.state.board.move(2)});
|
|
219
182
|
} else if(evt && evt.eventType === 'up') {
|
|
@@ -229,9 +192,9 @@ class Game2048 extends React.Component {
|
|
|
229
192
|
}
|
|
230
193
|
|
|
231
194
|
_disableTVEventHandler() {
|
|
232
|
-
if (this.
|
|
233
|
-
this.
|
|
234
|
-
delete this.
|
|
195
|
+
if (this._tvEventHandler) {
|
|
196
|
+
this._tvEventHandler.disable();
|
|
197
|
+
delete this._tvEventHandler;
|
|
235
198
|
}
|
|
236
199
|
}
|
|
237
200
|
|
|
@@ -276,9 +239,11 @@ class Game2048 extends React.Component {
|
|
|
276
239
|
|
|
277
240
|
- _TVTextScrollView_: On Apple TV, a ScrollView will not scroll unless there are focusable items inside it or above/below it. This component wraps ScrollView and uses tvOS-specific native code to allow scrolling using swipe gestures from the remote control.
|
|
278
241
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
-
|
|
242
|
+
- VirtualizedList: We extend `VirtualizedList` to make virtualization work well with focus management in mind. All of the improvements that we made are automatically available to all the VirtualizedList based components such as `FlatList`.
|
|
243
|
+
- Defaults
|
|
244
|
+
- VirtualizeList contents are automatically wrapped with a `TVFocusGuideView` with `trapFocus*` properties enabled depending on the orientation of the list. This default makes sure that focus doesn't leave the list accidentally due to a virtualization issue etc. until reaching the beginning or the end of the list.
|
|
245
|
+
|
|
246
|
+
New Props:
|
|
282
247
|
|
|
283
248
|
| Prop | Value | Description |
|
|
284
249
|
|---|---|---|
|
package/React/Base/RCTVersion.m
CHANGED
|
@@ -62,13 +62,13 @@ BaseViewProps::BaseViewProps(
|
|
|
62
62
|
rawProps,
|
|
63
63
|
"isTVSelectable",
|
|
64
64
|
sourceProps.isTVSelectable,
|
|
65
|
-
false)),
|
|
65
|
+
(Boolean) false)),
|
|
66
66
|
hasTVPreferredFocus(CoreFeatures::enablePropIteratorSetter ? sourceProps.hasTVPreferredFocus : convertRawProp(
|
|
67
67
|
context,
|
|
68
68
|
rawProps,
|
|
69
69
|
"hasTVPreferredFocus",
|
|
70
70
|
sourceProps.hasTVPreferredFocus,
|
|
71
|
-
false)),
|
|
71
|
+
(Boolean) false)),
|
|
72
72
|
tvParallaxProperties(CoreFeatures::enablePropIteratorSetter ? sourceProps.tvParallaxProperties : convertRawProp(
|
|
73
73
|
context,
|
|
74
74
|
rawProps,
|
|
@@ -104,7 +104,7 @@ BaseViewProps::BaseViewProps(
|
|
|
104
104
|
rawProps,
|
|
105
105
|
"autoFocus",
|
|
106
106
|
sourceProps.autoFocus,
|
|
107
|
-
false)),
|
|
107
|
+
(Boolean) false)),
|
|
108
108
|
trapFocusUp(CoreFeatures::enablePropIteratorSetter ? sourceProps.trapFocusUp : convertRawProp(
|
|
109
109
|
context,
|
|
110
110
|
rawProps,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-tvos",
|
|
3
|
-
"version": "0.75.2-
|
|
3
|
+
"version": "0.75.2-0rc0",
|
|
4
4
|
"description": "A framework for building native apps using React",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
"@react-native/gradle-plugin": "0.75.2",
|
|
120
120
|
"@react-native/js-polyfills": "0.75.2",
|
|
121
121
|
"@react-native/normalize-colors": "0.75.2",
|
|
122
|
-
"@react-native-tvos/virtualized-lists": "0.75.2-
|
|
122
|
+
"@react-native-tvos/virtualized-lists": "0.75.2-0rc0",
|
|
123
123
|
"abort-controller": "^3.0.0",
|
|
124
124
|
"anser": "^1.4.9",
|
|
125
125
|
"ansi-regex": "^5.0.0",
|