DEV Community: Mauricio Reatto Duarte

xState: My Practical Experience and Insights

Mauricio Reatto Duarte — Fri, 30 May 2025 20:34:53 +0000

After spending considerable time working with XState in production environments, I want to share my honest perspective on this state management library. While XState brings powerful concepts from computer science to JavaScript applications, my experience has revealed both impressive capabilities and significant challenges that teams should consider.

The Good: Visual Development Done Right

Let's start with what XState absolutely nails: the diagram tool. Being able to create no-code diagrams that represent your entire workflow is genuinely impressive. You can visually design your state machines and then generate TypeScript or React code directly from these diagrams. This visual-first approach helps bridge the gap between technical and non-technical team members during planning sessions.

The debugging experience is another highlight. You can attach a running machine to an inspector that opens your diagram in real-time in a separate window. Watching your application flow through states visually while debugging is incredibly powerful you can see exactly what's happening and where within your state machine as your application runs.

The Not-So-Good: When Power Comes at a Cost

However, there's a catch with the diagram tool: many useful features are locked behind a paywall. While the free tier is functional, you'll likely hit limitations quickly in any serious project.

But the real challenges go deeper than pricing.

The Complexity Trap

XState can quickly become overkill for simple state transitions. What might be a few lines of code with useState or useReducer can balloon into a complex state machine configuration. The learning curve is steep really steep. Coming from React Context or Redux, you'll struggle with fundamental concepts. What exactly is a "state" versus "context" in XState? The mental model is fundamentally different, and it takes significant time to internalize.

Too Many Ways to Solve the Same Problem

XState is deliberately unopinionated, which sounds great in theory but becomes problematic at scale. You can implement the same functionality in numerous ways, and without extremely well-documented team standards, your codebase can quickly become inconsistent and hard to maintain.

Yes, you could argue this is a documentation or process problem rather than an XState problem. But when a tool makes it this easy to create inconsistency, that's a valid criticism of the tool itself.

TypeScript: A Second-Class Citizen?

For a library that targets complex applications, XState's TypeScript support is surprisingly weak. Type inference often falls short, especially when you try to maintain good architectural practices. Want to extract action creators into separate files for unit testing? Prepare for TypeScript gymnastics and compromises.

The AI Elephant in the Room

It's 2025, so we need to address the AI coding assistant situation. You might think, "Well, AI tools should make working with XState easier!" Unfortunately, that's not the case:

Documentation Limbo : XState v5's official documentation remains incomplete. How can AI assistants help when even the official sources are lacking?
Version Confusion : The breaking changes from v4 to v5, combined with limited v5 adoption, mean AI suggestions often mix syntaxes or suggest outdated patterns. Most training data is still v4-heavy.
Garbage In, Garbage Out : If developers are struggling with XState's complexity and creating suboptimal implementations (as discussed above), then AI models trained on this code will perpetuate these problems.

Visual Complexity with Sub-machines

One last pain point: sub-machines (machines nested within parent machines) are poorly represented in the visual diagrams. What should be a clear hierarchical view often becomes a confusing mess, defeating the purpose of visual state management.

Final Thoughts

XState is undoubtedly powerful and brings valuable computer science concepts to JavaScript. The visual tooling and debugging capabilities are genuinely innovative. However, the steep learning curve, lack of opinionation, weak TypeScript support, and limited AI assistance make it a challenging choice for many teams.

Before adopting XState, ask yourself:

Do you really need this level of state machine complexity?
Does your team have the time and patience for the learning curve?
Can you establish and maintain strict coding standards?
Are you prepared to work without strong AI assistance?

For complex, long-lived applications with dedicated teams, XState might be worth the investment. For everyone else, simpler state management solutions might serve you better.

What's your experience with XState? Have you found ways to mitigate these challenges? I'd love to hear your thoughts in the comments.

Ref

]]>

Fixing "Can't resolve module 'next/headers'" for Next 12 + Next Auth

Mauricio Reatto Duarte — Mon, 18 Sep 2023 21:08:29 +0000

If you use NextAuth within your Next.js v12.x project, you've probably faced this issue:

Can't resolve module 'next/headers'

The only way I found it was by applying a patch-package to the Next Auth package. Let's fix it:

Change your package.json :

// package.json
"scripts": {
    "postinstall": "patch-package"
}

Then execute:

yarn add -D patch-package postinstall-postinstall

