How to play background music in react native expo? - react-native

I really dont know how to play background music in react native expo ..
I tried lot to add music .. since Im beginner I couldn't found
please help me

It will work on Android but will not work on iOS with expo. Need to add the following code in the app.json -
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.yourcompany.yourappname",
"buildNumber": "1.0.0",
"infoPlist": {
"UIBackgroundModes": [
"audio"
]
}
},
After that, You have to create standalone application of iOS and it will work on standalone application.

You can try this library it take mp3 from bundle or you can stream: https://github.com/react-native-kit/react-native-track-player#readme

This feature is not supported yet By Expo APIS
You can check the current state of this Expo feature request
https://expo.canny.io/feature-requests/p/audio-playback-in-background

Related

iOS Dir Not Found (but it exists) and React Native Config shows settings as null

I wanted to test my react native project on iOS (my app works correctly for Android). I do have an iOS folder in my project directory, but I never did anything for iOS in the past. While I was on 0.59, I have since upgraded successfully to React 0.69 and it runs in Android again. Now I would like to try iOS and I typed
react-native run-ios
and the output was:
error iOS project folder not found. Are you sure this is a React Native project?.
The thing is, there is an iOS folder, and lots of files in there as well. After some investigation, I believe my configuration is not setup right. I typed the following command:
react-native config
And here is a snippet of that output.
"healthChecks": [],
"platforms": {
"ios": {},
"android": {}
},
"project": {
"ios": null,
"android": {
"sourceDir": "<my path is here and valid>",
"appName": "app",
"packageName": "com.sensebot"
}
}
I would imagine the fact ios is null is the problem! Why is this null, and how do I configure it? I read you can override this configuration with a react native config file. I don't have one in my directory. Do I need that? If not, where do I configure this, and how is it that it was configured correctly for Android, but not iOS?
Thank you in advance for any help!

React Native Vision Camera using Expo

I have an Expo managed project in which I would like to use the React Native Vision Camera. The Expo Camera does not provide enough functionalities for my app.
After following the Getting Started, I get the following errors when running the app in my web browser:
I have imported the Camera module using
import { Camera } from 'react-native-vision-camera'; and adapted my app.json to include
"plugins": [
[
"react-native-vision-camera",
{
"cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera."
}
]
]
React Native Vision Camera doesn't have web support for now.
https://github.com/mrousavy/react-native-vision-camera/discussions/892

Can't Open My App in Production | DeepLink React Native | React Navigation v5/v6

hope you guys have a great day!
I'm in the middle of learning deeplink in react native, currently I've managed to open my app via cmd using npx uri-scheme open myapp://inv/12321312 --android, and the page I'm going to is also already open along with the :id I included in the link
now i have released my app (not yet uploaded in playstore - but just run npx react-native run-android --variant=release), then why when i access myapp://inv/12321312 link in my browser, my app doesn't open?
i'm using Google Chrome in my android device
please help:(
in app.json add intentFilters for android
if you are using expo
{
"expo": {
"scheme": "myapp",
.....
"android": {
...
"intentFilters": [
{
"action": "VIEW",
"autoVerify": true,
"data": [
{
"scheme": "https",
"host": "myapp.com",
"pathPrefix": "/"
},
{
"scheme": "myapp",
"host": "*",
"pathPrefix": "/"
}
],
"category": [
"BROWSABLE",
"DEFAULT"
]
}
]
...
},
}
}
or if you are using react native CLI
https://developer.android.com/training/app-links/deep-linking#adding-filters
after that generate APK for Android
and send https://myapp.com/ in message whatsapp
click this link from chat
it's work ^^
update : (test)
ios => after build ipa for test ios run this link in your browser phone when app installed : myapp://
android => after build apk for test android send in this link in message (email , whatsapp, ...) and click link for test (after installed app)

Expo UIBackgroundModes audio is not working on iOS but works fine on Android

Does anyone have the same issue and able to get around?
Here is Expo doc that explains how to enable audio to be played in the background as it shown below. However, it still does not play the audio in the background when phone goes to sleep.
"expo": {
"ios": {
"infoPlist": {
"UIBackgroundModes": [
"audio"
]
}
}
}
It seems to be the issue from Expo but there's no activity on Github issue page.

Convert Expo project to Original React Native project

I did yarn run eject to eject but it gave me this warning
Warning! We found at least one file where your project imports the Expo SDK
I know I have some modules which use Expo API like this -
await Expo.Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
});
Now I want to convert this to React Native Components so that I can eject without any errors so that I get
index.android.js & index.ios.js in the root folder like we do while using react-native init example
After 4 hours, I got the answer..
Had to install exp using npm i -g expo & then used expo eject to detach the project
Also I added some fields in app.json for it to work as follows
{
"expo": {
"name": "Project",
"slug": "project",
"sdkVersion": "18.0.0",
"privacy": "public",
"android": {
"package": "com.example.project"
}
}
}
Docs are given here
SideNote: It doesn't create the folder structure like when done using react-native init... It creates android & ios folders respectively.