[RN] react-native gif 파일 불러오기 : Android

해당 글에서는 react-native 개발 환경에서 gif 파일을 불러오는 방법에 대해서 확인해 봅니다.

1) Andriod 환경에서 Gif 지원

---

💡 "자체 네이티브 코드를 빌드할 때, Android에서 GIF와 WebP는 기본적으로 지원되지 않습니다."라고 공식사이트에서 이야기하고 있습니다. 이에 따라 추가 설정이 필요합니다.

💡 기존 iOS 환경에서는 아래의 설정 필요없이 수행이 잘된다고 합니다.

 

https://reactnative.dev/docs/0.71/image

 

 

2) 환경 구성

---

 

1. metro.config.js

---

💡 해당 파일 내에서 assetExts 내에 .gif 확장자를 추가해 줍니다.

const path = require("path");
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { resolver: { sourceExts, assetExts } } = defaultConfig;

/**
 * Metro configuration
 * <https://facebook.github.io/metro/docs/configuration>
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
    resolver: {
        // 애플리케이션에서 사용되는 정적 파일의 확장자를 정의합니다. 
        assetExts: [...assetExts, "svg", 'png', 'bin', 'db', 'onnx', 'ort', 'gif'],
        // 애플리케이션의 소스 코드 파일의 확장자를 정의합니다.
        sourceExts: [...sourceExts, 'json', "jsx", "tsx", "ts"],
    },
    watchFolders: [path.resolve(__dirname, "../")],
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
};

module.exports = mergeConfig(defaultConfig, config);

 [ 더 알아보기 ]

💡 assetExts

- Metro 번들러의 구성 옵션으로 ‘자산’으로 간주해야 하는 파일 확장자를 정의합니다.
- 이러한 파일은 번들링 과정에서 일반 JavaScript 파일과 다르게 처리됩니다.
- 기본적으로 .png, .jpg, .ttf와 같은 일반적인 자산 파일 확장자가 포함되어 있습니다.


💡sourceExts

- Metro 번들러의 구성 옵션으로 ‘소스 파일’로 간주해야 하는 파일 확장자를 의미합니다.
- 이러한 파일은 Metro의 변환기에서 처리되고 번들에 포함됩니다.
- 기본적으로 .js, .jsx, .ts와 같은 일반적인 JavaScript 확장자가 포함되어 있습니다.

 

 

2. android/app/build.gradle

---

💡 android/app/build.gradle의 파일에서 gif와 관련된 정보를 추가합니다.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  // implementation 'com.facebook.fresco:animated-base-support:1.3.0'

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

  // For WebP support, including animated WebP
  // implementation 'com.facebook.fresco:animated-webp:2.5.0'
  // implementation 'com.facebook.fresco:webpsupport:2.5.0'

  // For WebP support, without animations
  // implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

 [ 더 알아보기 ]

💡 fresco:animated-gif

- 페이스북의 fresco 프레임워크에서 제공하는 라이브러리입니다.
- Android에서 애니메이션 GIF 이미지의 로딩과 표시를 전담으로 담당합니다. 이 라이브러리를 사용하면 개발자들은 Android 애플리케이션에 쉽게 애니메이션 GIF 지원을 통합할 수 있습니다.

 

 

3. Gradle을 한번 빌드해 줍니다

---

💡 Andriod의 적용을 위해서 Gradle을 빌드해 줍니다.

$ cd android/ && ./gradlew build

 

 

4. gif를 불러와서 구성하는 부분

---

💡 아래의 짱구 이미지를 gif로 출력하도록 합니다.

- assets/gif 폴더에 cute.gif로 아래를 출력하도록 구성하였습니다.

import React, { useEffect, useState } from "react";
import { Image, StyleSheet, Text, View } from "react-native";
import DementionUtils from "../../common/utils/DementionUtils";

const ProgressBar = ({ text = "" }) => {
    const [progress, setProgress] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setProgress((prevProgress) => {
                if (prevProgress === 100) {
                    return 0;
                }
                return prevProgress + 1;
            });
        }, 10);
        return () => clearInterval(interval);
    }, []);

    return (
        <View style={styles.container}>
            <Image
                source={require('../../../assets/gif/cute.gif')}
            />
            <Text style={styles.loadingBarTxt}>{text}</Text>
        </View>
    );
};

export default ProgressBar;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        zIndex: 999999,
    },
    loadingBarTxt: {
        marginTop: DementionUtils.heightRelateSize(20),
        fontWeight: 'normal',
        fontStyle: 'normal',
        lineHeight: 20,
        letterSpacing: 0,
        textAlign: 'center',
        color: '#ffffff',
    }
});

 

 

 

5. gif를 호출하는 부분

---

 

<ProgressBar text="짱구를 불러오는 중입니다." />

 

 

 

6. 최종 결과화면

---

 

 

 

 

오늘도 감사합니다. 😀