After that change, you'll need to change two files inside your node_modules:

node_modules/next-auth/next/index.js
node_modules/next-auth/src/next/index.ts

Modify them one by one:

you need to look for "next/headers" and you'll notice two pieces using it.

// node_modules/next-auth/next/index.js
// node_modules/next-auth/src/next/index.ts

if (isRSC) {
     options = Object.assign({}, args[0], {
      providers: []
     });

    const {
    headers,
    cookies
    } = require("next/headers");

    req = {
      headers: Object.fromEntries(headers()),
      cookies: Object.fromEntries(cookies().getAll().map(c => [c.name, c.value]))
    };
    res = {
      getHeader() {},
      setCookie() {},
      setHeader() {}
    };
} else {
    req = args[0];
    res = args[1];
    options = Object.assign({}, args[2], {
        providers: []
    });
}

/*
* replace with else only
*/
    req = args[0];
    res = args[1];
    options = Object.assign({}, args[2], {
        providers: []
    });


// node_modules/next-auth/next/index.js
// node_modules/next-auth/src/next/index.ts

// remove this const { headers, cookies } = require("next/headers")
// from async function NextAuthRouteHandler(

cookies: Object.fromEntries(
    Array.from(req.cookies.entries())
        .map(([name, value]) => [name, value])
),
headers: req.headers, // you don't need this as Headers

After applying those changes, you must run:

yarn patch-package next-auth

This will create the patch file. You can also refer to this gist here.

That's it. Byte bye!

P.S.: Troubleshooting

rm -rf node_modules yarn.lock package-lock.json .next

yarn

[WIP] Rust - NOTES

Mauricio Reatto Duarte — Mon, 11 Sep 2023 23:19:24 +0000

Tuple

let numbers: (i32, i32, f64) = (1, 2, 3.5);

// destructuring
let (a, b, c) = numbers;

// mutable
let mut mau = (10, 11, 12)
mau.0 = 90 // (90, 11, 12)

mau = (90, 91, 92) // pattern matching

need to respect the type to avoid mismatched types

Array

let neo: [i32;3] = [1, 2, 3]
neo[1] // 2

let mut morpheu = [1.1, 2.2, 3.3]
morpheu[2] = 10.15

// slice
&neo[1..] // [2, 3]
&neo[..2] // [1, 2]
&neo[1..2] // [2]

arrays should have only one type

Out-of-bound error

Trying to get an element out of the limits: index out of bounds

Memory Awareness

STATIC memory needs fixed-size

static _Y: u32 = 13

STACK are local variables,

static _Y: u32 = 13

fn main() {
    let x = 5;
    let z = true;
    let numbers = [1, 2, 3];
}

HEAP memory

static _Y: u32 = 13

fn main() {
    let x = 5;
    let z = true;
    let numbers = [1, 2, 3];

    let users = get_users();
}

Memory Cleanup

drop method to clean up it

What I want for 2023

Mauricio Reatto Duarte — Tue, 17 Jan 2023 00:08:54 +0000

2023 has already started and a small TODO list (at least, giving them a try) for this year:

