DEV Community: Everaldo Junior

Understand High Order Component Once and For All

Everaldo Junior — Wed, 21 May 2025 17:29:32 +0000

Intro

Fala galera, tudo beleza? Hoje vou explicar um conceito considerado um tópico intermediario/avançado e bastante utilizado por algumas libs no React e React Native, os chamados High Order Components, nesse post vou te mostrar qual problema eles resolvem e como implementa-los 😉.

O que são High Order Components?

Assim como as High Order Functions o HOC é uma técnica que:

Recebe um componente (função) como parâmetro e/ou retorna um novo componente
É util para se reutilizar a lógica de um componente, reforçando o DRY (Don't Repeat Yourself no seu código)

Caso Problema

Imaginemos o seguinte caso: um aplicação simples que tem dois componentes que são "populados" através de uma API - O nome e cargo do usuário, dessa forma:

A lógica dentro de cada componente é a seguinte:

NameBox.tsx

import * as React from 'react';

interface NameBoxProps {
    data: string | null;
}


function NameBox({ data }: NameBoxProps) {

if (!data) {
    <div style={{ backgroundColor: 'gray', width: 120, height: 120 }}>
        <p>Carregando...</p>
    </div>;
}

return (

    <div style={{ backgroundColor: 'green', width: 120, height: 120 }}>
        <p>{data}</p>
    </div>

    );

    }
export default NameBox;

JobBox.tsx

import * as React from 'react';

interface JobBoxProps {
    data: string | null;
}

function JobBox({ data }: JobBoxProps) {

    if (!data) {
        <div style={{ backgroundColor: 'gray', width: 120, height: 120 }}>
            <p>Carregando...</p>
        </div>;
    }

    return (

        <div style={{ backgroundColor: 'orange', width: 120, height: 120 }}>
            <p>{data}</p>
        </div>

    );

}

export default JobBox;

Basicamente é um componente que recebe uma propriedade chamada data e a exibe dentro de uma tag div, se data não tiver um valor verdadeiro, o componente exibe a frase 'Carregando'.

Como no exemplo abaixo:

Bom, o que temos de problema aqui?

Estamos utilizando a mesmissima lógica para exibir o status de "Carregando..." em dois lugares diferentes.

E agora você pode pensar:

Que tal, criarmos um componente de e chama-lo nos dois componentes?

Seu pensamento está correto, criando um novo componente de loading conseguimos abstrair um pouco mais nosso código, deixando ele mais reutilizavél e com uma manutenção um pouco mais fácil, porém a lógica a seguir ainda seria repetida nos dois componentes:

...

if (!data) {
    <Loading/>
}

...

Bom, e como conseguimos resolver isso de uma maneira super elegante? Exatamente, com High Order Components!

Criando um High Order Component

Como eu disse lá no começo, um HOC é um componente que recebe um componente como parâmetro e retorna um novo componente, e é examente isso que vamos fazer:

Primeiro criamos um arquivo chamado withLoader.tsx

e dentro dele vamos criar um componente que recebe um componente como parâmetro e retorna outro componente (é bastante componente eu sei...) desta forma:

import * as React from 'react';

const withLoader = (Component: React.ElementType) => (props: any) => {
    return <Component {...props} />
};

export default withLoader;

Desta forma temos acesso ao componente e as props que ele tem.

A última coisa que temos que fazer por aqui é verificarmos se nossa propriedade data existe , se existir retornamos o Componente que está sendo passado como parâmetro, se não retornamos nossa div com o "Carregando..."

Ficando dessa fora:

import * as React from 'react';

const withLoader = (Component: React.ElementType) => (props: any) => {

    return !props.data ? (

        <div style={{ backgroundColor: 'gray', width: 120, height: 120 }}>
            <p>Carregando...</p>
        </div>
    ) : (
        <Component {...props} />
    );
};

export default withLoader;

Pronto, agora nossa lógica de exibição e componente de carregamento estão em um lugar só, mas como fazer com que os componentes JobBox.tsx e NameBox.tsx se utilizem disso?

Basta chamar o withLoader passando nosso componente como função:

import * as React from 'react';

interface NameBoxProps {
    data: string | null;
}

function NameBox({ data }: NameBoxProps) {
    return (
    <div style={{ backgroundColor: 'green', width: 120, height: 120 }}>
        <p>{data}</p>
    </div>
    );
}

// Passamos o NameBox como parâmetro do nosso HOC withLoader
export default withLoader(NameBox);

E pronto, agora temos um High Order Component em uso! Deixando nosso código bem mais modularizado, melhorando a reutilização e manutenção do nosso código.

Libs que utilizam High Order Components

Segue algumas libs que usam HOCs e que você talvez não tenha percebido, ou não sabia do que se tratava

Redux (React)
Apollo (React)
Code Push (React Native)
React Navigation (React Native)

Conclusão

Vimos que High Order Components são excelentes para respeitarmos o DRY e modularizarmos nosso código, que sua implementação nem é tão complicada assim como o nome faz parecer e que eles são excelentes para resolvermos alguns problemas do dia-a-dia.

Se você quiser ver esse mesmo conteúdo em formato de vídeo, entre nesse link, tenho feito videos de vários padrões de JS e React focados no front-end!

Até a próxima!

Link do projeto no StackBlitz: https://react-ts-9f1nvy.stackblitz.io
Canal no Youtube: Everaldev - YouTube

The Never Ending Battle Against Software Complexity

Everaldo Junior — Fri, 26 Jul 2024 21:09:51 +0000

What is Complexity?

Recently, I finished reading "A Philosophy of Software Design" and in the second chapter, it explores the topic of Software Complexity.

The book "A Philosophy of Software Design" defines complexity practically:

"Complexity is anything related to the structure of a software system that makes it hard to understand and modify."

In other words, complexity can take many forms, and doesn't necessary has anything to do with performance, your code can be performant and still be complex

I'd like to share some key definitions and insights from the book in this article. But first, let's imagine a common situation that probably you’ve already been to…

A Short Horror Story

Let's dive into a horror story many of you have probably experienced or will experience.

It started with a simple CRUD task management app. The code was clean, modular, and easy to maintain. The development team was happy, and the system worked perfectly for initial clients.
Problems began when the sales team sold the system to a large company, claiming it had calendar integration, email notifications, and an amazing report generator. With the sale finalized, these features had to be implemented quickly.
Calendar Integration: The team had to integrate with Google Calendar and Outlook. Different developers implemented the solutions, resulting in inconsistent approaches.
Email Notifications: Email notifications were added next. One developer used a specific library, while another created a custom solution. The mixed approaches made the code confusing.
Report Generator: For the report generator, developers used various technologies: PDFs, Excel exports, and interactive dashboards. The lack of a unified approach made maintenance a nightmare.
Growing Complexity: Each feature was developed in isolation and quickly, leading to dependencies between features. Developers started creating "quick fixes" to make everything work, increasing the system's complexity and coupling.

Software development doesn't happen in a vacuum; various internal and external factors influence it. We've all been, or will be, in a situation like this.

The Beginning of the End

Then the problems began:

Changes in one part of the system affected other parts unexpectedly.
Small changes required modifications in many other files, making estimations difficult.
Month after month, the code became harder to understand, often fixed through trial and error.
Productivity declined, and everyone dreaded maintenance tasks.
The inevitable call for "We need to refactor."
Certain tasks could only be handled by specific developers (classic)
Over time, the once beautifully written and well-documented software became a train wreck.

Naming the Symptoms

It's clear we now have a complex system.

Now let's "dissect" this complexity to make it easier to identify and mitigate it.

Well, "mitigate" means:

"To make less severe, serious, or painful; to alleviate."

I believe complexity is often inherent in code. Some things are complex by nature. Your role as a developer isn't just to create code that the computer can execute efficiently but also to create code that future developers (including your future self) can work with.

“Controlling complexity is the essence of computer programming.”

— Brian Kernighan

The author of the mentioned book states that complexity typically manifests in three ways, which we will explore here.

Change Amplification

Change amplification occurs when a seemingly simple change requires modifications in many different places.

For example, if the Product Owner requests a "priority" or "completion date" field and your entities are tightly coupled, how many changes would you need to make?

Cognitive Load

Cognitive load refers to the amount of knowledge and time a developer needs to complete a task.

So imagine this scenario: A new developer joined the team, he was assigned to fix a bug in the report generator. To complete this task, the dev needed to:

Understand the different calendar integrations (Google and Outlook).
Grasp the distinct approaches to email notifications.
Navigate through the fragmented code of the report generator, dealing with PDFs, Excel, and dashboards.
Integrate these diverse technologies and styles to find and fix the bug.

It's the classic "impossible to estimate" scenario, where the task could take one point or eight—better roll a D20 and respond accordingly.

Unknown Unknowns

Unknown unknowns are when you don't know what you don't know.

This is the worst manifestation of complexity because you might alter things you shouldn't, causing everything to break.

Example: A developer modified the email-sending code to add a new notification, unaware that it would affect the report generator, which depended on that function. This caused significant issues for clients, exemplifying the worst form of emergent complexity.

Causes of Complexity

Having seen the horror story and the three main symptoms, let's look at what causes complexity.

1. Dependencies

Dependencies are essential in software and cannot be completely eliminated. They allow different parts of the system to interact and function together. However, dependencies, when not managed properly, can significantly increase complexity.

Definition:

A dependency exists when code cannot be understood or modified in isolation, requiring consideration or modification of related code.

Types of Dependencies:

Direct: Module A directly relies on Module B.
Transitive: Module A relies on Module B, which relies on Module C.
Cyclic: Modules A, B, and C are interdependent in a circular manner.

2. Obscurity

Obscurity occurs when important information is not obvious. This can make the codebase hard to understand, leading to increased cognitive load and the risk of unknown unknowns.

Definition:

Obscurity occurs when important information is not obvious.

Examples of Obscurity:

Poor Naming: Variables and functions with unclear names.
Hidden Side Effects: Methods that perform unexpected actions.
Global State: Overuse of global variables.
Deep Inheritance: Behavior spread across many levels in class hierarchies.

Remember: Complexity is Incremental

Complexity is rarely caused by a single "error" or bad decision.
Complexity builds up "slowly" through bad decisions and dependencies over time.

Because it is incremental, it's easy to think, "just this once, it won't matter." But when accumulated, fixing one or two dependencies alone won't make much difference.

“Everything is a tradeoff in software engineering.”
— I don't remember the author

Conclusion

I could write a lot of rules, strategies, and frameworks that you probably already saw on the internet on how to avoid complexity: SOLID, Design Patterns, YAGNI, KISS, etc.

However, you can unify them all into one guiding principle (as mentioned in "The Pragmatic Programmer."): "Is what I am implementing easy to change?" If the answer is no, then you are probably increasing complexity.

Ensuring your code is easy to change simplifies maintenance, reduces cognitive load on developers, and makes the system more adaptable and less error-prone.

Thank You!

I created an App to help you get/change jobs as a Dev

Everaldo Junior — Mon, 22 Aug 2022 11:40:00 +0000

Hey Guys!

Recently, I have moved to this Mobile Developer job in Europe, and during this preparation and selection process I created an app to initially help me perform better in interviews and as it worked for me I decided to publish it in stores, and today I came to share it with you.

Well, with this idea of performing better in interviews, I created Codict (Code + Addict) and it is basically a tool that helps you to:

Practice technical challenges separated by difficulty and played directly from your cell phone, without internet (think of a code wars, which works offline and gives you xp that unlocks other levels if the answer is correct)

Hundreds of questions with explanations, separated by seniority level, of what is the most asked in the market today, in addition to soft skills questions

Interview simulator, here you basically select the questions from the previous feature, and "simulate an interview" being able to choose what type of questions will "fall" in the interview, stack, question level, if you have already reviewed that question or not and etc. .

If you are looking for your first job, or trying to get to a better place, I think Codict can help you a lot! As I said before I was his first "tester" haha and it helped me a lot during my selection processes (I ended up passing on the X-Team and for this company I am now!)

He's still an MVP, so if you have any suggestions, you can send them to me here :)

Links:

Google Play

App Store

Video with a summary of the features

tldr: I created an app to help me during my selection processes, which ended up helping me a lot and now I decided to publish it in stores.

I created a library for mobile developers who cares about color.

Everaldo Junior — Tue, 05 Apr 2022 20:10:04 +0000

You know that moment when you needed a color to be a little bit lighter or darker?

But you don't want to manually make it lighter or darker?

Well... me too.

So that's why a created react-native-color-toolkit

With this library you can have access to a lot of color modification functions like:

brighten
darken
desaturate
greyscale
lighten
saturate

Let's imagine an example where you have a color, but you want that color to be 50% darker, with react-native-color-toolkit you just need to call a function like this:

<View  style={{justifyContent:  'center', alignItems:  'center'}}>
    <View  style={[styles.box, {backgroundColor: '#2196F3'}]} />
    <Text  style={styles.subtitle}>Original color</Text>
</View>
<View  style={{justifyContent:  'center', alignItems:  'center'}}>
    <View  style={[styles.box, {backgroundColor: darken('#2196F3', 0.5)}]} />
    <Text  style={styles.subtitle}>Modified color</Text>
</View>

Will give you this result:

react-native-color-toolkit also have also have

Conversion functions (like rgb to Hsl)
Utility functions (like get the alpha value of a color)
Material Colors Palette (like Colors.red[700])

I hope it can make your mobile developer life easier.

Feel free to open pull requests and make contributions.

Link to the repo and documentation.

How to have different returns from the same mock with React Native + Jest

Everaldo Junior — Thu, 24 Mar 2022 21:58:46 +0000

1. Scenario

Let's imagine a react-native scenario where you have a component that has a text for users with active subscription and another text for users with inactive subscription.

Like the image below:

2. Dependencies

Make sure you have jest (min version 27.0.0) and react testing library for react native installed and updated.

If you don't, run the command below:

yarn add jest @testing-library/react-native @types/jest -D

3. Implementation

This is how our function that returns if the user has a active subscription is implemented (but let's imagine that it is an endpoint or a library function).

export const auth = () => {
  return {
    user: {
      name: 'John Doe',
      email: 'johndoe@gmail.com',
      isSubscriptionActive: false,
    },
  };
};

And this is how our component SubscriptionCard looks like:

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {auth} from '../../services/api';

const SubscriptionCard = () => {
  const isSubscriptionActive = auth().user.isSubscriptionActive;
  return (
    <View style={styles.container}>
      <Text testID="subscription-card-label" style={styles.text}>
        {isSubscriptionActive ? 'Active' : 'Not Active'}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 48,
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1565C0',
  },
  text: {
    fontWeight: 'bold',
    fontSize: 24,
    color: '#fff',
  },
});

export default SubscriptionCard;

So we need to test if the text is "Active" when the auth() functions return isSubscriptionActive: true and "Not Active" when isSubscriptionActive: false.

For that, i will create a file named SubscriptionCard.spec.tsx

The first thing we need to do is use jest.mock in the path (or library name) of the function that we are using:

jest.mock('../../services/api');

Now, we need to write the "skeleton" of our tests

describe('SubscriptionCard component', () => {
  it('text should be "Active" if subscription is active', () => {

  });

  it('text should be "Not Active" if subscription is not active', () => {

  });
});

So now we just need to individually mock the return of auth() function like this:

    const authMocked = mocked(auth as any);

    authMocked.mockReturnValue({
      user: {
        isSubscriptionActive: true,
      },
    });

For the first test

And like this:

    const authMocked = mocked(auth as any);

    authMocked.mockReturnValue({
      user: {
        isSubscriptionActive: true,
      },
    });

For the second one.

And then we can call the expect function that we are testing, giving this final result:

import {render} from '@testing-library/react-native';
import React from 'react';
import {mocked} from 'jest-mock';
import SubscriptionCard from '.';
import {auth} from '../../services/api';

jest.mock('../../services/api');

describe('SubscriptionCard component', () => {
  it('text should be "Active" if subscription is active', () => {
    const authMocked = mocked(auth as any);

    authMocked.mockReturnValue({
      user: {
        isSubscriptionActive: true,
      },
    });

    const {getByTestId} = render(<SubscriptionCard />);
    const cardText = getByTestId('subscription-card-label');

    expect(cardText.children[0]).toBe('Active');
  });

  it('text should be "Not Active" if subscription is not active', () => {
    const authMocked = mocked(auth as any);

    authMocked.mockReturnValue({
      user: {
        isSubscriptionActive: false,
      },
    });

    const {getByTestId} = render(<SubscriptionCard />);
    const cardText = getByTestId('subscription-card-label');

    expect(cardText.children[0]).toBe('Not Active');
  });
});

Github repository

The right way to use Flatlist + TypeScript + Styled Components in React Native

Everaldo Junior — Mon, 21 Feb 2022 13:58:56 +0000

1. Scenario

Let’s imagine that you need to implement a list of names using TypeScript + Styled Components, like the image below:

2. Dependencies

If you haven’t installed styled-components yet, open your terminal inside your typescript React Native project, copy and paste the lines below:

yarn add styled-components
yarn add @types/styled-components -D

3. Implementing without Styled Components

I am going to implement the list without styled-components, so we can change one part per time.
First, I will define the interface of the objects that are going to be in the list and the data of the items that are going to be rendered


export interface IUser {
  id: string;
  name: string;
}

const DATA = [
  {
    id: '1',
    name: 'Michael Scott',
  },
  {
    id: '2',
    name: 'Jim Halpert',
  },
  {
    id: '3',
    name: 'Pam Beesly',
  },
  {
    id: '4',
    name: 'Dwight Schrute',
  },
  {
    id: '5',
    name: 'Andy Bernard',
  },
  {
    id: '6',
    name: 'Ryan Howard',
  },
  {
    id: '7',
    name: 'Kelly Kapoor',
  },
  {
    id: '8',
    name: 'Toby Flenderson',
  },
  {
    id: '9',
    name: 'Stanley Hudson',
  },
  {
    id: '10',
    name: 'Phyllis Vance',
  },
];

Now I’m going to create the Component that will render each IUser item on the list.

const Item = ({data}: {data: IUser}) => (
  <View
    style={{
      backgroundColor: '#eeeeee',
      borderRadius: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
    }}>
    <Text style={{fontSize: 24}}>{data.name}</Text>
  </View>
);

The first important part here is that you should destruct the data prop that we’re passing to the Item component and type it with the IUser interface.

Finally, I will create the Flatlist component:

const App = () => {
  return (
    <View style={{flex: 1}}>
      <FlatList
        data={DATA}
        renderItem={({item}) => <Item data={item} />}
        keyExtractor={(item: IUser) => item.id}
      />
    </View>
  );
};

4. Adding Styled Components

Now, we are ready to refactor these components using styled-components.

First, I will create a file and name it styles.ts

Now, I will create a style for each component that we created previously.

import {FlatList} from 'react-native';
import styled from 'styled-components/native';
import {IUser} from './App';

export const Container = styled.View`
  flex: 1;
`;

export const ItemContainer = styled.View`
  background-color: #eeeeee;
  border-radius: 10px;
  padding: 20px;
  margin-vertical: 8px;
  margin-horizontal: 16px;
`;

export const ItemName = styled.Text`
  font-size: 24px;
`;

export const UsersList = styled.FlatList`
  padding: 20px;
`;

After that, we can replace the components with inline styles with the isolated styles that we just created.


const Item = ({data}: {data: IUser}) => (
  <ItemContainer>
    <ItemName>{data.name}</ItemName>
  </ItemContainer>
);

const App = () => {
  const renderItem: ListRenderItem<IUser> = ({item}) => <Item data={item} />;

  return (
    <Container>
      <UsersList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item: IUser) => item.id}
      />
    </Container>
  );
};

