react-native-tvos 0.75.2-0rc0 → 0.75.3-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 +5 -6
- package/Libraries/Components/ScrollView/ScrollView.d.ts +1 -1
- package/Libraries/Components/TV/TVEventHandler.js +11 -6
- package/Libraries/Components/TV/TVFocusEventHandler.js +2 -1
- package/Libraries/Components/TV/TVFocusGuideView.js +16 -15
- package/Libraries/Components/TV/TVTextScrollView.js +10 -9
- package/Libraries/Components/TV/TVViewPropTypes.js +1 -1
- package/Libraries/Components/TV/tagForComponentOrHandle.js +13 -13
- package/Libraries/Components/TV/useTVEventHandler.js +7 -3
- package/Libraries/Components/TabBarIOS/RCTTabBarNativeComponent.js +3 -2
- package/Libraries/Components/TabBarIOS/TabBarIOS.ios.js +6 -55
- package/Libraries/Components/TabBarIOS/{TabBarIOS.android.js → TabBarIOS.js} +8 -5
- package/Libraries/Components/TabBarIOS/TabBarIOSProps.js +52 -0
- package/Libraries/Components/TabBarIOS/{TabBarItemIOS.android.js → TabBarItemIOS.js} +3 -1
- package/Libraries/Components/Touchable/TVTouchable.js +6 -5
- package/Libraries/Components/Touchable/Touchable.js +2 -3
- package/Libraries/Components/Touchable/TouchableBounce.js +2 -5
- package/Libraries/Components/Touchable/TouchableHighlight.js +3 -4
- package/Libraries/Components/Touchable/TouchableWithoutFeedback.js +3 -4
- package/Libraries/Core/ReactNativeVersion.js +2 -2
- package/Libraries/Debugging/DebuggingOverlayRegistry.js +1 -1
- package/Libraries/Debugging/useSubscribeToDebuggingOverlayRegistry.js +3 -1
- package/Libraries/NativeComponent/BaseViewConfig.android.js +1 -2
- package/Libraries/NativeComponent/BaseViewConfig.ios.js +1 -2
- package/Libraries/NativeComponent/TVViewConfig.js +4 -1
- package/Libraries/NewAppScreen/components/DebugInstructions.js +7 -7
- package/Libraries/NewAppScreen/components/HermesBadge.js +3 -6
- package/Libraries/Pressability/Pressability.js +6 -3
- package/Libraries/ReactNative/AppContainer-dev.js +4 -3
- package/Libraries/ReactNative/RendererImplementation.js +2 -2
- package/Libraries/Renderer/shims/ReactNativeTypes.js +1 -0
- package/Libraries/StyleSheet/StyleSheetTypes.d.ts +17 -15
- package/Libraries/Utilities/BackHandler.ios.js +25 -23
- package/Libraries/Utilities/Platform.d.ts +1 -0
- package/Libraries/Utilities/Platform.flow.js +2 -0
- package/Libraries/Vibration/Vibration.js +1 -1
- package/README-core.md +5 -5
- package/README.md +76 -41
- package/React/Base/RCTVersion.m +2 -2
- package/ReactAndroid/api/ReactAndroid.api +2 -2
- package/ReactAndroid/gradle.properties +1 -1
- package/ReactAndroid/publish.gradle +1 -1
- package/ReactAndroid/src/main/java/com/facebook/react/devsupport/CxxInspectorPackagerConnection.java +2 -4
- package/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/ReactNativeVersion.java +2 -2
- package/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java +9 -4
- package/ReactAndroid/src/main/java/com/facebook/react/views/imagehelper/ImageSource.kt +6 -4
- package/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java +18 -0
- package/ReactAndroid/src/main/jni/react/devsupport/JCxxInspectorPackagerConnectionWebSocketDelegate.cpp +11 -2
- package/ReactAndroid/src/main/jni/react/devsupport/JCxxInspectorPackagerConnectionWebSocketDelegate.h +1 -3
- package/ReactCommon/cxxreact/ReactNativeVersion.h +2 -2
- package/ReactCommon/react/renderer/components/view/BaseViewProps.cpp +3 -3
- package/index.js +3 -3
- package/package.json +12 -11
- package/scripts/bundle.js +2 -0
- package/scripts/cocoapods/autolinking.rb +2 -1
- package/scripts/codegen/generate-artifacts-executor.js +3 -2
- package/scripts/hermes/hermes-utils.js +0 -1
- package/sdks/hermes-engine/utils/build-ios-framework.sh +2 -2
- package/sdks/hermesc/osx-bin/hermes +0 -0
- package/sdks/hermesc/osx-bin/hermesc +0 -0
- package/sdks/hermesc/win64-bin/hermesc.exe +0 -0
- package/types/experimental.d.ts +1 -1
- package/types/public/ReactNativeTVTypes.d.ts +44 -3
- package/ReactAndroid/src/main/jni/react/devsupport/JOptional.cpp +0 -29
- package/ReactAndroid/src/main/jni/react/devsupport/JOptional.h +0 -27
|
@@ -4,11 +4,12 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
|
-
* @flow
|
|
7
|
+
* @flow
|
|
8
8
|
* @format
|
|
9
9
|
* @oncall react_native
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
|
+
/*
|
|
12
13
|
import type {
|
|
13
14
|
AppContainerRootViewRef,
|
|
14
15
|
DebuggingOverlayRef,
|
|
@@ -30,3 +31,4 @@ const useSubscribeToDebuggingOverlayRegistry = (
|
|
|
30
31
|
};
|
|
31
32
|
|
|
32
33
|
export default useSubscribeToDebuggingOverlayRegistry;
|
|
34
|
+
*/
|
|
@@ -10,9 +10,8 @@
|
|
|
10
10
|
|
|
11
11
|
import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
|
|
12
12
|
|
|
13
|
-
import {validAttributesForTVProps} from './TVViewConfig';
|
|
14
|
-
|
|
15
13
|
import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
|
|
14
|
+
import {validAttributesForTVProps} from './TVViewConfig';
|
|
16
15
|
import {DynamicallyInjectedByGestureHandler} from './ViewConfigIgnore';
|
|
17
16
|
|
|
18
17
|
const bubblingEventTypes = {
|
|
@@ -10,9 +10,8 @@
|
|
|
10
10
|
|
|
11
11
|
import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
|
|
12
12
|
|
|
13
|
-
import {validAttributesForTVProps} from './TVViewConfig';
|
|
14
|
-
|
|
15
13
|
import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
|
|
14
|
+
import {validAttributesForTVProps} from './TVViewConfig';
|
|
16
15
|
import {
|
|
17
16
|
ConditionallyIgnoredEventHandlers,
|
|
18
17
|
DynamicallyInjectedByGestureHandler,
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @flow
|
|
3
|
+
*/
|
|
1
4
|
|
|
2
5
|
export const validAttributesForTVProps = {
|
|
3
6
|
isTVSelectable: true,
|
|
@@ -5,7 +8,7 @@ export const validAttributesForTVProps = {
|
|
|
5
8
|
tvParallaxProperties: true,
|
|
6
9
|
destinations: true,
|
|
7
10
|
enabled: true,
|
|
8
|
-
|
|
11
|
+
autoFocus: true,
|
|
9
12
|
safePadding: true,
|
|
10
13
|
focusable: true,
|
|
11
14
|
nextFocusDown: true,
|
|
@@ -22,20 +22,20 @@ const styles = StyleSheet.create({
|
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
const DebugInstructions: () => Node = Platform.select({
|
|
25
|
-
ios: () =>
|
|
26
|
-
Platform.isTVOS ? (
|
|
25
|
+
ios: () =>
|
|
26
|
+
Platform.isTVOS === true ? (
|
|
27
27
|
<Text>
|
|
28
28
|
Press <Text style={styles.highlight}>Cmd + D</Text> in the simulator or{' '}
|
|
29
|
-
<Text style={styles.highlight}>long press the play/pause button</Text>
|
|
30
|
-
the Apple TV remote to open the Dev Menu.
|
|
29
|
+
<Text style={styles.highlight}>long press the play/pause button</Text>{' '}
|
|
30
|
+
on the Apple TV remote to open the Dev Menu.
|
|
31
31
|
</Text>
|
|
32
32
|
) : (
|
|
33
33
|
<Text>
|
|
34
34
|
Press <Text style={styles.highlight}>Cmd + D</Text> in the simulator or{' '}
|
|
35
|
-
<Text style={styles.highlight}>Shake</Text> your device to open the Dev
|
|
35
|
+
<Text style={styles.highlight}>Shake</Text> your device to open the Dev
|
|
36
|
+
Menu.
|
|
36
37
|
</Text>
|
|
37
|
-
)
|
|
38
|
-
),
|
|
38
|
+
),
|
|
39
39
|
default: () => (
|
|
40
40
|
<Text>
|
|
41
41
|
Press <Text style={styles.highlight}>Cmd or Ctrl + M</Text> or{' '}
|
|
@@ -10,23 +10,20 @@
|
|
|
10
10
|
|
|
11
11
|
import type {Node} from 'react';
|
|
12
12
|
|
|
13
|
-
import Platform from '../../Utilities/Platform';
|
|
14
13
|
import useTVEventHandler from '../../Components/TV/useTVEventHandler';
|
|
15
14
|
import View from '../../Components/View/View';
|
|
16
15
|
import StyleSheet from '../../StyleSheet/StyleSheet';
|
|
17
16
|
import Text from '../../Text/Text';
|
|
17
|
+
import Platform from '../../Utilities/Platform';
|
|
18
18
|
import useColorScheme from '../../Utilities/useColorScheme';
|
|
19
19
|
import Colors from './Colors';
|
|
20
20
|
import React from 'react';
|
|
21
21
|
|
|
22
22
|
const HermesBadge = (): Node => {
|
|
23
23
|
const [lastEventType, setLastEventType] = React.useState('');
|
|
24
|
-
|
|
24
|
+
useTVEventHandler(evt => {
|
|
25
25
|
setLastEventType(evt.eventType);
|
|
26
|
-
};
|
|
27
|
-
if (Platform.isTV) {
|
|
28
|
-
useTVEventHandler(myTVEventHandler);
|
|
29
|
-
}
|
|
26
|
+
});
|
|
30
27
|
const isDarkMode = useColorScheme() === 'dark';
|
|
31
28
|
const version =
|
|
32
29
|
global.HermesInternal?.getRuntimeProperties?.()['OSS Release Version'] ??
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
|
-
* @flow
|
|
7
|
+
* @flow
|
|
8
8
|
* @format
|
|
9
9
|
*/
|
|
10
10
|
|
|
@@ -529,7 +529,7 @@ export default class Pressability {
|
|
|
529
529
|
return cancelable ?? true;
|
|
530
530
|
},
|
|
531
531
|
|
|
532
|
-
onClick: (event:
|
|
532
|
+
onClick: (event: any): void => {
|
|
533
533
|
// If event has `pointerType`, it was emitted from a PointerEvent and
|
|
534
534
|
// we should ignore it to avoid triggering `onPress` twice.
|
|
535
535
|
if (event?.nativeEvent?.hasOwnProperty?.('pointerType')) {
|
|
@@ -544,7 +544,10 @@ export default class Pressability {
|
|
|
544
544
|
}
|
|
545
545
|
|
|
546
546
|
// Remove spurious onClick events with empty event object generated on Android TV
|
|
547
|
-
if (
|
|
547
|
+
if (
|
|
548
|
+
Platform.isTV &&
|
|
549
|
+
(event?.eventType === null || event?.eventType === undefined)
|
|
550
|
+
) {
|
|
548
551
|
return;
|
|
549
552
|
}
|
|
550
553
|
|
|
@@ -17,7 +17,6 @@ import type {Props} from './AppContainer';
|
|
|
17
17
|
|
|
18
18
|
import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
|
|
19
19
|
import View from '../Components/View/View';
|
|
20
|
-
import Platform from '../Utilities/Platform';
|
|
21
20
|
/*
|
|
22
21
|
// Stub out DebuggingOverlay from TV for now
|
|
23
22
|
import DebuggingOverlay from '../Debugging/DebuggingOverlay';
|
|
@@ -28,6 +27,7 @@ import LogBoxNotificationContainer from '../LogBox/LogBoxNotificationContainer';
|
|
|
28
27
|
import StyleSheet from '../StyleSheet/StyleSheet';
|
|
29
28
|
import {RootTagContext, createRootTag} from './RootTag';
|
|
30
29
|
import * as React from 'react';
|
|
30
|
+
// import DebuggingOverlay from 'react-native/Libraries/Debugging/DebuggingOverlay';
|
|
31
31
|
|
|
32
32
|
const {useEffect, useState, useCallback} = React;
|
|
33
33
|
|
|
@@ -100,7 +100,7 @@ const AppContainer = ({
|
|
|
100
100
|
}: Props): React.Node => {
|
|
101
101
|
const appContainerRootViewRef: AppContainerRootViewRef = React.useRef(null);
|
|
102
102
|
const innerViewRef: InspectedViewRef = React.useRef(null);
|
|
103
|
-
/*
|
|
103
|
+
/*
|
|
104
104
|
const debuggingOverlayRef: DebuggingOverlayRef = React.useRef(null);
|
|
105
105
|
|
|
106
106
|
useSubscribeToDebuggingOverlayRegistry(
|
|
@@ -211,8 +211,9 @@ export type AppContainerRootViewRef = React.RefObject<React.ElementRef<
|
|
|
211
211
|
export type InspectedViewRef = React.RefObject<React.ElementRef<
|
|
212
212
|
typeof View,
|
|
213
213
|
> | null>;
|
|
214
|
+
/*
|
|
214
215
|
export type DebuggingOverlayRef = React.RefObject<React.ElementRef<
|
|
215
216
|
typeof DebuggingOverlay,
|
|
216
217
|
> | null>;
|
|
217
|
-
|
|
218
|
+
*/
|
|
218
219
|
export default AppContainer;
|
|
@@ -65,11 +65,11 @@ export function findHostInstance_DEPRECATED<TElementType: ElementType>(
|
|
|
65
65
|
|
|
66
66
|
export function findNodeHandle<TElementType: ElementType>(
|
|
67
67
|
componentOrHandle: ?(ElementRef<TElementType> | number),
|
|
68
|
-
suppressWarning: ?
|
|
68
|
+
suppressWarning: ?boolean,
|
|
69
69
|
): ?number {
|
|
70
70
|
return require('../Renderer/shims/ReactNative').findNodeHandle(
|
|
71
71
|
componentOrHandle,
|
|
72
|
-
suppressWarning,
|
|
72
|
+
suppressWarning ?? false,
|
|
73
73
|
);
|
|
74
74
|
}
|
|
75
75
|
|
|
@@ -205,6 +205,7 @@ export type ReactNativeType = {
|
|
|
205
205
|
): ?ElementRef<HostComponent<mixed>>,
|
|
206
206
|
findNodeHandle<TElementType: ElementType>(
|
|
207
207
|
componentOrHandle: ?(ElementRef<TElementType> | number),
|
|
208
|
+
suppressWarning?: boolean,
|
|
208
209
|
): ?number,
|
|
209
210
|
isChildPublicInstance(
|
|
210
211
|
parent: PublicInstance | HostComponent<mixed>,
|
|
@@ -182,21 +182,23 @@ type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T
|
|
|
182
182
|
|
|
183
183
|
export interface TransformsStyle {
|
|
184
184
|
transform?:
|
|
185
|
-
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
185
|
+
| Readonly<
|
|
186
|
+
MaximumOneOf<
|
|
187
|
+
PerspectiveTransform &
|
|
188
|
+
RotateTransform &
|
|
189
|
+
RotateXTransform &
|
|
190
|
+
RotateYTransform &
|
|
191
|
+
RotateZTransform &
|
|
192
|
+
ScaleTransform &
|
|
193
|
+
ScaleXTransform &
|
|
194
|
+
ScaleYTransform &
|
|
195
|
+
TranslateXTransform &
|
|
196
|
+
TranslateYTransform &
|
|
197
|
+
SkewXTransform &
|
|
198
|
+
SkewYTransform &
|
|
199
|
+
MatrixTransform
|
|
200
|
+
>[]
|
|
201
|
+
>
|
|
200
202
|
| string
|
|
201
203
|
| undefined;
|
|
202
204
|
transformOrigin?: Array<string | number> | string | undefined;
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
|
|
14
14
|
'use strict';
|
|
15
15
|
|
|
16
|
-
const Platform = require('./Platform');
|
|
17
16
|
const TVEventHandler = require('../Components/TV/TVEventHandler');
|
|
17
|
+
const Platform = require('./Platform');
|
|
18
18
|
|
|
19
19
|
type BackPressEventName = 'backPress' | 'hardwareBackPress';
|
|
20
20
|
|
|
@@ -50,6 +50,7 @@ function emptyFunction(): void {}
|
|
|
50
50
|
* });
|
|
51
51
|
* ```
|
|
52
52
|
*/
|
|
53
|
+
|
|
53
54
|
type TBackHandler = {|
|
|
54
55
|
+exitApp: () => void,
|
|
55
56
|
+addEventListener: (
|
|
@@ -62,10 +63,24 @@ type TBackHandler = {|
|
|
|
62
63
|
) => void,
|
|
63
64
|
|};
|
|
64
65
|
|
|
65
|
-
let BackHandler: TBackHandler
|
|
66
|
+
let BackHandler: TBackHandler = {
|
|
67
|
+
exitApp: emptyFunction,
|
|
68
|
+
addEventListener: function (
|
|
69
|
+
_eventName: BackPressEventName,
|
|
70
|
+
_handler: () => ?boolean,
|
|
71
|
+
): {remove: () => void, ...} {
|
|
72
|
+
return {
|
|
73
|
+
remove: emptyFunction,
|
|
74
|
+
};
|
|
75
|
+
},
|
|
76
|
+
removeEventListener: function (
|
|
77
|
+
_eventName: BackPressEventName,
|
|
78
|
+
_handler: () => ?boolean,
|
|
79
|
+
) {},
|
|
80
|
+
};
|
|
66
81
|
|
|
67
82
|
if (Platform.isTV) {
|
|
68
|
-
const _backPressSubscriptions = new Set();
|
|
83
|
+
const _backPressSubscriptions = new Set<() => ?boolean>();
|
|
69
84
|
|
|
70
85
|
TVEventHandler.addListener(function (evt) {
|
|
71
86
|
if (evt && evt.eventType === 'menu') {
|
|
@@ -91,34 +106,21 @@ if (Platform.isTV) {
|
|
|
91
106
|
exitApp: emptyFunction,
|
|
92
107
|
|
|
93
108
|
addEventListener: function (
|
|
94
|
-
|
|
95
|
-
|
|
109
|
+
_eventName: BackPressEventName,
|
|
110
|
+
_handler: () => ?boolean,
|
|
96
111
|
): {remove: () => void, ...} {
|
|
97
|
-
_backPressSubscriptions.add(
|
|
112
|
+
_backPressSubscriptions.add(_handler);
|
|
98
113
|
return {
|
|
99
|
-
remove: () => BackHandler.removeEventListener(
|
|
114
|
+
remove: () => BackHandler.removeEventListener(_eventName, _handler),
|
|
100
115
|
};
|
|
101
116
|
},
|
|
102
117
|
|
|
103
118
|
removeEventListener: function (
|
|
104
|
-
eventName: BackPressEventName,
|
|
105
|
-
handler: () => ?boolean,
|
|
106
|
-
): void {
|
|
107
|
-
_backPressSubscriptions.delete(handler);
|
|
108
|
-
},
|
|
109
|
-
};
|
|
110
|
-
} else {
|
|
111
|
-
BackHandler = {
|
|
112
|
-
exitApp: emptyFunction,
|
|
113
|
-
addEventListener(_eventName: BackPressEventName, _handler: () => ?boolean) {
|
|
114
|
-
return {
|
|
115
|
-
remove: emptyFunction,
|
|
116
|
-
};
|
|
117
|
-
},
|
|
118
|
-
removeEventListener(
|
|
119
119
|
_eventName: BackPressEventName,
|
|
120
120
|
_handler: () => ?boolean,
|
|
121
|
-
) {
|
|
121
|
+
) {
|
|
122
|
+
_backPressSubscriptions.delete(_handler);
|
|
123
|
+
},
|
|
122
124
|
};
|
|
123
125
|
}
|
|
124
126
|
|
|
@@ -42,6 +42,8 @@ type IOSPlatform = {
|
|
|
42
42
|
// $FlowFixMe[unsafe-getters-setters]
|
|
43
43
|
get isTV(): boolean,
|
|
44
44
|
// $FlowFixMe[unsafe-getters-setters]
|
|
45
|
+
get isTVOS(): boolean,
|
|
46
|
+
// $FlowFixMe[unsafe-getters-setters]
|
|
45
47
|
get isVision(): boolean,
|
|
46
48
|
// $FlowFixMe[unsafe-getters-setters]
|
|
47
49
|
get isTesting(): boolean,
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
// import NativeVibration from './NativeVibration';
|
|
13
13
|
const Platform = require('../Utilities/Platform');
|
|
14
|
-
const NativeVibration = require('./NativeVibration');
|
|
14
|
+
const NativeVibration: $FlowFixMe = require('./NativeVibration');
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* Vibration API
|
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://react.dev/
|
|
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 13.4 and Android 6.0 (API 23) 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://react.dev/learn
|
|
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/main/LICENSE
|
|
147
|
+
[ld]: https://github.com/facebook/react-native/blob/main/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.75.2-0 release of this package will be derived from the 0.75.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,12 +27,10 @@ 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. Components that have not been reimplemented in the new architecture 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.
|
|
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`:
|
|
33
|
+
As of the 0.74 release, bridgeless is the default when Fabric 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`:
|
|
36
34
|
|
|
37
35
|
```objc
|
|
38
36
|
- (BOOL)bridgelessEnabled
|
|
@@ -63,43 +61,83 @@ Minimum operating system versions:
|
|
|
63
61
|
- _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.
|
|
64
62
|
- _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.
|
|
65
63
|
|
|
66
|
-
## _(New)_
|
|
64
|
+
## _(New)_ TV project creation in React Native 0.75 and later
|
|
67
65
|
|
|
68
|
-
>
|
|
66
|
+
> _Warning:_ 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`.
|
|
69
67
|
|
|
70
68
|
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.
|
|
72
69
|
|
|
73
|
-
|
|
70
|
+
### Using the Expo SDK with TV apps
|
|
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.
|
|
74
81
|
|
|
75
|
-
|
|
82
|
+
> _Note:_ The new TV template will only build apps for Apple TV and Android TV. Multiple platform targets are no longer supported in React Native app Podfiles.
|
|
83
|
+
|
|
84
|
+
To create a new project:
|
|
76
85
|
|
|
77
86
|
```sh
|
|
78
|
-
#
|
|
79
|
-
|
|
80
|
-
|
|
87
|
+
#
|
|
88
|
+
# Init an app called 'TVTest', note that you must not be in a node module (directory with node_modules sub-directory) for this to work
|
|
89
|
+
$ npx @react-native-community/cli@latest init TVTest --template @react-native-tvos/template-tv
|
|
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
|
|
81
132
|
# Now build and start the app in the tvOS Simulator - this will only work on a macOS machine.
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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
|
|
133
|
+
npx react-native run-ios --simulator "Apple TV"
|
|
134
|
+
# This command builds and starts the app in an Android TV emulator (needs to be created in advance).
|
|
135
|
+
npx react-native run:android --device tv_api_31
|
|
92
136
|
```
|
|
93
137
|
|
|
94
138
|
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.)
|
|
95
139
|
|
|
96
|
-
##
|
|
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
|
|
140
|
+
## How to support TV specific file extensions
|
|
103
141
|
|
|
104
142
|
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)
|
|
105
143
|
|
|
@@ -172,11 +210,10 @@ const TVEventHandlerView: () => React.Node = () => {
|
|
|
172
210
|
// Class based component
|
|
173
211
|
|
|
174
212
|
class Game2048 extends React.Component {
|
|
175
|
-
|
|
213
|
+
_tvEventHandlerSubscription: EventSubscription || undefined;
|
|
176
214
|
|
|
177
215
|
_enableTVEventHandler() {
|
|
178
|
-
this.
|
|
179
|
-
this._tvEventHandler.enable(this, function(cmp, evt) {
|
|
216
|
+
this._tvEventHandlerSubscription = TVEventHandler.addListener(function(evt) {
|
|
180
217
|
if (evt && evt.eventType === 'right') {
|
|
181
218
|
cmp.setState({board: cmp.state.board.move(2)});
|
|
182
219
|
} else if(evt && evt.eventType === 'up') {
|
|
@@ -192,9 +229,9 @@ class Game2048 extends React.Component {
|
|
|
192
229
|
}
|
|
193
230
|
|
|
194
231
|
_disableTVEventHandler() {
|
|
195
|
-
if (this.
|
|
196
|
-
this.
|
|
197
|
-
delete this.
|
|
232
|
+
if (this._tvEventHandlerSubscription) {
|
|
233
|
+
this._tvEventHandlerSubscription.remove();
|
|
234
|
+
delete this._tvEventHandlerSubscription;
|
|
198
235
|
}
|
|
199
236
|
}
|
|
200
237
|
|
|
@@ -239,11 +276,9 @@ class Game2048 extends React.Component {
|
|
|
239
276
|
|
|
240
277
|
- _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.
|
|
241
278
|
|
|
242
|
-
-
|
|
243
|
-
|
|
244
|
-
-
|
|
245
|
-
|
|
246
|
-
New Props:
|
|
279
|
+
- _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`.
|
|
280
|
+
- Defaults: 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.
|
|
281
|
+
- New Props:
|
|
247
282
|
|
|
248
283
|
| Prop | Value | Description |
|
|
249
284
|
|---|---|---|
|
package/React/Base/RCTVersion.m
CHANGED
|
@@ -23,8 +23,8 @@ NSDictionary* RCTGetReactNativeVersion(void)
|
|
|
23
23
|
__rnVersion = @{
|
|
24
24
|
RCTVersionMajor: @(0),
|
|
25
25
|
RCTVersionMinor: @(75),
|
|
26
|
-
RCTVersionPatch: @(
|
|
27
|
-
RCTVersionPrerelease: @"
|
|
26
|
+
RCTVersionPatch: @(3),
|
|
27
|
+
RCTVersionPrerelease: @"0",
|
|
28
28
|
};
|
|
29
29
|
});
|
|
30
30
|
return __rnVersion;
|
|
@@ -6459,9 +6459,9 @@ public final class com/facebook/react/views/imagehelper/ImageSource {
|
|
|
6459
6459
|
public final fun getSize ()D
|
|
6460
6460
|
public final fun getSource ()Ljava/lang/String;
|
|
6461
6461
|
public static final fun getTransparentBitmapImageSource (Landroid/content/Context;)Lcom/facebook/react/views/imagehelper/ImageSource;
|
|
6462
|
-
public
|
|
6462
|
+
public fun getUri ()Landroid/net/Uri;
|
|
6463
6463
|
public fun hashCode ()I
|
|
6464
|
-
public
|
|
6464
|
+
public fun isResource ()Z
|
|
6465
6465
|
}
|
|
6466
6466
|
|
|
6467
6467
|
public final class com/facebook/react/views/imagehelper/ImageSource$Companion {
|
|
@@ -20,7 +20,7 @@ def sonatypeUsername = findProperty('SONATYPE_USERNAME')
|
|
|
20
20
|
def sonatypePassword = findProperty('SONATYPE_PASSWORD')
|
|
21
21
|
|
|
22
22
|
def reactAndroidProjectDir = project(':packages:react-native:ReactAndroid').projectDir
|
|
23
|
-
def mavenTempLocalUrl = 'file:///
|
|
23
|
+
def mavenTempLocalUrl = 'file:///var/folders/xp/yw_lp59x05d2mp0g0n2f_d240000gn/T/eas-build-workingdir/build/maven_local'
|
|
24
24
|
// Rewritten when copying this to ReactAndroid/publish.gradle
|
|
25
25
|
|
|
26
26
|
publishing {
|