Be an expert with Algolia
Rust
tRPC
SolidJS (They've started building the SolidStart and I want to give it a try)

books

talks

I wish to give some talks about software development (at least two talks)

I've returned with my blog posts, so I hope I'll have had a lot of posts by the end of this year.

JS - The Event Loop

Mauricio Reatto Duarte — Thu, 05 Jan 2023 22:20:44 +0000

It's been a long time without posting anything here, but I'm back.

Let's talk about Javascript's Event Loop. As you may know, JS is a Single-Threaded language, so it can only execute 1 task simultaneously.

Assuming we have the Javascript Engine, a program built to execute Javascript code, we need to consider that each browser has a Javascript Engine:

Chrome and many other Chromium browsers have the V8 Engine
Safari has the JavascriptCore
Firefox has the SpiderMonkey

These engines can be different in implementation across browsers, but at least they contain two parts:

Memory Heap: A data store with memory allocation to store objects
Call Stack: It's a stack that keeps track of running functions. Every time the code is calling a function, it pushes that piece of code (stack frame) onto the stack. The stack frame will contain information about the functions and their local variables.

When a function is called, it goes onto the top of the call stack, and when that same function ends, it's popped out the call stack. LIFO (last-in-first-out) is the name given to this principle.

OK, now you've got the basics of the Call Stack. But, what would happen in the case of incrementing a setTimeout(foo, 2000) in the code?

JavaScript Runtime Environment

The JS Engine runs our code in this larger environment known as JavaScript Runtime Environment. It provides some web APIs to be able to access the browser's functions like DOM manipulation, timers, HTTP Requests, and so on.

But, what would happen in the case of incrementing a setTimeout(foo, 2000) in the code?

Task Queue

Web APIs move callbacks into the Task Queue , to wait for the Call Stack to be empty, and start executing that callback function. Then, the Task Queue is a data structure responsible for storing asynchronous callbacks to be moved to the Call Stack.

On the example above, you can notice that after the delay of 2000ms, the foo() function has been moved to the Task Queue, waiting to be executed when the Call Stack becomes empty.

This queue is also known as the "Macrotask Queue", "Callback Queue", or "Message Queue".

This overall process is known as Event Loop :

Remove one task from the Task Queue
Executing code until the Call Stack is empty
Rendering any changes to the DOM
Going to step 1

https://codesandbox.io/embed/pedantic-tdd-upyc0q?expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark&view=preview

What about Promises?

After Promises have been introduced to the language, there's a new Queue in the picture, and that one is the Microtask Queue.

Microtask Queue

Known as well as Job Queue, the Microtask Queue is responsible for holding the callback function of Promises.

The known callback functions of Promises are .then(), .catch(), .finally(), and async/await .

They can be manually queued using the queueMicrotask() function.

Microtasks have more priority compared to Macro tasks because the entire microtask queue should be empty before Browser checks the Task Queue.

Then, with those new concepts in mind, we need to update our Event Loop workflow:

Removing one task from the Task Queue
Executing code until the Call Stack is empty
Running all microtasks until the microtask queue is empty
Rendering any changes to the DOM
Going to step 1

For all of these steps, we have a name to point to all of them, and we call as Concurrency Model.

Conclusion

Big computations and slow functions can make the entire page unresponsive. When you fall into situations like these, you can try solutions like chunking , or even web workers.

The main idea behind chunking is to split big functions into smaller functions. You can achieve that using setTimeout for some iterations, forcing them to be chunked, and moving them to the end of the Task Queue.

I've got a friend that was used to saying: "There's nothing a setTimeout() can't fix".

I hope you've enjoyed this text. Please, press like and don't forget to share it with your colleagues or friends. See you!

References

Web Development Fundamentals - Clients & Servers

Mauricio Reatto Duarte — Fri, 25 Mar 2022 01:04:50 +0000

Client

A client is a process that basically requests data from a server. As we're talking about the web, the browsers are clients requesting HTML pages from servers.

Server

Process providing service/data for a client

Client/Server Model

Clients requesting data from servers

Note: A piece of code/machine/software can be both server and client at the same time because it could act as a client requesting data from a database and serving a service as a server.

We've been used to associate Clients to Frontend and Servers to Backend

About the codebase executing on the client and the server:

Client

End-users can see all of the code (Browsers)
Need to be fast
Low computing power (depends on the end-user)
Cannot access Database directly (you can store information in the Browser, but in this case, we need information/data shared across users)

Server

Hidden code and implementation details
Slow (compared to clients because we need to wait on the network)
Scalable computing power (💰💰💰💰💰)
Can access Database easily and share information across users

Refactoring culture

Mauricio Reatto Duarte — Sun, 12 Jul 2020 21:38:23 +0000

When you're doing a big refactoring into your project, there's sometimes that is better to create new things than modify the existing things. It's a good plan, because you make sure that you don't break anything.

It was a great tip from @sibelius

I'm on a refactoring for update to latest stable Material-UI, changing forms from Redux Form to Formik and creating new layout to these forms.

Even with a complete copy of a file, just changing its name and a single line, it's easier to make incremental changes to the files that'll use your new refactored component

Production Ready GraphQL Summary — Part I

Mauricio Reatto Duarte — Thu, 23 Apr 2020 13:26:18 +0000

I'm reading this book with GraphQL content.

Thanks @leonardomso

Pagination: Cursor Pagination

Cursor pagination is generally a great choice, because of the accuracy and performance
Maybe it's the most common pattern in GraphQL at the moment
This pattern lets us design more complex use cases, because of Connection and Edge types
Relay clients integrate perfectly with your API because of that

Global Identification: Global ID — Node

Like Connections, they can be a good pattern even outside of a Relay context
Opaque IDs are recommended
You necessarily don't need global identification if you're not planning to use Relay
Ensure your global identification contains enough context to globally route to a node, especially in a distributed architecture

Non-Nullability

It lets clients avoid defensive code/conditionals
It helps to build more predictable schemas

tradeoffs/warnings:

It's very hard to predict what can be null
Non-null fields and arguments are harder to evolve. Going from non-null to null is a breaking change, but the opposite is not

guidelines for nullability:

Should almost always nullable fields that return object types that are backed by database associations, network calls, or anything that could potentially fail
Non-null for arguments, because it's more predictable and easy to understand API

That's it.
My first part of the book summary. Thank you.

How to insert an Expo project in a Monorepo

Mauricio Reatto Duarte — Thu, 09 Apr 2020 01:10:29 +0000

Introduction

In this post, I'll cover about adding an Expo project inside a Monorepo project. I found on the internet so many people trying to do this, asking in some forums, or commenting something like "+1" at the Github issues. So, the purpose of this post is not to teach how to create a monorepo, is how to insert your Expo application inside a Monorepo.

Of course, you could help me by liking "+1" in this post.

Monorepo

I won't go deep in Monorepo's explanation, but basically, is an architectural concept. Instead of a lot of individual repositories, you keep all your isolated code parts inside one repository. It's very different from the monolithic repo.

Good examples and inspirations with Monorepo are:

After you understand the main monorepo structure, you start to see a lot of famous libraries that you or your team use that is Monorepo.

Let's get to work

First of all, you must create an Expo project (of course, if you haven't already created one) in some folder. To do this is simple like:

    # Install the command line tools
    # npm install --global expo-cli or
    # yarn global add expo-cli

    # ~/workspace

    # Create a new project
    expo init my-project

More info: https://docs.expo.io/versions/v37.0.0/

You can overwrite my-project with your the name of your choice (mine is expo-app), then select Blank Template (Managed).

So, move this Expo project folder inside the Monorepo folder:

    # ~/workspace
    mv expo-app monorepo/packages/expo-app

Now, the Expo project is inside the Monorepo. But, we need to adjust some things to be able to run Expo inside this Monorepo.

We need to set the package name at Expo project package.json :

    // ~/workspace/monorepo/packages/expo-app/package.json
    {
      "name": "@monorepo/expo-app",
      "main": "__generated__/AppEntry.js",
      // ...
    }

The "main" key is a special configuration from Expo, so we really need to set that.

After that, let's add two essential libraries to make our Expo project work. At the monorepo root folder, run this command:

    yarn workspace @monorepo/expo-app add expo-yarn-workspaces metro-config -D -W

Flags:

-W: Adds the libraries on the root
-D: The same as —-dev to add as devDependencies

Metro config

Let's configure our Metro, so create a file metro.config.js at monorepo/packages/expo-app:

    // ~/workspace/monorepo/packages/expo-app/metro.config.js

    const { createMetroConfiguration } = require('expo-yarn-workspaces');

    module.exports = createMetroConfiguration(__dirname);

So, we need to set insert some scripts at package.json again:

    // ~/workspace/monorepo/packages/expo-app/package.json

    {
      "name": "@monorepo/expo-app",
      "main": "__generated__/AppEntry.js",
      // ...
      "scripts": {
        // ...
        "postinstall": "expo-yarn-workspaces postinstall",
      },
    }

Extra configuration :: Typescript

If you don't want to add Typescript, you can skip this section.

Probably your monorepo root folder should contain a tsconfig.json, so let's add one to the Expo App package and extend the configuration on the root.

    // ~/workspace/monorepo/packages/expo-app/tsconfig.json

    {
      "extends": "../../tsconfig.json",
      "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "importHelpers": true,
        "jsx": "react-native",
        "lib": ["dom", "esnext"],
        "moduleResolution": "node",
        "noFallthroughCasesInSwitch": true,
        "noEmit": true,
        "noEmitHelpers": true,
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "skipLibCheck": true,
        "strict": true,
        "target": "esnext",
        "allowJs": true,
        "baseUrl": ".",
        // autocomplete paths
        "paths": {
          "*": ["src/*", "assets/*"],
          "assets/*": ["assets/*"]
        },
        "removeComments": true,
        "typeRoots": ["node_modules/@types", "./src/@types"]
      },
      "include": ["src"],
      "exclude": [
        "node_modules",
        "./node_modules",
        "./node_modules/*"
      ]
    }

You don't need to use "extends" key if your monorepeo doesn't contain a TS config yet.

Last step

To start building your product, you should clean/reset your monorepo project, because of the "postinstall" script inside the expo app package.

You can remove all node_modules or something like yarn --force on the root folder.

After that, you should run yarn install again, and you'll be able to develop & build your great product using Expo universal Apps :-]

References

You can look at my merged PR inserting an Expo Managed Workflow inside a Monorepo here.

Whats next?

Expo - Bare Workflow inside a Monorepo
Relay Client to use GraphQL
Or you can comment something to do with Expo

Thank you. \o/

A PWA Expo Web using CRA - From ZERO to Deploy

Mauricio Reatto Duarte — Wed, 11 Mar 2020 19:42:37 +0000

Introduction

In this post, basically, I will init a Create React App using CRA CLI and inject the Expo SDK Tools to generate a PWA, and with the same codebase, have an iOS and Android App.

To begin, lets annotate the main tools that we'll use:

Create React App Boilerplate
Expo SDK
Expo HTML Elements
React Native
React Native Web
Styled Components
Netlfy/Now Deploy

Using the CRA Boilerplate

To get our first boilerplate, lets try this command:

You will get the full React Application provided by Facebook Team

    npx create-react-app pwaExpoTutorial

Adding React Native Ecosystem

For adding a React Native ecosystem we should add some libraries:

yarn add expo react-native react-native-web @expo/html-elements

After that, we can remove some irrelevant files

public folder
*.css files
*.test files (you can add your own test tool after)

Adding secondary libraries

expo install react-native-svg
yarn add react-native-web-hooks react-native-animatable styled-components

React Native SVG: SVG Support (Installed with Expo, because it uses Yarn and install the appropriate version to the Expo SDK)
React Native Web Hooks: React Hooks to be used in Web platform
React Native Animatable: A library to add animation to our SVG, simulating the initial CRA boilerplate

Babel configuration

It's good to configure Babel in our project, so install the expo preset and insert a babel.config.js on project root folder

yarn add -D babel-preset-expo

babel.config.js

    module.exports = { presets: ['expo'] };

Creating shared styled components

Create a file called componentsWithStyles inside something like src/shared

    import styled from 'styled-components/native';
    import * as Animatable from 'react-native-animatable';
    import { Header as H, P as Paragraph, A as Anchor } from '@expo/html-elements' ;

    export const Container = styled.View.attrs(() => ({
        as: Animatable.View
    }))`
      flex: 1;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
    `;

    export const Header = styled(H)`
      background-color: #282c34;
      flex: 1;
      justify-content: center;
      align-items: center;
      width: 100%;
    `;

    export const P = styled(Paragraph)`
      color: white;
    `;

    export const A = styled(Anchor)`
      color: #61dafb;
    `;

    export const Image = styled(Animatable.Image).attrs(() => ({
        animation: 'rotate',
        iterationCount: 'infinite',
        easing: 'linear',
        duration: 20 * 1000,
        style: { aspectRatio: 1 }
    }))`
      width: ${props => props.dimension*0.4}px;
      height: ${props => props.dimension*0.4}px;
    `;

Thinking in our logo (the SVG provided on initial CRA boilerplate), we need to set an aspect ratio to it, so create a file called AspectView.js inside some folder, I put it inside src/components

    import React, {useState} from "react";
    import {StyleSheet} from "react-native";
    import { Image } from '../shared/componentsWithStyles';

    export default function AspectView(props) {
        const [layout, setLayout] = useState(null);

        const { aspectRatio = 1, ...inputStyle } =
        StyleSheet.flatten(props.style) || {};
        const style = [inputStyle, { aspectRatio }];

        if (layout) {
            const { width = 0, height = 0 } = layout;
            if (width === 0) {
                style.push({ width: height * aspectRatio, height });
            } else {
                style.push({ width, height: width * aspectRatio });
            }
        }

        return (
            <Image
                {...props}
                style={style}
                onLayout={({ nativeEvent: { layout } }) => setLayout(layout)}
            />
        );
    }

Thank you @baconbrix to share it

I created an index.js in the same folder (src/components)

    export { default as AspectView } from './AspectView';

You can do the same with the folder src/shared (create an index.js file), but this is not the purpose of this post, you can improve on your own.

Let's dive into React Native

You can create a file in the application root folder called app.json to define some info about your app:

    {
      "expo": {
        "name": "PWAExpoWeb",
        "description": "A PWA using Expo Web",
        "slug": "pwaingexpo",
        "privacy": "public",
        "version": "1.0.0",
        "orientation": "portrait",
        "icon": "./assets/icon.png",
        "splash": {
          "image": "./assets/splash.png",
          "resizeMode": "cover",
          "backgroundColor": "#ffffff"
        },
        "web": { "barStyle": "black-translucent" }
      }
    }

Then, create an App.js file on the root folder

    import React from 'react';
    import logo from './src/logo.svg';
    import { Code } from '@expo/html-elements';
    import { useDimensions } from 'react-native-web-hooks';

    import { AspectView } from './src/components';
    import {
      Container,
      Header,
      P,
      A,
    } from './src/shared/componentsWithStyles';

    function App() {
      const { window: { height } } = useDimensions();

      return (
        <Container>
          <Header>
            <AspectView source={logo} dimension={height} />
            <P>
              Edit <Code>src/App.js</Code> and save to reload.
            </P>
            <A
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </A>
          </Header>
        </Container>
      );
    }

    export default App;

Expo has a special configuration so you need to set entrypoint in package.json

    // ...
    "main": "expo/AppEntry.js",
    // ...

Continuing on package.json, we need to add our scripts:

    // ...
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "eject": "expo eject",
        "build": "expo build:web",
        "debug-prod": "expo build:web && npx serve ./web-build",
        "now-build": "yarn build && expo-optimize"
      },
    // ...

