feat: 🎸 custome style for text toast

Author: CodingByJerez

README.md

@@ -38,7 +38,7 @@ expo install react-native-safe-area-context
 
 ## Usage
 
-```js
+```tsx
 import { ALERT_TYPE, Dialog, Root, Toast } from 'react-native-alert-notification';
 
 <Root>
@@ -76,17 +76,17 @@ import { ALERT_TYPE, Dialog, Root, Toast } from 'react-native-alert-notification
 
 A React node that will be most likely wrapping your whole app.
 
-| Name         | Description                                  | Require | Default | Type                                              |
-| ------------ | -------------------------------------------- | ------- | ------- | ------------------------------------------------- |
-| theme        | select theme light dark (by default is auto) |         | auto    | 'light','dark'                                    |
-| colors       | custom colors                                |         |         | [IColors<light>, IColors<dark>]                   |
-| dialogConfig | config dialog box global                     |         |         | {closeOnOverlayTap:bool, autoClose:bool / number} |
-| toastConfig  | config toast global                          |         |         | {autoClose:bool / number}                         |
+| Name         | Description                                  | Require | Default | Type                                                                                                |
+| ------------ | -------------------------------------------- | ------- | ------- | --------------------------------------------------------------------------------------------------- |
+| theme        | select theme light dark (by default is auto) |         | auto    | 'light','dark'                                                                                      |
+| colors       | custom colors                                |         |         | [IColors<light>, IColors<dark>]                                                                     |
+| dialogConfig | config dialog box global                     |         |         | {closeOnOverlayTap:bool, autoClose:bool / number}                                                   |
+| toastConfig  | config toast global                          |         |         | {autoClose:bool / number, titleStyle?: StyleProp<TextStyle> , textBodyStyle?: StyleProp<TextStyle>} |
 
 ```ts
 type IProps = {
   dialogConfig?: Pick<IConfigDialog, 'closeOnOverlayTap' | 'autoClose'>;
-  toastConfig?: Pick<IConfigToast, 'autoClose'>;
+  toastConfig?: Pick<IConfigToast, 'autoClose' | 'titleStyle' | 'textBodyStyle'>;
   theme?: 'light' | 'dark';
   colors?: [IColors, IColors] /** ['light_colors' , 'dark_colors'] */;
 };
@@ -147,6 +147,8 @@ type IConfig = {
   title?: string;
   textBody?: string;
   autoClose?: number | boolean;
+  titleStyle?: StyleProp<TextStyle>;
+  textBodyStyle?: StyleProp<TextStyle>;
   onPress?: () => void;
   onLongPress?: () => void;
   onShow?: () => void;

example/ios/Podfile.lock

@@ -372,4 +372,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 738a37364b7402676aa6420460ef88e4c599916d
 
-COCOAPODS: 1.10.1
+COCOAPODS: 1.11.3

src/containers/Root.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { useContext, ReactElement } from 'react';
+import { ReactElement, useContext } from 'react';
 import { useColorScheme, View } from 'react-native';
 import { SafeAreaInsetsContext, SafeAreaProvider } from 'react-native-safe-area-context';
 import { Dialog, IConfigDialog, IConfigToast, Toast } from '../index';
 import { Color, IColors } from '../service';
 
 type IProps = {
   dialogConfig?: Pick<IConfigDialog, 'closeOnOverlayTap' | 'autoClose'>;
-  toastConfig?: Pick<IConfigToast, 'autoClose'>;
+  toastConfig?: Pick<IConfigToast, 'autoClose' | 'titleStyle' | 'textBodyStyle'>;
   theme?: 'light' | 'dark';
   colors?: [IColors, IColors] /** ['light_colors' , 'dark_colors'] */;
   children: ReactElement | ReactElement[];

src/containers/Toast.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Animated, Image, Pressable, StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 import ENV, { ACTION, ALERT_TYPE } from '../config/ENV';
 import { getImage } from '../service';
@@ -10,6 +10,8 @@ export type IConfig = {
   // position?: TOAST_POSITION;
   title?: string;
   textBody?: string;
+  titleStyle?: StyleProp<TextStyle>;
+  textBodyStyle?: StyleProp<TextStyle>;
   autoClose?: number | boolean;
   onPress?: () => void;
   onLongPress?: () => void;
@@ -19,7 +21,7 @@ export type IConfig = {
 
 type IProps = {
   isDark: boolean;
-  config?: Pick<IConfig, 'autoClose'>;
+  config?: Pick<IConfig, 'autoClose' | 'titleStyle' | 'textBodyStyle'>;
 };
 
 type IState = {
@@ -57,7 +59,8 @@ class Toast extends React.Component<IProps, IState> {
   /**
    * @type {React.ContextType<typeof SafeAreaInsetsContext>}
    */
-  public context!: React.ContextType<typeof SafeAreaInsetsContext>;
+  //@ts-ignore
+  public context: React.ContextType<typeof SafeAreaInsetsContext>;
 
   /**
    * @type {Animated.Value}
@@ -157,8 +160,13 @@ class Toast extends React.Component<IProps, IState> {
    */
   private _CardRender = (): JSX.Element => {
     const { styles } = this.state;
+    const { config } = this.props;
+
     if (this.state.config) {
-      const { type, title, textBody, onPress, onLongPress } = this.state.config;
+      const { type, title, textBody, onPress, onLongPress, titleStyle: titleCustomStyle, textBodyStyle: textBodyCustomStyle } = this.state.config;
+
+      const titleStyle = titleCustomStyle || config?.titleStyle;
+      const textBodyStyle = textBodyCustomStyle || config?.textBodyStyle;
       return (
         <Animated.View
           onLayout={({
@@ -177,8 +185,8 @@ class Toast extends React.Component<IProps, IState> {
             )}
             {/* eslint-disable-next-line react-native/no-inline-styles */}
             <View style={{ overflow: 'hidden', flex: 1 }}>
-              {title && <Text style={styles.titleLabel}>{title}</Text>}
-              {textBody && <Text style={styles.descLabel}>{textBody}</Text>}
+              {title && <Text style={StyleSheet.flatten([styles.titleLabel, titleStyle])}>{title}</Text>}
+              {textBody && <Text style={StyleSheet.flatten([styles.descLabel, textBodyStyle])}>{textBody}</Text>}
             </View>
           </Pressable>
         </Animated.View>

src/service/color.ts

@@ -1,7 +1,7 @@
 import ReactNative, { Platform } from 'react-native';
 import ENV from '../config/ENV';
 
-type IGet = (key: keyof IColors, isDark: boolean) => string | undefined | typeof ReactNative.OpaqueColorValue;
+type IGet = (key: keyof IColors, isDark: boolean) => string | undefined | ReactNative.OpaqueColorValue;
 export type IColors = {
   label: string;
   card: string;
@@ -22,7 +22,7 @@ class Color {
 
     const color = ENV.COLORS[key];
     const index = !isDark ? 0 : 1;
-    const i_a = Platform.select<string | undefined | typeof ReactNative.OpaqueColorValue>({
+    const i_a = Platform.select<string | undefined | ReactNative.OpaqueColorValue>({
       ios: ReactNative?.PlatformColor(color.ios) ?? color.default[index],
       android: ReactNative?.PlatformColor(color.android[index]) ?? color.default[index],
     });