Core Components vs Custom Components in React Native

Core Components

Core components are pre-defined components provided by React Native for UI design. These include basic building blocks like View, Text, ScrollView, TextInput, and more. They are imported directly from React Native and used to create the basic structure of the application’s UI.

Example:

import React from 'react';
import { View, Text, ScrollView, TextInput } from 'react-native';

const CoreComponentsExample = () => {
  return (
    <ScrollView>
      <View>
        <Text>Hello, this is a core component!</Text>
        <TextInput placeholder="Type here" />
      </View>
    </ScrollView>
  );
};

export default CoreComponentsExample;        

In this example, View, Text, ScrollView, and TextInput are core components provided by React Native.

Custom Components

Custom components are user-defined components created to fulfill specific requirements and can be reused throughout the application. For instance, if you need a button for multiple functionalities like signing in, signing up, forgetting passwords, saving entries, updating profiles, etc., you can create a custom button component and reuse it wherever needed.

Example:

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: '#6200ea',
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default CustomButton;        

In this example, `CustomButton` is a custom component that can be reused with different titles and actions.

Analogy:

Think of core components as a basic motorcycle you buy from a company, which comes with standard features. If you want to add custom features like colored lights, new accessories, or modifications to suit your style, that’s similar to creating custom components. These modifications tailor the motorcycle to your needs, just as custom components tailor the app to specific requirements.

• Core Components: Pre-defined by React Native (e.g., View, Text, ScrollView).
• Custom Components: User-defined, reusable components tailored to specific application needs (e.g., a reusable button component).

Understanding the difference between core and custom components helps in building efficient, modular, and maintainable React Native applications.