Setting up ESLint for React or React Native project with JavaScript or TypeScript

Setting up ESLint for React or React Native project with JavaScript or TypeScript

Tiempo de lectura: 3 minutos Today we are going to learn how we can set up ESLint for a project that uses React and React Native with JavaScript or TypeScript. This will allow us to recognize errors that appear in our code and configure the type of error we want. Returns only the HTML translated, without any additions.HTML: First of … Read more

Avoiding the Keyoard from Hiding the User Interface in React Native

Tiempo de lectura: 2 minutos The KeyboardAvoidingView is a component in React Native that helps manage keyboard behavior on mobile devices, especially on small screens. When a text field or input is selected and the keyboard appears, The KeyboardAvoidingView adjusts the position of components on the screen to prevent them from being covered by the keyboard. You should use KeyboardAvoidingView … Read more

Adding GDPR European Ad Consent Message with React Native Google Mobile Ads (ADMOB) using Expo

Adding GDPR European Ad Consent Message with React Native Google Mobile Ads (ADMOB) using Expo

Tiempo de lectura: 2 minutos Today we are going to learn how we can add the mandatory ad consent message to comply with GDPR. The first thing we need to do is to have our message set up: https://devcodelight.com/mensaje-consentimiento-conforme-rgpd-para-admob/ NOTE: I am using version 12.2.0 of react-native-google-mobile-ads at least (https://github.com/invertase/react-native-google-mobile-ads) Once configured, let’s go to android/app/proguard-rules.pro and add: -keep class … Read more

Implementing Google Consent for GDPR with React Native

Implementing Google Consent for GDPR with React Native

Tiempo de lectura: < 1 minuto Today we are going to learn how we can implement the GDPR consent message with React Native. Lets install the following library (https://www.npmjs.com/package/@ulangi/react-native-ad-consent) npm install @ulangi/react-native-ad-consent –save <p.Now let’s add this key in info.plist of iOS: <p.Now we open AndroidManifest.xml in case of Android. And add: And now we create our component called consentAdmob.ts To … Read more

Failed to connect with the project in React Native

Failed to connect with the project in React Native

Tiempo de lectura: 2 minutos I tried to run an application developed in React Native on an Android device, and I encountered the following error. To solve it, I went to the network and Internet settings of my computer, after clicking on ‘Connection status’ as shown in the following image. We are now going to click where we are connected … Read more

Connect a React Native Application to a WebSocket

Connect a React Native Application to a WebSocket

Tiempo de lectura: < 1 minuto Today we will learn how to connect our React Native application to a WebSocket using the react-native-websocket library Setting up React Native Application npm install –save react-native-websocket Make sure to replace ws://localhost:8000/ws/1 with the URL of your FastAPI server. npx react-native run-android or npx react-native run-ios Visit http://localhost:3000 in your browser and you will see … Read more

Eliminate Automatic Backup of LocalStorage in Android/iOS with React Native Expo

Eliminate Automatic Backup of LocalStorage in Android/iOS with React Native Expo

Tiempo de lectura: < 1 minuto Today we are going to learn how we can disable the option to allow local storage backup using React Native. Inherently, Expo sets the option to store local storage remotely by default: To avoid it, we will have to set the allowBackup option to false. To do this, we go to our app.json and put: … Read more

Detecting collisions between two elements in React Native

Detecting collisions between two elements in React Native

Tiempo de lectura: 3 minutos Detect colisions between two elements using React Native. Detect collision is very useful if we want to make small games with React Native even using Expo. First, we will take reference from our element of the tutorial at Allow dragging elements on screen in React Native. DragComponent.tsx import React, { useRef, ReactNode, useState } from … Read more