How can I center a component on the screen in React Native?

I’m having trouble centering a component on the screen using React Native. I’ve tried a few approaches, such as using justifyContent and alignItems, but haven’t been able to achieve the desired result.

My current code looks something like this:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>My Component</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    // Styles to center the component on the screen
    // I've tried justifyContent, alignItems, but without success
  },
});

export default App;

Could someone provide me with a simple solution to center this component on the screen? I appreciate it in advance!”