react native what does nestedScrollEnabled do? - react-native

This property available on the ScrollViewProps or components that derive props from it (SectionList, FlatList, VirtualizedList) is bugging me ever since I met the docs the first time.
The description only says Enables nested scrolling for Android API level 21+. but does not give more insight on what is actually wrong on API 21+ (or on API < 21 for that matter) or the actual use cases where you would need this property.
I have done multiple tests on real android devices, and on all of them, nested scrolls (either with ScrollView or the other stock components) worked properly - with or without this prop set to true - and in both horizontal and vertical directions.
So then, what does this prop actually do? Can you provide an example where this prop does anything useful or where the scroll does not work properly without it?
Also, does it harm if I just set it to true no matter what for all of these scrolling components ?

By accord with Android's website
NestedScrollView is just like ScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.
Wich means:
NestedScrollView is when you need a scrollView inside another scrollView
This is enable by default on newer versions of android, and all IOS versions, but you can set this to true and it will works on everything.
Example use:

Related

Can a custom header in react-navigation receive the scrollview ref in a createStackNavigator without creating a context and custom wrappers?

I am trying to see if I can emulate the iOS header in a cross platform without using native-navigator
However, I can't seem to find a way of doing the following using the standard custom Header API
detecting that the entire screen content is in a ScrollView or Hoc'ed scroll view (which is done by headerLargeTitle
passing up the scroll view ref which allows the header animation to determine where it is in the sequence to scroll.
What I've done before was to have a context that is used by the Header and tracks the scrollviewref by having a HoC that pushes up the value into the context. Though that works it looks pretty clunky.
I am thinking that for me to implement this cleanly I need to be able to get the ScrollView ref and animate the height of the view as needed.
What I am thinking is it needs a custom navigator altogether to get this to work and the existing createStackNavigator will not be able to handle this case too well.

React Native: Scroll to certain position without relying on scrollTo() methods in ScrollView

I'm trying to find a react-native equivalent to Window.scroll() method.
I did my research and considered giving a ref to the ScrollView and using scrollTo() method, just like described here, but my parent ScrollView is composed of sibling components and passing refs among them seems like an overkill.
Is there a simpler method, without relying on refs and scrollTo() methods, in React Native so that when the button is pressed, the screen scrolls down by a certain amount, let's say 100 pixels, nothing more nothing less, just simple as that? Did my research but couldn't find any...any suggestions?

how to manually force VoiceOver/TalkBack to speak in React Native

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

How can you make a movable frame over the content with React Native, while making it possible to click the content around it?

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

React Native - Dynamically change component position

I want to display several components (maybe up to 6) in my React Native app that continuously change their position, i.e. slowly but fluently float on the screen and change their moving direction randomly or based on an angle at which they approach the edge of their parent, if they do. What I don't know is how to change their position dynamically in a performance friendly way. Because I also want to let the user interact with them by tapping on them, it cannot be a video in a background or something similar.
If I were dealing with a standard React app running in a browser, I think I would simply manipulate the element's style attributes top and left. Since I want to implement this in React Native, I think there must be a solution that is way more performant and elegant, involving manipulation of the native elements that back the React Native views or using some animation mechanism, because re-rendering a view with like 6 components at least 30 times per second doesn't seem like an appropriate solution and an overhead in general.
Googling things like "react native dynamically move element" or "react native dynamically change element position" did not bring any obviously appropriate results. I came across a native element method setNativeProps, though, but couldn't find any information on what props I could set to change the element's position on the screen and how performant that would be. I also looked into React Native's Animated API, but could not quite relate my problem to the solutions that this API offers from a first glance.
Does anyone know a mechanism or maybe a library that would be appropriate to use in the situation that I described?