Apply floating button with scrollY
Published: 2023-09-30 00:04:57

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]);
                  <View
                    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!