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

Connect a React Application to a WebSocket Server

Tiempo de lectura: < 1 minuto Today we're going to learn how to connect our web application developed with React to a WebSocket. Configuration of the React Application npm install –save react-websocket Make sure to replace ws://localhost:8000/ws/1 with the URL of your FastAPI server. npm start Visit http://localhost:3000 in your browser, and you'll see the React application. You can type messages, … 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

Allow Dragging Elements on the Screen in React Native

Allow Dragging Elements on the Screen in React Native

Tiempo de lectura: < 1 minuto Today we are going to create a component that will allow us to drag other elements across the screen using React Native. The first thing we will do is create the component that we will call DragComponent.tsx and add the logic that will allow us to drag: < pre class=”EnlighterJSRAW” data-enlighter-language=”generic” data-enlighter-theme=”” data-enlighter-highlight=”” data-enlighter-linenumbers=”” data-enlighter-lineoffset=”” … Read more

How to put a React Native app with Expo in Immersive mode (full screen) for Android

How to put a React Native app with Expo in Immersive mode (full screen) for Android

Tiempo de lectura: < 1 minuto We will implement the Immersive mode for Android on an Expo React Native app today. The Immersive mode allows us to put an app in full-screen mode on Android. We will start by installing the necessary libraries: Expo navigation bar: expo install expo-navigation-bar Expo status bar: expo install expo-status-bar And now to hide the status … Read more

Transform Android XML Vector to SVG Using the Command Line

Transform Android XML Vector to SVG Using the Command Line

Tiempo de lectura: < 1 minuto We will learn today how to transform an Android XML vector into a vector in SVG format using the command line. With the vector in SVG, we can use it both in React, Flutter or Web. First, we will install this library (if we want to use the web version): npm install -g vector-drawable-to-svg Once … Read more