If, in my React Native application, I have some Java code like this:
public class MainActivity extends ReactActivity {
#Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KEYCODE_BUTTON_16) {
rfidScanning.startScanning();
return true;
} else {
return super.onKeyDown(keyCode, event);
}
}
The contents of onKeyDown will be called unless I have a React Native Modal component visible.
Why does the modal visibility change this, and how can I make it fire anyway or do something equivalent (such as capturing the event somewhere else in my Java code)?
Actually I think I found the problem. It looks to me like the relevant modal code is here:
https://github.com/facebook/react-native/blob/b531612b2c917e1f2bd6bb37bf854fe51e658b36/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java#L221
They actually handle the onKeyUp and not the onKeyDown. I confirmed this by verifying in my own code that onKeyUp fires with the modal open, but onKeyDown does not.
Wow.
I created an issue document for the bug here:
https://github.com/facebook/react-native/issues/32827
Related
I am checking the livewire-ui/modal as described in this github page
The modal is showing properly when the open button is clicked but it never closes whatever the mean used is, e.g. :
clicking away
using the escape touch
using a close button with this code
<button wire:click="$emit('closeModal')">No, do not delete</button>
usinge a close button with this code
<button class="button-link" wire:click.prevent="close()"> Poster</button>
and having the close function in the modal like this:
<?php
namespace App\Http\Livewire;
use LivewireUI\Modal\ModalComponent;
class Hello extends ModalComponent
{
public function render()
{
return view('livewire.hello');
}
public function close(){
$this->closeModal();
}
}
The functioning was due to the fact that I had 2 alpine in the page
One as directly in the page (CDN) and the other inside app.js (require 'alpinejs'). I just kept require 'alpinejs' and now it works.
I want to create a method or a class in React Native that preform a background operation while opening a progress dialog then hides the progress dialog when the background operation is done.
Logically this would be done using a call back :
export const doWithProgressDialog = async (callback) =>
{
// show progress dialog
await callback();
// hide progress dialog
}
However as you can see , what I'm encountering is that i have to return a progress dialog component component before the callback is called so that the progress dialog would be rendered.
Even if i make a component class that renders a progress dialog instead of a function , i will have the same issue in render method inside component class.
How to make your app respond gracefully on keyboard appearance?
So far I have tried keyboard-aware-scroll, keyboardspacer and keyboard Avoiding view
Keyboard avoiding view didn't help at all I have tried it several times but it doesn't even respond to keyboard appearance.
Keyboardspacer gracefully works but in many cases it destroys the whole UI by crushing other view
keyboardaware scroll works when there is no scroll in the app but for long forms it doesn't work.
android:windowSoftInputMode="adjustPan" only works for android
What are the other options that we have for the app to gracefully respond when keyboard appears.
What do you use in your apps?
If none of these libraries does what you need, you can adjust your view manually by using the Keyboard module (docs at https://facebook.github.io/react-native/docs/keyboard)
With it you can react when you know a keyboard opens or closes, like so:
import * as React from 'react';
import { Keyboard } from 'react-native';
class MyComponent extends React.Component {
componentDidMount() {
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
}
componentWillUnmount() {
this.keyboardDidHideListener.remove();
this.keyboardDidShowListener.remove();
}
keyboardDidShow = () => {
//Fix your view for when a keyboard shows
};
keyboardDidHide = () => {
//Fix your view for when a keyboard hides
};
//Rest of component...
}
For my projects I use react-native-keyboard-aware-scroll-view as well as KeyboardAvoidingView (try to play with behavior prop, it depends on your styling).
Take a look in Android configuration section in docs of react-native-keyboard-aware-scroll-view. I think it's something that you're looking for.
You can find following usefull answer related your question.
Q.How to change the Softkeyboard “Enter” button Text in android?
https://stackoverflow.com/a/53098939/6477946
Q. How to close or hide SoftKeyBoard
https://stackoverflow.com/a/53077131/6477946
Is it possible to add the prop nativeID to a view like follows:
<View nativeID="viewId">...</View>
And then use that id to locate the view in my native android and iOS code so I could apply some native method on it. If it is then an example would be appreciated.
Yes it's possible. There is two situations here, if you are using NativeModules or Native Component.
Case 1: NativeModules.
I presume in this case, you want to locate view in native side after a button click in JS side. I also presume you know how to create NativeModules in react-native. Ok, at first we need to find the rootview where our view is binded and find that view using helper classes provided by React Native.
Code:
#ReactMethod
public void locateView(String nativeViewId)
{
Activity activity = context.getCurrentActivity();
activity.runOnUiThread(new Runnable() {
#Override
public void run()
{
View rootView = activity.getWindow().getDecorView().getRootView();
View requiredView = ReactFindViewUtil.findView(rootView, nativeViewId);
/** requiredView is your JSX view with nativeID found on Java Side, now you can apply your preferred native functions to it. **/
}
});
}
If you are using NativeComponent then you can easily find the rootView using following code:
Code:
View rootView = getRootView();
And the remaining code is same as using NativeModules. Hope this helps you, if you have any questions feel free to ask me.
You can use this after add nativeId to a View:
ReactFindViewUtil.addViewListener(onViewFoundListener);
private ReactFindViewUtil.OnViewFoundListener createOnViewFoundListener() {
return new ReactFindViewUtil.OnViewFoundListener() {
#Override
public String getNativeId() {
return "NativeID";
}
#Override
public void onViewFound(final View view) {
// some code
}
};
}
Yes, it's possible. Suppose you have a view in js,
<CustomView> <View nativeID={'childView'}> <CustomView>
On your android native module call ReactFindViewUtil.findView() with the view container and native id
ReactFindViewUtil.findView(CustomView, "childView")
The ReactFindViewUtil.findView() is found in com.facebook.react.uimanager.util
I believe there is similar util on iOS as well. I have not explored it.
I'm programming a react native game app for blind kids to help them with maths. There is a game in which they have to count how many animals are in the screen; when an animal is pressed it emits a sound.
In react native there is the onPress property of <TouchableWithouFeedback /> which allows me to play the sound, but when it comes to visually impaired users I have to announce that there is an animal instead of just playing the sound.
How can I know if a certain View is focused by the screen reader and call a function to do that?
There doesn't seem to be any way to react to the screen reader focusing on a particular object. Instead, you need to use the accessibilityLabel property on each animal object.
<TouchableOpacity accessible={true} accessibilityLabel="This is a tiger">
...
</TouchableOpacity>
When the user selects this object with say, a single tap, they will hear "This is a tiger." Then, after double-tapping the screen, they should hear the associated sound that all other users would normally hear.
I don't think there's really much more you can do than this with the given APIs. Not sure if the limitations are at the OS SDK or React Native level.
Check out the React Native docs on Accessibility for further details.
There's no way to detect, currently, if an element has VoiceOver or TalkBack focus. (I doesn't implement UIAccessibilityFocus neither TYPE_VIEW_ACCESSIBILITY_FOCUSED for Android
The only way to solve this is by developing a native module for images adding native listeners for accessibility events. This means in Android for example:
public void installAccessibilityDelegate() {
setAccessibilityDelegate(new AccessibilityDelegate() {
#Override
public boolean onRequestSendAccessibilityEvent(ViewGroup viewGroup, View child, AccessibilityEvent event) {
if (event.getEventType() == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED) {
sendReactNativeEvent("start");
return false;
}
if (event.getEventType() == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUS_CLEARED) {
sendReactNativeEvent("end");
return false;
}
return super.onRequestSendAccessibilityEvent(viewGroup, child, event);
}
});
}
My group developed a ios/android component which exposes those events for an image which is currently distributed via npm: https://www.npmjs.com/package/react-native-accessible-image