Enable fabric on Android; Add Lottie and Video examples

ReproducerApp/App.tsx

@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import type {PropsWithChildren} from 'react';
 import {
  SafeAreaView,
  ScrollView,
@@ -17,43 +16,12 @@ import {
  View,
 } from 'react-native';
 
-import {
- Colors,
- DebugInstructions,
- Header,
- LearnMoreLinks,
- ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+import Video from 'react-native-video';
+import Lottie from 'lottie-react-native';
 
-type SectionProps = PropsWithChildren<{
- title: string;
-}>;
+import LottieLogo from './LottieLogo1.json';
 
-function Section({children, title}: SectionProps): JSX.Element {
- const isDarkMode = useColorScheme() === 'dark';
- return (
- <View style={styles.sectionContainer}>
- <Text
- style={[
- styles.sectionTitle,
- {
- color: isDarkMode ? Colors.white : Colors.black,
- },
- ]}>
- {title}
- </Text>
- <Text
- style={[
- styles.sectionDescription,
- {
- color: isDarkMode ? Colors.light : Colors.dark,
- },
- ]}>
- {children}
- </Text>
- </View>
- );
-}
+import {Colors, Header} from 'react-native/Libraries/NewAppScreen';
 
 function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
@@ -76,42 +44,49 @@ function App(): JSX.Element {
  style={{
  backgroundColor: isDarkMode ? Colors.black : Colors.white,
  }}>
- <Section title="Step One">
- Edit <Text style={styles.highlight}>App.tsx</Text> to change this
- screen and then come back to see your edits.
- </Section>
- <Section title="See Your Changes">
- <ReloadInstructions />
- </Section>
- <Section title="Debug">
- <DebugInstructions />
- </Section>
- <Section title="Learn More">
- Read the docs to discover what to do next:
- </Section>
- <LearnMoreLinks />
+ <Text>Video interop doesn't work:</Text>
+ <Video
+ source={{
+ uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
+ }}
+ style={styles.video}
+ onProgress={(e: {
+ currentPlaybackTime: number;
+ currentTime: number;
+ playableDuration: number;
+ seekableDuration: number;
+ }) => {
+ console.log('Video.onProgress event received', e);
+ }}
+ onEnd={() => {
+ console.log('Video.onEnd event received');
+ }}
+ controls
+ resizeMode="contain"
+ />
+ <Text>Lottie doesn't animate:</Text>
+ <Lottie
+ style={styles.lottieSample}
+ source={LottieLogo}
+ autoPlay
+ loop
+ />
  </View>
  </ScrollView>
  </SafeAreaView>
  );
 }
 
 const styles = StyleSheet.create({
- sectionContainer: {
- marginTop: 32,
- paddingHorizontal: 24,
- },
- sectionTitle: {
- fontSize: 24,
- fontWeight: '600',
+ video: {
+ width: '100%',
+ height: 202,
  },
- sectionDescription: {
+ lottieSample: {
  marginTop: 8,
- fontSize: 18,
- fontWeight: '400',
- },
- highlight: {
- fontWeight: '700',
+ marginBottom: 8,
+ // width: 300,
+ height: 200,
  },
 });
 

ReproducerApp/android/gradle.properties

@@ -37,7 +37,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true
 
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.

ReproducerApp/package.json

@@ -10,8 +10,10 @@
  "test": "jest"
  },
  "dependencies": {
+ "lottie-react-native": "^5.1.6",
  "react": "18.2.0",
- "react-native": "0.72.3"
+ "react-native": "0.72.3",
+ "react-native-video": "^5.2.1"
  },
  "devDependencies": {
  "@babel/core": "^7.20.0",
@@ -21,6 +23,7 @@
  "@react-native/metro-config": "^0.72.9",
  "@tsconfig/react-native": "^3.0.0",
  "@types/react": "^18.0.24",
+ "@types/react-native-video": "^5.0.15",
  "@types/react-test-renderer": "^18.0.0",
  "babel-jest": "^29.2.1",
  "eslint": "^8.19.0",

ReproducerApp/react-native.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+ project: {
+ android: {
+ unstable_reactLegacyComponentNames: ['RCTVideo', 'LottieAnimationView'],
+ },
+ ios: {
+ unstable_reactLegacyComponentNames: [],
+ },
+ },
+
+ dependencies: {
+ 'react-native-video': {
+ platforms: {
+ android: {
+ sourceDir: '../node_modules/react-native-video/android-exoplayer',
+ },
+ },
+ },
+ },
+};

ReproducerApp/yarn.lock

@@ -1761,6 +1761,11 @@
  metro-react-native-babel-transformer "0.76.7"
  metro-runtime "0.76.7"
 
+"@react-native/normalize-color@*":
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/@react-native/normalize-color/-/normalize-color-2.1.0.tgz#939b87a9849e81687d3640c5efa2a486ac266f91"
+ integrity sha512-Z1jQI2NpdFJCVgpY+8Dq/Bt3d+YUi1928Q+/CZm/oh66fzM0RUl54vvuXlPJKybH4pdCZey1eDTPaLHkMPNgWA==
+
 "@react-native/normalize-colors@*":
  version "0.73.0"
  resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.73.0.tgz#23e15cf2a2b73ac7e5e6df8d5b86b173cfb35a3f"
@@ -1771,7 +1776,7 @@
  resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.72.0.tgz#14294b7ed3c1d92176d2a00df48456e8d7d62212"
  integrity sha512-285lfdqSXaqKuBbbtP9qL2tDrfxdOFtIMvkKadtleRQkdOxx+uzGvFr82KHmc/sSiMtfXGp7JnFYWVh4sFl7Yw==
 
-"@react-native/virtualized-lists@^0.72.6":
+"@react-native/virtualized-lists@^0.72.4", "@react-native/virtualized-lists@^0.72.6":
  version "0.72.6"
  resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.72.6.tgz#375f88a1371927d803afad8d8a0ede3261464030"
  integrity sha512-JhT6ydu35LvbSKdwnhWDuGHMOwM0WAh9oza/X8vXHA8ELHRyQ/4p8eKz/bTQcbQziJaaleUURToGhFuCtgiMoA==
@@ -1899,6 +1904,22 @@
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/react-native-video@^5.0.15":
+ version "5.0.15"
+ resolved "https://registry.yarnpkg.com/@types/react-native-video/-/react-native-video-5.0.15.tgz#7af0a0df46293333d069102788d4f7db2961a122"
+ integrity sha512-li3yBYQ+D5GqZl0Y+M/vCTPfZwVyUU67CtSjEg+/ERkgEpvHDH+gQaoc9O00ttXr8kvqEzpiC6Ca9juIfeIlMA==
+ dependencies:
+ "@types/react" "*"
+ "@types/react-native" "*"
+
+"@types/react-native@*":
+ version "0.72.2"
+ resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.72.2.tgz#27c931a899c555b28e20cdd12e570b017808de96"
+ integrity sha512-/eEjr04Zqo7mTMszuSdrLx90+j5nWhDMMOgtnKZfAYyV3RwmlpSb7F17ilmMMxZWJY81n/JZ4e6wdhMJFpjrCg==
+ dependencies:
+ "@react-native/virtualized-lists" "^0.72.4"
+ "@types/react" "*"
+
 "@types/react-test-renderer@^18.0.0":
  version "18.0.0"
  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz#7b7f69ca98821ea5501b21ba24ea7b6139da2243"
@@ -2737,6 +2758,11 @@ decamelize@^1.2.0:
  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
+dedent@^0.6.0:
+ version "0.6.0"
+ resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.6.0.tgz#0e6da8f0ce52838ef5cec5c8f9396b0c1b64a3cb"
+ integrity sha512-cSfRWjXJtZQeRuZGVvDrJroCR5V2UvBNUMHsPCdNYzuAG8b9V8aAy3KUcdQrGQPXs17Y+ojbPh1aOCplg9YR9g==
+
 dedent@^0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
@@ -2786,6 +2812,15 @@ deprecated-react-native-prop-types@4.1.0:
  invariant "*"
  prop-types "*"
 
+deprecated-react-native-prop-types@^2.2.0:
+ version "2.3.0"
+ resolved "https://registry.yarnpkg.com/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.3.0.tgz#c10c6ee75ff2b6de94bb127f142b814e6e08d9ab"
+ integrity sha512-pWD0voFtNYxrVqvBMYf5gq3NA2GCpfodS1yNynTPc93AYA/KEMGeWDqqeUB6R2Z9ZofVhks2aeJXiuQqKNpesA==
+ dependencies:
+ "@react-native/normalize-color" "*"
+ invariant "*"
+ prop-types "*"
+
 destroy@1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
@@ -2832,6 +2867,11 @@ electron-to-chromium@^1.4.431:
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.458.tgz#e171c03e6b15e44f6d27c0e1a27a3a3f828117c8"
  integrity sha512-fYaH2f9dlJ/W3EV7wpRgzAoE85UwCUFeJIiL24PCRtvzdXJNy3AZdS/0zLqw5Omnp9GSR/hApMUQjacW2nfgsw==
 
+eme-encryption-scheme-polyfill@^2.0.1:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.1.1.tgz#91c823ed584e8ec5a9f03a6a676def8f80c57a4c"
+ integrity sha512-njD17wcUrbqCj0ArpLu5zWXtaiupHb/2fIUQGdInf83GlI+Q6mmqaPGLdrke4savKAu15J/z1Tg/ivDgl14g0g==
+
 emittery@^0.13.1:
  version "0.13.1"
  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
@@ -3651,7 +3691,7 @@ internal-slot@^1.0.3, internal-slot@^1.0.5:
  has "^1.0.3"
  side-channel "^1.0.4"
 
-invariant@*, invariant@^2.2.4:
+invariant@*, invariant@^2.2.2, invariant@^2.2.4:
  version "2.2.4"
  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -4399,6 +4439,11 @@ jsonfile@^4.0.0:
  object.assign "^4.1.4"
  object.values "^1.1.6"
 
+keymirror@^0.1.1:
+ version "0.1.1"
+ resolved "https://registry.yarnpkg.com/keymirror/-/keymirror-0.1.1.tgz#918889ea13f8d0a42e7c557250eee713adc95c35"
+ integrity sha512-vIkZAFWoDijgQT/Nvl2AHCMmnegN2ehgTPYuyy2hWQkQSntI0S7ESYqdLkoSe1HyEBFHHkCgSIvVdSEiWwKvCg==
+
 kind-of@^6.0.2:
  version "6.0.3"
  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
@@ -4493,6 +4538,14 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
  dependencies:
  js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-react-native@^5.1.6:
+ version "5.1.6"
+ resolved "https://registry.yarnpkg.com/lottie-react-native/-/lottie-react-native-5.1.6.tgz#6ae72829c3c0b95952dddd3d78c043f4dfbcb487"
+ integrity sha512-vhdeZstXMfuVKwnddYWjJgQ/1whGL58IJEJu/iSf0XQ5gAb4pp/+vy91mdYQLezlb8Aw4Vu3fKnqErJL2hwchg==
+ dependencies:
+ invariant "^2.2.2"
+ react-native-safe-modules "^1.0.3"
+
 lru-cache@^5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -5277,7 +5330,7 @@ prompts@^2.0.1, prompts@^2.4.0:
  kleur "^3.0.3"
  sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.8.1:
+prop-types@*, prop-types@^15.7.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5336,6 +5389,23 @@ react-is@^17.0.1:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-safe-modules@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/react-native-safe-modules/-/react-native-safe-modules-1.0.3.tgz#f5f29bb9d09d17581193843d4173ad3054f74890"
+ integrity sha512-DUxti4Z+AgJ/ZsO5U7p3uSCUBko8JT8GvFlCeOXk9bMd+4qjpoDvMYpfbixXKgL88M+HwmU/KI1YFN6gsQZyBA==
+ dependencies:
+ dedent "^0.6.0"
+
+react-native-video@^5.2.1:
+ version "5.2.1"
+ resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-5.2.1.tgz#a17e856759d7e17eee9cbd9df0d05ba22e88d457"
+ integrity sha512-aJlr9MeTuQ0LpZ4n+EC9RvhoKeiPbLtI2Rxy8u7zo/wzGevbRpWHSBj9xZ5YDBXnAVXzuqyNIkGhdw7bfdIBZw==
+ dependencies:
+ deprecated-react-native-prop-types "^2.2.0"
+ keymirror "^0.1.1"
+ prop-types "^15.7.2"
+ shaka-player "^2.5.9"
+
 react-native@0.72.3:
  version "0.72.3"
  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.72.3.tgz#f8d85ec81c9f3592d091ec8e9ac1694956a72765"
@@ -5679,6 +5749,13 @@ setprototypeof@1.2.0:
  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
+shaka-player@^2.5.9:
+ version "2.5.23"
+ resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.5.23.tgz#db92d1c6cf2314f0180a2cec11b0e2f2560336f5"
+ integrity sha512-3MC9k0OXJGw8AZ4n/ZNCZS2yDxx+3as5KgH6Tx4Q5TRboTBBCu6dYPI5vp1DxKeyU12MBN1Zcbs7AKzXv2EnCg==
+ dependencies:
+ eme-encryption-scheme-polyfill "^2.0.1"
+
 shallow-clone@^3.0.0:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"