How do I pass dynamic props to custom React Native components

1. Define the Custom Component:
- Create a new JavaScript file for your custom component. Import the necessary modules and define the component structure and functionality within the JSX.

2. Use Props:
- Define props within the component to make it reusable and customizable. Props can be any JavaScript value, including strings, numbers, objects, arrays, or functions.

3. Pass Props Dynamically:
- To pass props dynamically, you can use conditional statements to decide whether to pass a prop or not based on certain conditions. For example, you can pass a prop based on the platform (iOS or Android) or any other dynamic condition.

Here is an example of how you can dynamically pass props to a custom component:

javascript
// customtext.js
import React from 'react';
import { View, Text } from 'react-native';

export default class CustomText extends React.Component {
  render() {
    return (
      <View>
        <Text style={{ color: this.props.color, fontWeight: this.props.fontWeight }}>
          {this.props.text}
        </Text>
      </View>
    );
  }
}

// main.js
import React from 'react';
import { View, StyleSheet } from 'react-native';
import CustomText from './customtext';

const App = () => {
  return (
    <View style={styles.container}>
      <CustomText text="Hello, World!" color="red" fontWeight="bold" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Example Usage

javascript
  import React from 'react';
  import { View, StyleSheet } from 'react-native';
  import CustomText from './path-to-your-custom-text';

  const App = () => {
    return (
      <View style={styles.container}>
        <CustomText text="Hello, World!" color="red" fontWeight="bold" />
      </View>
    );
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
  });

  export default App;
  

Conclusion