Develop Reference

How can I reveal an element behind a flatlist and have it interactable in React Native?

I am trying to render an element that is positioned absolutely behind a flatlist and it will be revealed once the user scrolls to the bottom. The issue I am facing is that the element needs to be interactable, and the flatlist root element takes all pointerevents instead of the background element.
const FlatlistOverElement: FC = () => (
<View style={{ flex: 1, width: '100%' }}>
<FlatList
data={data}
style={{ flexGrow: 1 }}
ListFooterComponent={() => (
<View style={{ height: BACKGROUND_ELEMENT_HEIGHT, opacity: 0 }} />
)}
renderItem={RenderItem}
/>
<AbsolutelyPositionedElementBehindFlatList />
</View>
)
I have tried to remove pointerevents from the flatlist, then the flatlist is not scrollable.
I have tried to set the height of the flatlist smaller, and let the content overflow. This allows the user to interact with the element, but for that part of the screen, the user can not scroll the flatlist.
What other approach can I utilise in order to solve this issue ?

You can use zIndex property on the scroll completion. Just provide a higher zIndex value than that of FlatList to absolute component whenever the scroll is completed.
zIndex Layout Props

Thanks for the suggestions. I ended up using a zIndex to put the interactable content in front of the flatlist when having scrolled to the end, as well as adding snap points on both sides of the element. To prevent the user from half revealing the element and not be able to interact with it.

Nesting Horizontal FlatList inside TabView (same orientation)

I am rendering an horizontal FlatList (from react-native-gesture-handler) inside one of the pages of my top TabView (from react-native-tab-view)
The main problem I am having is that the FlatList scroll "priority" is greater than the TabView's one, so if I want to swipe the top TabView, I have to put the finger outside the FlatList (something which is not really professional).
Here is the FlatList code:
<FlatList
data={data}
renderItem={renderItem}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
style={styles.container}
/>
And the TabView's code:
<TabView
style={styles.tabView}
renderTabBar={renderTabBar}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
removeClippedSubviews={false} // Pd: Don't enable this on iOS where this is buggy and views don't re-appear.
swipeEnabled={true}
swipeVelocityImpact={0.2}
gestureHandlerProps={{
activeOffsetX: [-30, 30], // To solve swipe problems on Android
}}
/>
Is there any way to allow the user to swipe the parent component (the TabView) when scrolling the child (the horizontal FlatList)

Have you tried setting scroll enable to false in the FlatList?
https://reactnative.dev/docs/scrollview#scrollenabled

If so, why do you need the flatList component as horizontal scrollable?
Anyway, I found a little tricky solution : wrap entire component result of renderItem of flatList as
<TouchableWithoutFeedback/>.

How to go to top of the screen with ref react native

how can i go to the top of the screen or other element in the screen with react-native ?
i need to use ref for that ?
note that i have scroll view from outside, so i Cant use scroll view methods
little of my code:
<AnimatedButton
onPress={() => console.log("check", myref.current)}
icon="arrow-up"
/>
)}
and i want to go for example to the first element in the screen:
<View ref={myref}>
<Text style={styles.massagetitle}>בחר סוג טיפול</Text>
</View>
how to handle that without scrollView ?? (again, because i cant put scroll view because i have scroll view from outside wrap it)

Rendering equal width buttons in React Native

I want to render 7 buttons in a row with equal width to fill up all the available space horizontally.
render() {
return (
<FlatList
data={this.state.days}
renderItem={({ item }) => <View style={styles.button}><Button title={item.getDate().toString()} /></View>}
keyExtractor={item => item.getDate().toString()}
horizontal={true}
style={styles.list}
/>
);
}
const styles = StyleSheet.create({
list: {
display: 'flex'
},
button: {
flex: 1
}
});
They are inside a flatlist, wrapped in a view because I cannot style buttons directly.
In regular flexbox in an HTML page this approach works.
This what I get in React Native:
Maybe there are some flatlist behaviour I'm not familiar with?

First of all when you are styling in react native everything is already in flex so you don't have to do display : flex
If you want to render 7 buttons with the same width in a row make sure that all of them have the same parent. Then use flex:1 in each one of them.
What is happening when you do flex:1 when you put a number in front of flex in your styles in this particular situation it divides your parent into those many parts and give it to the child.
So all your button will have 1/7th of the width. If you put flex:2 in one of the styles then that button will have 2/7th of the width and the rest will have 1/7th.
Please feel free to ask for more clarity on the above said.

I got the same issue, I have added View component cover for each Button like the code below:
<View style={{flexDirection:"row"}}>
<View style={{flex:1}}>
<Button title="Add" />
</View>
<View style={{flex:1}}>
<Button title="Clear" />
</View>
//....
</View>

Have you tried adding flex: 1 to the list so that it takes up the entire horizontal space?

in my point of view, try adding justifyContent as space-between in the style object list

in each item ,set this style:
width:width/7

React/React Native onLayout for Child View

I am looking to build a button/view that animates when a user taps and holds on it. This animation will just be a progressive change of color from white to a green color. I have found a tutorial that does exactly this:
http://browniefed.com/blog/react-native-press-and-hold-button-actions/
In the render function, the author uses:
<View style={styles.container} onLayout={this.onPageLayout}>
<TouchableWithoutFeedback
onPressIn={this.handlePressIn}
onPressOut={this.handlePressOut}
>
<View style={styles.button} onLayout={this.onPageLayout2}>
<Animated.View style={[styles.bgFill, this.getProgressStyles()]} />
<Text style={styles.text}>Press And Hold Me</Text>
</View>
</TouchableWithoutFeedback>
<View>
<Text>{this.state.textComplete}</Text>
</View>
</View>
Please note there are two onLayout mentions...one in the parent View and the other in the View about halfway down
The way this works is the onLayout call is supposed to get the size of the TouchableWithoutFeedback button so that I can set the animation to have the correct sizing. However, the second onLayout call just does not get called no matter what I try. The very top View's onLayout is being called so I know that my code is good (as this.onPageLayout and this.onPageLayout2 are exact copies except their console.logs vary slightly).
If I remove all the surrounding code and only have the inner View in this render function, then the onLayout={this.onPageLayout2} works like a charm, but as soon as I put the rest of the parent back in, it no longer works.
Does anybody know how I can get a child View to have their onLayout method work? Or another way or getting the size of the TouchableWithoutFeedback button for my purposes of animation?
Thanks!

You are using TouchableWithoutFeedback and so you don't get any feedback from it's child. Change it to other buttons for example: TouchableOpacity, Then you can have onLayout for both components.