Horizontal Scroll at the click in React Native - react-native

I have a horizontal ScrollView which I want to scroll at the click.
Below is my code:
<TouchableOpacity>
<Text>Left</Text>
</TouchableOpacity>;
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.horizontalView}
>
.....
</ScrollView>;
I want my ScrollView contents to scroll left when user clicks on left. I know there is ref, but I dont know how to use it. I am very new to react-native. I am not able to figure out a solution for this.


create reference for the scroll(make sure you imported useRef):
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.horizontalView}
ref={scrollRef}
>
Add:
const scrollRef = useRef(null);
Add
scrollRef.current.scrollTo({ x: -50})
to your button Press handler
https://facebook.github.io/react-native/docs/scrollview#scrollto
(In this example the scroll will jump 50 units to the left, play with it with positive/negative numbers)

Related

How do I make an absolut positioned touchable element on top of a FlatList catch only press events and let other events propagate to the FlatList?

I have a FlatList in React Native with fullscreen image and video items (with pagingEnabled). I want to have a short descriptive touchable text floating on top of the FlatList, to open up a view with some information about the image/video when pressed.
To make the user experience nice, I'd like to be able to scroll the FlatList through the touchable text as well. I.e. if the user happen to start their scrolling motion on top of the text, the FlatList would scroll but if it is a simple press event I'd like to open the view with details about the image/video.
No mater what I try I end up with either the text being able to react to the press OR the FlatList being able to scroll. I have tried different configurations with a custom PanResponder and pointerEvents but seem to always end up with a state were one thing does not work. Do you guys have any smart ideas? I am probably just stuck in the wrong train of thought.
This is a simplified view of my component structure:
<View>
<View style={{ position: 'absolute', bottom: 100, zIndex: 10 }}>
<TouchableOpacity onPress={() => console.log('press')}>
<Text>Some Descriptive Text</Text>
</TouchableOpacity>
</View>
<FlatList pagingEnabled horizontal {...otherFlatListProps} />
</View>

How to prevent FlatList items from scrolling underneath sticky ListHeaderComponent

I have a FlatList with a ListHeaderComponent which is a number of buttons in a horizontal scroll. I have made these buttons sticky so that it stays at the top during scroll but is there a way to prevent the scrolled items from showing beneath the buttons as I scroll up? I have tried adding a marginBottom to ListHeaderComponentStyle but it does not work. I want the items to start disappearing just beneath the ListHeaderComponent how do I do this?
<FlatList
style={{marginTop: 50}}
data={data}
ListHeaderComponent={
<FilterOptionButtons/>
}
ListHeaderComponentStyle={{ marginBottom: 50 }} // does not add m
stickyHeaderIndices={[0]}
keyExtractor={(item) => item.id}
renderItem={renderItems}
contentContainerStyle={styles.flatListContainer}
/>

You can add a backgroundColor style to the ListHeaderComponent. Currently it is transparent that's why the items are showing beneath it.
Also, I think it would be better if you just add style to the container of <FilterOptionButtons /> instead of using ListHeaderComponentStyle.

How to detect drag end in View React Native

I have a View. In this view I have a flat list that has the onScrollEndDrag and onScrollBeginDrag logic that works, except when the drag released on the bottom tab menu that is not part of the FlatList.
Because the handler is on the FlatList I can't detect drag releases that happen on the bottom tabs.
I need to have the drag end logic to be attatched to the view instead of the FlatList. How can I detect a when drag ends/the user releases the hand of the screen in the View instead of the FlatList?
Here is what I have currently:
<View>
<StatusBar barStyle={"light-content"} />
<FlatList
data={challenges}
renderItem={({ item, index }) => (
<ChallengePost challenge={item} isVideoPlaying={index === currentlyPlaying && !navigatedOutOfScreen} />
)}
keyExtractor={(challenge) => challenge._id}
showsVerticalScrollIndicator={false}
snapToInterval={Dimensions.get("window").height}
snapToAlignment={"start"}
decelerationRate={"fast"}
onViewableItemsChanged={onViewRef.current}
onScrollEndDrag={() => (scrollEnded.current = true)}
onScrollBeginDrag={() => (scrollEnded.current = false)}
></FlatList>
</View>
as you can see the onScrollEndDrag onScrollBeginDrag happends on the FlatList level and I want it be able to detect drag releases that happen on the entire screen.

Check this library it should help you make it easier because it wraps some of the components in its own pan gesture handlers
react-native-gesture-handler
examples

Flatlist Horizontal without sticky header in React Native?

I am using flatlist to render some items collected from firestore and I have a problem with ListHeaderComponent prop.
The header is placed to the left and I need to place it on the top of the 1st item (see 2nd image below) and when moved it has to be fixed with the first item of the list as the image.
Currently
Horizontal flatlist with ListHeaderComponent on the left
I need to achieve this when scrolling left:
Horizontal flatlist with ListHeaderComponent on the top of 1st item

You can separate header text from FlatList. Use Text apparently to show the header.
EDIT
If you want to scroll text with a list you can use FlatList inside ScrollView. In this case, you may disable scrolling for FlatList. Please check below for detail.
<ScrollView horizontal>
<Text>Header Text</Text>
<FlatList scrollEnabled={false} />
</ScrollView>

Okay, solved! Here's the code:
<ScrollView horizontal={true}
<View>
<Text>Header Text</Text>
<FlatList horizontal={true}
scrollEnabled={false} />
</FlatList>
</View>
</ScrollView>
Thank you #baymax :)

Needs to tap twice to fire onPress function in ListItem when keyboard is open in react native

Below is my code I am facing issue where when I clicking on list item onPress , it does not work for first time when the keyboard is open so I need to tap twice to order to work it, any help is appreciated.
<FlatList
data={this.state.users}
renderItem={({ item,index }) => (
<ListItem
title={item.userName}
onPress={item => this.sendRequestToTheUser(item)}
containerStyle={{ borderBottomWidth: 0 }} />)}
keyExtractor={(item, index) => index.toString()}
extraData={this.state.userName} />

You should use keyboardShouldPersistTaps=always prop on your FlatList. As RN documentation says:
The keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
So you will be able to tap your buttons just once no matter if keyboard is open.
There's also a medium post that explains how to resolve common keyboard issues on React Native (which also contains Problem 1: Button needs to be tapped twice)