Hi I try 3 libaries(react native -(sound,sound player,play sound) to play sound but I can not play a sound onPress Togglebutton
It gives this error
![The error]()
App.js
import React, { useState } from 'react';import { View, Text, FlatList, SafeAreaView, TouchableOpacity, ImageBackground} from 'react-native';import { PlaySound, StopSound, PlaySoundRepeat, PlaySoundMusicVolume } from 'react-native-play-sound';//FFE990 FFD488 FFE493 E7CE85 E7C287const ToggleButton = (props) => { const [isPressed, setIsPressed] = useState(false); const { sample, id, onPress, item1, item2 } = props; const text = isPressed ? item2.sample2 : item1.sample; return (<TouchableOpacity onPress={() => { setIsPressed(!isPressed); onPress && onPress(); PlaySound('./john.mp3'); }} style={{ flex: 1 }}><View style={{ flex: 1, width: '100%', height: 129, backgroundColor:'#E7C287', borderWidth: 1, marginTop:36, justifyContent: 'center', alignItems: 'center', padding:8 }}><Text style={{ fontSize: 14 }}>{text}</Text></View></TouchableOpacity> );};const ToggleExample = () => { const data = [ {sample:"Mouse",id:"0"}, {sample:"Mouse2",id:"1"}, , , ]; const data2 = [ {sample2:"Disney",id:"0"},{sample2:"Sindirella",id:"1"},]; return (<ImageBackground source={require('./assets/papi2.jpg')} style={{ flex: 1, width:'100%', height:'100%' }}> <SafeAreaView style={{ flex: 1 ,alignItems: 'center',}}><Text style={{marginTop:21, padding:16, marginBottom:27, fontSize:28, alignItems: 'center', }}>Post</Text><FlatList data={data} renderItem={(entry) => { const { item } = entry; return (<ToggleButton item1={item} item2={data2.filter((_item) => _item.id === item.id)[0]} /> ); }} contentContainerStyle={{ padding: 20 }} ItemSeparatorComponent={() => { return <View style={{ flex: 1, height: 10 }} />; }} keyExtractor={(entry, index) => index.toString()} /></SafeAreaView></ImageBackground> );};export default ToggleExample;
That's my code on press I try to play "john.mp3" but now it says
"canOverrideExistingModule=true" in the Main activity. I searched, tried to override this func but it still says same
"Native module SoundManager tried to override,Check getPackages() ..."
MainApp.java
package com.post42;import android.app.Application;import android.content.Context;import com.facebook.react.PackageList;import com.facebook.react.ReactApplication;import com.soundapp.SoundModulePackage;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.soloader.SoLoader;import java.lang.reflect.InvocationTargetException;import java.util.List;public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); return packages; } @Override protected String getJSMainModuleName() { return "index"; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); } /** * Loads Flipper in React Native templates. Call this in the onCreate method with something like * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); * * @param context * @param reactInstanceManager */ private static void initializeFlipper( Context context, ReactInstanceManager reactInstanceManager) { if (BuildConfig.DEBUG) { try { /* We use reflection here to pick up the class that initializes Flipper, since Flipper library is not available in release mode */ Class<?> aClass = Class.forName("com.post42.ReactNativeFlipper"); aClass .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) .invoke(null, context, reactInstanceManager); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (NoSuchMethodException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } } }}
How can I fix it.Thank you
