Convert a React Native function to class

Question

I wanna convert my App.js main function to a class

I got this sample from the Expo tab navigator app template. it actually works but I usually use classes as own standard:

async function loadResourcesAsync() {
    await Promise.all([
        Asset.loadAsync([
            require('./assets/images/robot-dev.png'),
            require('./assets/images/robot-prod.png'),
        ]),
        Font.loadAsync({
            ...Ionicons.font,
            'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
        }),
    ]);
}

function handleLoadingError(error) {
    console.warn(error);
}

function handleFinishLoading(setLoadingComplete) {
    setLoadingComplete(true);
}

export default function App(props) {
    const [isLoadingComplete, setLoadingComplete] = React.useState(false);

    if(!isLoadingComplete && !props.skipLoadingScreen) {
        return (
            <Root>
                <AppLoading startAsync={loadResourcesAsync} onError={handleLoadingError} onFinish={() => handleFinishLoading(setLoadingComplete)}/>
            </Root>
        );
    } else {
        return (
            <View>
                {Platform.OS === 'ios' && <StatusBar barStyle="default"/>}
                {Platform.OS === 'android' && <View/>}
                <Root>
                    <AppContainer ref={navigatorRef => NavigationService.setTopLevelNavigator(navigatorRef)}/>
                </Root>
            </View>
        );
    }
}

The question is how can I put the other functions to work with the class, basically want something like this:

export default class App extends React.Component {
    render() {
        if(!isLoadingComplete && !props.skipLoadingScreen) {
            return (
                <Root>
                    <AppLoading startAsync={this.loadResourcesAsync} onError={this.handleLoadingError} onFinish={this.handleFinishLoading}/>
                </Root>
            );
        } else {
            return (
                <View>
                    {Platform.OS === 'ios' && <StatusBar barStyle="default"/>}
                    {Platform.OS === 'android' && <View style={styles.statusBarUnderlay}/>}
                    <Root>
                        <AppContainer ref={navigatorRef => NavigationService.setTopLevelNavigator(navigatorRef)}/>
                    </Root>
                </View>
            );
        }
    }
}

Answer 1

I am not sure whether I got your question or not...but probably this is what you are looking for:

export default class App extends React.Component {
render() {

    var handleLoadingError = (error)  => {
       console.warn(error);
   }

    var  handleFinishLoading = (setLoadingComplete)  => {
       setLoadingComplete(true);
   }

    if(!isLoadingComplete && !props.skipLoadingScreen) {
        return (
            <Root>
                <AppLoading startAsync={this.loadResourcesAsync} onError={() => handleLoadingError()} onFinish={() => handleFinishLoading()}/>
            </Root>
        );
    } else {
        return (
            <View>
                {Platform.OS === 'ios' && <StatusBar barStyle="default"/>}
                {Platform.OS === 'android' && <View style={styles.statusBarUnderlay}/>}
                <Root>
                    <AppContainer ref={navigatorRef => NavigationService.setTopLevelNavigator(navigatorRef)}/>
                </Root>
            </View>
        );
    }
  }
}