How to place this box at the middle of the screen (react-native native-base)

Question

import { NativeBaseProvider, Box } from "native-base";

export default function App() {
  return (
    <NativeBaseProvider flex={1} justifyContent="center" alignItems="center">
      <Box
        bg="primary.600"
        py="4"
        px="3"
        borderRadius="5"
        rounded="md"
        width={375}
        maxWidth="100%"
        alignSelf="center"
      >
        {" "}
        Hello world I am natie base code
      </Box>
    </NativeBaseProvider>
  );
}

How can I shift this box to the middle of the screen? I think I did all of the necessary but the box is still at the top of the screen how can I fix that?