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

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)}
....