Forem: Alberto Cabrera

SOLID Principles for React / React Native Development

Alberto Cabrera — Fri, 03 Jan 2025 17:34:56 +0000

In React development, creating components that are scalable, maintainable, and easy to extend is a fundamental goal. While the SOLID principles were initially designed for object-oriented programming by Robert C. Martin (Uncle Bob), they offer valuable guidelines that can also be effectively applied to React projects.

What are the SOLID Principles?

The SOLID principles are five design principles that aim to make software easier to understand, maintain, and extend. They are:

S – Single Responsibility Principle
O – Open/Closed Principle
L – Liskov Substitution Principle
I – Interface Segregation Principle
D– Dependency Inversion Principle

1. Single Responsibility Principle (SRP)

“A component should have only one reason to change.”

In React, this means a component or hook should handle one responsibility. Mixing UI logic with business logic makes components hard to maintain.

❌ Anti-Pattern Example:

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user').then(res => res.json()).then(setUser);
  }, []);

  return <div>{user?.name}</div>;
}

The UserProfile component is responsible for both fetching user data and displaying it.

✅ Better Approach: Separate Concerns

function useUserData() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user').then(res => res.json()).then(setUser);
  }, []);

  return user;
}

function UserProfile() {
  const user = useUserData();

  return <div>{user?.name}</div>;
}

🧠 Takeaway: Separate data-fetching logic into a custom hook (useUserData) and keep the component focused on rendering.

2. Open/Closed Principle (OCP)

“Components should be open for extension but closed for modification.”

This means we should be able to extend the functionality of a component without modifying its existing code.

❌ Anti-Pattern Example:

function Button({ type }) {
  if (type === 'primary') return <button style={{ color: 'blue' }}>Primary</button>;

  if (type === 'secondary') return <button style={{ color: 'gray' }}>Secondary</button>;
}

Adding more button types will require modifying the component, violating OCP.

✅ Better Approach: Use Props for Flexibility

function Button({ children, style }) {
  return <button style={style}>{children}</button>;
}

// Usage:
<Button style={{ color: 'blue' }}>Primary</Button>
<Button style={{ color: 'gray' }}>Secondary</Button

🧠 Takeaway: Use props and composition to extend behavior without changing the core logic.

3. Liskov Substitution Principle (LSP)

“Child components should behave predictably when used in place of their parent components.”

When passing props, ensure they don’t introduce unexpected behavior.

❌ Anti-Pattern Example:

function InputField({ value }) {
  if (typeof value !== 'string') throw new Error('Value must be a string');
  return <input value={value} />;
}

This component expects strict behavior, making it less reusable.

✅ Better Approach: Add Default Values

function InputField({ value = '' }) {
  return <input value={value} />;
}

// Usage:
<InputField value="Hello" />
<InputField />

🧠 Takeaway: Components should gracefully handle various scenarios without breaking behavior.

4. Interface Segregation Principle (ISP)

“Components should not be forced to accept props they do not need.”

This principle suggests keeping your props clean and focused.

❌ Anti-Pattern Example:

function UserCard({ name, age, isAdmin }) {
  return <div>{name}</div>;
}

The UserCard component accepts more props than it uses.

✅ Better Approach: Split Responsibilities

function UserName({ name }) {
  return <div>{name}</div>;
}

function UserAdmin({ isAdmin }) {
  return isAdmin ? <div>Admin</div> : null;
}

🧠 Takeaway: Avoid overloaded props. Create smaller components to handle specific responsibilities.

5. Dependency Inversion Principle (DIP)

“High-level modules should not depend on low-level modules. Both should depend on abstractions.”

In React, use custom hooks or context to abstract dependencies.

❌ Anti-Pattern Example:

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user').then(res => res.json()).then(setUser);
  }, []);

  return <div>{user?.name}</div>;
}

The component directly depends on the fetch API.

✅ Better Approach: Use Dependency Injection

function useUserService(fetcher) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetcher().then(setUser);
  }, [fetcher]);

  return user;
}

// Usage:
function UserProfile() {
  const user = useUserService(() => fetch('/api/user').then(res => res.json()));
  return <div>{user?.name}</div>;
}

