Migration to Fabric

[cortinico]

Feature Request

Hey all,
I'm wondering if someone is looking into migrating React Native Video to use Fabric (i.e. the React Native New Architecture). I'm opening this issue to understand what's the current status of this.
I saw that some of the work future work is planned here #2642 but nothing is mentioned related to Fabric. I'm wondering if it was intentionally excluded or not.

Why it is needed

Originally requested here reactwg/react-native-new-architecture#6 (comment)

Code sample

Not a real code sample, but https://github.com/react-native-community/RNNewArchitectureLibraries contains a sample of a library that is backward compatible with both the old and the new arch of React Native.

EDIT: typo

[douglowder]

I'm willing to take a look at this since I maintain the RN TV repo, and video is kind of important for TV :)

[hueniverse]

It's on my list but the top priority is to get to zero pending PRs and less than 100 open issues.

[mk0116]

I can help you @hueniverse. Let me know if you need any help from me to migrate to new arch.

[hueniverse]

@mk0116 thanks for the offer! Let's get v6 out first and when things are a bit more stable, we can move forward with it.

[capezzbr]

Hey @mk0116 @hueniverse, any update on supporting the new architecture?

[hueniverse]

@capezzbr unless someone shows up and does the work, I don't see it happening in the near future. So far no one has expressed interest in taking a lead on this.

[mk0116]

I'm waiting for v6 to roll out. It seems like v6 has a lot of changes with breaking changes. So that after rolling out v6, I guess that's a better timing we can aim to new arch migration.

[cipolleschi]

Hey there! @mk0116 is there any estimated date for the v6 to be released?

[mk0116]

I'm not a maintainer of this library @cipolleschi I just suggested to help them migrate to new arch and @hueniverse said rolling out v6 is the priority right now.

[hari-mohan-choudhary]

I am using v6.0.0-alpha.4 but this is not support fabric. any way I can use in fabric

[samjayhk]

@hari-mohan-choudhary Hello, did you dose any additional step for using react-native-video under Fabric mode? I have tried v6.0.0-alpha.4 and v6.0.0-alpha.5, but it still showing Unimplemented Components <Video>. Thanks.

[hari-mohan-choudhary]

@samjayhk I am getting the same error.

[prashantchothani]

@douglowder request you to please let me know if the new architecture support for tvos react native for react native video is done ? Referring to below.

I'm willing to take a look at this since I maintain the RN TV repo, and video is kind of important for TV :)

[freeboub]

New architecture is not yet considered as stable, and nobody open a PR to support it. So RNV doesn't support it yet. But I agree this is a must have in the future!

[douglowder]

@prashantchothani I have not yet picked up this work

[Sunbreak]

Working on fabric support: #3056

[jiyong1]

could you please take a look at this PR

[sneh2608]

could you please take a look at this PR
@jiyong1
I have used your PR in my Project...It seems that there is some bug in the implementation.
Even when the video component is unmounted the video plays in background even when playInBackground flag is passed as false.I am currently implementing a carousel which has video,lottie and image support.
Tried various method but the video instance won't get destroyed
Could you please look into this?

<Video
          repeat={false}
          ref={videoRef}
          resizeMode="contain"
          paused={pause || loading}
          volume={1}
          source={{uri: convertToProxyURL(url)}}
          onEnd={onVideoEnd}
          onError={(_error: any) => {
            setLoading(false);
          }}
          onProgress={data => {
            if (isCurrentIndex) {
              onVideoProgress?.(data);
            }
          }}
          bufferConfig={{
            minBufferMs: BUFFER_TIME,
            maxBufferMs: BUFFER_TIME,
            bufferForPlaybackMs: BUFFER_TIME,
            bufferForPlaybackAfterRebufferMs: BUFFER_TIME,
          }}
          onBuffer={onBuffer}
          onLoadStart={onLoadStart}
          onLoad={(item: OnLoadData) => {
            videoData.current = item;
            loadVideo();
          }}
          style={styles.contentVideoView}
          playInBackground={false}
        />

