Converting React-Native-Draggable-View from Class to Hooks

Question

I am attempting to write some code using React-Native-Draggable-View but the example that has it the way I want is written in "class" form, while I write everything in "Hooks/Functional" form. Here is the original part of the code written in the class format. When I try to convert it myself I am generate an error.

import React, { useState, useEffect, Component }from "react";
import Drawer from 'react-native-draggable-view'
import CheckScreen from './CheckScreen'
import ListScreen from './ListScreen'

function RunningScreen({navigation}) {

...

return(

...


<Drawer
    initialDrawerSize={0.09}
    renderContainerView={() => { <View style = {{flex: 1, backgroundColor: 'red'}}/> }}
    renderDrawerView={() => { <View style = {{flex: 1, backgroundColor: 'red'}}/> }}
    renderInitDrawerView={() => {
      <View style = {{backgroundColor: '#fff', height: height*0.2}}>
        <StatusBar hidden = {true}/>
  <StatusBar hidden = {true}/>
                
    </View>
   )}
  />
    )
    }

...

export {RunningScreen}

Answer 1

Try below code

import React from 'react';
import {Dimensions, StatusBar, View} from 'react-native';
import Drawer from 'react-native-draggable-view';

const {height} = Dimensions.get('window');

function RunningScreen({navigation}) {
  return (
    <Drawer
      initialDrawerSize={0.09}
      renderContainerView={() => (
        <View style={{flex: 1, backgroundColor: 'red'}} />
      )}
      renderDrawerView={() => (
        <View style={{flex: 1, backgroundColor: 'red'}} />
      )}
      renderInitDrawerView={() => (
        <View style={{backgroundColor: '#fff', height: height * 0.2}}>
          <StatusBar hidden={true} />
        </View>
      )}
    />
  );
}

export {RunningScreen};