🧠 Takeaway: Abstract dependencies via hooks to make the code easier to test and maintain.

🎯 Key Takeaways

Principle	Focus in React	Best Practice
S – Single Responsibility	Components & Hooks	Keep logic
O – Open/Closed	Props & Composition	Extend via props, avoid modification
L – Liskov Substitution	Props & Behavior	Ensure predictable behavior
I – Interface Segregation	Props	Use focused, minimal props
D – Dependency Inversion	Hooks & Context	Abstract dependencies via hooks

🛠️ Final Thoughts

Applying SOLID principles in React helps create cleaner, reusable, and maintainable components. By following these guidelines, you'll improve your code's scalability and make future changes easier to manage.

Create a TikTok-like Scrolling Video Feed with React Native Expo

Alberto Cabrera — Sun, 24 Dec 2023 18:23:34 +0000

Before we dive into the article, let's preview a demonstration video of the Tiktok-esque video feed that we are about to build. The demo video shows a feed with smooth scrolling, auto-play and pause functionality. Pay attention to how videos automatically play when in focus and pause when not, and the full-screen playback for an immersive experience.

Prerequisite: Ensure that you have a React Native Expo project already set up. This is a fundamental requirement for following along with the tutorial.

1. Install expo-av

expo-av is an Expo module specifically designed for audio and video playback in React Native Expo apps. It's vital for our project because it allows for smooth video playback and control, ensuring an engaging user experience on both iOS and Android platforms.

To set up, simply run

npx expo install expo-av

2. FeedScreen component

You can name this component whatever you prefer.

import React from 'react'

const FeedScreen = () => {
 return (
   <>
   </>
 )
}

export default FeedScreen

3. Import Modules

import { View, Dimensions, FlatList, StyleSheet, Pressable } from 'react-native';
import { Video, ResizeMode } from 'expo-av';
import React, { useEffect, useRef, useState } from 'react';

Video, ResizeMode from expo-av:
These will handle video playback. Video is the component for displaying videos, and ResizeMode controls how the video fits into its container.

4. Video Data Array
You can copy the videos array below or copy from this list of public video urls here.

const videos = [
 "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
 "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
 "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
 "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
 "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
];

5. State Management and Viewability

const [currentViewableItemIndex, setCurrentViewableItemIndex] = useState(0);
const viewabilityConfig = { viewAreaCoveragePercentThreshold: 50 }
const viewabilityConfigCallbackPairs = useRef([{ viewabilityConfig, onViewableItemsChanged }])

currentViewableItemIndex
Keeps track of which video is currently in the user's view. This is crucial for knowing which video to play.

viewabilityConfig
Defines what counts as a "viewable" item. Here, an item covering more than 50% of the screen is considered viewable. This threshold ensures that the video in the main focus of the screen is the one that plays.

viewabilityConfigCallbackPairs
Manages how videos in the feed are played and paused based on their visibility on the screen.

6. Viewable Items Change Handler

  const onViewableItemsChanged = ({ viewableItems }: any) => {
    if (viewableItems.length > 0) {
      setCurrentViewableItemIndex(viewableItems[0].index ?? 0);
    }
  }

This function updates currentViewableItemIndex based on the item currently in view. It's essential for determining which video should be playing as the user scrolls.

7. FlatList for Rendering Videos

return (
    <View style={styles.container}>
      <FlatList
      data={videos}
      renderItem={({ item, index }) => (
        <Item item={item} shouldPlay={index === currentViewableItemIndex} />
      )}
      keyExtractor={item => item}
      pagingEnabled
      horizontal={false}
      showsVerticalScrollIndicator={false}
      viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
    />
    </View>
  );

pagingEnabled
When set to true, the list allows snapping to items (paging) as you scroll, creating a carousel-like effect. This is similar to how feeds work in social media apps.

viewabilityConfigCallbackPairs
This prop links our viewability configuration and callback function to the FlatList. It's crucial for detecting which video is in the viewport and should thus be playing.

8. The Item Component

