[tvOS / Android TV] Support for tvOS / Android TV

[Vashiru]

Is your feature request related to a problem? Please describe.
I'm working on a new Apple TV / Android TV app. The currently library is not compatible with tvOS out of the box. I will be honest that I'm currently in the early phases of this app exploring viability and support for react-native-tvos seems to be rather limited across the eco-system. So it might happen that I don't get to actually building the app, but still wanted to share the idea and my changes.

Describe the solution you'd like
Support for tvOS / Android TV through https://github.com/react-native-tvos/react-native-tvos. Under the hood tvOS / Android TV are mostly compatible with iOS and Android respectivally.

Additional context
I've managed to get this working on AppleTV with the help of AI. Specifically I've updated the platforms specification to s.platforms = { :ios => "12.0", :tvos => "12.0" } and had to disable VibrancyView as some of it's features are not supported by tvOS (tested on version 26, gave compile errors). I've included the patch file with all of my changes for Apple TV. I've not tested on Android TV yet.

Specifically I got these errors regarding VibrancyView:

error 'UIVibrancyEffectStyleLabel' is unavailable: not available on tvOS
error 'effectForBlurEffect:style:' is unavailable: not available on tvOS

After disabling VibrancyView for TVOS, it seems the blur effect is working properly (don't mind my layout, it's been a lot of copy pasting from another app just to get a proof of concept working):

Patch file:
@danielsaraldi+react-native-blur-view+1.3.1.patch

[Vashiru]

Early test on android (after I fixed my layout a bit), it seems to render quite a bit darker, but it works:

[DanielAraldi]

Hi @Vashiru! Thank you for your report 💙

I’ll add it as new feature for library. I’ll see your patch tomorrow!

[DanielAraldi]

Early test on android (after I fixed my layout a bit), it seems to render quite a bit darker, but it works:

Which type value of the BlurView component is provided in Android?

[Vashiru]

Both are set to type=dark and radius=10. Note that on both cases there's a 20% black overlay over top of it (although in the tvOS screenshot it's only on the top say 20% of the screen). But I think it's still fairly visible that the Android one has more blur and is quite a bit darker. v1.3.1 of the library btw.

[DanielAraldi]

Both are set to type=dark and radius=10. Note that on both cases there's a 20% black overlay over top of it (although in the tvOS screenshot it's only on the top say 20% of the screen). But I think it's still fairly visible that the Android one has more blur and is quite a bit darker. v1.3.1 of the library btw.

Ok my friend 🫡

[DanielAraldi]

Hey @Vashiru, I created this PR using your patch:

• feat: Add support for tvOS and Android TV #31

Could you test it for me?

[Vashiru]

@DanielAraldi Gave it a test, it compiles but upon launch I run into a javascript error:

The code (stripped a few components out to make it a bit more readable), not changed from the earlier images:

<View style={styles.containerBackground}>
  <BlurTarget
    id="myImage"
    style={{
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      position: 'absolute',
    }}
  >
    <ImageBackground source={artwork} style={{ minHeight: '100%' }} />
  </BlurTarget>
  <BlurView
    style={{
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      position: 'absolute',
    }}
    type={'dark'}
    radius={10}
    targetId="myImage"
  >
    <SafeAreaView
      edges={['top', 'bottom']}
      style={styles.container}
      key={isLandscape ? 'landscape' : 'portrait'}
    >
      {/* Header with logo and cast icons */}
      
      <View style={[ styles.playerWrapper, { maxWidth: width > 768 ? 600 : undefined }]}>
        <View style={ styles.artworkContainer }>
          <Artwork
            artwork={artwork}
            showInfoUrl={_showInfoUrl}
            trackTitle={trackTitle}
          />
        </View>

        <View
          key={playingTrack?.url}
          style={{ flex: 1, flexGrow: 1 }}
        >
          <View style={styles.songInfoContainer}>
            <View>
              <Text style={styles.songTitle}>
                {trackTitle.toUpperCase()}
              </Text>
              {trackArtist && (
                <Text>
                  {trackArtist}
                </Text>
              )}
            </View>
          </View>
        </View>
      </View>
    </SafeAreaView>
  </BlurView>
</View>

[DanielAraldi]

I’ll investigate this error, thank you! 🙏

[DanielAraldi]

Hey @Vashiru, does your patch file work for you? I used it for implement to support from TV, but I always have a HostFunction error 🥲

Could you create a pull request with your patch changes for me to look at? That'll help me very much! 🙏