LoadingScreen.tsx

import React from "react"
import { View, Text } from "react-native"
import { ActivityIndicator } from "react-native-paper"
import Theme from "src/lib/Theme"

interface Props {
  loading: boolean
}

export const LoadingScreen: React.FC<Props> = (props) => {
  return (
    <>
      {props.children}
      {props.loading && (
        <View
          style={{
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            height: "100%",
            backgroundColor: Theme.colors.background,
          }}
        >
          <Text>Loading...</Text>
          <View style={{ height: 20 }} />
          <ActivityIndicator />
        </View>
      )}
    </>
  )
}