Did you notice that after the build, there is the expo-optimize, so let's insert it on our project:

yarn add -D sharp-cli expo-optimize expo-cli@3.13.0

It's using specific version of Expo CLI (v3.13.0) because, at the time of this post, the last version of the CLI was having a problem when being referenced by the Workbox, so, as a precaution, one of the last versions was added

Last but not least, we should increment some folders in .gitignore:

#expo
.expo
web-build

#IDE
.idea
.vscode

.expo: Cache folder
web-build: The web bundle
.idea & .vscode: IDEs folders

That's it, so you can try it running yarn debug-prod. =-]

Deploy via Netlify or Now

You can use this project as a Git repository, so on Netlify or Now, you can use the Github/Gitlab/Bitbucket repo synced with the master. You have only to set the build command as yarn now-build and the output folder as web-build/, so everytime you push commit to master, it will be deployed in the services (Netlify/Now).

Whats next?

Typescript - Expo has an incredible support for TS
Workbox
GraphQL

References

Thanks, 😎

Using cross tools with Expo Web and Native

Mauricio Reatto Duarte — Tue, 03 Dec 2019 02:57:00 +0000

first post of Expo series: https://dev.to/atalkwithdev/resolving-expo-multi-select-photos-with-react-hooks-487k

Continuing my series of posts about Expo, today we will discover how to use common development tools like Reactotron and Sentry in a cross-platform application using Expo.

