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>
)
}
EDIT: You can hide the button with onEndReached={} pretty easily, now how can I show it again when the user scrolls up?
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)}
....