I am working on a React Native application which which uses slider components. These Slider components currently are not very accessible. When focused by a Screen Reader or Talkback the only thing that is read out loud is the accessibility label.
I would like to try and implement a slider that can behave like sliders in default iOS, where moving the slider will cause VoiceOver to constantly read out the value of the slider as it's being adjusted. Is it possible to trigger VoiceOver or Talkback directly in a function so I could implement something like this
So you're not using a native iOS UISlider or UIProgressView? You can announce notifications in Voiceover using UIAccessibilityPostNotification and pass it a string or an object.
Android usually uses a <SeekBar> for sliders. If not using those, then announcements can be made via android:accessibilityLiveRegion or announceForAccessibility
Related
I am very new to programming and I am currently using react native to make android applications. Now I am just testing out my code in my own physical smartphone. I want to know if it is more apt to use '%' unit in dimensions to properly scale apps in different phone sizes.
It depends upon your UI like how your UI is look like, But general approach is use react native default view property like flex, flexbox which have different property as per your UI so it will scale your UI in any point upto 99% of devices. Some of devices may very depend on resolution and screen height so for that you can use % in width and height but remember only specific condition not every where .
General View style you can refer this
https://reactnative.dev/docs/layout-props
https://reactnative.dev/docs/image-style-props
https://reactnative.dev/docs/shadow-props
https://reactnative.dev/docs/text-style-props
https://reactnative.dev/docs/view-style-props
For simple login screen UI you can refer this example so you can get idea how react native UI we can create generalize
https://code.tutsplus.com/tutorials/common-react-native-app-layouts-login-page--cms-27639
I have a screen with WebView (react-native-webview) which has scrollable content. If user continues scrolling after reaching the end of WebView, I want to take user to a different screen with a swipe up animation. With WebView's onScroll function property, I am able to determine if the user has reached end of content or not. But I am not able to take user to a different screen with an animation effect.
Since WebView acts different for android and ios platform (you can continue scrolling even after reaching end of content on ios), I had to use PanGestureHandler to identify if the user is performing swipe up action after reaching end of web content. But when I manually try to navigate user to a different screen, I am unable to create swipe up effect similar to one in GIF below.
I am using react-navigation v5 in my app.
I have already tried using react-native-swiper. It does not work well in Android because it internally uses Scrollable and WebView stop scrolling inside a Scrollable component.
I am using custom HTML content here, so replacing WebView is not really a choice. Is there a way to utilize Stack Navigator to create such an effect?
Thank you.
I'm looking for a solution, if possible a library or a custom component, for React Native, without Expo.
I need to create a video frame that is movable in the screen, up and down, and cover the content. I also need to make it possible to click on the content behind it.
Another difficulty is that I need it to stay up on all screens during navigation.
I first tried to use reanimated-bottom-sheet with some increments, but the content behind the bottom is not clickable. Also, to make it available on all screens I needed to put in at the same level as React Navigation's BottomTabNavigator and it covers the tab bar too even with a zIndex.
I also tried to use modals, but I'm relatively new to React Native and couldn't find how to make the background touchable as well as making it movable.
I guess I need to make a view with absolute positionning and learn Reanimated, unless you have a simpler idea?
Thanks
My goal is to program a game assistant - app that runs on the background and does the following:
1) takes screenshot programmatically https://aboutreact.com/take-screenshot-programmatically/
2) analyzes some pixels of it
3) creates programmatical screen touches based on the screenshot
But I am not sure whether it is possible to use react native for creating screen touches. Any ideas? It appears to be possible in java, at least:
How to programmatically trigger the touch event in android?
Thank you!
It is possible to handle screen touches in react native using panResponder. You can more about it here:
https://facebook.github.io/react-native/docs/linking-libraries-ios
Also react-native have animated view that could be coupled by panResponder and I think it is applicable for you because you want to develop a game. You can read about react-native animations here:
https://facebook.github.io/react-native/docs/animations
Beside all of this if your game have many motions and is dependent to screen touches react-native maybe is not a good choice. Because react-native performance in such applications would be low. So I recommend be careful about the tech that you want to use.
I am writing a custom component for a Windows 8.1 tablet application our team are mostly developing in React Native.
I've realised that some of the custom code we need doesn't naturally belong to any specific UI element. For example, we want a button to trigger the native Camera UI dialog (as in this CameraUICapture element sample). However, there's no reason this would necessarily be triggered from a button. It could be a callback from something else, it could be a click event on an image. I don't want to lock the function calls to a specific UI piece.
All the tutorials and demos I have managed to find so far for React Custom Components are explicitly for UI pieces, and require implementing a React View manager subclass to interact with React when the piece is loaded. Is this the only way to write native code accessible from a React page? Do I need at least a dummy UI element even to hook into functional code in the native layer, or is there another way?
It turns out the phrase I'm yearning for is "Native Modules".
iOS:
https://facebook.github.io/react-native/docs/native-modules-ios.html
Android:
https://facebook.github.io/react-native/docs/native-modules-android.html
Windows:
https://github.com/Microsoft/react-native-windows/blob/master/docs/NativeModulesWindows.md