Expo Web

Let’s suppose that you’re going to build a Web version of your app (an Android/iOS app, but now you want a Web platform of this app), what would you do?

First of all, let’s add a “web” option in the app.json as a platform:

"platforms": [
  "ios",
  "android",
  "web"
],

After that:

yarn add react-native-web react-dom

Now, you can just start your app :]

Maybe you got an error from ./RCTNetworking that doesn’t leave your app starts. Probably you’ll get this error if you are already using Reactotron solution.

Installing / Fixing Reactotron

Let’s install the Reactotron Client at our machine following this installation guide. Then, we can create our files to each platform only writing the file extension prefix. i.e.: index.native.js and index.web.js

The *.web.js means that code will build and run only in the Web platform, the same approach is to the *.native.js, but to the iOS/Android Platform.

Create a folder called reactotron on your app and then create the two files:

index.native.js
index.web.js

index.native.js:

import Reactotron, { openInEditor, asyncStorage } from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga';
import { NativeModules } from 'react-native';
import url from 'url';

const { hostname: host } = url.parse(NativeModules.SourceCode.scriptURL);

if ( __DEV__ ) {
  const tron = Reactotron.configure({ host })
    .use(reactotronRedux())
    .use(asyncStorage())
    .use(sagaPlugin())
    .use(openInEditor())
    .useReactNative()
    .connect();

  tron.clear();

  console.tron = tron;
}

