How to use in Class?

[mistermadness87]

Hello. I have Class

`import React from "react";

import {
SectionList,
StyleSheet,
Easing,
Button,
Text,
View,
ActivityIndicator,
RefreshControl,
Animated,
FlatList,
ScrollView
} from "react-native";
import styled from 'styled-components/native';
import {withNavigation} from 'react-navigation';
import { useCollapsibleHeader } from 'react-navigation-collapsible';

import CatRaz from '../components/CatRaz';

const HEADER_MAX_HEIGHT = 100

class CatScreen extends React.Component {

constructor(props) {
super(props);

this.state = {
  data: [],
  isLoading: true,
  refreshing: false,
  scrollY : new Animated.Value(0),
};

}

componentDidMount = async () => {
var par = '';
//console.group(this.props);

if(this.props.route.params!=undefined){
    par += '?id=' + this.props.route.params.id;
    //console.log(par);
    this.props.navigation.setOptions({
      headerTitle: this.props.route.params.name,
      headerStyle: {
        height: HEADER_MAX_HEIGHT,
      },          
  });
} else {
  //console.log(par);
  this.props.navigation.setOptions({
    headerStyle: {
      height: HEADER_MAX_HEIGHT,
    },          
  });
}

fetch('https://f.crmsklad.ru/cms/react/menuApi.php' + par)
  .then((response) => response.json())
  .then((json) => {
    this.setState({ data: json });
  })
  .catch((error) => console.error(error))
  .finally(() => {
    this.setState({ isLoading: false });
  });

}

endReached(){
console.log('end');
}

submitData = () => {
//console.log(this);
this.props.navigation.push('NestedCat', {
id: this.props.id,
name: this.props.name,
})
}

onScroll(event, screen) {
console.log(screen);
}

render(){
const nav = this.props;
const { data, isLoading } = this.state;
const styles = StyleSheet.create({
indicator: {
marginTop: 120
},
scrollView: {
backgroundColor: '#efefef',
paddingTop: 30,
paddingLeft: 15,
paddingRight: 15,
},
header: {
backgroundColor: '#fff',
}
})
const headerHeight = this.state.scrollY.interpolate({
inputRange: [0, 60],
outputRange: [0, -60],
extrapolate: 'clamp'
});
return (
isLoading ? : (

<Animated.FlatList
initialNumToRender={50}
maxToRenderPerBatch={50}
onScroll={e => this.onScroll(e, this)}
/*
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],
{
useNativeDriver: false,
},

        )}
        */
        scrollEventThrottle={16}
        data={this.state.data}
        style={styles.scrollView}
        renderItem={({ item }) => (
          <CatRaz nav={nav} {...item} /> 
        )} 
        />
        <Animated.View style={[styles.header, {top: headerHeight}]}>
          <Text style={styles.title}>Title</Text>
        </Animated.View>
      </Container>
    )
  )

}
}

const Container = styled.SafeAreaViewflex: 1; background-color: #cccccc;;

export default CatScreen;`

How can I use Collapsible Header?