React Native

Solve problem: i18next::pluralResolver: Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling en i18n in React Native and Android

by
Solve problem: i18next::pluralResolver: Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling en i18n in React Native and Android

Tiempo de lectura: < 1 minuto Reading time: < 1 minute When implementing i18next’s multi-language support in React Native, the Android platform may return the following error: The following error message is displayed in the console: i18next::pluralResolver: Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling. at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in … Read more

Adding a Loader in React Native

by

Tiempo de lectura: 3 minutos Reading time: 2 minutes I’m going to show you how to add a loader for loading screens in React Native. To begin, we need to create a new component called Loader.js import React, { useState } from “react”; import { View, StyleSheet } from “react-native”; import { ActivityIndicator } from ‘react-native-paper’; var setMostrarLoader; const Loader … Read more

Open Stack.Tab from a Stack.Screen contained within a tab with different NavigationContainers in React Native.

by

Tiempo de lectura: 2 minutos Reading time: 3 minutes I’m going to explain how to open another tab within a screen (outside the tab but within the execution stack) that already has content in our tab. For example, we have the following screen and we want to perform the navigation shown in the video: And we want to open the … Read more

Adding icons in Tab Navigator in React Native.

by
Adding icons in Tab Navigator in React Native.

Tiempo de lectura: < 1 minuto Reading Time: < 1 minute When we create a Tab Navigator by default, it appears without icons: Based on this code: <NavigationContainer> <Tab.Navigator initialRouteName=”Home”> <Tab.Screen name=”Home” component={Home} /> <Tab.Screen name=”Buscar” component={MisCursos} /> <Tab.Screen name=”Perfil” component={Perfil} /> </Tab.Navigator> </NavigationContainer> If we want to add icons, we can do the following. We will use a library that … Read more

Generate a View using a loop with React Native. Example: Dynamic Menu.

by
Generate a View using a loop with React Native. Example: Dynamic Menu.

Tiempo de lectura: 2 minutos Translated content in English: The first thing we have to do is create the component (if you don’t know what a component is, I recommend this post Create a component in React Native) that will represent our menu. In this case, I call it menu.js import React from “react”; import { StyleSheet, View } from … Read more

Add Top Tab Navigation using React Native

by
Add Top Tab Navigation using React Native

Tiempo de lectura: 2 minutos Reading time: < 1 minutes If you want to add a Top Tab Navigation using React Native to achieve the result shown in this image: First, you need to install the necessary dependency (remember to install React Navigation first): npm install npm install @react-navigation/material-top-tabs react-native-tab-view --save Once installed, it is used in the same way ... Read more

Open tab or screen inside another NavigationContainer React Native

by
Open tab or screen inside another NavigationContainer React Native

Tiempo de lectura: < 1 minuto Reading time: < 1 minute If you encounter the following error when opening a tab or screen within a NavigationContainer: Looks like you have nested a ‘NavigationContainer’ inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass ‘independent={true}’ explicitly. Note … Read more

Adjust WebView width: 100% in React Native

by
Adjust WebView width: 100% in React Native

Tiempo de lectura: < 1 minuto Reading time: < 1 minutes The react-native-webview plugin has an issue that prevents adapting the screen to 100% using styles. In this case, we have installed it using Expo. It’s also important to remember that this plugin only works on Android or iOS, not on the web. Therefore, if we apply the style: webview: { ... Read more