But you will see that Typescript will fire an error in your styled-Component created Flatlist

That’s because you have to declare the type of data that we’re passing to the Flatlist to the styled-component flatlist.

So go to your styles.ts file and change the UsersList style from:

export const UsersList = styled.FlatList`
  padding: 20px;
`;

To:

export const UsersList = styled(FlatList as new () => FlatList<IUser>)`
  padding: 20px;
`;

5. Conclusion and Final Result

Using TypeScript + Flatlists + Styled Components can be tricky sometimes, but I hope that this tutorial helps you somehow.

That’s our final App.tsx file:

import React from 'react';
import {ListRenderItem} from 'react-native';
import {Container, ItemContainer, ItemName, UsersList} from './styles';

export interface IUser {
  id: string;
  name: string;
}

const DATA = [
  {
    id: '1',
    name: 'Michael Scott',
  },
  {
    id: '2',
    name: 'Jim Halpert',
  },
  {
    id: '3',
    name: 'Pam Beesly',
  },
  {
    id: '4',
    name: 'Dwight Schrute',
  },
  {
    id: '5',
    name: 'Andy Bernard',
  },
  {
    id: '6',
    name: 'Ryan Howard',
  },
  {
    id: '7',
    name: 'Kelly Kapoor',
  },
  {
    id: '8',
    name: 'Toby Flenderson',
  },
  {
    id: '9',
    name: 'Stanley Hudson',
  },
  {
    id: '10',
    name: 'Phyllis Vance',
  },
];

