React Native WebView Spotify Integration Fails on Android 11

Other Questions Spotify
1

I have a music streaming feature using Spotify Web SDK inside a React Native WebView component. The playback works perfectly on newer Android versions like 14 and 15, but I’m having issues with Android 11 devices. The music starts playing normally but after just a few seconds it suddenly stops and I get a playback error message.

I’m using a Premium Spotify account and testing on tablet devices. Has anyone encountered similar problems with older Android versions?

<WebView
    debuggingEnabled={true}
    requiresUserGesture={false}
    renderingMode='accelerated'
    allowsSecureMedia={true}
    securityMode="permissive"
    permissionGrantType='auto'
    userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
    allowedOrigins={['*']}
    source={{
        uri: `https://music-app.cdn.amazonaws.com/player.html?authToken=${authToken}&songId=${songId}`,
        userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
    }}
    scriptEnabled={true}
    localStorageEnabled={true}
    cookiesEnabled={true}
    fileAccessEnabled={true}
    inlineMediaEnabled={true}
    cachingEnabled={true}
    onError={(event) => {
        const { nativeEvent } = event;
        console.error('WebView failed: ', nativeEvent);
    }}
    onLoad={() => {
        console.log('WebView initialized');
    }}
    onMessage={(msg) => {
        console.log('Received from webview:', msg.nativeEvent.data);
    }}
    style={{ flex: 1, width: screenWidth, height: screenHeight}}
/>
2

I ran into something very similar about 6 months ago with Android 11 specifically. The issue turned out to be related to how Android 11 handles media session management differently than newer versions. What fixed it for me was adding mediaPlaybackRequiresUserAction={false} and allowsInlineMediaPlayback={true} to the WebView props. Also try removing the custom userAgent - Android 11’s WebView implementation sometimes gets confused when you spoof desktop browsers for media content. The rendering mode might also be causing conflicts on older hardware, so consider testing with the default rendering instead of ‘accelerated’. Make sure your HTML player page is properly handling the Web Playback SDK’s player state changes because Android 11 is stricter about media session transitions.