What are props in React Native ?

// Importing necessary components from the 'react-native' library
import { StyleSheet, View } from 'react-native'; 

// Exporting the default functional component named 'App'
export default function App() { 
  return ( 
    // Main container view with applied styles
    <View style={styles.container}> 
      {/* First child view with red background */}
      <View style={styles.style1} /> 
      {/* Second child view with green background */}
      <View style={styles.style2}/> 
      {/* Third child view with blue background */}
      <View style={styles.style3}/> 
    </View> 
  ); 
} 

// Creating styles for the components
const styles = StyleSheet.create({ 
  // Style for the main container
  container: { 
    flex: 1, // Makes the container take up the full screen
    backgroundColor: '#fff', // Sets the background color to white
    alignItems: 'center', // Aligns child components horizontally to the center
    justifyContent: 'center', // Aligns child components vertically to the center
  }, 
  // Style for the first child view
  style1: { 
    backgroundColor: "red", // Sets the background color to red
    height: 100, // Sets the height to 100 units
    width: 200 // Sets the width to 200 units
  }, 
  // Style for the second child view
  style2: { 
    backgroundColor: "green", // Sets the background color to green
    height: 50, // Sets the height to 50 units
    width: 50 // Sets the width to 50 units
  }, 
  // Style for the third child view
  style3: { 
    backgroundColor: "blue", // Sets the background color to blue
    height: 100, // Sets the height to 100 units
    width: 100 // Sets the width to 100 units
  } 
});

// Importing necessary components from React Native
import { View, Image, StyleSheet, ScrollView } from 'react-native';

// Defining a functional component named ImageFill
function ImageFill(props) {
  return (
    // A container View with styles applied
    <View style={styles.contStyle}>
      {/* Creating an array of images based on the count prop */}
      {[...Array(props.count)].map(
        () => (
          // Rendering an Image component with the provided source and styles
          <Image 
            source={props.image} 
            style={{
              height: 100, // Setting the height of the image
              width: 100,  // Setting the width of the image
              flex: 1,     // Allowing the image to grow and shrink
              flexWrap: 'wrap' // Wrapping content if needed (though not applicable to Image)
            }} 
          />
        )
      )}
    </View>
  );
}

// Exporting the default App component
export default function App() {
  return (
    // Wrapping the content in a ScrollView to allow scrolling
    <ScrollView style={styles.container}>
      {/* Rendering the ImageFill component with an image and count */}
      <ImageFill 
        image={require('./assets/gfg.png')} // Providing the image source
        count={4} // Number of images to render
      />
    </ScrollView>
  );
}

// Creating styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1, // Allowing the container to expand to fill available space
    backgroundColor: '#fff', // Setting the background color to white
    flexDirection: 'column', // Arranging children in a column
    flexWrap: 'wrap', // Allowing wrapping of children (though not applicable here)
  },
  contStyle: {
    flex: 1, // Allowing the container to expand to fill available space
    alignItems: 'center', // Centering children horizontally
    justifyContent: 'center', // Centering children vertically
    width: "100%" // Setting the width of the container to 100% of the parent
  }
});