const Item = ({data}: {data: IUser}) => (
  <ItemContainer>
    <ItemName>{data.name}</ItemName>
  </ItemContainer>
);

const App = () => {
  const renderItem: ListRenderItem<IUser> = ({item}) => <Item data={item} />;

  return (
    <Container>
      <UsersList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item: IUser) => item.id}
      />
    </Container>
  );
};

export default App;

And that’s our final styles.ts file:

import {FlatList} from 'react-native';
import styled from 'styled-components/native';
import {IUser} from './App';

export const Container = styled.SafeAreaView`
  flex: 1;
`;

export const ItemContainer = styled.View`
  background-color: #eeeeee;
  border-radius: 10px;
  padding: 20px;
  margin-vertical: 8px;
  margin-horizontal: 16px;
`;

export const ItemName = styled.Text`
  font-size: 24px;
`;

export const UsersList = styled(FlatList as new () => FlatList<IUser>)`
  padding: 20px;
`;

And here’s the tutorial repository on GitHub.

Conditional types for props using TypeScript and React

Everaldo Junior — Mon, 17 Jan 2022 14:40:43 +0000

Part One: Scenario and Final Result

Let’s imagine a scenario where we have an Avatar component, that shows an image or the user name initials, depending on the type selected: “IMAGE” | “INITIALS”.

