It is possible to get the selection position using onSelectionChange method.
It is also possible to use onLayout method to get the height of TextInput component, which can be used to calculate number of lines.
However, how can I get the selection and number of lines at the same time?
What I am trying to create here is a TextInput component inside a ScrollView. Users would like the ScrollView to scroll to end only when selection end equals the number of lines. However, these two events got shot quite randomly.
Related
In my application I want to create a couple animations on my FlatList.
For example, after fetching the data and feeding it to the list I want the items that should be visible to slide from the left. When I'm scrolling each item (at the top) that supposed to disappear will slide out to the right and each item that should appear (at the bottom) should slide from the left. Is it possible in React Native?
I only managed to create one type of animation - items sliding right when they are about to disappear, but I don't have any idea how to make the items to appear from the left.
My Animated.View can receive only one type of transform. So how can create different types of input/output ranges for the top and the bottom of the list?
I tried to find some examples on the internet but couldn't find any for multiple animations, only for one type.
I think you will find React Native Reanimated's Entering and Exiting Animations API
useful for this task. It greatly simplifies animations like this in my experience.
In case you want to get more control. Using a FlatList, you can also use its onScroll prop to get the current value for YOffset (contentOffset.y) via the Reanimated useAnimatedScrollHandler. Thus you can figure out how much has been scrolled.
Which you could then use to manually apply any translateX's required to the Animated.View of whatever items the flatlist is rendering. The logic you'll of course have to figure out though. But it's a start.
Be sure to do any animation interpolates using UI thread worklets on Reanimated only. Good luck!
Is there any way to set when the flatlist should become scrollable, I don't want my list items to get all the way to the bottom of the screen. I want it to start scrolling at a certain point in the array.
I have a Flatlist that I would like to empty when the user long presses it.
The problem is that surrounding the Flatlist with a TouchableOpacity prevents scrolling.
I also cannot surround each item with a Touchable opacity because it's a list with columns and an uneven number of items. This means that at the bottom of the list, there is a leftover area with no items rendered.
This leftover area should still react to the long press (as it is where most users will try to long press).
How can I achieve that?
My requirement is to display in the view a new item just added to the end of the list rendered by a FlatList.
The problem is when using the scrollToEnd method, it only scrolls to the last item that is already rendered in the view (about item #20) but not to the last item in the data array.
From the React Native docs:
May be janky without getItemLayout prop.
But my list items have dynamic height according to its content. The items' height can't be calculated, since each item has a different height. so I have no way to implement the getItemLayout prop.
Any workaround?
I am trying to create a text slider that moves from right to left over certain period of time. A problem is that I need it to come from outside the display and appear as it moves slowly to the left side. So I cannot use onLayout event as it would briefly appear in the display before it is animated.
How do I calculate the width of text component before it is rendered on the screen in react native?
may be try UIManager.measure?
https://gist.github.com/johanneslumpe/e48acd0a820bb322790b