facing problem while converting to class to function component

here I have tried to convert code into function component but I am getting to much error pls help me out to convert this code,thank in advance.

import React, { Component, Fragment } from "react";
import {
  TouchableOpacity,
  Text,
  View,
  KeyboardAvoidingView,
  Modal,
  TextInput,
  Platform,
  Keyboard,
  Dimensions,
  ScrollView,
  StatusBar,
  SafeAreaView,
} from "react-native";
import QRCodeScanner from "react-native-qrcode-scanner";
import styles from "./scanStyle";
import AppStore from "../../stores/AppStore";
import { handleScreenNavigation } from "../../utils/NavigationService";
import Theme from "../../utils/Theme";
import LinearGradient from "react-native-linear-gradient";
import CardView from "react-native-cardview";
import Scanstore from "../../stores/Scanstore";
import Toast from 'react-native-simple-toast';
import { Screen } from "../../components/common/Screen";
import { UniversalNavigationHeader } from "../../components/common/NavigationHeader";
import Iconpack from "../../utils/Iconpack";
// import { ScrollView } from "react-native-gesture-handler";

const hRem = AppStore.screenHeight / 812;
const wRem = AppStore.screenWidth / 375;


const STATUSBAR_HEIGHT = StatusBar.currentHeight;

const totp = require("totp-generator");

let b32_regex = /^[a-zA-Z2-7]+=*$/;



