How do I design a custom component in React Native?

How do I design a custom component in React Native?

To design a custom component in React Native, start by creating a new JavaScript file for your component. Use the View, Text, and other built-in components to structure your layout.

Can you show me an example of a simple button component?

Sure! Here's a simple button component:

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

const CustomButton = ({ title, onPress }) => {
    return (
        <TouchableOpacity style={styles.button} onPress={onPress}>
            <Text style={styles.buttonText}>{title}</Text>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    button: {
        backgroundColor: '#007BFF',
        padding: 10,
        borderRadius: 5,
    },
    buttonText: {
        color: '#FFFFFF',
        textAlign: 'center',
    },
});

export default CustomButton;

How can I style this button to make it look better?

You can enhance the button's style by adding shadows, changing the background color, or adjusting the padding. For example:

button: {
    backgroundColor: '#28A745',
    padding: 15,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
},