How to animate a button from middle of the screen to bottom of the screen

I have implemented a floating button(TouchableOpacity)in react native. I was able to show and hide the button as per the scrolling position. Instead of showing and hiding i want to move button completely out of the screen(bottom) when the scrollview scrolls up and when it scroll down i want to move the button up from the bottom of screen. I want to achieve this using smooth animation.

Below is the code i have used to create floating button and show and hide while scrolling.

//For Handling button show and hide for the scroll position.
handleScroll = (event: any) => {
 const { animatedOpacityValue, showBlueButton } = this.state;
 const scrollPosition = event.nativeEvent.contentOffset.y;
 console.log('Scroll Position:', scrollPosition);

if (scrollPosition > 0 && scrollPosition < 400) {
  Animated.timing(this.state.animatedOpacityValue, {
    toValue: 1,
    duration: 5,
    useNativeDriver: true,
  }).start(() => this.setState({ showBlueButton: true }));
} else if (scrollPosition > 400 && showBlueButton) {
  Animated.timing(this.state.animatedOpacityValue, {
    toValue: 0,
    duration: 5,
    useNativeDriver: true,
  }).start(() => this.setState({ showBlueButton: false }));
 }
};

// Render Method

      <ScrollView
              style={styles.scrollViewStyles}
              contentContainerStyle={{ paddingBottom: 330 }}
              contentInset={{
                top: 10,
                bottom: Platform.OS === 'ios' ? 0 : 100,
              }}
              onScroll={this.handleScroll}
              scrollEventThrottle={16}>
              <CardView
                onSymptomLog={() => {
                  this.state.navigation.push('SymptomLogs');
                }}
              />
              <TodaySymptomsCard
                showBlueView={this.state.showBlueView}
                reminderTime={'5:40 PM'}
                symptomsCount={0}
                onEditAction={() => {
                  this.state.navigation.push('SetRemainder');
                }}
              />
               {this.state.showBlueButton && (
                <TouchableOpacity
                  style={{
                    backgroundColor: AppColors.DARK_BLUE_BUTTON_COLOR,
                    top: -50,
                    alignItems: 'center',
                    width: 150,
                    height: 50,
                    borderRadius: 28,
                    justifyContent: 'center',
                    left: '30%',
                    shadowOffset: { width: 1, height: 1 },
                    shadowColor: 'grey',
                    shadowOpacity: 2.0,
                  }}>
                  <Text style={{ color: AppColors.WHITE, fontSize: 20 }}>
                    + Symptoms
                  </Text>
                </TouchableOpacity>
              )} 
              <WearableStatus
                batteryPercentage="80%"
                batteryStatus={true}
              />
              <Support
                address="sdfsd fsdfsdfsdf"
                phone="122-534-3445"
                email="sdfsdfdsfsd@mgail.com"
              />
            </ScrollView>

Any help is appreciated. Thanks.

Call these functions based on your scrollPosition

const driver = Animated.value(0) //1 if the button should be shown by default

const fadeIn = () => {
  Animated.timing(driver, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true
  }).start()
}

const fadeout = () => {
  Animated.timing(driver, {
  toValue: 0,
  duration: 500,
  useNativeDriver: true
  }).start()
}

Wrap your TouchableOpacity in an <Animated.View> and style it like this:

Style={{
  transform: [{
     translateY: driver.interpolate({
        inputRange: [0, 1],
        outputRange: [startingYPosition, EndingYposition]  
      })
   }]
}}

Lets say that the positionY of your button is 700 when visible, then the values of outputRange would be [0, 700]