When we select the “IMAGE” type on the Avatar component, it should have a required prop “url”

When we select the “INITIALS” type on the Avatar component, it should have a required prop “initials”

This is our expected code:

import React from "react";
import AvatarComponent from "./components/AvatarComponent";
import { AVATAR_TYPE_ENUM } from "./types";

function App() {
  return (
    <div
      style={{
        display: "flex",
        height: "100vh",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <AvatarComponent
        borderColor="red"
        url="https://i.imgur.com/xb5IBL0.jpg"
        type={AVATAR_TYPE_ENUM.IMAGE}
      />
      <AvatarComponent
        borderColor="blue"
        initials="MS"
        type={AVATAR_TYPE_ENUM.INITIALS}
      />
    </div>
  );
}

export default App;

And this is our expected result:

With “url” and “initials” props being required depending on the type, like the images below after we comment the required prop

Part Two: Types and Interfaces

First, let's create a index.ts file and a “types” folder under “src”

Inside index.ts file we are going to define an Enum with the possible components (Avatar with image and Avatar with initials)so we can use it to help us later.

// types/index.tsx

export enum AVATAR_TYPE_ENUM {
  IMAGE = "IMAGE",
  INITIALS = "INITIALS",
  DEFAULT = "DEFAULT",
}

Now, we’re going to define the types of “Avatar with image” and “Avatar with initials” components using the enum that we created before. Note that we’re defining the required props and the type of each component here.

// types/index.tsx

export enum AVATAR_TYPE_ENUM {
  IMAGE = "IMAGE",
  INITIALS = "INITIALS",
  DEFAULT = "DEFAULT",
}

export type AvatarWithImageProps = {
  type: AVATAR_TYPE_ENUM.IMAGE;
  url: string;
};

export type AvatarWithInitialsProps = {
  type: AVATAR_TYPE_ENUM.INITIALS;
  initials: string;
};

Now, comes the tricky part, we are going to create an interface and name it “AllAvatarProps” with the combination of AvatarWithImageProps and AvatarWithInitialsProps.

But defining required props as optional and defining props that both of them have as required.

We also need to extend AvatarWithInitialsProps and AvatarWithImageProps with this AllAvatarProps interface, so the magic can happen.

export enum AVATAR_TYPE_ENUM {
  IMAGE = "IMAGE",
  INITIALS = "INITIALS",
  DEFAULT = "DEFAULT",
}

export interface AllAvatarProps {
  type: AVATAR_TYPE_ENUM;
  borderColor: string;
  url?: string;
  initials?: string;
}

export type AvatarWithImageProps = {
  type: AVATAR_TYPE_ENUM.IMAGE;
  url: string;
} & AllAvatarProps;

export type AvatarWithInitialsProps = {
  type: AVATAR_TYPE_ENUM.INITIALS;
  initials: string;
} & AllAvatarProps;

And the last thing we need to do is export a type with de Union of AvatarWithImageProps and AvatarWithInitalsProps, and name it “SelectedModeProps”


export enum AVATAR_TYPE_ENUM {
  IMAGE = "IMAGE",
  INITIALS = "INITIALS",
  DEFAULT = "DEFAULT",
}

export interface AllAvatarProps {
  type: AVATAR_TYPE_ENUM;
  borderColor: string;
  url?: string;
  initials?: string;
}

export type AvatarWithImageProps = {
  type: AVATAR_TYPE_ENUM.IMAGE;
  url: string;
} & AllAvatarProps;

export type AvatarWithInitialsProps = {
  type: AVATAR_TYPE_ENUM.INITIALS;
  initials: string;
} & AllAvatarProps;

export type SelectedModeProps = AvatarWithImageProps | AvatarWithInitialsProps;

Parth Three: Components

Let’s implement the components with their interfaces
First, I’m going to create a “components” folder under src

Now, I’m going to create the AvatarWithImage component under the “components” folder with the code below.

Note that we need to add AllAvatarProps as AvatarWithImage Interface

import React from "react";
import { AllAvatarProps } from "../types";

const AvatarWithImage: React.FC<AllAvatarProps> = ({ url, borderColor }) => {
  return (
    <img
      style={{
        objectFit: "cover",
        height: 200,
        width: 200,
        borderRadius: "50%",
        border: "3px solid",
        borderColor: borderColor,
      }}
      alt="an avatar"
      src={url}
    />
  );
};

export default AvatarWithImage;

Now we’re going to do the same thing with AvatarWithInitials component:

import React from "react";
import { AllAvatarProps } from "../types";

const AvatarWithInitials: React.FC<AllAvatarProps> = ({
  borderColor,
  initials,
}) => {
  return (
    <div
      style={{
        height: 200,
        width: 200,
        borderRadius: "50%",
        border: "3px solid",
        borderColor: borderColor,
        backgroundColor: "#eee",
        justifyContent: "center",
        alignItems: "center",
        display: "flex",
      }}
    >
      <p style={{ borderColor: borderColor, fontSize: 48 }}>{initials}</p>
    </div>
  );
};

export default AvatarWithInitials;

Ok, now come’s another tricky part, we’re going to implement a third component that will handle which component and which required props are selected as we saw at the beginning of this tutorial.

import React from "react";
import { AVATAR_TYPE_ENUM, SelectedModeProps } from "../types";
import AvatarWithImage from "./AvatarWithImage";
import AvatarWithInitals from "./AvatarWithInitals";

type ISelectedAvatarType = {

};

const AvatarComponent: React.FC<SelectedModeProps> = ({
  ...props
}: SelectedModeProps) => {
  const selectedMode = props.type as AVATAR_TYPE_ENUM;

  const AvatarType: ISelectedAvatarType = {
    IMAGE: <AvatarWithImage {...props} />,
    INITIALS: <AvatarWithInitals {...props} />,
    DEFAULT: <p>Error</p>,
  };

  return AvatarType[selectedMode] || AvatarType.DEFAULT;
};

export default AvatarComponent;

Now we can implement the layout from the beginning of the tutorial:


import React from "react";
import AvatarComponent from "./components/AvatarComponent";
import { AVATAR_TYPE_ENUM } from "./types";

function App() {
  return (
    <div
      style={{
        display: "flex",
        height: "100vh",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <AvatarComponent
        borderColor="red"
        url="https://i.imgur.com/xb5IBL0.jpg"
        type={AVATAR_TYPE_ENUM.IMAGE}
      />
      <AvatarComponent
        borderColor="blue"
        initials="MS"
        type={AVATAR_TYPE_ENUM.INITIALS}
      />
    </div>
  );
}

export default App;

Achieving the expected result:

With conditional props typing:

Github source

Do you know another way to achieve this result? Let me know in the comments :)

How to load local dynamic images with html in React Native

Everaldo Junior — Fri, 02 Jul 2021 22:47:07 +0000

First we will need to use react-native-render-html

(I like it because it doesn’t use WebView, and WebView for this kinda thing is bad.)

But there is a problem, this lib doesn’t have a way to load local images out of the box. For that** you need to create a custom image tag and add it to your HTML component**

Like this:

const htmlContent = ` 
  <h1>This HTML snippet is now rendered with native components !</h1>
  <img source="./src/assets/michael.jpg"/>
  <h2>Enjoy a webview-free and blazing fast application</h2>
  <em>Some random sentence!</em>
`;


        <HTML
          renderers={{
            img: (attribs) => {
              const imagePath = attribs.source;
              console.log(imagePath);
              return (
                <Image
                  key={attribs.source}
                  style={styles.imageContainer}
                  source={require('./src/assets/michael.jpg')}
                />
              );
            },
          }}
          source={{html: htmlContent}}
          contentWidth={contentWidth}
        />

Here i’m creating a custom tag named img inside renderers prop and defining it as an component with an image path that i have selected.

And that’s the result:

But the main problem isn’t solved, our goal is to render local images dynamically using that custom tag that we’ve created.

After this maybe you’re thinking:

-“Just pass the image path as a prop to the <img/> tag and voila, you’re done!”

OK, that sounds right, but how do I pass the image path that I want our custom tag to render?

I added a source prop with the image path in <img> tag.

<img source="./src/assets/michael.jpg"/>

And i am getting it inside our img function adding **attribs **as a parameter

Now i can access the image path using attribs.source

const htmlContent = ` 
  <h1>This HTML snippet is now rendered with native components !</h1>
  <img source="./src/assets/michael.jpg"/>
  <h2>Enjoy a webview-free and blazing fast application</h2>
  <em>Some random sentence!</em>
`;


        <HTML
          renderers={{
            img: (attribs) => {
              const imagePath = attribs.source;
              console.log(imagePath);
              return (
                <Image
                  key={attribs.source}
                  style={styles.imageContainer}
                  source={require('./src/assets/michael.jpg')}
                />
              );
            },
          }}
          source={{html: htmlContent}}
          contentWidth={contentWidth}
        />

This will output in the console:

"./src/assets/michael.jpg"

Now, if we try to change line 18 like this:

require('./src/assets/michael.jpg);

to

require(imagePath);

We are going to get this error:

[Error: TransformError App.js: App.js:Invalid call at line 31: require(imagePath)]

That’s because all the imports have to be a string, not a dynamic expression.

Maybe now you’re thinking:

“-If he is writing a post on Medium its because there’s is a way to import dynamic imports inside require, right?”

Well, no…

Let me show you what we are going to do:

One thing we know for sure, you can normally import images like this:

 const imagesList = {
    dwight: require('./src/assets/dwight.jpg'),
    michael: require('./src/assets/michael.jpg)
  }

const htmlContent = ` 
  <h1>This HTML snippet is now rendered with native components !</h1>
  <img source="./src/assets/michael.jpg"/>
  <h2>Enjoy a webview-free and blazing fast application</h2>
  <em>Some random sentence!</em>
`;


        <HTML
          renderers={{
            img: (attribs) => {
              const imagePath = attribs.source;
              return (
                <Image
                  key={attribs.source}
                  style={styles.imageContainer}
                  source={imagesList[imagePath]}
                />
              );
            },
          }}
          source={{html: htmlContent}}
          contentWidth={contentWidth}
        />

So, i’m creating an object with all my images and it’s requires as properties of that object.

const imagesList = {
    dwight: require('./src/assets/dwight.jpg'),
    michael: require('./src/assets/michael.jpg)
  }

Now i can finally pass the image that we want to render in the source property in our custom tag.

<img source="michael"/>

We also need to modify the Image component to something like this:

<Image
   key={attribs.source}
   style={styles.imageContainer}
   source={imagesList[imagePath]}
 />

Now, if i change

<img source="michael"/>

to

<img source ="dwight"/>

Th will be the result:

Conclusion

The best way to implement this solution is to isolate your imageList variable in another file, and add each one of your images and it’s paths manually or you can create a script that does all the hard job for you (like i did).

You can learn how to create this script on this tutorial.

You can find the project source code here

I hope this has helped you ;)