[rive-android]: Audio only plays once, works with `rive-android 10.2.1`

[johnsnaply]

Description

Audio stopped working in Android and rive gives an error of {"message": "No default ViewModel found for artboard '...'", "type": "DataBindingError"}

We use: "rive-react-native": "^9.6.1", "react-native": "0.81.4", "react": "19.1.0", "expo": "^54.0.7",

[johnsnaply]

Basically it plays the sound once (for the first .riv file that is called. After that, it doesnt play the sound of any or the same .riv file.

my pagkage.json dependencies are here: "dependencies": { "@expo-google-fonts/manrope": "^0.2.3", "@expo-google-fonts/noto-sans": "^0.2.3", "@expo-google-fonts/ubuntu": "^0.2.3", "@expo/metro-runtime": "~6.1.2", "@expo/react-native-action-sheet": "^4.1.0", "@expo/vector-icons": "^15.0.2", "@giphy/react-native-sdk": "^5.0.1", "@gorhom/bottom-sheet": "^5.0.6", "@mgcrea/react-native-dnd": "^2.5.1", "@microsoft/signalr": "^8.0.7", "@notifee/react-native": "^9.1.3", "@react-native-async-storage/async-storage": "2.2.0", "@react-native-community/image-editor": "^4.2.1", "@react-native-community/netinfo": "11.4.1", "@react-native-community/progress-view": "^1.5.0", "@react-native-firebase/analytics": "^21.6.1", "@react-native-firebase/app": "^21.6.1", "@react-native-firebase/crashlytics": "^21.6.1", "@react-native-firebase/dynamic-links": "^21.6.1", "@react-native-masked-view/masked-view": "0.3.2", "@react-navigation/drawer": "^7.0.0", "@react-navigation/elements": "^2.2.4", "@shopify/flash-list": "2.0.2", "@stripe/stripe-react-native": "0.50.3", "@tanstack/react-query": "^5.62.7", "axios": "^1.7.9", "crypto-js": "^3.1.9-1", "date-fns": "^4.1.0", "expo": "^54.0.7", "expo-apple-authentication": "~8.0.7", "expo-application": "~7.0.7", "expo-asset": "~12.0.8", "expo-audio": "~1.0.11", "expo-auth-session": "~7.0.8", "expo-blur": "~15.0.7", "expo-build-properties": "~1.0.8", "expo-camera": "~17.0.8", "expo-clipboard": "~8.0.7", "expo-constants": "~18.0.8", "expo-crypto": "~15.0.7", "expo-custom-assets": "^1.4.1", "expo-dev-client": "~6.0.12", "expo-device": "~8.0.7", "expo-document-picker": "~14.0.7", "expo-file-system": "~19.0.14", "expo-font": "~14.0.8", "expo-haptics": "~15.0.7", "expo-image": "~3.0.8", "expo-image-manipulator": "~14.0.7", "expo-image-picker": "~17.0.8", "expo-keep-awake": "~15.0.7", "expo-linear-gradient": "~15.0.7", "expo-linking": "~8.0.8", "expo-localization": "~17.0.7", "expo-location": "~19.0.7", "expo-navigation-bar": "~5.0.8", "expo-notifications": "~0.32.11", "expo-router": "~6.0.5", "expo-secure-store": "~15.0.7", "expo-sharing": "~14.0.7", "expo-speech-recognition": "^2.1.2", "expo-splash-screen": "~31.0.10", "expo-status-bar": "~3.0.8", "expo-store-review": "~9.0.7", "expo-system-ui": "~6.0.7", "expo-updates": "~29.0.10", "expo-video": "~3.0.11", "expo-video-thumbnails": "~10.0.7", "expo-web-browser": "~15.0.7", "formik": "^2.4.6", "i18next": "^25.5.2", "lodash": "^4.17.21", "lottie-react-native": "~7.3.1", "react": "19.1.0", "react-dom": "19.1.0", "react-i18next": "^15.7.3", "react-native": "0.81.4", "react-native-actions-sheet": "^0.9.7", "react-native-agora": "^4.5.0", "react-native-animated-rolling-numbers": "^1.0.3", "react-native-collapsible-tab-view": "^8.0.0", "react-native-compressor": "^1.13.0", "react-native-context-menu-view": "^1.16.0", "react-native-countdown-circle-timer": "^3.2.1", "react-native-device-info": "^14.0.1", "react-native-drawer-layout": "^4.0.4", "react-native-edge-to-edge": "^1.7.0", "react-native-gesture-handler": "~2.28.0", "react-native-image-crop-picker": "^0.41.6", "react-native-image-viewing": "^0.2.2", "react-native-international-phone-number": "^0.8.3", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-maps": "1.20.1", "react-native-otp-entry": "^1.8.1", "react-native-pager-view": "6.9.1", "react-native-popover-view": "^6.1.0", "react-native-popup-menu": "^0.16.1", "react-native-reanimated": "3.19.3", "react-native-reanimated-carousel": "^3.5.1", "react-native-safe-area-context": "~5.6.0", "react-native-screens": "~4.16.0", "react-native-svg": "15.12.1", "react-native-ui-datepicker": "^3.0.2", "react-native-version-check": "^3.4.7", "react-native-volume-manager": "^1.10.0", "react-native-webview": "13.15.0", "react-native-z-view": "^0.2.4", "rive-react-native": "^9.6.1", "sonner-native": "^0.16.2", "yup": "^1.5.0" }

We use Expo SDK 54 but without newArch enabled. Is there someone who can help us in this? This happens only in Android.

We are close to launch the product so it is very important to us. Also we have arranged to resell the rive service to our clients. So we need to know what is really happening and carefully take the right path for the animation service of our product.

[johnsnaply]

Hi Rive team,

I’ve done some further testing with [email protected] on Expo SDK 54 (Android). Here are my findings:

1. The DataBindingError ("No default ViewModel found for artboard …") disappears if all artboard bindings are correct in the Rive editor. This does not fix the audio issue but prevents the console error.

2. The embedded audio still plays only the first time an animation is played. Subsequent plays, even after remounting the <Rive> component with a unique key (e.g., Date.now()), do not play audio on Android. iOS works correctly.

3. The issue occurs with both single and multiple .riv files, and it seems to be related to the Android native audio engine not reinitializing after the first playback.

4. Workarounds tested:

   • Forcing a new key on the <Rive> component each playback → animation remounts correctly, but audio still does not play.
   • Correct bindings → eliminates DataBindingError, audio still does not play.
   • Playing audio externally with expo-av works as expected, confirming the issue is with embedded audio on Android.

Steps to reproduce:

• Use Expo SDK 54
• Install [email protected]
• Load a .riv file with embedded audio
• Play animation once → audio plays
• Replay animation (same or different .riv) → audio does not play

Expected behavior:

• Embedded audio should play every time the animation is played, like on iOS.

Thanks!

[calvinkkw]

https://github.com/rive-app/rive-android/issues/396

i think its the same issue as this. but no replies yet.

Opened this and havent got a reply: https://community.rive.app/c/support/rive-audio-not-working-after-navigating-away-or-minimizing

[mfazekas]

I was able to reproduce the issue with rive-android 10.4.5 and was working with 10.2.1

% npx yarn why react-native               
└─ example@workspace:example
   └─ react-native@npm:0.76.7 [260cb] (via npm:0.76.7 [260cb])

Rive android runtime: 10.4.5

newArchEnabled=true

Android emulator android 15 API level 35

Component I've used:

import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import Rive, { Alignment, Fit } from 'rive-react-native';

export default function AudioPingPong() {
  return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <ScrollView contentContainerStyle={styles.container}>
        <View style={styles.infoContainer}>
          <Text style={styles.title}>Ping Pong Audio Demo</Text>
          <Text style={styles.subtitle}>
            Testing Android Audio Issues - GH#377
          </Text>
        </View>

        <Rive
          url="https://public.rive.app/community/runtime-files/9816-18761-ping-pong-audio-demo.riv"
          fit={Fit.Contain}
          alignment={Alignment.Center}
          autoplay={true}
          style={styles.animation}
        />

        <View style={styles.statusContainer}>
          <Text style={styles.statusText}>
            Audio should be playing continuously
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeAreaViewContainer: {
    flex: 1,
    backgroundColor: '#fff',
  },
  container: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  infoContainer: {
    marginBottom: 20,
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
    width: '100%',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 8,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
    marginBottom: 12,
    textAlign: 'center',
  },
  instructions: {
    fontSize: 13,
    lineHeight: 20,
    color: '#333',
  },
  animation: {
    width: '100%',
    height: 400,
    backgroundColor: '#f9f9f9',
  },
  statusContainer: {
    marginTop: 20,
    padding: 10,
    backgroundColor: '#e8f5e9',
    borderRadius: 8,
    width: '100%',
  },
  statusText: {
    fontSize: 14,
    color: '#2e7d32',
    textAlign: 'center',
    fontWeight: '500',
  },
});

Video with 10.2.1 https://github.com/user-attachments/assets/e67c5580-0b41-4a8d-b709-1ea0da6a39e8

[johnsnaply]

@mfazekas which version of rive-react-native did you use? Also, the issue happens in newArch disabled.

[mfazekas]

@johnsnaply ok sorry it's my fault. I've tried with #main but android sdk was pinned to 10.2.1 so that works and the current one doesn't 10.4.5. So it's indeed a upstream rive-android issue

[johnsnaply]

Is there any progress on that?

[nshurtz]

I submitted a PR that should hopefully be merged soon.