Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@mmazzarolo

This comment has been minimized.

Show comment
Hide comment
Owner

mmazzarolo commented Sep 19, 2016

fab-hide-show

@mmazzarolo

This comment has been minimized.

Show comment
Hide comment
@mmazzarolo

mmazzarolo Sep 19, 2016

It can be tweaked further for handling the bottom "bounce" of the iOS scrollview (the top one is handled by currentOffset > 0.
The tweak might consist in a mix of checking if the bottom of the scrollview is visible and checking the scrollview content height.

Owner

mmazzarolo commented Sep 19, 2016

It can be tweaked further for handling the bottom "bounce" of the iOS scrollview (the top one is handled by currentOffset > 0.
The tweak might consist in a mix of checking if the bottom of the scrollview is visible and checking the scrollview content height.

@ufon

This comment has been minimized.

Show comment
Hide comment
@ufon

ufon Oct 24, 2016

for android put in constructor:
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

ufon commented Oct 24, 2016

for android put in constructor:
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

@pewh

This comment has been minimized.

Show comment
Hide comment
@pewh

pewh Dec 29, 2016

When I set backdrop props on <ActionButton .. />, it will trigger backdrop every scroll to top. Is it a bug from the component itself?

Uploading asd.gif…

pewh commented Dec 29, 2016

When I set backdrop props on <ActionButton .. />, it will trigger backdrop every scroll to top. Is it a bug from the component itself?

Uploading asd.gif…

@pewh

This comment has been minimized.

Show comment
Hide comment

pewh commented Dec 29, 2016

asd

@ruxiang05

This comment has been minimized.

Show comment
Hide comment
@ruxiang05

ruxiang05 Mar 4, 2017

I am given this error but I don't really understand what I should do.

You specified onScroll on a but not scrollEventThrottle. You will only receive one event. Using 16 you get all the events but be aware that it may cause frame drops, use a bigger number if you don't need as much precision.

I am given this error but I don't really understand what I should do.

You specified onScroll on a but not scrollEventThrottle. You will only receive one event. Using 16 you get all the events but be aware that it may cause frame drops, use a bigger number if you don't need as much precision.

@damikdk

This comment has been minimized.

Show comment
Hide comment
@damikdk

damikdk Sep 19, 2017

@ruxiang05 this warning is about update frequency on iOS. The less the more often (docs)

@mmazzarolo, thanks for code!

damikdk commented Sep 19, 2017

@ruxiang05 this warning is about update frequency on iOS. The less the more often (docs)

@mmazzarolo, thanks for code!

@hisokakei

This comment has been minimized.

Show comment
Hide comment

I have fixed the bottom bounce issue based on this
https://gist.github.com/hisokakei/25ace65e3df656313990b710354e1541

@rsp8055

This comment has been minimized.

Show comment
Hide comment
@rsp8055

rsp8055 Apr 5, 2018

How to show alphabet bubble in scroll bar indicator

rsp8055 commented Apr 5, 2018

How to show alphabet bubble in scroll bar indicator

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