¿Cómo agregar GIF en react-native?

React-native es una herramienta de desarrollo de aplicaciones móviles multiplataforma. Es uno de los marcos construidos sobre Javascript. Ahora vamos al grano. Usualmente usamos imágenes .jpeg o .png porque somos más amigables con ellas. Pero, ¿qué sucede si desea agregar compatibilidad con GIF a su proyecto nativo de reacción? Este artículo mostrará cómo agregar GIF en react-native. Ahora, react-native tiene esa flexibilidad para admitir GIF. 

A continuación se muestra la implementación paso a paso.

Paso 1: Cree un proyecto nativo de reacción usando el siguiente comando 

  npx react-native init DemoProject

Paso 2: Ahora, dentro de su Proyecto, cree una carpeta de componentes. Dentro de esa carpeta de componentes, cree un archivo AddGif.js  

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso 3: Vaya a su Proyecto y navegue hasta android>app>build.gradle y agregue lo siguiente a sus dependencias dentro del archivo build.gradle.

dependencies {
    ...
    // For animated GIF support
    implementation 'com.facebook.fresco:animated-gif:2.5.0'
}

Estamos agregando la versión gif: 2.5.0, ya que es necesaria para la última versión nativa de reacción (0.67). Si está utilizando una versión inferior de react-native, consulte la documentación de react-native para obtener compatibilidad con gif para esa versión en particular. Después de agregar la dependencia, reinicie el servidor una vez con el siguiente comando.

npx react-native run-android

Paso 4: dentro de AddGif.js, mostraremos GIf usando el componente de imagen de la biblioteca nativa de reacción.

import React from "react";
import {Text ,View , Image , StyleSheet} from 'react-native' ;
  
const AddGifImage = () => {
    return (
        <View style={Styles.container}>
          <Image
            style ={{width: "100%", height:"80%"}}
            source={{ uri : "
https://media.geeksforgeeks.org/wp-content/uploads/20220221170632/ezgifcomgifmaker1.gif"}}
          />
        </View>
      );
}
  
const Styles = StyleSheet.create({
    container :{
        alignContent:'center',
        margin:25
    }
})
  
export default AddGifImage;

Paso 5: ahora importa AddGif.js a tu archivo App.js

import React from 'react';
import type {Node} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import AddGifImage  from './components/AddGif';
  
const App: () => Node = () => {
   return (
      <View>
       <AddGifImage/>
      </View>
      ); 
};
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando. 

  npx react-native run-android

Nota: después de agregar la línea de implementación en build.gradle, no olvide reiniciar el servidor metro.

Producción: