React Native - 디바이스 정보

어플을 사용하는 휴대폰 디바이스 정보가 필요한 경우가 있다. 이럴 때 사용하면 편리한 라이브러리가 있다.

https://www.npmjs.com/package/react-native-device-info

react-native-device-info

 

 

1. 설치

npm install react-native-device-info
#or
yarn add react-native-device-info

 

 

2. 코드

본인이 자주 사용한 함수들만 사용하여 간단한 예시 코드를 만들어보았다.

정말 많은 함수들이 존재하는데 이는 공식문서를 통해 본인이 필요한 정보를 가져다 쓰면 된다.

// test2.tsx

import CustomText from '@/components/text';
import {Test2Props} from '@/types/stack';
import {Pressable, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useEffect} from 'react';
import HomeOutlineIcon from '@assets/svg/home-outline.svg';
import DeviceInfo from 'react-native-device-info';

const Test2Screen = ({navigation}: Test2Props) => {
  const appName = DeviceInfo.getApplicationName(); // 어플 이름
  const appVersion = DeviceInfo.getVersion(); // 어플 버전
  const appBuildNumber = DeviceInfo.getBuildNumber(); // 어플 빌드 넘버
  const deviceBrand = DeviceInfo.getBrand(); // 디바이스 브랜드
  const systemVersion = DeviceInfo.getSystemVersion(); // 시스템 버전
  const deviceModel = DeviceInfo.getModel(); // 디바이스 기종
  const deviceIsTablet = DeviceInfo.isTablet(); // 태블릿 여부

  const getDiviceInfo = async () => {
    return await DeviceInfo.getUniqueId(); // 디바이스 고유 id
  };

  // Header button
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Pressable
          className="px-6"
          onPress={() => navigation.navigate('Main', {screen: 'Home'})}>
          <HomeOutlineIcon />
        </Pressable>
      ),
    });
  }, [navigation]);

  return (
    <SafeAreaView className="flex-1">
      <View className="w-full h-full flex justify-center items-center bg-white">
        <CustomText className="text-success text-xl" children="테스트 화면" />
        <View className="w-2/3 flex flex-row justify-between items-center mt-2">
          <CustomText className="text-black text-base" children="어플 이름" />
          <CustomText className="text-black text-base" children={appName} />
        </View>
        <View className="w-2/3 flex flex-row justify-between items-center mt-2">
          <CustomText className="text-black text-base" children="어플 버전" />
          <CustomText className="text-black text-base" children={appVersion} />
        </View>
        <View className="w-2/3 flex flex-row justify-between items-center mt-2">
          <CustomText className="text-black text-base" children="어플 빌드" />
          <CustomText
            className="text-black text-base"
            children={appBuildNumber}
          />
        </View>
        <View className="w-2/3 flex flex-row justify-between items-center mt-2">
          <CustomText className="text-black text-base" children="브랜드" />
          <CustomText className="text-black text-base" children={deviceBrand} />
        </View>
        <View className="w-2/3 flex flex-row justify-between items-center mt-2">
          <CustomText className="text-black text-base" children="시스템 버전" />
          <CustomText
            className="text-black text-base"
            children={systemVersion}
          />
        </View>
        <View className="w-2/3 flex flex-row justify-between items-center mt-2">
          <CustomText className="text-black text-base" children="기종" />
          <CustomText className="text-black text-base" children={deviceModel} />
        </View>
        <View className="w-2/3 flex flex-row justify-between items-center mt-2">
          <CustomText className="text-black text-base" children="태블릿" />
          <CustomText
            className="text-black text-base"
            children={deviceIsTablet ? 'true' : 'false'}
          />
        </View>
        <View className="w-2/3 flex flex-row justify-between items-center mt-2">
          <CustomText
            className="text-black text-base"
            children="디바이스 고유 ID"
          />
          <CustomText
            className="text-black text-base"
            children={getDiviceInfo()}
          />
        </View>
      </View>
    </SafeAreaView>
  );
};

export default Test2Screen;

 

 

3. 실행