# Is this 2020 React Native project setup still current?

> Published 2026-10-26T00:42:04.299Z on https://youblog.app/p/is-this-2020-react-native-project-setup-still-current/
> Source video: https://www.youtube.com/watch?v=APnKX8M7Lgg

If your React Native project setup keeps breaking on lint rules, Gradle memory errors, and navigation imports that no longer exist, the culprit is usually age, not skill. This walkthrough takes a 2020 Brazilian tutorial apart step by step and marks which instructions still hold in 2026 and which now fail.

## What does React Native project setup involve in this tutorial?

React Native project setup here follows a deliberate order: tooling first, then folder structure, then state management, then forms and authenticated navigation. The teacher configures ESLint and Prettier before installing anything else, which keeps later files consistent without manual cleanup.

The video was published on 9 June 2020 by the channel "Dev doido", a Brazilian developer channel, and runs about 67 minutes. Its package list is long: Axios, date-fns, polished, crypto-js, React Native Gesture Handler, React Native Linear Gradient, React Navigation with drawer support, React Native Vector Icons, React Native Paper, Redux with Redux Persist and Redux Saga, Formik, and Yup. The stack was assembled by hand rather than through a template.

That ordering still makes sense. What does not survive intact is the exact command used to bootstrap the project and several import paths, so treat the sequence as the durable part and the syntax as the part to verify.

