I'm developing an application that must play multiple sound. Well, I'm using react-native-sound library. It's awesome but, my sounds must be played when the user press TouchableOpacity element. However, when I'm testing on my Android device, I can play sounds when I'm pressing a button, good, but when I want press two buttons together, nothing append or only one sound was played.
An example of my code :
export default class PayerButton extends Component {
render () {
return (
<TouchableOpacity
onPress={ this.playTheSound(this.props.mySound) }
>
<Text>Play this sound</Text>
</TouchableOpacity>
);
}
playTheSound() { ... }
}
In my App component, I have two elements PlayerButton. I want press element together and they play there sound together for example.
Thank you for your help :)
Enjoy.
Related
I am building an app that has three tab navigation.
Each tab wraps a WebView and displays the uri webview is directing.
So, I have three WebViews running in an app.
/* each screen wraps a webview */
/screens
-HomeScreen
-ChatScreen
-ProfileScreen
In each screen, I have back button mapped to call webviewRef.current.goBack() just like below.
useEffect(() => {
const handleBackButtonPress = () => {
if (webviewRef.current) {
webviewRef.current.goBack();
return true;
}
return false;
};
BackHandler.addEventListener("hardwareBackPress", handleBackButtonPress);
return () =>
BackHandler.removeEventListener(
"hardwareBackPress",
handleBackButtonPress
);
}, []);
return (
<Screen>
<WebView
source={{
uri: "http://0.0.0.0:3000/",
}}
ref={webviewRef}
onMessage={handleMessage}
injectedJavaScript={script}
/>
</Screen>
);
It works seamlessly in each webviews, but the problem happens when I move on to different screen(or webview). To help you grasp, I will list the steps to generate the problem I faced.
I open the app and view HomeScreen webview.
I look around in HomeScreen webview (I can use back button)
I decide to move to ProfileScreen and touch profile icon in the tab navigation
I am on ProfileScreen webview.
I look around in ProfileScreen webview (I visit links)
I touch hardware back button and it does not work. (to elaborate, it does nothing.)
My guess is:
the cleanup function in useEffect is somehow removing 'hardwareBackPress' event..
advice appreciated.
just like up, i have problem with onClick it doesnt work on mobile.
{buttonSkills.map((item, i) =>
<Button key={i} variant={item.variant} onClick={() => filterIcons(`${item.className}`)}>{item.name}</Button>
)}
you may see this https://retupk.github.io/presentation/#/
click F12 and see that on mobile buttons ("Wszystko", "Front-End" etc..) in section skills at the very bottom doesnt work
here is full code of my skills section: https://github.com/RetupK/presentation/blob/master/src/containers/skills/Skills.js
Anybody know why my onClick doesnt work on mobile?
You have a container with the following css over the entire page, which gets all the click events:
.header-main-container {
z-index: 9999
}
If you'll remove it you clicking would work.
Working on a Project and stuck in an Issue:
Hardware Back Button Reloading Application (I am using Angular Router in this application).
My Code to Exit Application:
ionViewDidEnter(){
this.subscription = this.platform.backButton.subscribe(()=>{
navigator['app'].exitApp();
});
}
ionViewWillLeave(){
this.subscription.unsubscribe();
}
While same logic Working in other applications. but in this application its reloading the application not exiting it.
P.S: i have also tried it to put in platform.ready() but no luck.
With IONIC 4, there is new method subscribeWithPriority developed to handle race between soft & hard back button. Try modifying your code like below:
this.platform.backButton.subscribeWithPriority(1, () => {
navigator['app'].exitApp();
});
subscribeWithPriority() stops the propagation of the event after its execution and if we subscribe with high priority and execute our prefered navigation instead of default one then it is going to work as you want.
More reference docs for details:
https://github.com/ionic-team/ionic/commit/6a5aec8b5d76280ced5e8bb8fd9ea6fe75fe6795
https://medium.com/#aleksandarmitrev/ionic-hardware-back-button-nightmare-9f4af35cbfb0
UPDATES:
Try using this new version of exitApp cordova plugin. I haven't
tried myself but looks promising from popularity.
Also try to empty the page stack from Navcontroller or go to your home screen, seems like that's causing the reload for app with sidemenu's & tab pages... this.navCtrl.pop() / this._navCtrl.navigateBack('HomeScreen'), and then call exitApp.
NOTE: Tabs & SideMenu as those have its own routing module does create lot of complexity with app navigation.
Solved:
As Mention by #rtpHarry template of SideMenu / Tabs have History which leads application to Reload it self on root page. i was able to solve this by clearing History.
ionViewDidEnter(){
navigator['app'].clearHistory();
}
on Your Root Page just Clear your history and your Hardware Back Button will close the Application instead of Reloading it.
Do you have a sidemenu in your app? I'm just curious because this seems to be when I get this problem as well.
If you look in your inspector, you will see that window.history has a length of 1.
I don't see it in some of my apps, but the app that I have a side menu setup acts this way - on the homepage if you press back the screen goes white then it reloads the app.
Like I say, looking in the inspector shows that there is a history to step back to, which it is trying to do, and whatever that history step is, it just pushes it forward back to the homepage, which made me wonder if it was the sidemenu setting up its own control of the navigation system.
I've probably said some poorly worded terminology but as I haven't solved this myself I thought I would just let you know what I had found... hopefully it helps you move forward.
In my scenario, I wasn't even trying to do the exit on back code - I just noticed that the app would appear to "reboot" if I kept pressing back.
This explain the solution on Ionic 5 (and 4.6+ too I think).
private backButtonSub: Subscription;
ionViewDidEnter() {
this.backButtonSub = this.platform.backButton.subscribeWithPriority(
10000,
() => {
// do your stuff
}
);
}
ionViewWillLeave() {
this.backButtonSub.unsubscribe();
}
also keep
IonicModule.forRoot({
hardwareBackButton: true
}),
to true (default) in your app.module.ts
Sources:
https://www.damirscorner.com/blog/posts/20191122-CustomizingAndroidBackButtonInIonic4.html
The Doc
I am trying to create a playlist component, which has a this.state.playlist consisting of multiple mp4 video files, and the source of the Video tag is this.state.playlist[0]. Ideally when one video finishes, this.state.playlist shifts the first component and pushes it to the back, effectively moving onto the next component. However, it seems like the next video is starting at the same time the first video ends.
So for instance: if I have video A ( 1 min and 10 seconds) , video B (1 min and 40 seconds), and video C (2 minutes and ten seconds) . In this example, video A will play as normal, video B will start at 1 min and 10 seconds, and video C will start at 1 minute and 40 seconds. Here is an example expo.snack/Online Repl if you would like to test out the code:
https://snack.expo.io/By7nzgmtW
You can imagine this is especially an issue when it comes to videos that are the same amount of time as it seemingly just skips over them in general (this has been happening to me and I’ve been struggling the past couple days trying to figure out why the player seems to be skipping over some videos).
Also note: in my own code for my full repo (I would share it but its quite lengthy and I think the above snack/repl is much more illustrative of the issue) I use the require syntax because the video files are local, so let me know if theres any differences between the require/uri syntax in your solutions please.
Also, If you’re going to link me to the docs and a specific portion I would highly appreciate an example snack/repl/code ideally using my code as a basis, as I’ve read through the docs for the AV/Video stuff quite a few times and haven’t figured out a solution.
Thank you.
Here is the full code from the repl/expo.snack if you don't want to go to the link:
import React, { Component } from 'react';
import { View } from 'react-native';
import { Video } from 'expo';
export default class App extends Component {
constructor(props){
super(props);
this.state = {
playlist: [
{src: 'http://wsiatest.bitballoon.com/videotrack.mp4', name: 'dancers'},
{src: 'https://mohammadhunan.herokuapp.com/coding.mp4', name: 'portfolio'},
{src: 'http://www.html5videoplayer.net/videos/toystory.mp4', name: 'toys'}
]
}
}
videoUpdated(playbackStatus){
if(playbackStatus['didJustFinish']){
this.playNext();
}
}
playNext(){
// playNext() method takes the first item in the this.state.playlist array and moves it to the back
console.log('video did just finish');
let playlist = this.state.playlist;
let temp = playlist[0];
playlist.shift();
playlist.push(temp);
this.setState({playlist,})
}
render() {
return (
<View>
<Video
onPlaybackStatusUpdate={(playbackStatus)=> this.videoUpdated(playbackStatus)}
resizeMode="cover"
source={{uri: this.state.playlist[0].src}}
useNativeControls
rate={1.0}
volume={1.0}
muted={false} style={{height:180,width:240}} />
</View>
);
}
}
Edit:
Some extra info:
I used the create-react-native-app generator
expo version #20.0.0
react version #16.0.0-alpha.12
react native version ^0.47.0
This is an android app I'm building (though this is most likely irrelevant as this code is pretty much interchangeable with ios)
I'm making a "joystick" app on android for my RC-car and I want be able to press two or more buttons at the same time to allow more precise control.
But, right now I can only press one button and the others do not respond until I release pressed button. They are even do not change their opacity, so it's not a problem in the app's logic. And click handlers also do not perform time critical operations, so I don't think that UI is just stuck.
Here's the code for my buttons:
<R.View>
{this.btn(Car.Transmission.Forward, 'Forward')}
</R.View>
<R.View flexDirection="row">
{this.btn(Car.Transmission.Left, 'Left')}
{this.btn(Car.Transmission.Stop, 'Stop')}
{this.btn(Car.Transmission.Right, 'Right')}
</R.View>
<R.View>
{this.btn(Car.Transmission.Backward, 'Backward')}
</R.View>
btn(transmission, text) {
return <MyButton
onPressIn={() => {
this.drive(transmission)
}}
onPressOut={() => {
this.drive(Car.Transmission.Neutral)
}}
text={text} />
}
export class MyButton extends React.Component {
render() {
var {onPressIn, onPressOut, text, disabled} = this.props
let textStyle = disabled ? [style.button, style.disabled] : [style.button]
return (
<R.TouchableOpacity onPressIn={onPressIn} onPressOut={onPressOut} disabled={disabled}>
<R.Text style={textStyle} >{text}</R.Text>
</R.TouchableOpacity>
)
}
}
Maybe I should not be using TouchableOpacity?
EDIT: I've almost done it, but... when I receive touch location in onPanResponderMove callback my nativeEvent.locationY value jumps like a crazy (161, 0, 163, 11, 29, ...) when I click at the same point on the screen... First, I thought this is because of USB-cable and charging, but over Wi-Fi I get the same results. That's strange. Any ideas?