Edit - I was able to solve this issue by implementing the onDropViewInstance method in ReactExoplayerViewmanager file and clearing the view resources when the component unmounts
@Override public void onDropViewInstance(ReactExoplayerView view) { view.cleanUpResources(); ((ThemedReactContext) view.getContext()).removeLifecycleEventListener(view); }

[AbdouEB]

Hey, any updates on fabric support on Android as it seems like it is still an issue..

[freeboub]

could you please take a look at this #3122

[jessiemblack]

Having this issue still with RN 0.72.6. Not able to use the library

[theyanniss23002]

How long will it take before you get around to developing an update to support fabric?

[cipolleschi]

Hello there! Have you tried to run the react-native-video component through the interop layers we provided starting from 0.72? This should be the way to use the component in a New Architecture app while it is still on the old architecture.

Also, if you tried that path, and there are issues with react-native-video, we would love to look at them, as we might be able to address them in the interop layer and that would help also other libraries/components to work better in the New Architecture through the interop layers.

[theyanniss23002]

@cipolleschi I'm using react-native version 0.73, is it ok?

[cipolleschi]

sure, even better. We improved the Interop Layers in 0.73!

[freeboub]

How long will it take before you get around to developing an update to support fabric?

Nobody can provide an eta, It would be faster with more reviewers / contributors 😅
That said there are some pull requests open to integrate it!

[theyanniss23002]

sure, even better. We improved the Interop Layers in 0.73!

Then I ran into a problem... version 0.73, maybe something needs to be changed in this case, but so far I have no idea what exactly

[cipolleschi]

@theyanniss23002 have you registered your component in the react-native.config.js as explained in the How to use the interop layer section?

How to use the interop layer

The interop layer is shipped with React Native 0.72. If no components are registered, it does nothing.
The only step required to use it is to register a component in the layer.

To register a component, you have to edit the react-native.config.js file in your application project to list the legacy components required by the app, in the Android and iOS sections:

module.exports = {
   project:{
     android: {
       unstable_reactLegacyComponentNames: [ "ComponentName" ]
     },
     ios: {
       unstable_reactLegacyComponentNames: [ "ComponentName" ]
     }
   },
};

[theyanniss23002]

@theyanniss23002 have you registered your component in the react-native.config.js as explained in the How to use the interop layer section?

How to use the interop layer

The interop layer is shipped with React Native 0.72. If no components are registered, it does nothing.
The only step required to use it is to register a component in the layer.
To register a component, you have to edit the react-native.config.js file in your application project to list the legacy components required by the app, in the Android and iOS sections:

module.exports = {
   project:{
     android: {
       unstable_reactLegacyComponentNames: [ "ComponentName" ]
     },
     ios: {
       unstable_reactLegacyComponentNames: [ "ComponentName" ]
     }
   },
};

Thank you! I did it

[Mahmoud412]

@cipolleschi i have been trying to use interop layer for react native video 6.0.0-alpha.1 and i follow How to use the interop layer section but still not working.
i'm using React Native 0.72
react-native.config.js

module.exports = {
   project:{
     android: {
       unstable_reactLegacyComponentNames: [ "RCTVideo" ]
     },
     ios: {
       unstable_reactLegacyComponentNames: [ "" ]
     }
   },
};

[theyanniss23002]

@cipolleschi i have been trying to use interop layer for react native video 6.0.0-alpha.1 and i follow How to use the interop layer section but still not working. i'm using React Native 0.72 react-native.config.js

module.exports = {
   project:{
     android: {
       unstable_reactLegacyComponentNames: [ "RCTVideo" ]
     },
     ios: {
       unstable_reactLegacyComponentNames: [ "" ]
     }
   },
};

Use this config

module.exports = {
  project: {
    android: {
      unstable_reactLegacyComponentNames: ['Video'],
    },
    ios: {
      unstable_reactLegacyComponentNames: ['Video'],
    },
  },
};

[Mahmoud412]

@theyanniss23002 now i'm getting this error and the app crashing right after it.

[theyanniss23002]

@theyanniss23002 now i'm getting this error and the app crashing right after it.

I can't imagine why you are getting this error. contact the library creators

[KrzysztofMoch]

@Mahmoud412 You need to update to 6.0.0-beta.5 (it includes fix for that)