DevCodeLight 
Tiempo de lectura: < 1 minuto Today we are going to implement a function that will allow us to play sound using React. The first thing we need to do is to create this function that will allow us to load the sound: export function loadSound(source: string) { const sound = document.createElement(“audio”); sound.src = source; sound.setAttribute(“preload”, “auto”); sound.setAttribute(“controls”, “none”); sound.style.display = … Read more
Tiempo de lectura: < 1 minuto If we encounter this error while trying to generate an apk of a React Native application SDK location not found Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk.dir path in your project’s local properties file, we need to do the following to fix it. Now we will create … Read more
Tiempo de lectura: < 1 minuto Let’s see how to set up the general styles for an application developed in React Native. To do this, on the screen where the different screens and routes are established, within the StackNavigator, we will add the screenOptions. The screenOptions is an object that contains the style and layout options for the screens in navigation. … Read more
Tiempo de lectura: 2 minutos Today we’re going to see how we can communicate a web created with React with an iFrame or frame in React or HTML with JavaScript. Loading the Frame We create an iframe: <iframe src={urlCargar} style={{ width: ‘100%’, height: ‘500px’ }} /> In urlCargar we put the URL of the web from which we want to … Read more
Tiempo de lectura: < 1 minuto Today we are going to learn how we can communicate a web app created with React with a WebView in React Native, and also use the postMessage() function of JavaScript. This is very useful for creating interfaces with web content and implementing them within a mobile app. React Native We will use the library react-native-webview … Read more
Tiempo de lectura: 2 minutos Today we are going to learn how to implement a barcode scanner using React. The first thing we need to do is install the quagga2 library. You can also use quagga. npm install @ericblade/quagga2 –save Once installed, we are going to create a component called scanner.tsx import Quagga from ‘@ericblade/quagga2’; import React, { useEffect, useCallback … Read more
Tiempo de lectura: < 1 minuto If VSCode stops showing the explorer, we need to do the following: Go to VSCode and press: Ctrl+Shift+P (Windows or Linux) Cmd+Shift+P (Mac) The command console will open. And we need to run this command (copy and paste): View: Reset View Locations DevCodeLightdevcodelight.com
Tiempo de lectura: 2 minutos Today we are going to learn how we can create a map component compatible with Open Street Maps using the Leaflet library in React. The first thing we need to do is install the necessary library: npm install react react-dom leaflet And then the Leaflet library: npm install react-leaflet And if we need TypeScript (in … Read more
Tiempo de lectura: 2 minutos In React, this type of component is known as a “Higher Order Component” or “HOC”. An HOC is a function that takes a component and returns another component that usually provides additional functionality to the original component. Suppose we want to create an HOC called WrapperComponent that wraps another component called WrappedComponent and provides it … Read more
Tiempo de lectura: < 1 minuto Today we are going to fix the common error that may occur when implementing i18n in our React environment with Next.js. This is the error: Unhandled Runtime Error Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: “” Client: “” See more info here: https://nextjs.org/docs/messages/react-hydration-error A different content appears … Read more
