SOLID principles in ReactNative Codebase

ReactNative

Implementing SOLID principles in React Native involves structuring your code in a way that adheres to these principles.

Below, I’ll provide a simple example of a React Native component that follows SOLID principles.

This example will demonstrate the Single Responsibility Principle (SRP), Open/Closed Principle (OCP), and Dependency Inversion Principle (DIP).

Let’s create a basic counter component:

// Counter.js

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

// Interface for the CounterService
class CounterService {
  increment() {}
  decrement() {}
  getCount() {}
}

// Concrete implementation of CounterService
class SimpleCounterService extends CounterService {
  constructor() {
    super();
    this.count = 0;
  }

  increment() {
    this.count += 1;
  }

  decrement() {
    this.count -= 1;
  }

  getCount() {
    return this.count;
  }
}

// Counter component follows SRP by focusing on UI rendering
const Counter = ({ counterService }) => {
  const [count, setCount] = useState(counterService.getCount());

  const handleIncrement = () => {
    counterService.increment();
    setCount(counterService.getCount());
  };

  const handleDecrement = () => {
    counterService.decrement();
    setCount(counterService.getCount());
  };

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={handleIncrement} />
      <Button title="Decrement" onPress={handleDecrement} />
    </View>
  );
};

export default Counter;

In this example:

• The CounterService class represents an interface for a counter service.
• The SimpleCounterService class is a concrete implementation of the CounterService interface. It follows the OCP by being open for extension (you can create more advanced counter services) but closed for modification (you don't need to change Counter when adding new counter services).
• The Counter component adheres to the SRP by focusing on rendering UI only.
• It receives a counterService through props, following the DIP.
• This allows you to inject different counter services, making it easy to test and switch implementations.

// App.js

import React from 'react';
import { SafeAreaView } from 'react-native';
import Counter from './Counter';
import SimpleCounterService from './Counter';

const App = () => {
  const simpleCounterService = new SimpleCounterService();

  return (
    <SafeAreaView>
      <Counter counterService={simpleCounterService} />
    </SafeAreaView>
  );
};

export default App;

This example is a simplified demonstration, and in a real-world application, you might have more complex requirements and structures.

However, the key is to keep your components focused, adhere to SOLID principles, and make your code more modular and maintainable.

Thank you for reading this article! Don’t forget to clap.

If you have any queries related to ReactNative, I’m always happy to help you. You can reach me on LinkedIn and Gmail.