yarn add url
yarn add -D reactotron-react-native reactotron-redux reactotron-redux-saga

index.web.js:

import Reactotron from 'reactotron-react-js';
import { reactotronRedux } from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga';

if ( __DEV__ ) {
  const tron = Reactotron.configure()
    .use(reactotronRedux())
    .use(sagaPlugin())
    .connect();

  tron.clear();

  console.tron = tron;
}

yarn add -D reactotron-react-js reactotron-redux reactotron-redux-saga

After that, you have to add that configuration in somewhere.

App.js:

import React from 'react';
import 'path/to/your/reactotron';

// ...

registerRootComponent(AppContainer);

Now, if you build the app for Web, it will use the web configuration, if you build the app for Native, it will use the Native configuration.

You will apply the same approach to Sentra tool, but you can follow this guide :]

Configuring Sentry

Unfortunately, there is a bug issue with Sentry Expo v.2.x with the Web Platform, then let’s use an older version, and let’s add the Sentry Browser to the Web Platform too.

yarn add sentry-expo@1.13.0 @sentry/browser

After that, let’s configure our Sentry project, following the approach of the Reactotron, create a folder called sentry on your app and then create the three files:

sentry.native.js
sentry.web.js
index.js

sentry.native.js:

import Sentry from 'sentry-expo';
import env from 'path/to/your/constants/environment';

