Cómo crear un botón en React Native

 

A través de React Native (RN) es posible crear aplicaciones tanto para dispositivos Android como para dispositivos IOS utilizando una sola base de código.  

En este tutorial vamos a crear un simple botón, que al ser presionado mostrará una ventana de alerta (Alert). Para Esto no necesitas instalar ninguna librería externa. 

Suponiendo que ya tienes configurada tu computadora con este maravilloso  framework, sólo resta dirigirte al archivo JavaScript llamado App.js y reemplazar su contenido por el siguiente, que es el que contiene el botón:

   

    // importamos las librerías

    import React from 'react';

    import { Text, View, TouchableOpacity,

            StyleSheet, Alert,

    } from 'react-native';

    // definimos el componente principal 'HolaMundo'

    const MyButton = () => {

      return (

        <View style={styles.stContent}>

          <TouchableOpacity style={styles.stButton}

               onPress={() =>

                   Alert.alert('', 'Presionaste el botón')}>

            <Text style={styles.stText}> PRESIÓNAME </Text>

          </TouchableOpacity>

        </View>

      );

    };    

 

   // exportamos el componente, para ser llamado desde cualquier clase

     export default MyButton

     

     // definimos algunos estilos

     const styles = StyleSheet.create({

         stContent: {

            flex: 1,

            justifyContent: 'center',

            alignItems: 'center',

            backgroundColor: '#F4F6F6'

         },

         stButton: {

             paddingVertical: 5,

             paddingHorizontal: 15,

             borderTopWidth: 0.3,

             borderBottomWidth: 4,

             borderRightWidth: 0.5,

             borderLeftWidth: 4,

             backgroundColor: '#82E0AA',

             borderBottomColor: '#58D68D',

             borderLeftColor: '#45B39D',

             borderTopColor: '#45B39D',

             borderRightColor: '#45B39D',

             borderRadius: 5

         },

         stText: {

             fontSize: 17,

             color: '#FFFFFF',

             fontWeight: 'bold'

         }

     })

Para correr el código, basta con conectar tu dispositivo en modo depuración, abrir el terminal desde el proyecto RN, y hacer npx react-native run-android para dispositivos Android o  npx react-native run-ios para dispositivos IOS

El resultado que veremos será el siguiente

Artículos relacionados:

Primer Hola Mundo en React Native

Con esto habremos creado un botón completamente funcional en React Native. 

Read More

Primer Hola Mundo en React Native

 

A través de React Native (RN) es posible crear aplicaciones tanto para dispositivos Android como para dispositivos IOS utilizando una sola base de código.

Suponiendo que ya tienes configurada tu computadora con este maravilloso  framework, sólo resta dirigirte al archivo JavaScript llamado App.js y reemplazar su contenido por el siguiente, que es lo más básico de todo

   

    // importamos las librerías

    import React from 'react'

    import { Text, View } from 'react-native'

    // definimos el componente principal 'HolaMundo'

     const HolaMundo = () => {

            return (

                <View>

                    <Text> ¡Hola, Mundo! </Text>

                </View>

            )

     }    

 

     // exportamos el componente, para ser llamado desde cualquier clase

     export default HolaMundo

Para correr el código basta con conectar tu dispositivo en modo depuración, abrir el terminal desde el proyecto RN, y hacer npx react-native run-android para dispositivos Android o  npx react-native run-ios para dispositivos IOS

Agregando algunos estilos

Para dar estilo a la vista de la pantalla principal, sustituiremos lo que está dentro de 'return' por lo siguiente:

    return (

        <View style={{ flex: 1, justifyContent: "center",

alignItems: "center" }}>

            <Text> ¡Hola, Mundo! </Text>

        </View>

    )

El resultado que veremos será el siguiente

Con esto habremos dado nuestros primeros pasos en React Native.

Read More

Cómo descargar imágenes jfif de Google en formato jpg webp o jpeg

 

Al intentar descargar una imagen de Google Images, a menudo nos topamos con este formato jfif, eso se debe a que la imagen no termina de cargar en su totalidad, pero aún así se puede descargar en su formato original, ya sea jpg, jpeg o webp.

La forma sencilla de hacer esto es la siguiente:

• Una vez encontramos la imagen que queremos descargar, hacemos clic derecho sobre ella.
• Seleccionamos la opción que dice  "Copiar dirección de imagen".
• Abrimos una nueva ventana del navegador que estemos utilizando.
• En la nueva ventana, en la barra de direcciones, hacemos clic derecho, y pegamos la dirección previamente copiada, y damos Enter.
• Se comenzará a cargar la imagen. Una vez termine de cargar, hacemos de nuevo clic derecho sobre la imagen y seleccionamos la opción "Guardar imagen como".
• Elegimos la ruta a guardar, y ¡listo! Habremos descargado nuestra imagen en su formato original.

Read More

You attempted to use a firebase module that is not installed on your android project by calling firebase.messaging() -- React Ntive Error

> Task :app:processDebugManifest FAILED

My Solution

I had installed

@react-native-firebase/messaging@11.5.0

and it was that problem occurred, so I installed a lower version

@react-native-firebase/messaging@10.2.0

Then i cleaned and rebuild 

cd android && ./gradlew clean

and then:

npx react-native run-android

that worked for me!

-------------------------------------------------------------------------

Another solution (posible):

Into mainAppliction.java

import io.invertase.firebase.messaging.RNFirebaseMessagingPackage; // you have add this

and add package into your getPackages(): 

packages.add(new RNFirebaseMessagingPackage());   // add this

Read More