From 4673788cd1656f3d62c252578f9ab794383cf37e Mon Sep 17 00:00:00 2001 From: Suin Kim Date: Fri, 24 Oct 2025 02:22:37 +0900 Subject: [PATCH 1/2] docs: add Korean translation for README --- README-ko.md | 151 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 README-ko.md diff --git a/README-ko.md b/README-ko.md new file mode 100644 index 0000000..6dad15b --- /dev/null +++ b/README-ko.md @@ -0,0 +1,151 @@ +# React Native Toast +[![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/) [![GitHub license](https://img.shields.io/github/license/backpackapp-io/react-native-toast)](https://github.com/backpackapp-io/react-native-toast/blob/master/LICENSE) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@backpackapp-io/react-native-toast) + +**React Native Toast**는 [react-hot-toast](https://react-hot-toast.com/docs)를 기반으로 구축된 React Native용 토스트(Toast) 라이브러리입니다. +iOS, Android, Web 환경에서 모두 작동하며, 다중 토스트 표시, 키보드 대응, 스와이프 닫기, 위치 지정, 그리고 Promise 기반 처리와 같은 기능을 제공합니다. + +
+ +[video](https://user-images.githubusercontent.com/27066041/180588807-1ca73f29-56d7-4e44-ac0c-9f2e2cdeb94c.mp4) + +
+ +### 왜 이 라이브러리를 만들었나요? +아마 이렇게 생각하실 수도 있습니다. (*또 다른 토스트 라이브러리라고? 정말 필요할까?*). 하지만 믿어주세요. **이 라이브러리 하나면 충분합니다.** 제가 직접 앱을 개발하면서 필요한 기능을 모두 담기 위해 만들었고, 사용해보니 완성도가 높아 오픈소스로 공개하게 되었습니다. + +## 주요 기능 + +- **다중 토스트 및 다양한 옵션** 여러 개의 토스트를 동시에 표시하거나, 위치·색상·유형을 각각 다르게 설정할 수 있습니다. +- **키보드 대응** iOS와 Android에서 키보드가 열릴 때 토스트가 자동으로 화면에 잘 보이도록 위치를 조정합니다. +- **스와이프로 닫기** +- **위치 지정 지원** (`top`, `bottom`, `top-left`, `top-right`, `bottom-left`, `bottom-right`) +- **높은 수준의 커스터마이징** (스타일, 크기, 지속 시간 등을 조정하거나, 사용자 정의 컴포넌트를 표시할 수 있습니다.) +- **Promise 지원** (`toast.promise()`를 사용하면 Promise의 상태에 따라 토스트 메시지가 자동으로 업데이트됩니다.) +- **Web 지원** +- **Native Modal 지원** +- **onPress, onShow, onHide 콜백 지원** + +# 문서 +전체 문서는 [여기](https://nickdebaise.github.io/packages/react-native-toast/)에서 확인할 수 있습니다. + +# 시작하기 + +## 설치 +```sh +yarn add @backpackapp-io/react-native-toast +# 또는 +npm i @backpackapp-io/react-native-toast +``` +#### 필수 의존성 +다음 패키지를 함께 설치해야 합니다. +- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) +- [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) +- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation) + +```sh +yarn add react-native-reanimated react-native-safe-area-context react-native-gesture-handler +``` +*각 패키지의 설치 가이드를 반드시 참고하세요.* + + +*Expo를 사용하는 경우* +```sh +npx expo install react-native-reanimated react-native-safe-area-context react-native-gesture-handler +``` +
+ +### 사용 방법 +앱의 루트 컴포넌트를 ```` 및 ````로 감싸고, 루트 레벨에 ```` 컴포넌트를 추가합니다. + +이후 앱의 어느 위치에서든 ``toast("메시지")``를 호출할 수 있습니다. + +```js +import { View, StyleSheet, Text } from 'react-native'; +import { GestureHandlerRootView } from 'react-native-gesture-handler'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +import { toast, Toasts } from '@backpackapp-io/react-native-toast'; +import { useEffect } from 'react'; + +export default function App() { + useEffect(() => { + toast('Hello'); + }, []); + + return ( + + + {/* 앱의 나머지 컴포넌트 */} + {/* 여기에 추가 */} + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, +}); +``` + +
+ +## 예제 + +#### Regular Toast +```js +toast("This is my first toast", { + duration: 3000, +}); +``` + +#### Promise Toast +```js +const sleep = new Promise((resolve, reject) => { + setTimeout(() => { + if (Math.random() > 0.5) { + resolve({ + username: 'Nick', + }); + } else { + reject('Username is undefined'); + } + }, 2500); +}); + +toast.promise( + sleep, + { + loading: 'Loading...', + success: (data: any) => 'Welcome ' + data.username, + error: (err) => err.toString(), + }, + { + position: ToastPosition.BOTTOM, + } +); +``` + +#### Loading Toast +```js +const id = toast.loading('I am loading. Dismiss me whenever...'); + +setTimeout(() => { + toast.dismiss(id); +}, 3000); +``` + +#### Success Toast +```js +toast.success('Success!', { + width: 300 +}); +``` +#### Error Toast +```js +toast.error('Wow. That Sucked!'); +``` + +
From 6a65f7d953c7cc097cf424adf2a2eaa713ca6757 Mon Sep 17 00:00:00 2001 From: Suin Kim Date: Fri, 24 Oct 2025 02:26:19 +0900 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20add=20language=20switch=20links=20t?= =?UTF-8?q?o=20README=20and=20README-ko.md=20-=20Added=20English=20?= =?UTF-8?q?=E2=86=94=20Korean=20navigation=20links=20at=20the=20top=20of?= =?UTF-8?q?=20both=20files=20-=20Helps=20users=20easily=20switch=20between?= =?UTF-8?q?=20README.md=20and=20README-ko.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README-ko.md | 2 ++ README.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/README-ko.md b/README-ko.md index 6dad15b..97ba33e 100644 --- a/README-ko.md +++ b/README-ko.md @@ -1,6 +1,8 @@ # React Native Toast [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/) [![GitHub license](https://img.shields.io/github/license/backpackapp-io/react-native-toast)](https://github.com/backpackapp-io/react-native-toast/blob/master/LICENSE) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@backpackapp-io/react-native-toast) +[English](./README.md) · 한국어 + **React Native Toast**는 [react-hot-toast](https://react-hot-toast.com/docs)를 기반으로 구축된 React Native용 토스트(Toast) 라이브러리입니다. iOS, Android, Web 환경에서 모두 작동하며, 다중 토스트 표시, 키보드 대응, 스와이프 닫기, 위치 지정, 그리고 Promise 기반 처리와 같은 기능을 제공합니다. diff --git a/README.md b/README.md index 5ec0ed6..f97083e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # React Native Toast [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/) [![GitHub license](https://img.shields.io/github/license/backpackapp-io/react-native-toast)](https://github.com/backpackapp-io/react-native-toast/blob/master/LICENSE) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@backpackapp-io/react-native-toast) +English · [한국어](./README-ko.md) + A toast library for react-native, built on [react-hot-toast](https://react-hot-toast.com/docs). It supports features such as multiple toasts, keyboard handling, swipe to dismiss, positional toasts, and JS promises. It runs on iOS, android, and web.