diff --git a/src/ToastUI.tsx b/src/ToastUI.tsx index b8f4130c8..033f77ad4 100644 --- a/src/ToastUI.tsx +++ b/src/ToastUI.tsx @@ -36,7 +36,7 @@ function renderComponent({ hide }: ToastUIProps) { const { text1, text2 } = data; - const { type, onPress, position, props } = options; + const { type, onPress, text1Style, text2Style, position, props } = options; const toastConfig = { ...defaultToastConfig, @@ -56,6 +56,8 @@ function renderComponent({ isVisible, text1, text2, + text1Style, + text2Style, show, hide, onPress, diff --git a/src/__tests__/useToast.test.ts b/src/__tests__/useToast.test.ts index 00a9c3e7c..098e481dc 100644 --- a/src/__tests__/useToast.test.ts +++ b/src/__tests__/useToast.test.ts @@ -119,6 +119,8 @@ describe('test useToast hook', () => { const options: ToastOptions = { type: 'info', position: 'bottom', + text1Style: null, + text2Style: null, autoHide: false, visibilityTime: 20, topOffset: 120, diff --git a/src/types/index.ts b/src/types/index.ts index 14854253d..748463e5c 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -19,6 +19,14 @@ export type ToastOptions = { * Default value: `success` */ type?: ToastType; + /** + * Style for the header text in the Toast (text1). + */ + text1Style?: StyleProp; + /** + * Style for the inner message text in the Toast (text2). + */ + text2Style?: StyleProp; /** * Toast position. * Default value: `top` @@ -108,6 +116,8 @@ export type ToastConfigParams = { isVisible: boolean; text1?: string; text2?: string; + text1Style?: StyleProp; + text2Style?: StyleProp; show: (params: ToastShowParams) => void; hide: (params: ToastHideParams) => void; onPress: () => void; diff --git a/src/useToast.ts b/src/useToast.ts index ae494db0a..0e782a200 100644 --- a/src/useToast.ts +++ b/src/useToast.ts @@ -13,6 +13,8 @@ export const DEFAULT_DATA: ToastData = { export const DEFAULT_OPTIONS: Required = { type: 'success', + text1Style: null, + text2Style: null, position: 'top', autoHide: true, visibilityTime: 4000, @@ -66,6 +68,8 @@ export function useToast({ defaultOptions }: UseToastParams) { text1 = DEFAULT_DATA.text1, text2 = DEFAULT_DATA.text2, type = initialOptions.type, + text1Style = initialOptions.text1Style, + text2Style = initialOptions.text2Style, position = initialOptions.position, autoHide = initialOptions.autoHide, visibilityTime = initialOptions.visibilityTime, @@ -84,6 +88,8 @@ export function useToast({ defaultOptions }: UseToastParams) { setOptions( mergeIfDefined(initialOptions, { type, + text1Style, + text2Style, position, autoHide, visibilityTime,