How can I use TypeScript interfaces to enforce prop types in React Native components

1. Define the Interface for Props:
- Create an interface that defines the shape of the props that your component will accept. This interface should include all the properties that your component needs.

typescript
   interface ButtonProps {
     title: string;
     onPress: () => void;
     color?: string;
   }
   

2. Use the Interface in the Component Definition:
- In your component file, import the interface and use it to type the props parameter of your functional component or the `props` property of your class component.

typescript
   // Functional Component
   import React from 'react';
   import { TouchableOpacity, Text, StyleSheet } from 'react-native';
   
   interface ButtonProps {
     title: string;
     onPress: () => void;
     color?: string;
   }
   
   const Button: React.FC<ButtonProps> = ({ title, onPress, color = 'blue' }) => {
     return (
       <TouchableOpacity
         style={[styles.button, { backgroundColor: color }]}
         onPress={onPress}
       >
         <Text style={styles.buttonText}>{title}</Text>
       </TouchableOpacity>
     );
   };
   
   const styles = StyleSheet.create({
     button: {
       paddingVertical: 12,
       paddingHorizontal: 24,
       borderRadius: 4,
     },
     buttonText: {
       color: 'white',
       fontWeight: 'bold',
       fontSize: 16,
     },
   });
   
   export default Button;
   

typescript
   // Class Component
   import React, { Component } from 'react';
   import { TouchableOpacity, Text, StyleSheet } from 'react-native';
   
   interface ButtonProps {
     title: string;
     onPress: () => void;
     color?: string;
   }
   
   class Button extends Component<ButtonProps> {
     render() {
       const { title, onPress, color = 'blue' } = this.props;
       return (
         <TouchableOpacity
           style={[styles.button, { backgroundColor: color }]}
           onPress={onPress}
         >
           <Text style={styles.buttonText}>{title}</Text>
         </TouchableOpacity>
       );
     }
   }
   
   const styles = StyleSheet.create({
     button: {
       paddingVertical: 12,
       paddingHorizontal: 24,
       borderRadius: 4,
     },
     buttonText: {
       color: 'white',
       fontWeight: 'bold',
       fontSize: 16,
     },
   });
   
   export default Button;
   

3. Use the Component in Other Files:
- When using the component in other files, TypeScript will enforce the prop types defined in the interface, ensuring that the correct props are passed to the component.

typescript
   import React from 'react';
   import Button from './Button';
   
   const App = () => {
     const handleButtonPress = () => {
       console.log('Button pressed');
     };
   
     return (
       <Button
         title="Click me"
         onPress={handleButtonPress}
         color="red"
       />
     );
   };
   
   export default App;
   

By using TypeScript interfaces to define the prop types for your React Native components, you can ensure that your components are used correctly and that any errors related to prop types are caught at compile-time, rather than at runtime. This helps to improve the overall quality and maintainability of your codebase.