Skip to content

Instantly share code, notes, and snippets.

@mmazzarolo
Last active October 31, 2023 07:32
Show Gist options
  • Star 52 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save mmazzarolo/cfd467436f9d110e94a685b06eb3900f to your computer and use it in GitHub Desktop.
Save mmazzarolo/cfd467436f9d110e94a685b06eb3900f to your computer and use it in GitHub Desktop.
react-native-action-button hide on scroll
// 1. Define a state variable for showing/hiding the action-button
state = {
isActionButtonVisible: true
}
// 2. Define a variable that will keep track of the current scroll position
_listViewOffset = 0
// 3. Add an onScroll listener to your listview/scrollview
<ListView
...
onScroll={this._onScroll}
...
/>
// 3. Add some logic in the scroll listener for hiding the action button when scrolling down
_onScroll = (event) => {
// Simple fade-in / fade-out animation
const CustomLayoutLinear = {
duration: 100,
create: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity },
update: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity },
delete: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity }
}
// Check if the user is scrolling up or down by confronting the new scroll position with your own one
const currentOffset = event.nativeEvent.contentOffset.y
const direction = (currentOffset > 0 && currentOffset > this._listViewOffset)
? 'down'
: 'up'
// If the user is scrolling down (and the action-button is still visible) hide it
const isActionButtonVisible = direction === 'up'
if (isActionButtonVisible !== this.state.isActionButtonVisible) {
LayoutAnimation.configureNext(CustomLayoutLinear)
this.setState({ isActionButtonVisible })
}
// Update your scroll position
this._listViewOffset = currentOffset
}
// 4. In you render show you action-button only if state.isActionButtonVisible === true
<View style={styles.container}>
{yourListView}
{this.state.isActionButtonVisible ? <ActionButton /> : null}
</View>
@fukemy
Copy link

fukemy commented Jul 24, 2023

any solution with Reanimated?? I dont want to useState + LayoutAnimation because it's may took glitch with Android

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment