I'm using rmc-tabs for tab component in React Native.
I'm using video component and want to pause the video when I move to other tab, but I don't know how to do this.
How can I get the blur event in rmc-tabs or are there any other ways to handle blur event in React Native video or view?
if you are using createTabNavigator or createBottomTabNavigator you can use NavigationEvents within the screens inside TabNavigator which allow you to listen to
onWillFocus : before focusing a tab;
onDidFocus : after focusing a tab;
onWillBlur : before losing focus on a tab;
onDidBlur : after losing focus on a tab;
Related
I have built a FormInput component in react native by extending the textInput component. In the input container I have put a pressable x icon, so the user can clear the input. The problem is that when I put my form inside a scrollView, the pressable icon does not function. The same behavior takes place when I use a pressable icon to hide/view the password in the password input field. What is happening and what can I do to fix this?
I'm having trouble force focussing a react native TextInput field.
It's focused when the page loads with autofocus={true}.
But after blurring I would need to press the text input field, but that's hidden because of design reasons. Is there a way to document.getElementById("myText").focus(); in react native that I can call after onBlur()?
Cheers.
You need to assign the TextInput field to a ref like this:
<TextInput ref={ref => (this.ref = ref)} />
Then you can programmatically focus it by running focus() on it, like so:
this.ref.focus();
Here's a little Snack where I run the focus/blur function when pressing a button:
https://snack.expo.io/#marcelkalveram/auto-focus-input-field-using-ref
It should be easy to replicate this for your navigation scenario.
In case you're using react-navigation, this is the part of the docs you'll be interested in: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
My react component hierarchy looks like
StackNavigation
- MainScreen
- List
- Row
- Button
My usecase involves go to a new screen on click of the button. My main screen receives react-navigation's navigation props. How do I pass it down to my button in a sane manner.
You'd better pass a callback to your button through all the hierarchy and call it when button is pressed. Afterwards when you know which button is pressed (on which row) you can navigate to necessary screen from your MainScreen.
I would like to know if there is a way to show keyboard always if it focuses out from the TextInput in react native.
You can wrap your TextInput by a ScrollView and then use the keyboardShouldPersistTaps='handled' prop in ScrollView to avoid dismissing the keyboard and handle the keyboard dismiss by using Keyboard.dismiss() function in somewhere else.
Read this for more documentation.
I couldn't figure out a way to scroll swiper when a button pressed inside a drawer.
To be exact: One component has a full screen swiper. When user clicks on hamburger button, drawer shows up with an array of swiper datasource items. I would like to navigate to clicked datasource item inside my component. Swiper already has a scrollBy function for this. I just need to know how can I possibly trigger my swiper to scroll x indexes.
I'm using Redux model in my application. I've tried to pass the reference of swiper via reducers but it just seemed wrong.