const Item = ({ item, shouldPlay }: {shouldPlay: boolean; item: string}) => {
  const video = React.useRef<Video | null>(null);
  const [status, setStatus] = useState<any>(null);

  useEffect(() => {
    if (!video.current) return;

    if (shouldPlay) {
      video.current.playAsync()
    } else {
      video.current.pauseAsync()
      video.current.setPositionAsync(0)
    }
  }, [shouldPlay])

  return (
    <Pressable onPress={() => status.isPlaying ? video.current?.pauseAsync() : video.current?.playAsync()}>
      <View style={styles.videoContainer}>
      <Video 
        ref={video}
        source={{ uri: item }}
        style={styles.video}
        isLooping
        resizeMode={ResizeMode.COVER}
        useNativeControls={false}
        onPlaybackStatusUpdate={status => setStatus(() => status)}
      />
    </View>
    </Pressable>
  );
}

Item component detailed breakdown

const video = React.useRef<Video | null>(null);

This reference allows you to control the video's playback programmatically (like playing or pausing). useRef is used instead of a state variable because we need a way to persistently access the video component without causing re-renders.

const [status, setStatus] = useState<any>(null);

This state holds the playback status of the video (like whether it's playing, paused, buffering, etc.). It's updated whenever the playback status of the video changes.

useEffect(() => {
    if (!video.current) return;
    if (shouldPlay) {
        video.current.playAsync();
    } else {
        video.current.pauseAsync();
        video.current.setPositionAsync(0);
    }
}, [shouldPlay]);

This useEffect is triggered whenever the shouldPlay prop changes. It checks if the video is supposed to be playing. If so, it starts playback; otherwise, it pauses the video and resets its position to the start.

<Pressable onPress={() => status.isPlaying ? video.current?.pauseAsync() : video.current?.playAsync()}>

Wraps the video component to make it interactive. When the user taps the video, it toggles between playing and pausing.

<Video 
    ref={video}
    source={{ uri: item }}
    style={styles.video}
    isLooping
    resizeMode={ResizeMode.COVER}
    useNativeControls={false}
    onPlaybackStatusUpdate={status => setStatus(() => status)}
/>

isLooping: If true, the video will loop continuously.
resizeMode: Determines how the video fits within the bounds of its container.
useNativeControls: Set to false to hide native playback controls.
onPlaybackStatusUpdate: A callback function that updates the status state whenever the playback status of the video changes.

9. Styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  videoContainer: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  video: {
    width: '100%',
    height: '100%',
  },
});

Full Code

import { View, Dimensions, FlatList, StyleSheet, Pressable } from 'react-native';
import { Video, ResizeMode } from 'expo-av';
import React, { useEffect, useRef, useState } from 'react';

const videos = [
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
];

export default function FeedScreen() {
  const [currentViewableItemIndex, setCurrentViewableItemIndex] = useState(0);
  const viewabilityConfig = { viewAreaCoveragePercentThreshold: 50 }
  const onViewableItemsChanged = ({ viewableItems }: any) => {
    if (viewableItems.length > 0) {
      setCurrentViewableItemIndex(viewableItems[0].index ?? 0);
    }
  }
  const viewabilityConfigCallbackPairs = useRef([{ viewabilityConfig, onViewableItemsChanged }])
  return (
    <View style={styles.container}>
      <FlatList
      data={videos}
      renderItem={({ item, index }) => (
        <Item item={item} shouldPlay={index === currentViewableItemIndex} />
      )}
      keyExtractor={item => item}
      pagingEnabled
      horizontal={false}
      showsVerticalScrollIndicator={false}
      viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
    />
    </View>
  );
}

const Item = ({ item, shouldPlay }: {shouldPlay: boolean; item: string}) => {
  const video = React.useRef<Video | null>(null);
  const [status, setStatus] = useState<any>(null);

  useEffect(() => {
    if (!video.current) return;

    if (shouldPlay) {
      video.current.playAsync()
    } else {
      video.current.pauseAsync()
      video.current.setPositionAsync(0)
    }
  }, [shouldPlay])

  return (
    <Pressable onPress={() => status.isPlaying ? video.current?.pauseAsync() : video.current?.playAsync()}>
      <View style={styles.videoContainer}>
      <Video 
        ref={video}
        source={{ uri: item }}
        style={styles.video}
        isLooping
        resizeMode={ResizeMode.COVER}
        useNativeControls={false}
        onPlaybackStatusUpdate={status => setStatus(() => status)}
      />
    </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  videoContainer: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  video: {
    width: '100%',
    height: '100%',
  },
});