Redux remains a maintained library, but the current [Redux Toolkit](https://redux-toolkit.js.org/) documentation recommends its `configureStore` and `createSlice` APIs over hand-written action types, switch-case reducers, and separate saga files, which is exactly the shape this tutorial builds.

## How do ESLint, Prettier and EditorConfig fit together?

ESLint catches code problems, Prettier reformats code style, and EditorConfig standardizes editor settings such as indentation, so the three solve different problems and should not be treated as interchangeable. The tutorial installs all three in the opening minutes and links them to editor save actions.

The ESLint configuration in the transcript targets an older plugin set: `babel-eslint`, `eslint-plugin-react`, `eslint-plugin-react-hooks`, and `eslint-plugin-jsx-a11y`, with rules for unused variables, one expression per line, and console warnings. Today the React team maintains [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks), and the flat config format introduced in ESLint 9 replaced the `.eslintrc` file shape used in 2020, so the copied rule block will not load unchanged.

The editor settings are simpler to keep. The teacher sets two-space indentation and expects Prettier to run on save, with `editor.formatOnSave` enabled. That pairing still works and costs nothing to reproduce.

A practical migration is to keep the rules and drop the parser. Modern ESLint parses JSX with its default parser, and Prettier handles formatting on save, so the two tools stop competing over the same lines.

## Which packages should you still install today?

Most of the tutorial's packages remain installable, but the bootstrap command and several navigation imports do not match current documentation, so the install step needs rewriting rather than replaying. The React Native team now recommends starting with a framework such as [Expo](https://expo.dev) for new apps, while noting that React Native can be used without one.

Here is how the 2020 list maps onto 2026 state. Maturity notes reflect what each project's current documentation says, not a benchmark.

| Package | Role in the tutorial | Status note |
| --- | --- | --- |
| React Navigation | Stack and drawer routing | Current major versions use the [React Navigation](https://reactnavigation.org/) native stack API; the `createDrawerNavigator` pattern remains |
| Redux, Redux Saga, Redux Persist | Global state, side effects, local persistence | Maintained, but [Redux Toolkit](https://redux-toolkit.js.org/) is the documented default path |
| Axios | HTTP client for the API | No change to the pattern described |
| Formik and Yup | Form state and schema validation | Both maintained; [Formik](https://formik.org/) and [Yup](https://github.com/jquense/yup) documentation still cover this pairing |
| React Native Vector Icons | Icon fonts | Still requires manual native font linking on both platforms |
| React Native Paper | Material components | Provides the provider wrapper and theme described |
| React Native Linear Gradient | Gradient backgrounds | Requires a native module install, as in the video |

The tutorial never uses a TypeScript template, which is worth flagging because starting with the TypeScript option costs almost nothing and prevents the `PropTypes` boilerplate the video writes by hand. TypeScript is worth the extra setup.

One more caution: the teacher adds Jest configuration to ignore certain modules during transform, and the exact ignore pattern depends on the libraries installed. Copy the current Expo or React Native testing documentation instead of the 2020 string.

## How should you structure folders for a scalable app?

The tutorial organizes source code under a `src` folder with subfolders for components, pages, services, store, and navigators, separating presentation from state and network code. That separation is the main architectural idea in the video and it holds up.

The listing below follows the order the teacher creates each directory.

1. `src/components`: shared visual pieces such as a gradient background, a loading indicator, a button, and an input.
2. `src/pages`: screen files for sign-in and sign-up, with a stub profile screen added later.
3. `src/services`: the Axios instance pointed at the backend base URL.
4. `src/store`: Redux modules, each with actions, reducer, and saga files, plus the root store configuration.
5. `src/navigators`: the authenticated navigator, the client navigator, and the selector that chooses between them.

The one omission is a dedicated theme or token file for colors and spacing. The teacher does create a metrics file with screen width and height plus a color palette, which is the right instinct, but the palette ends up referenced directly inside styled components in many places.

Grouping each Redux module into an actions file, a reducer file, and a saga file is a reasonable convention, though the current Redux documentation favors slices that keep those concerns together.

## How do Redux, Redux Persist and Redux Saga combine?

Redux holds application state, Redux Persist saves selected parts of that state to device storage, and Redux Saga handles side effects such as login requests, so the three combine as storage layer, state layer, and effect layer. The tutorial wires all three in the store configuration.

The store file imports `persistStore` and `persistReducer` from `redux-persist`, `applyMiddleware` from Redux, `createStore`, the root reducer, the root saga, and `AsyncStorage`. It then builds a saga middleware, attaches Reactotron in development, and passes a whitelist containing the auth reducer to `persistReducer`.

The auth reducer uses Immer's `produce` to update a draft state, starting with a null token, `signed: false`, and a loading flag. Actions cover sign-in request, sign-in success, sign-in failure, sign-up request, sign-up success, sign-up failure, and sign-out. The saga catches errors with `try`/`catch`, shows an alert, and dispatches a failure action.

Persistence on device storage is not encryption. Anything stored through AsyncStorage remains readable on a compromised or rooted device, so tokens saved this way should be short-lived, and the [Redux Persist](https://github.com/rt2zz/redux-persist) documentation treats the storage engine as a pluggable decision rather than a security boundary.

Two details in the video are easy to miss. First, the saga middleware only runs if it is passed to `applyMiddleware`. Second, the persisted state needs a `persistStore` call after store creation, otherwise nothing is rehydrated on relaunch.

## How do you wire Axios, Formik, Yup and authenticated routes?

The tutorial puts a single Axios instance in `src/services/api.js` with the backend base URL, then uses Formik with a Yup schema on the sign-up screen and plain local state on the sign-in screen. Authenticated routing is decided by a selector that reads the token from Redux.

The sign-up form uses `Formik` with `initialValues`, `validationSchema`, and `onSubmit`, plus `setFieldTouched` and `handleChange` handlers per field. Yup enforces required fields, a valid email format, and matching password confirmation. The sign-in form skips Formik because it holds only two fields.

The route switcher checks the token and then reads the user type to pick the admin navigator or the client navigator. In the video, a user with the admin type is blocked from registering, with an on-screen alert. That check belongs on the server too, because a client-side type check can be bypassed.

The teacher also sets the Axios authorization header as `Bearer` with the token after a successful login, and adds `navigation.navigate` calls to move between sign-in and sign-up. The token refresh step is not covered, and the [Axios](https://axios-http.com/docs/interceptors) interceptor documentation is the place to add it.

One saving grace in the transcript: the teacher remarks in the middle that a `useSelector` import came from the wrong package, then corrects it. Small import mistakes of that kind are exactly what a linter with import resolution rules catches, which is why the ESLint configuration in the first section matters more than its rule count.

## Which configuration steps made navigation and icons work?

Icons and gesture handling need native configuration beyond `npm install`, and the tutorial covers the Android side of that in the video. Vector Icons requires font files copied into the Android assets directory and an entry in the app's main Java activity, while Gesture Handler must be imported at the top of the entry file.

The Android work in the transcript has three parts: raising the Gradle JVM heap to 4 GB in `gradle.properties`, adding lines to `settings.gradle` and the app-level `build.gradle`, and editing the main activity to register icon fonts. Each of these targets a React Native version from 2020, and the [React Native environment setup guide](https://reactnative.dev/docs/environment-setup) now describes a different project shape for new apps.

The Jest transform ignore pattern is a fourth piece. It lists modules that ship untranspiled JavaScript, and it fails silently in confusing ways when a new native module is added. Regenerating it from the current testing guide is faster than patching the 2020 string.

The teacher also adds a shell script to reset the Android build and a port reverse command for Reactotron. Those two commands remain useful when Android builds cache stale JavaScript.

## Frequently asked questions

- **Is the Redux setup in this tutorial still the recommended approach?** Not for new projects. The current [Redux Toolkit](https://redux-toolkit.js.org/) documentation recommends `configureStore` and `createSlice` instead of hand-written action types, switch-case reducers, and separate saga files, though the underlying Redux model and persistence through `redux-persist` still work.

- **Can you still start a React Native project from the command line the way the video does?** The React Native team now points new apps toward a framework such as [Expo](https://expo.dev) for Firebase routing and universal libraries. React Native can still be used without a framework, but the bare initialization command shown in a 2020 recording no longer matches the current quick-start.

- **Does storing a login token with Redux Persist keep it secure?** No. Redux Persist writes to device storage through an engine such as AsyncStorage, which is not encrypted by default, so persisted tokens stay readable on a compromised device. Password-style fields on screen should also use secure entry, as the tutorial does for the password inputs.

- **Is a TypeScript template worth switching to after following this project?** Yes for any project you intend to continue. The tutorial writes `prop-types` definitions by hand for buttons and inputs, and TypeScript replaces those definitions with compile-time checks that catch the wrong icon name or a missing prop before the app runs.

- **Is this a good source for learning Crazystack typescript patterns?** Not directly. The video predates that material, so treat it as background on structuring state and routing, and follow the [Crazystack](https://crazystack.com.br) material for the TypeScript-specific patterns.

- **Which parts of the tutorial should a beginner reproduce first?** Start with the folder structure, the ESLint and Prettier pair, and a single Axios service, then add Redux and forms. Routing to authenticated screens should come after a working unauthenticated flow, because debugging navigation and HTTP at the same time is where most early projects stall.

- **Does the tutorial cover tests?** Only the Jest transform configuration needed to run the default suite. There are no component or saga tests, so plan to add testing independently rather than inheriting a pattern from the recording.

- **How long does a comparable setup take today?** The video runs 67 minutes across two weekends of editing, according to the teacher's closing remarks. With a framework template and current linting defaults, the same foundation takes far less manual wiring, mostly because the configuration files ship pre-populated.

- **What changed most since June 2020?** Linting config format, the recommended way to bootstrap a project, the Redux Toolkit default, and the navigation import paths. The architectural decisions around folder structure, state separation, and authenticated routing remain sound.

- **Should you copy the backend along with the mobile app?** The tutorial assumes a backend deployed separately and never demonstrates it. Reuse whatever API you already run and confirm its authentication endpoint shape before wiring Axios, since the login route and response fields are hard-coded in the saga.

- **Where do you find the video's example code?** The description references a repository, and the closing minutes repeat the offer. Verify the link on [Dev doido](https://www.youtube.com/@gustavodevdoido)'s channel page before relying on it, since descriptions on older videos change.

## Turn the tutorial into written reference

A step-by-step project setup like this one is hard to search inside a video timeline, while a written version lets you jump straight to the Gradle heap fix or the navigation import that broke. That gap is what [Skala Blog](https://skalablog.com) exists to close.

If you have recorded a walkthrough, an explanation, or an opinion about a tool you use daily, paste the YouTube URL into Skala Blog, let it transcribe the audio, and edit the resulting draft into an article you can point readers to. The transcript is the starting point, and your review is what makes it publishable.

[Source video](https://www.youtube.com/watch?v=APnKX8M7Lgg)