Sentry.config(env.SENTRY_PUBLIC_DNS).install();

export default Sentry;

sentry.web.js:

import * as Sentry from '@sentry/browser';
import env from 'path/to/your/constants/environment';

Sentry.init({
  dsn: env.SENTRY_PUBLIC_DNS,
  debug: false,
});

export default Sentry;

index.js:

import Sentry from './sentry';

export default Sentry;

When you want to use Sentry to capture exceptions, you just import it:

import Sentry from 'path/to/your/sentry';

// Sentry.captureException()

References

I hope you enjoy this post, and soon I will post more about Expo and how to deliver a great value to your company and your clients using it.

Thank you :]

Resolving Expo Multi Select Photos with React Hooks

Mauricio Reatto Duarte — Thu, 21 Nov 2019 15:18:31 +0000

Created: Nov 26, 2019 10:07 PM Tags: Expo, React Native, javascript

Introduction

Do you know the Expo project? Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

Workflows

The two approaches to building applications with Expo tools are called the “managed” and “bare” workflows.

With the managed workflow you only write JavaScript / TypeScript and Expo tools and services take care of the rest for you.
In the bare workflow, you have full control over every aspect of the native project, and Expo tools can’t help quite as much.

We won’t tell about the bare workflow at this moment, only a problem with so many people using Expo SDK 33 or later.

Expo ImagePicker - launchImageLibraryAsync

There is the ImagePicker on the API for display the system UI for choosing an image or video from the phone’s library, but there isn’t a way to allow multiple selections of images, as you can see here. There are some feature requests here:

The solution with React Hooks

In React Native, you can use the Camera Roll API to get media from the phone’s library, then why not build a hook for that? :]

import { useCallback, useState } from 'react';
import { CameraRoll } from 'react-native';

export default function useCameraRoll({
  first = 40,
  assetType = 'Photos',
  groupTypes = 'All',
}) {
  const [photos, setPhotos] = useState([]);
  const [after, setAfter] = useState(null);
  const [hasNextPage, setHasNextPage] = useState(true);

  const getPhotos = useCallback(async () => {
    if (!hasNextPage) return;

    const { edges, page_info: pageInfo } = await CameraRoll.getPhotos({
      first,
      assetType,
      groupTypes,
      ...(after && { after }),
    });

    if (after === pageInfo.end_cursor) return;

    const images = edges.map(i => i.node).map(i => i.image);

    setPhotos([...photos, ...images]);
    setAfter(pageInfo.end_cursor);
    setHasNextPage(pageInfo.has_next_page);
  }, [after, hasNextPage, photos]);

  return [photos, getPhotos];
}

After that, you simply use it like this:

// path to your hooks
import { useCameraRoll } from 'shared/hooks';

// ...

function SomeComponent() {
    const [photos, getPhotos] = useCameraRoll({ first: 80 });

    // ...
}

You can use getPhotos in a FlatList onEndReached props , for instance. Problem solved :]