javascriptreact-nativereact-hooksreact-native-flatlistfloating-action-button

How to hide and show Floating Button on top of FlatList when user reached the bottom or top?

I have a flatlist componment which renders some data and on the bottom there is a floating action button which does some things. The button is using absolute position and it is always on center bottom.

When the user scrolls down I want the button to dissapear.When he scrolls up I want the user to show the button. Is that possible in react native?

My main component that renders Header, Body, and the Floating Button:

const Main = ({navigation, route}) => {
    return (
        <View style={styles.container}>
          <Header/>
          <Body data={route.params.item}/>
          <FloatingButton data={route.params.item}/>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:color_theme_light.bodyBackground,
  }
});

My Body component with flatlist in it:

const Body = ({data}) => {

  useEffect(() => {
    ...dataLoading....
  },[])


  return (
      <View style={{flex:1}}>
          <FlatList data={oltasok} renderItem={({item}) => (
              <TouchableOpacity onPress={() => setOltasDetailsVisible(true)}>
                <View style = {styles.container}>
                    ...flatlist elements....
                </View>
              </TouchableOpacity>
            )} keyExtractor={(item, index) => String(index)} />  
    </View>
  );
}

  
const styles = StyleSheet.create({
container: {
    justifyContent:"space-between",
    flexDirection:"row",
    margin:20,
},
});

And lastly my Floating Button component:

const FloatingButton = ({data}) => {
    return(
    <View style={{flex:1 ,alignItems:'center', flexDirection:'row', position:'absolute',
    top:(window.height)*0.88,
    zIndex:999}}>
      <View style={{flexDirection:'row',
                    justifyContent:'center',
                    width:'100%'}}>
        <TouchableOpacity style={{
          marginTop:20,
          backgroundColor:color_theme_light.buttonColor,
          alignItems:'center',
          padding:13,
          borderRadius:30,
          width:200,
          position:'relative'
        }}
        onPress={() => someMethod(true)}
        >
          <Text style={{fontFamily:'QuicksandMedium',color: color_theme_light.buttonText, fontSize:17}}>Új oltás hozzáadása</Text>
        </TouchableOpacity>
      </View>

    </View>
    )
  }

What I want to achieve

EDIT: You can hide the button with onEndReached={} pretty easily, now how can I show it again when the user scrolls up?

Solution

  • There is a props onScroll for FlatList which is inherited from ScrollView. In this callback you can set the value.

    Eg code :

    ....
const [showButton, setShowButton] = useState(true)
....
<flatList
    onScroll={()=>setShowButton(true)}
    onEndReached={()=>setShowButton(false)}
....