class Scan extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scan: false,
      ScanResult: false,
      result: null,
      isShow: false,
      textName: "",
      secretKey: "",
      backupCode: "",
      isBackUpCode: true,
      textInputHighlight: null,
      textInputHighlight2: null,
      textInputHighligh3: null,
      value: "",
      height: 0,
      updateHeightSecretKey: 0,
      platformUri:"",
      styleChange:false,
      keyboardState: 'closed'
    };
  }

  componentDidMount() {
    if(this.props.route.params.edit){
    //   console.log("Appstore.userPin*******************",   this.props.route.params.index,
    //   this.props.route.params.edit,
    //  this.props.route.params.otpFrom,
    //   this.props.route.params.backUpCode,
    //   this.props.route.params.friendlyName)
      this.setState({  secretKey:this.props.route.params.secretKey,
        platformUri :this.props.route.params.otpFrom,
        textName : this.props.route.params.friendlyName ,
        backupCode :  this.props.route.params.backUpCode,
        isBackUpCode: this.props.route.params.backUpCode.length>0?false:true,
        isShow:true
      })
    }
  
    // this.setState({ isShow: true, secretKey: "fsdfsfsf",platformUri:"fdsfsffs" });

    //let data = base32.decode("otpauth://totp/Google%3Arakesh.s%40catalystmedia.io?secret=tqskd2aiylctmid2vzi4lirnuhbshqem&issuer=Googlethe");
    // Keys provided must be base32 strings, ie. only containing characters matching (A-Z, 2-7, =).
    // var hotp = require('hotp')
    // var key = 'tqskd2aiylctmid2vzi4lirnuhbshqem'
    // var counter = 0
    // var tokenhotp = hotp(key, counter, { digits: 6 })
    // // var tokentotp = hotp.totp( key, { digits: 6 })//converting hotp to totp
    // // console.log("totp same---> ", tokentotp)
    // console.log("hotp same ---> ", tokenhotp)
    // console.log("totp diff--->", token);
    // // this.otpList()
    // AppStore.incrementCount()
  }

  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  _keyboardDidShow = () => {
    this.setState({
        keyboardState: 'opened'
    });
  }

  _keyboardDidHide = () => {
    this.setState({
        keyboardState: 'closed',
        styleChange:false

    });
    console.log("console,console")
  }

  handleCreate = () => {
    console.log(this.state.secretKey,"---------------->",b32_regex.exec(this.state.secretKey))
    if((this.state.secretKey.length>0) && (b32_regex.test(this.state.secretKey) && (this.state.secretKey.length % 8) === 0) ){
      // console.log("----->",AppStore.secretKeyAdded)
      if (AppStore.secretKeyAdded){

        Scanstore.addNewKeyAuthenticator(
          this.state.secretKey,
          this.state.platformUri !== undefined ?this.state.platformUri:"",
          this.state.textName,
          this.state.backupCode
        );
      } else {
        
        Scanstore.setKeyAuthenticator(
          this.state.secretKey,
          this.state.platformUri !== undefined ?this.state.platformUri:"",
          this.state.textName,
          this.state.backupCode
        );
      }
      Scanstore.fetchSecretKeyArray();
    }
    

    else if(this.state.secretKey.length===0){
      // console.log("enter valid")
      Toast.show("Please enter the Secret Key", Toast.LONG);
    }
    else{
      Toast.show("Please enter valid Secret Key", Toast.LONG);
    }

  };

  updateSize = (height) => {
    this.setState({
      height,
    });
  };

  updateSizeSecretKey = (updateHeightSecretKey) => {
    this.setState({
      updateHeightSecretKey,
    });
  };

  bottomModal = () => {
    return (
      <View style={styles.modalStyle}>
        
        <LinearGradient
          start={{ x: 0, y: 0.3 }}
          end={{ x: 0, y: 1.2 }}
          colors={["#020A13", "#000000"]}
          style={styles.modalContent}
        >
        
          <TouchableOpacity
            onPress={() => this.setState({ isShow: false })}
            style={styles.topBar}
          />

<View style={{height: this.state.styleChange ? 200 :"100%",paddingHorizontal:20 }} >
  <ScrollView>
          <CardView
            cardElevation={8}
            cardMaxElevation={2}
            cornerRadius={15}
            style={[
              {
                shadowColor: this.state.textInputHighlight,
              },
              styles.friendlyNameCard,
            ]}
          >
            <TextInput
              style={[styles.input, styles.mod0]}
              placeholderTextColor={Theme.white_color}
              onFocus={() => {
                this.setState({
                  textInputHighlight: Theme.hightLightColor,
                  textInputHighlight2: null,
                  textInputHighligh3: null,
                  styleChange:true
                });
              }}
              onBlur={()=>{
                this.setState({styleChange:false})
              }}
              onChangeText={(value) => {
                this.setState({ textName: value });
              }}
              onSubmitEditing={Keyboard.dismiss}
              value={this.state.textName}
              placeholder={"Friendly Name"}
            />
          </CardView>

          <CardView
            cardElevation={8}
            cardMaxElevation={2}
            cornerRadius={15}
            style={[
              {
                shadowColor: this.state.textInputHighlight2,
              },
              styles.secretKeyStyle,
            ]}
          >
            <TextInput
              style={[
                styles.input,
                {
                  maxHeight: Platform.OS == "android" ? 76 : 44,
                  height:Platform.OS == "android"?this.state.updateHeightSecretKey :44,
                },
              ]}
              placeholderTextColor={Theme.white_color}
              editable={true}
              multiline={true}
              onFocus={() => {
                this.setState({
                  textInputHighlight2: Theme.hightLightColor,
                  textInputHighlight: null,
                  textInputHighligh3: null,
                  styleChange:true
                });
              }}
              onChangeText={(value) => {
                this.setState({ secretKey: value });
              }}
              onContentSizeChange={(e) =>
                this.updateSizeSecretKey(e.nativeEvent.contentSize.height)
              }
              value={this.state.secretKey}
              onSubmitEditing={Keyboard.dismiss}
              placeholder={"Secret Key"}
            />
          </CardView>

          {this.state.isBackUpCode ? (
            <TouchableOpacity
              style={styles.backUp}
              onPress={() => {
                this.setState({ isBackUpCode: false });
              }}
            >
              <Text style={[styles.backUpText,{marginLeft:10 }]}>Want to add Backup Codes?</Text>
            </TouchableOpacity>
          ) : (
            <View style={styles.backUp}>
              <Text
                style={{ ...Theme.encodeSansReg15, color: Theme.white_color,marginLeft:10 }}
              >
                Enter Backup Codes
              </Text>
              <CardView
                cardElevation={8}
                cardMaxElevation={2}
                cornerRadius={15}
                style={[
                  {
                    shadowColor: this.state.textInputHighligh3,
                  },
                  styles.backUpCodeStyle,
                ]}
              >
                <TextInput
                  style={[
                    styles.input,
                    {
                      maxHeight: Platform.OS == "android" ? 102 : 70,
                      height:Platform.OS == "android"?this.state.height: 70,
                    },
                  ]}
                  placeholderTextColor={Theme.white_color}
                  editable={true}
                  multiline={true}
                  onFocus={() => {
                    this.setState({
                      textInputHighligh3: Theme.hightLightColor,
                      textInputHighlight: null,
                      textInputHighlight2: null,
                      styleChange:true
                    });
                  }}
                  onChangeText={(value) => {
                    this.setState({ backupCode: value });
                  }}
                  onContentSizeChange={(e) =>
                    this.updateSize(e.nativeEvent.contentSize.height)
                  }
                  onSubmitEditing={Keyboard.dismiss}
                  value={this.state.backupCode}
                  placeholder={"Backup Code"}
                />
              </CardView>
            </View>
          )}
<View style={{flexDirection:"row", justifyContent:"space-around",alignItems:"center",marginTop:40,marginBottom:AppStore.isAndroid?20:0}}>
          <TouchableOpacity
            style={styles.createButton}
            onPress={() => {
              if(this.props.route.params.edit){

                Scanstore.editElement( 
                  this.props.route.params.index ,
                  this.state.secretKey,
                  this.state.platformUri ,
                  this.state.textName ,
                  this.state.backupCode 
              )
              this.setState({ isShow: false, styleChange:false });
              Scanstore.fetchSecretKeyArray();
              Toast.show("Updated Successfully.", Toast.LONG);

              }
              else{
                this.handleCreate();
                this.setState({ isShow: false, styleChange:false });
              }
              


            }}
            // onLongPress={() => this.setState({ scan: false })}
          >
            <Text style={[styles.tapText, { fontWeight: "600" }]}>{this.props.route.params.edit?"Update":"Create"}</Text>
          </TouchableOpacity>

          <TouchableOpacity
            // style={{ marginTop: 25 }}
            
            onPress={() => 
              {this.setState({ isShow: false, styleChange:false }) 
          console.log("87887787")
            }
          }
            onLongPress={() => this.setState({ scan: false })}
          >
            <Text style={styles.cancelButton}>Cancel</Text>
          </TouchableOpacity>
         </View>
         </ScrollView>

         </View>
        </LinearGradient>
    
      </View>
    );
  };

  onSuccess = (e) => {
    const check = e.data.substring(0, 7);
    console.log("check", check);
    console.log("scanned data ->    " + e.data + "      the whole bunch of data -> ");
    let fetchedData = e.data;
    let secretKey,platformUri;
    if (fetchedData.includes("totp")) {
      secretKey = fetchedData.split("=");
      platformUri = secretKey[2]
      console.log("------------", secretKey);

      secretKey = secretKey[1].split("&");

      // const totpGen = ;
      // let lengthId = AppStore.rData.length;

      // AppStore.addTotp({
      //   id: lengthId,
      //   title: secretKey[0],
      //   otpFrom:platform,
      // });
    }

    // console.log("what the hell", AppStore.deviceIdInfo);

    this.setState({
      result: e,
      scan: false,
      ScanResult: true,
    });
    if (e.data.includes("totp") ) {
      // handleScreenNavigation("OtpScreen", {})
      this.setState({ isShow: true, secretKey: secretKey[0],platformUri:platformUri });
    }
    else if(e.data.includes("hotp")) {
      Toast.show("Something went wrong", Toast.LONG);

    } else {
      Toast.show("Please scan valid QR", Toast.LONG);
handleScreenNavigation("MainAdd")
    }
  };

  scanAgain = () => {
    this.setState({ scan: true, ScanResult: false });
  };

  render() {
    const { height } = this.state;

    let newStyle = {
      height,
    };
    let newStyleSecretKey = {
      height,
    };
    return (
      <SafeAreaView>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : null}
        style={{ flex: 1 }}
      >
           {/* <Screen
            style={styles.mod1}
            statusBar={"light-content"}
            variant={true}
            showMenu={false}
            onNavigate={this.props.navigation}
          >
                 <UniversalNavigationHeader
                hideBack={false}
                goBack={this.props.navigation.goBack}
              /> */}
        <View style={styles.scrollViewStyle}>
          <Fragment>
            {true && (
              <QRCodeScanner
                reactivate={false}
                showMarker={true}
                ref={(node) => {
                  this.scanner = node;
                }}
                cameraStyle={styles.cameraView}
                onRead={this.onSuccess}
          //       topContent={
          //         <View style={{zIndex:9999,width:AppStore.screenWidth,marginTop:Platform.OS === 'ios'?STATUSBAR_HEIGHT:0 }}>
          // <TouchableOpacity
          //   underlayColor={"none"}
          //   style={{ padding:  20, }}
          //   onPress={() => this.props.navigation.goBack()}
          // >
          //   <Image
          //     style={{ width: wRem * 12, height: hRem * 21, }}
          //     source={Iconpack.GLOBAL_BACK_BUTTON}
          //   />
          // </TouchableOpacity>                  
          // </View>
          //       }
                bottomContent={
                  <View style={styles.bottomContainer}>
                    <TouchableOpacity
                      style={styles.tapStyle}
                      onPress={() => this.setState({ isShow: true })}
                      onLongPress={() => this.setState({ scan: false })}
                    >
                      <Text style={styles.tapText}>Have a Key? Tap Here</Text>
                    </TouchableOpacity>
                  </View>
                }
              />
            )}
          </Fragment>

          <Modal
            animationType="slide"
            transparent={true}
            visible={this.state.isShow}
            onRequestClose={() => {
              this.setState({ isShow: false });
            }}
          >
            <KeyboardAvoidingView
              behavior="position"
              enabled
              // style={{paddingBottom:30}}
            >
              {this.bottomModal(newStyle, newStyleSecretKey)}
            </KeyboardAvoidingView>
          </Modal>
          {/* </View> */}
        </View>
        {/* </Screen> */}
      </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }
}

export default Scan;

somehow i have converted in my branch but its not working as before I have put as my best to convert the code but lots of errors i am getting pls help me out.