DEV Community

Cover image for Why the OCP Makes You a Better React Native Dev
Ars Dev
Ars Dev

Posted on

Why the OCP Makes You a Better React Native Dev

From the author of the Telegram channel REACT NATIVE HUB

Join a growing community of React Native Devs! 👆

When building scalable React Native apps, clean architecture matters. One of the most powerful design principles you can apply is the Open/Closed Principle (OCP)

What Is the Open/Closed Principle?

  • Definition: Software entities should be open for extension but closed for modification.
  • In React Native: Use higher-order components (HOCs), render props, or composition to extend component behaviour without modifying the existing code.

❌ The Anti-Pattern: Modifying Components for Every Change

Imagine you have a Button component that handles different visual styles based on a type prop:

// ❌ BAD EXAMPLE - Violating OCP
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ type, label }) => {
  let style = {};

  if (type === 'primary') {
    style = { backgroundColor: 'blue', color: 'white' };
  } else if (type === 'secondary') {
    style = { backgroundColor: 'gray', color: 'white' };
  } else if (type === 'danger') {
    style = { backgroundColor: 'red', color: 'white' };
  }

  return (
    <TouchableOpacity style={style}>
      <Text>{label}</Text>
    </TouchableOpacity>
  );
};

export default Button;
Enter fullscreen mode Exit fullscreen mode

Each time you need a new button variant, you edit the component’s internal logic. This violates OCP and leads to fragile code that's hard to maintain.

✅ Following OCP

A better approach is to make the base Button component generic and use Higher-Order Components (HOCs) to extend it with different styles. This way, the Button stays closed for modification but open for extension.

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

// Base Button Component
const Button = ({ label, style }) => (
  <TouchableOpacity style={style}>
    <Text>{label}</Text>
  </TouchableOpacity>
);

// HOC
const withButtonStyle = (customStyle) => (WrappedComponent) => (props) => {
  return <WrappedComponent {...props} style={customStyle} />;
};

const PrimaryButton = withButtonStyle({ backgroundColor: 'blue' })(Button);
const SecondaryButton = withButtonStyle({ backgroundColor: 'gray' })(Button);
const DangerButton = withButtonStyle({ backgroundColor: 'red' })(Button);

export { PrimaryButton, SecondaryButton, DangerButton };
Enter fullscreen mode Exit fullscreen mode

Usage:

import React from 'react';
import { View } from 'react-native';
import { PrimaryButton, SecondaryButton, DangerButton } from './Buttons';

const App = () => (
  <View>
    <PrimaryButton label="Save" />
    <SecondaryButton label="Cancel" />
    <DangerButton label="Delete" />
  </View>
);

export default App;
Enter fullscreen mode Exit fullscreen mode

Key Takeaways

  • OCP helps you extend functionality without changing existing code.
  • In React Native, use composition or HOCs to build flexible, scalable UI components.
  • Avoid piling up logic inside a single component—modularize it instead.

Applying OCP leads to more maintainable and testable code, especially in growing codebases where new requirements come in fast.

About me: My name is Arsen, and I am a react native developer and owner of the TG channel 👇

🔗 Join TG community for React Native Devs: REACT NATIVE HUB

Top comments (0)