I'm trying to add a sound effect to my ** splash screen ** with react-native, which I already did with ** react-native-bootsplash **, but I don't know how to add a sound effect.
Thanks in advance, greetings ...
You can use react-native-sound-player to add sound to your splash screen.
On iOS, drag and drop sound file into project in Xcode. Remember to check "Copy items if needed" option and "Add to targets".
On Android, put sound files in {project_root}/android/app/src/main/res/raw/. Just create the folder if it doesn't exist.
import SoundPlayer from 'react-native-sound-player'
try {
// play the file tone.mp3
SoundPlayer.playSoundFile('tone', 'mp3')
// or play from url
SoundPlayer.playUrl('https://example.com/music.mp3')
} catch (e) {
console.log(`cannot play the sound file`, e)
}
Related
The problem is when I tap with Detox, the button is not tapped. However it can be tapped if I just click at it.
version of Detox: 16.8.2,
version of React Native: 0.57.1
Solved.
This happened because I used device.openURL({url: 'https://...' }) previously to open the app from a deep link.
Instead, it worked after opening a new instance of the app with a deep link in argument: device.launchApp({newInstance: true, url: 'https://...' });
After this, the interaction can be performed.
It looks like a bug with the method device.openURL()
I have integrated following library to my react native project to play audio from URL.
https://www.npmjs.com/package/react-native-sound-player
It is working fine, But, No media control is showing (play/pause/progressbar)
It is just playing audio.
import SoundPlayer from 'react-native-sound-player'
try {
// or play from url
SoundPlayer.playUrl('https://example.com/music.mp3')
} catch (e) {
console.log(`cannot play the sound file`, e)
}
Any suggestions?
Looking at the docs it doesn't seem like there is a UI component in that library.
You probably have to render the buttons yourself and attach an onPress function on them.
Like:
<Button
onPress={()=>SoundPlayer.playUrl('https://example.com/music.mp3')}
title={"Play"}
/>
On Android, Landscape-Mode works like a charm, but on IOs I've found following issue:
Mobile-Device is in Landscape-Mode:
I click on an Image (Touchable-Opacity set the state modalShow
The Landscape-Mode will be switched to Portrait-Mode, after that the Modal appears
If I close the Modal, the App switch back to Landscape-Mode.
Any Idea, why this only happend on Iphone, but working well on Android?
You have to add this (or only some of them like you're needs) to your Modal, which encapsulate the Image-Zoom Component:
supportedOrientations={
[
'portrait',
'portrait-upside-down',
'landscape',
'landscape-left',
'landscape-right'
]
}
Consider using a library to manage the screen rotation https://github.com/yamill/react-native-orientation
I'm developing a Safari App Extension inside a macOS app. When a user installs this app, the extension is added to Safari, but it's disabled by default. We can detect the state of extension by using SFSafariExtensionManager class via its getStateOfSafariExtension method.
Now I want to enable the extension state programmatically if it is disabled. How can I achieve that?
Or do anyone have any idea where the preferences / app extensions settings are stored in macOS?
You can create a button such as "Open extension preferences" to show Safari preferences directly for your extension then the user could enable it.
The code for your app:
import SafariServices
func enableExtension () {
SFSafariApplication.showPreferencesForExtension(withIdentifier: YOUR_EXTENSION_IDENTIFIER) { (error) in
NSLog("Error \(String(describing: error))")
}
}
SFSafariApplication could be used in Cocoa app only (not extension).
I am developing a React Native app. It is a very simple app. I just have to load a website on a webview, which is perfectly done. but my client wants something which I am not sure how to do.
There are some social media buttons on the website. like facebook, twitter etc. so my client wants me to open social media app while user tap on them. suppose user tapped on facebook button then the facebook app will load.
I badly need to know the solution. please help me. thanks in advance.
Make use of onMessage.
Code is untested but you should get the gist of what it's trying to achieve.
Webpage:
function facebookClick() {
window.postMessage("Facebook button done got clicked");
}
var _fb_button = document.getElementById("your-facebook-button");
_fb_button.addEventListener("click", facebookClick, false);
WebView:
[...]
import { Linking } from 'react-native';
[...]
<WebView
onMessage={(event) => {
let message = event.nativeEvent.data;
if(message.includes("Facebook button done got clicked"))
Linking.openURL('fb://page/PAGE_ID');
}}
[...]
You'll have to check out the current protocol's details of each of the social apps you're trying to open via deeplink. Once you've done that, you can further improve your code with Linking.canOpenURL