Apply floating button with scrollY

Hi,
I'm a bit stucked with floating button displayed on a profile view.
I have 3 buttons, the one on the middle ("chat") is always fix but should float like the other ones.
My request is how can I make these 3 buttons floating with 0.5 opacity once user scroll down by 50 et make opacity 1 when user goes back to top?
Below is an extract of the code:

`import React, { useState, useContext, useEffect } from 'react';
import {
SafeAreaView,
Text,
View,
StyleSheet,
TouchableOpacity,
ScrollView,
Modal,
Pressable,
TextInput,
Animated,
} from 'react-native';
import Toast from 'react-native-toast-message';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Entypo from 'react-native-vector-icons/Entypo';
import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Fontisto from 'react-native-vector-icons/Fontisto';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import EvilIcons from 'react-native-vector-icons/EvilIcons';
import {Radio} from 'native-base';
import LinearGradient from 'react-native-linear-gradient';
import AppContext from '../store/context/AppContext';
import { useTranslation } from 'react-i18next';
import { block, operatios } from '../utils/model';
import FastImage from 'react-native-fast-image';
import Swiper from 'react-native-swiper'
export default function ProfileView({ navigation, route }) {
const [modalVisible, setModalVisible] = useState(false);
const contextObj = useContext(AppContext);
const colorScheme = contextObj.theme;
const [reportMessage, setReportMessage] = useState();
const [value, setValue] = useState(1);
const { t } = useTranslation();
const [likes, setlikes] = useState(route.params?.useralldata?.user?.like_status);
const [blockuser, setBockUser] = useState(false);
const userdata = route.params?.useralldata.user;
const[matchModal,setMatchModal]=useState(false)
const[matchModalData,setMatchModalData]=useState()
const [backgroundColor, setBackgroundColor] = useState(
colorScheme === 'dark' ? '#222' : '#f5f5f5',
);
const [textColor, setTextColor] = useState(
colorScheme === 'dark' ? '#fff' : '#000',
);
const scrollY = new Animated.Value(0);

const iconTranslateY = scrollY.interpolate({
inputRange: [0, 100],
outputRange: [0, -100],
extrapolate: 'clamp',
});

useEffect(() => {
setBackgroundColor(colorScheme === 'dark' ? '#222' : '#f5f5f5');
setTextColor(colorScheme === 'dark' ? '#fff' : '#000');
}, [colorScheme]);
style={styles.floatBtn}>

                <MaterialCommunityIcons name="chat" size={30} color="#cf225c" />

              </View>
            </Pressable>
          </View>
        </View>
        <Animated.View
          style={{
            alignItems: 'center',
            position: 'absolute',
            bottom: 220,
            alignSelf: 'center',
            flexDirection: 'row',
            transform: [{ translateY: iconTranslateY }]
          }}>
          <View style={{ flex: 0.5, alignItems: 'center' }}>
            <Pressable onPress={() => {
              const data = {
                to_id: userdata?.id,
                type: 0
              }
              setlikes(false)
              handleSubmit(data);
            }}
              style={({ pressed }) => [
                {
                  transform: pressed ? [{ scale: 1 }] : [{ scale: 1.3 }],
                }]}
            >
              <View
                style={styles.floatBtn}>

                <FastImage
                  source={require('../images/normal_u30.png')}
                  style={{ height: 30, width: 30 }}
                />

              </View>
            </Pressable>
          </View>
          <View style={{ flex: 0.5, alignItems: 'center' }}>
            <Pressable
              onPress={() => {
                setlikes(!likes);
                const data = {
                  to_id: userdata?.id,
                  type: likes ? 0 : 1
                }
                handleSubmit(data);
              }}
              style={({ pressed }) => [
                {
                  transform: pressed ? [{ scale: 1 }] : [{ scale: 1.3 }],
                }]}
            >
              <View
                style={styles.floatBtn}>

                {likes ? (
                  <FontAwesome name="heart" size={30} color="#cf225c"  />
                ) : (
                  <FontAwesome name="heart-o" size={30} color="#cf225c" />
                )}

              </View>
            </Pressable>
          </View>
        </Animated.View>
    <Toast />
  </View>
</SafeAreaView>

);
}`

Thanks for your help!