How to Align Elements in React Native

container: {flex: 1
       justifyContent: 'center', // For aligning vertically
       alignItems: 'center', // For aligning horizontally
    }

// Importing necessary packages
import {StatusBar} from 'expo-status-bar';
import {Image, StyleSheet, Text, View, ViewComponent, ViewPagerAndroidBase} from 'react-native';

// Our main function
export default function App() {
  let img = './assets/image1.jpg';  // Declaring a variable that hold the image
                                    // location
  return (
      <View style = {styles.container}><Text>This is a body aligned center<
          /Text>
      <View style={styles.container01}>
        <Text>I am Left</Text>
      <Image style = {styles.img} source =
       {
         require(img)
       } />
        <StatusBar style="auto" />
      </View>
    <View style={styles.container02}>
        <Text>I am Center</Text>
      <Image style = {styles.img} source =
       {
         require(img)
       } />
        <StatusBar style="auto" />
      </View>
    <View style={styles.container03}>
        <Text>I am Right</Text>
      <Image style = {styles.img} source = {
        require(img)
      } />
        <StatusBar style="auto" /></View>
    </View>);
}

const styles = StyleSheet.create({
  // Providing some styles to the UI
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 50,
  },
  container01: {
    flex: 1,
    alignSelf: 'flex-start',
  },
  container02: {
    flex: 1,
    alignSelf: 'center',
  },
  container03: {
    flex: 1,
    alignSelf: 'flex-end',
  },
  img: {
    width: 100,
    height: 100,
  },
});