Tiempo de lectura: 2 minutos Image optimization is a very important point when developing an APP. With the react-native-fast-image library, we will be able to load images quickly and easily. The first thing we will do is install this library: npm install react-native-fast-image –save Once installed, we will create a component that will allow us to load any type of … Read more
Tiempo de lectura: 2 minutos Today we are going to learn how we can internationalize and add multi-language support to a React Native APP using TypeScript. The first thing we will do is install i18n: npm install i18next react-i18next –save Once installed, we create a folder called language and inside it, we create a file i18next.ts // i18next.ts import i18n … Read more
Tiempo de lectura: < 1 minuto Today we are going to solve the following error: A problem occurred evaluating project ‘expo’. A problem occurred configuring project ‘expo-modules-core’. [CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders. This error occurs when we try to generate the development build with Expo: npx run:android To solve this error, we need … Read more
Tiempo de lectura: 2 minutos Today we’re going to learn how we can add dark mode using React and the MUI design library. The first thing we’ll do is to create two dark and light themes: Theme.tsx // theme.ts import { createTheme, Theme } from ‘@mui/material/styles’; import ‘@fontsource/roboto’; import ‘@fontsource/roboto/100.css’; import ‘@fontsource/roboto/300.css’; import ‘@fontsource/roboto/400.css’; const lightTheme: Theme = createTheme({ palette: … Read more
Tiempo de lectura: 2 minutos Today we’re going to learn how to add Google Adsense to React. The first thing we need to do is to create an account on Google Adsense and obtain our page code. Now we need to add the code inside our head like this: <head> <script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXX” crossOrigin=”anonymous”></script> </head> Where in ca-pub-XXXXXXXXXXXXX we must … Read more
Tiempo de lectura: 2 minutos Today we’re going to learn how we can validate a form, including a reCAPTCHA to prevent spam attacks by BOTS. The first thing we need to do is register our reCAPTCHA code on Google: https://www.google.com/recaptcha/about/ And click on v3 Admin Console Click on the plus (+) button to create a new one, and in this … Read more
Tiempo de lectura: < 1 minuto Today we are going to learn a small function to decode JWT tokens using React. The first thing we will do is to install the necessary libraries: JsonWebToken npm i jsonwebtoken –save auth0.js npm install auth0-js –save And the types if we are using TypeScript: npm i –save-dev @types/auth0-js Once installed, let’s create this function … Read more
Tiempo de lectura: 3 minutos Today we are going to learn how to implement Google Sign-in with React, also compatible with Next.js. The first thing we need to do is install the React Oauth2 Google library: npm install @react-oauth/google@latest Once installed, we need to create our credentials: Go to Google Cloud Platform (https://cloud.google.com/) and click on Console. Now select your … Read more
Tiempo de lectura: 2 minutos Today we are going to learn how we can create a Progressive Web App (PWA) using React and Next.js. We install the dependency we are going to use next-pwa npm install next-pwa –save-dev @types/next-pwa –save-dev Now we create a manifest.json file inside public. { “short_name”: “My PWA”, “name”: “My PWA”, “icons”: [ { “src”: “/icon.png”, … Read more
Tiempo de lectura: < 1 minuto If we want to load paths in Next.js with or without parameters and avoid redirection to a 404 page, we need to do the following: First, we create our folder structure as needed. In this example: /path/ [id].tsx Inside our [id].tsx file is where we handle that ID and perform the desired operations. This works … Read more