That’s all! Happy coding 🚀

Implementing a CI/CD Deployment Pattern for React Native Expo Applications with Github Actions

Alberto Cabrera — Sun, 10 Dec 2023 15:22:30 +0000

Our deployment pattern leverages the Persistent Staging Flow directly from the Expo documentation. This flow is designed for continuous integration and delivery, with a focus on maintaining persistent "staging" and "production" branches.

Key Aspects of the Deployment Pattern

1. Creating Builds

Production Builds: Distinct builds tailored for the production environment.
Testing Builds: Separate, dedicated builds for testing purposes.

2. Testing Changes

Implement internal distribution builds for comprehensive pre-production testing.

3. Publishing Updates

Utilize designated branches, like "staging" and "production", for streamlined update management.

Application of the Pattern: A Practical Example

Local Development

Begin with a feature branch (e.g., feature/dark-mode) based on the main branch.
Develop the feature with an emphasis on coding, UI design, and local testing.

Merging to Main

After development, commit the changes and push to feature/dark-mode.
Merge into the main branch upon pull request approval.

Testing in Staging

Merge updates from the main to staging.
Trigger a staging build through GitHub Actions, followed by internal distribution for testing.

Iterative Fixes and Updates

Address feedback, creating and merging fixed branches as necessary.
Conduct additional testing after merging updates into staging.

Final Deployment to Production

Confirm feature stability in staging before merging to production.
Update version numbers in app.json/app.config.js and initiate automated production deployment via GitHub Actions.

CI/CD Configuration Files

Setup the different profiles in build and submit sections in eas.json that are needed. Here is an example,

eas.json

{
 "build": {
   "development": {
     "developmentClient": true,
     "distribution": "internal"
   },
   "preview": {
     "channel": "staging",
     "distribution": "internal",
     "env": {
       "EXPO_PUBLIC_API_HOST": // your staging api url
     }
     // ...other values
     }
   },
   "production": {
     "channel": "production"
     "env": {
       "EXPO_PUBLIC_API_HOST": // your production api url
     }
     // ...other values
   }
 },
 "submit": {
   "production": {
       // This is optional if you already setup the service account key in your expo account
     "android": {
       "serviceAccountKeyPath": "../path/to/api-xxx-yyy-zzz.json",
       "track": "internal"
     },
     "ios": {
       "appleId": "john@turtle.com",
       "ascAppId": "1234567890",
       "appleTeamId": "AB12XYZ34S"
     }
   }
 }
}

GitHub Actions YAML Configurations
Set up your EXPO_TOKEN as a secret in your GitHub repository.

staging.yml
This job will create a staging build that you can distribute to your internal testers to test.

name: Build For Staging
on:
  push:
    branches: ["staging"]
jobs:
  build:
    name: Build For Staging
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16.x
          cache: npm
      - name: Setup Expo and EAS
        uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - name: Install dependencies
        run: npm ci
      - name: Build For Staging
        run: eas build --profile preview --platform all --non-interactive

production.yml
This job will create a production build and submit this build to AppStore Connect and Google Play Console.

name: Build For Production
on:
  push:
    branches: ["production"]
jobs:
  build:
    name: Build For Production
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16.x
          cache: npm
      - name: Setup Expo and EAS
        uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - name: Install dependencies
        run: npm ci
      - name: Build For Production
        run: eas build --profile production --platform all --non-interactive --auto-submit --clear-cache

There we have it!

Adopting the Persistent Staging Flow from the Expo documentation in our CI/CD deployment pattern offers a streamlined and effective approach for managing React Native Expo app development. By consistently utilizing "staging" and "production" branches, we ensure a smooth and continuous integration and deployment process, significantly enhancing our development efficiency and release quality.

Happy deploying 🚀