PromleeBlog
sitemapaboutMe

posting thumbnail
React Native(Expo)에서 Toast 메시지 표시하기(react-native-toast-message)
Display Toast Messages in React Native(Expo, react-native-toast-message)

📅
🚀

들어가기 전에🔗

이 포스트는 Expo 환경, react-native-toast-message↗ 2.2.1 버전을 기준으로 작성되었습니다.
React Native Cli 환경에서도 동일한 방법으로 적용할 수 있습니다.
✅

토스트 메시지란?🔗

토스트 메시지는 스낵 바 라고 불릴 수도 있으며, 알림 또는 메시지를 표시하는 데 사용되는 일반적인 방법입니다. 사용자가 버튼을 클릭했을 시 정확한 상호작용을 완료했는지 알려주는 메시지를 표시할 때 유용합니다.
공식 문서에서 제공하는 다음과 같은 예시를 확인할 수 있습니다.
image
🚀

1. 라이브러리 설치 및 설정🔗

먼저, 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 라이브러리를 설치합니다.
npm install react-native-toast-message
✅

1.1 Expo 환경에서 설정🔗

프로젝트의 가장 상위 페이지를 구성하는 파일인 /app/_layout.tsx 파일에 다음과 같이 설정합니다.
app/_layout.tsx
import Toast from 'react-native-toast-message';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <View>
      {children}
      <Toast />
    </View>
  );
}
✅

1.2 React Native Cli 환경에서 설정🔗

프로젝트의 가장 상위 페이지를 구성하는 파일인 app.tsx 파일에 다음과 같이 설정합니다.
app.tsx
import Toast from 'react-native-toast-message';
 
export function App( props: any ) {
  return (
    <>
      {/* ... */}
      <Toast />
    </>
  );
}
🚀

2. 토스트 메시지 표시🔗

토스트를 표시하고 싶은 컴포넌트에서 다음과 같이 설정합니다.
app/index.tsx
import Toast from 'react-native-toast-message';
import { Button } from 'react-native'
 
export function Page() {
  const showToast = () => {
    Toast.show({
      type: 'success',
      text1: 'Hello',
      text2: 'This is some something 👋'
    });
  }
 
  return (
    <Button
      title='Show toast'
      onPress={showToast}
    />
  )
}
🚀

3. 토스트 메시지 스타일 설정🔗

커스텀 스타일을 적용하고 싶다면 토스트가 선언된 /app/_layout.tsx 파일(Expo 환경) 또는 app.tsx 파일(React Native Cli 환경)에 다음과 같이 설정합니다.
이 예시에서는 세 가지 토스트 메시지를 표시하고 있습니다. success, error 타입은 기본 토스트 메시지를 수정해 사용하고, tomatoToast 타입은 커스텀 토스트 메시지를 사용합니다.
app/_layout.tsx
import Toast, { BaseToast, ErrorToast } from 'react-native-toast-message';
 
const toastConfig = { // config 변수 추가
  success: (props) => (
    <BaseToast
      {...props}
      style={{ borderLeftColor: 'pink' }}
      contentContainerStyle={{ paddingHorizontal: 15 }}
      text1Style={{
        fontSize: 15,
        fontWeight: '400'
      }}
    />
  ),
  error: (props) => (
    <ErrorToast
      {...props}
      text1Style={{
        fontSize: 17
      }}
      text2Style={{
        fontSize: 15
      }}
    />
  ),
	tomatoToast: ({ text1, props }) => (
    <View style={{ height: 60, width: '100%', backgroundColor: 'tomato' }}>
      <Text>{text1}</Text>
      <Text>{props.uuid}</Text>
    </View>
  )
}
 
export default function Page() {
  return (
    <View>
      {children}
      <Toast config={toastConfig} />
    </View>
  );
}
🚀

4. 커스텀 토스트 메시지 사용🔗

토스트를 표시하고 싶은 컴포넌트에서 다음과 같이 설정합니다.
app/index.tsx
import Toast from 'react-native-toast-message';
import { Button } from 'react-native'
 
export function Page() {
  const showToast = () => {
    Toast.show({
			type: 'tomatoToast',
			props: { uuid: 'uuid example' }
    });
  }
 
	const showErrorToast = () => {
		Toast.show({
			type: 'error',
			text1: 'Error',
			text2: 'This is some something 👋'
		});
	}
 
  return (
    <Button	
      title='Show toast'
      onPress={showToast}
    />
  )
}
🚀

결론🔗

불필요한 모달창과 확인 창을 사용하지 않고 토스트 메시지를 표시하는 것이 사용자 경험에 있어서 더 나은 결과를 가져올 수 있습니다. 개발 편의성에도 도움이 된다고 생각하기 때문에 토스트 메시지를 사용하는 것을 추천합니다.
✅

참고🔗

🚀 들어가기 전에
✅ 토스트 메시지란?
🚀 1. 라이브러리 설치 및 설정
✅ 1.1 Expo 환경에서 설정
✅ 1.2 React Native Cli 환경에서 설정
🚀 2. 토스트 메시지 표시
🚀 3. 토스트 메시지 스타일 설정
🚀 4. 커스텀 토스트 메시지 사용
🚀 결론
✅ 참고