react-native-toast-message 1.5.0 → 2.0.0

package/CHANGELOG.md

@@ -7,14 +7,98 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 Headers are one of:
 
-- `Added`, `Changed`, `Removed` or `Fixed`.
+- `Added`, `Changed`, `Removed`, `Fixed` or `Breaking`.
+
+## [2.0.0]
+
+### Breaking
+
+- Setting the `ref` is no longer required when rendering the `Toast` component in your app's entry point. Ref storage is now handled internally using [React.createRef](https://reactjs.org/docs/react-api.html#reactcreateref). This should improve ref access reliability at runtime.
+
+  ```js
+    // App.jsx
+    import Toast from 'react-native-toast-message';
+
+    export function App(props) {
+      return (
+        <>
+          {/* ... */}
+          <Toast />
+        </>
+      );
+    }
+  ```
+
+- When you want to have the Toast visible inside a Modal, you no longer need to set a separate `ref`.
+
+  Simply render the `Toast` component inside the Modal, as well as in your app's entry point. When the Modal is visible, the `ref` from inside the Modal will be automatically used.
+
+- `onHide` callback is now always called when the Toast hides (does not matter if `autoHide` was `true` / `false`).
+
+- `inProgress` state has been removed and can no longer be relied upon in a custom Toast config.
+
+- `style` and `height` props from the Toast component were removed; with the purpose of achieving a cleaner API design. The only way to change the style / layout of different Toast types is through the `config` prop (fixes [#204](https://github.com/calintamas/react-native-toast-message/issues/204)).
+
+### Added
+
+- on the `BaseToast` component, the following props were added: `touchableContainerProps`, `contentContainerProps`, `text1Props`, `text2Props` , `text1NumberOfLines`, `text2NumberOfLines` (fixes [#112](https://github.com/calintamas/react-native-toast-message/issues/112), [#133](https://github.com/calintamas/react-native-toast-message/issues/133)).
+
+- on the `Toast` component, the following callbacks were added as props: `onShow` , `onHide` and `onPress` (fixes [#143](https://github.com/calintamas/react-native-toast-message/issues/143)).
+
+- A new `ToastShowParams` type is exported (fixes [#192](https://github.com/calintamas/react-native-toast-message/issues/192)).
+
+### Changed
+
+- `topOffset` and `bottomOffset` are now by default `40px`
+- New test ids on `BaseToast` component: `toastTouchableContainer`, `toastContentContainer`, `toastText1` and `toastText2`.
+
+### Removed
+
+- Success, error and info leading icons were removed from the package (to make it as lightweight as possible).
+
+  It's now possible to pass them via render functions (for more flexibility, see issues regarding svg support, using components as icons, etc) on `BaseToast` component, example below:
+
+  ```js
+  const toastConfig = {
+    success: (props) => (
+      <BaseToast
+        {...props}
+        renderLeadingIcon={() => <Image />}
+        renderTrailingIcon={() => <Image />}
+      />
+    )
+  }
+  ```
+
+  Fixes [#188](https://github.com/calintamas/react-native-toast-message/issues/188), [#203](https://github.com/calintamas/react-native-toast-message/issues/203), [#245](https://github.com/calintamas/react-native-toast-message/issues/245), [#250](https://github.com/calintamas/react-native-toast-message/issues/250).
+
+- Trailing close icon has been removed from default components `BaseToast`, `SuccessToast`, `ErrorToast` and `InfoToast`. Fixes [#167](https://github.com/calintamas/react-native-toast-message/issues/167).
+
+### Fixed
+
+- Failed prop type: Invalid props.text2Style key fontSize supplied to BaseToast [#174](https://github.com/calintamas/react-native-toast-message/issues/174).
+- Changing Font Family does not work [#176](https://github.com/calintamas/react-native-toast-message/issues/176)
+- Text1 not showing on Android [#194](https://github.com/calintamas/react-native-toast-message/issues/194)
+- Toast background is Transparent [#219](https://github.com/calintamas/react-native-toast-message/issues/219)
+- TypeError: Cannot read property 'show' of null [#232](https://github.com/calintamas/react-native-toast-message/issues/232)
+- textStyle1 styles not been applied [#233](https://github.com/calintamas/react-native-toast-message/issues/233)
+- Typescript-class component toast message in modal usage [#172](https://github.com/calintamas/react-native-toast-message/issues/172)
+- Getting last toast along with native prompt [#149](https://github.com/calintamas/react-native-toast-message/issues/149)
+- When modal request permission appear then the modal toast on the previous screen also appears -> android [#226](https://github.com/calintamas/react-native-toast-message/issues/226)
+- autoHide: false crashes on android [#256](https://github.com/calintamas/react-native-toast-message/issues/256)
+
+## [1.6.0]
+
+### Added
+
+- Export all default Toast components (`BaseToast`, `SuccessToast`, `InfoToast`, `ErrorToast`) to be able to reuse them with custom props ([#225](https://github.com/calintamas/react-native-toast-message/pull/225))
 
 ## [1.5.0]
 
 ### Changed
 
 - Move `show` method options to separate `ToastShowOptions` interface ([#242](https://github.com/calintamas/react-native-toast-message/pull/242))
-- Use `StyleProp` in type definition file, to allow different types of style to be used (eg. `style={[styles.one, styles.two]}`) ([#243](https://github.com/calintamas/react-native-toast-message/pull/242))
+- Use `StyleProp` in type definition file, to allow different types of style to be used (eg. `style={[styles.one, styles.two]}`) ([#243](https://github.com/calintamas/react-native-toast-message/pull/243))
 
 ## [1.4.9]
 

package/README.md

@@ -3,249 +3,33 @@
 [![npm version](https://img.shields.io/npm/v/react-native-toast-message)](https://www.npmjs.com/package/react-native-toast-message)
 [![npm downloads](https://img.shields.io/npm/dw/react-native-toast-message)](https://www.npmjs.com/package/react-native-toast-message)
 [![Build](https://github.com/calintamas/react-native-toast-message/workflows/tests/badge.svg)](https://github.com/calintamas/react-native-toast-message/actions?query=workflow%3Atests)
+[![Coverage Status](https://coveralls.io/repos/github/calintamas/react-native-toast-message/badge.svg)](https://coveralls.io/github/calintamas/react-native-toast-message)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 Animated toast message component for React Native.
 
-- Imperative API
-- Keyboard aware
-- Flexible config
+![toast gif](./docs/toast.gif)
 
-## Install
+## Features
 
-```
-yarn add react-native-toast-message
-```
+- 🚀 Imperative API
+- 📦 Very lightweight (~40 kB)
+- ⌨️ Keyboard-aware
+- 🎨 Customizable layouts
+- 🔧 Flexible config
 
-![ToastSuccess](success-toast.gif)
+## Documentation
 
-## Usage
+> This is the documentation for `react-native-toast-message@v2`, which has a similar API to v1, but contains a few important changes. [Read the complete changelog](./CHANGELOG.md#200).
 
-Render the `Toast` component in your app entry file (along with everything that might be rendered there) and set a ref to it.
+- [Quick start](./docs/quick-start.md)
+- [API](./docs/api.md)
+- [Create custom layouts](./docs/custom-layouts.md)
+- FAQ
+  - [How to show the Toast inside a Modal?](./docs/modal-usage.md)
+  - [How to render the Toast when using a Navigation library?](./docs/navigation-usage.md)
+  - [How to mock the library for testing with jest?](./docs/jest-testing.md)
 
-```js
-// App.jsx
-import Toast from 'react-native-toast-message';
+## License
 
-function App(props) {
-  return (
-    <>
-      {/* ... */}
-      <Toast ref={(ref) => Toast.setRef(ref)} />
-    </>
-  );
-}
-
-export default App;
-```
-
-Then use it anywhere in your app (even outside React components), by calling any `Toast` method directly:
-
-```js
-import Toast from 'react-native-toast-message';
-
-function SomeComponent() {
-  React.useEffect(() => {
-    Toast.show({
-      type:  'success',
-      text1: 'Hello',
-      text2: 'This is some something 👋'
-    });
-  }, []);
-
-  return <View />;
-}
-```
-
-## API
-
-### `show(options = {})`
-
-When calling the `show` method, you can use the following `options` to suit your needs. Everything is optional, unless specified otherwise.
-
-The usage of `|` below, means that only one of the values show should be used.
-If only one value is shown, that's the default.
-
-```js
-Toast.show({
-  type: 'success | error | info',
-  position: 'top | bottom',
-  text1: 'Hello',
-  text2: 'This is some something 👋',
-  visibilityTime: 4000,
-  autoHide: true,
-  topOffset: 30,
-  bottomOffset: 40,
-  onShow: () => {},
-  onHide: () => {}, // called when Toast hides (if `autoHide` was set to `true`)
-  onPress: () => {},
-  props: {} // any custom props passed to the Toast component
-});
-```
-
-### `hide()`
-
-```js
-Toast.hide();
-```
-
-## props
-
-Props that can be set on the `Toast` instance. They act as defaults for all Toasts that are shown.
-
-```js
-const props = {
-  type: 'success | error | info',
-  position: 'top' | 'bottom',
-  visibilityTime: Number,
-  autoHide: Boolean,
-  topOffset: Number,
-  bottomOffset: Number,
-  keyboardOffset: Number,
-  config: Object,
-  style: ViewStyle,
-  height: Number
-};
-```
-
-> Default `Animated.View` styles can be found in [styles.js](https://github.com/calintamas/react-native-toast-message/blob/master/src/styles.js#L4). They can be extended using the `style` prop.
-
-## Customize layout
-
-If you want to add custom types - or overwrite the existing ones - you can add a `config` prop when rendering the `Toast` in your app `root`. 
-
-You can either use the default `BaseToast` style and adjust its layout, or create Toast layouts from scratch.
-
-```js
-// App.jsx
-import Toast, { BaseToast }  from 'react-native-toast-message';
-
-const toastConfig = {
-  /* 
-    overwrite 'success' type, 
-    modifying the existing `BaseToast` component
-  */
-  success: ({ text1, props, ...rest }) => (
-    <BaseToast
-      {...rest}
-      style={{ borderLeftColor: 'pink' }}
-      contentContainerStyle={{ paddingHorizontal: 15 }}
-      text1Style={{
-        fontSize: 15,
-        fontWeight: '400'
-      }}
-      text1={text1}
-      text2={props.uuid}
-    />
-  ),
-  
-  /* 
-    or create a completely new type - `my_custom_type`,
-    building the layout from scratch
-  */
-  my_custom_type: ({ text1, props, ...rest }) => (
-    <View style={{ height: 60, width: '100%', backgroundColor: 'tomato' }}>
-      <Text>{text1}</Text>
-    </View>
-  )
-};
-
-function App(props) {
-  // pass `toastConfig` to the Toast instance
-  return (
-    <>
-      <Toast config={toastConfig} ref={(ref) => Toast.setRef(ref)} />
-    </>
-  );
-}
-
-export default App;
-```
-
-Then just use the library as before
-
-```js
-Toast.show({
-  type: 'my_custom_type',
-  props: { uuid: 'bba1a7d0-6ab2-4a0a-a76e-ebbe05ae6d70' }
-});
-```
-
-Available `props` on `BaseToast`:
-
-```js
-const baseToastProps = {
-  leadingIcon: ImageSource,
-  trailingIcon: ImageSource,
-  text1: String,
-  text2: String,
-  onPress: Function,
-  onLeadingIconPress: Function,
-  onTrailingIconPress: Function,
-  style: ViewStyle,
-  leadingIconContainerStyle: ViewStyle,
-  trailingIconContainerStyle: ViewStyle,
-  leadingIconStyle: ViewStyle,
-  trailingIconStyle: ViewStyle,
-  contentContainerStyle: ViewStyle,
-  text1Style: ViewStyle,
-  text2Style: ViewStyle,
-  activeOpacity: Number
-};
-```
-
-## FAQ
-
-### How to render the Toast when using [react-navigation](https://reactnavigation.org)?
-
-To have the toast visible on top of the navigation `View` hierarchy, render it as the **last child** inside `NavigationContainer`.
-
-```js
-import Toast from 'react-native-toast-message'
-import { NavigationContainer } from '@react-navigation/native';
-
-export default function App() {
-  return (
-    <NavigationContainer>
-      {...}
-      <Toast ref={(ref) => Toast.setRef(ref)} />
-    </NavigationContainer>
-  );
-}
-```
-
-### How to mock the library for testing with [jest](https://jestjs.io)?
-
-```js
-jest.mock('react-native-toast-message', () => ({
-  show: jest.fn(),
-  hide: jest.fn()
-}));
-```
-
-### How to show the Toast inside a Modal?
-
-When a `Modal` is visible, the Toast gets rendered behind it. This is due to [the way `Modal` is implemented](https://stackoverflow.com/a/57402783). As a workaround, you can have 2 separate Toast instances: one inside the Modal (let's call it a "modal toast") and a normal one outside.
-
-For the one outside, set the ref on the Toast object (like usual)
-```js
-<Toast ref={ref => Toast.setRef(ref) />
-```
-
-And for the "modal toast", use another ref
-```js
-function ScreenWithModal() {
-  const modalToastRef = React.useRef();
-
-  return (
-    <Modal>
-      <Toast ref={modalToastRef} />
-    </Modal>
-  );
-}
-```
-Then, when you want to show the "modal toast", call it using `modalToastRef.current.show()`.
-
-## Credits
-
-The icons for the default `success`, `error` and `info` types are made by [Pixel perfect](https://www.flaticon.com/authors/pixel-perfect) from [flaticon.com](www.flaticon.com).
+MIT

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+export { Toast as default } from './src/Toast';
+export { BaseToast } from './src/components/BaseToast';
+export { SuccessToast } from './src/components/SuccessToast';
+export { ErrorToast } from './src/components/ErrorToast';
+export { InfoToast } from './src/components/InfoToast';
+export * from './src/types';

package/lib/index.js

@@ -0,0 +1,6 @@
+export { Toast as default } from './src/Toast';
+export { BaseToast } from './src/components/BaseToast';
+export { SuccessToast } from './src/components/SuccessToast';
+export { ErrorToast } from './src/components/ErrorToast';
+export { InfoToast } from './src/components/InfoToast';
+export * from './src/types';

package/lib/src/Toast.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ToastProps, ToastShowParams } from './types';
+export declare function Toast(props: ToastProps): JSX.Element;
+export declare namespace Toast {
+    var show: (params: ToastShowParams) => void;
+    var hide: (params?: void | undefined) => void;
+}

package/lib/src/Toast.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { LoggerProvider } from './contexts';
+import { ToastUI } from './ToastUI';
+import { useToast } from './useToast';
+const ToastRoot = React.forwardRef((props, ref) => {
+    const { config, ...defaultOptions } = props;
+    const { show, hide, isVisible, options, data } = useToast({
+        defaultOptions
+    });
+    React.useImperativeHandle(ref, () => ({
+        show,
+        hide
+    }));
+    return (<ToastUI isVisible={isVisible} options={options} data={data} hide={hide} show={show} config={config}/>);
+});
+const toastRef = React.createRef();
+export function Toast(props) {
+    return (<LoggerProvider enableLogs={false}>
+      <ToastRoot ref={toastRef} {...props}/>
+    </LoggerProvider>);
+}
+Toast.show = (params) => {
+    toastRef.current?.show(params);
+};
+Toast.hide = (params) => {
+    toastRef.current?.hide(params);
+};

package/lib/src/ToastUI.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ToastConfig, ToastData, ToastHideParams, ToastOptions, ToastShowParams } from './types';
+export declare type ToastUIProps = {
+    isVisible: boolean;
+    options: Required<ToastOptions>;
+    data: ToastData;
+    show: (params: ToastShowParams) => void;
+    hide: (params: ToastHideParams) => void;
+    config?: ToastConfig;
+};
+export declare function ToastUI(props: ToastUIProps): JSX.Element;

package/lib/src/ToastUI.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { AnimatedContainer } from './components/AnimatedContainer';
+import { ErrorToast } from './components/ErrorToast';
+import { InfoToast } from './components/InfoToast';
+import { SuccessToast } from './components/SuccessToast';
+const defaultToastConfig = {
+    success: (props) => <SuccessToast {...props}/>,
+    error: (props) => <ErrorToast {...props}/>,
+    info: (props) => <InfoToast {...props}/>
+};
+function renderComponent({ data, options, config, isVisible, show, hide }) {
+    const { text1, text2 } = data;
+    const { type, onPress, position, props } = options;
+    const toastConfig = {
+        ...defaultToastConfig,
+        ...config
+    };
+    const ToastComponent = toastConfig[type];
+    if (!ToastComponent) {
+        throw new Error(`Toast type: '${type}' does not exist. You can add it via the 'config' prop on the Toast instance. Learn more: https://github.com/calintamas/react-native-toast-message/blob/master/README.md`);
+    }
+    return ToastComponent({
+        position,
+        type,
+        isVisible,
+        text1,
+        text2,
+        show,
+        hide,
+        onPress,
+        props
+    });
+}
+export function ToastUI(props) {
+    const { isVisible, options, hide } = props;
+    const { position, topOffset, bottomOffset, keyboardOffset } = options;
+    return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} onHide={hide}>
+      {renderComponent(props)}
+    </AnimatedContainer>);
+}

package/lib/src/components/AnimatedContainer.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PanResponderGestureState } from 'react-native';
+import { ReactChildren, ToastPosition } from '../types';
+export declare type AnimatedContainerProps = {
+    children: ReactChildren;
+    isVisible: boolean;
+    position: ToastPosition;
+    topOffset: number;
+    bottomOffset: number;
+    keyboardOffset: number;
+    onHide: () => void;
+    onRestorePosition?: () => void;
+};
+export declare function dampingFor(gesture: PanResponderGestureState, position: ToastPosition): number;
+export declare function animatedValueFor(gesture: PanResponderGestureState, position: ToastPosition, damping: number): number;
+export declare function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, onHide, onRestorePosition }: AnimatedContainerProps): JSX.Element;

package/lib/src/components/AnimatedContainer.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Animated, Dimensions } from 'react-native';
+import { useLogger } from '../contexts';
+import { usePanResponder, useSlideAnimation, useViewDimensions } from '../hooks';
+import { noop } from '../utils/func';
+import { bound } from '../utils/number';
+import { getTestId } from '../utils/test-id';
+import { styles } from './AnimatedContainer.styles';
+export function dampingFor(gesture, position) {
+    const { moveY } = gesture;
+    switch (position) {
+        case 'bottom': {
+            const { height: screenHeight } = Dimensions.get('screen');
+            return screenHeight - moveY;
+        }
+        case 'top':
+            return moveY;
+        default:
+            throw new Error(`Toast position: ${position} not implemented`);
+    }
+}
+export function animatedValueFor(gesture, position, damping) {
+    const boundValue = (val) => bound(val, 0, 2);
+    const { dy } = gesture;
+    switch (position) {
+        case 'bottom':
+            return boundValue(1 - dy / damping);
+        case 'top':
+            return boundValue(1 + dy / damping);
+        default:
+            throw new Error(`Toast position: ${position} not implemented`);
+    }
+}
+export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, onHide, onRestorePosition = noop }) {
+    const { log } = useLogger();
+    const { computeViewDimensions, height } = useViewDimensions();
+    const { animatedValue, animate, animationStyles } = useSlideAnimation({
+        position,
+        height,
+        topOffset,
+        bottomOffset,
+        keyboardOffset
+    });
+    const onDismiss = React.useCallback(() => {
+        log('Swipe, dismissing');
+        animate(0);
+        onHide();
+    }, [animate, log, onHide]);
+    const onRestore = React.useCallback(() => {
+        log('Swipe, restoring to original position');
+        animate(1);
+        onRestorePosition();
+    }, [animate, log, onRestorePosition]);
+    const computeNewAnimatedValueForGesture = React.useCallback((gesture) => {
+        const damping = dampingFor(gesture, position);
+        const newAnimatedValue = animatedValueFor(gesture, position, damping);
+        return newAnimatedValue;
+    }, [position]);
+    const { panResponder } = usePanResponder({
+        animatedValue,
+        computeNewAnimatedValueForGesture,
+        onDismiss,
+        onRestore
+    });
+    React.useLayoutEffect(() => {
+        const newAnimationValue = isVisible ? 1 : 0;
+        animate(newAnimationValue);
+    }, [animate, isVisible]);
+    return (<Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], animationStyles]} {...panResponder.panHandlers}>
+      {children}
+    </Animated.View>);
+}

package/lib/src/components/AnimatedContainer.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const styles: {
+    base: {
+        position: "absolute";
+        alignItems: "center";
+        justifyContent: "center";
+        alignSelf: "center";
+    };
+    top: {
+        top: number;
+    };
+    bottom: {
+        bottom: number;
+    };
+};

package/lib/src/components/AnimatedContainer.styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    base: {
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center'
+    },
+    top: {
+        top: 0
+    },
+    bottom: {
+        bottom: 0
+    }
+});

package/lib/src/components/BaseToast.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseToastProps } from '../types';
+export declare function BaseToast({ text1, text2, onPress, activeOpacity, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines, text1Props, text2Style, text2NumberOfLines, text2Props, renderLeadingIcon, renderTrailingIcon }: BaseToastProps): JSX.Element;

package/lib/src/components/BaseToast.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { getTestId } from '../utils/test-id';
+import { styles } from './BaseToast.styles';
+import { Touchable } from './Touchable';
+export function BaseToast({ text1, text2, onPress, activeOpacity, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines = 1, text1Props, text2Style, text2NumberOfLines = 1, text2Props, renderLeadingIcon, renderTrailingIcon }) {
+    return (<Touchable testID={getTestId('TouchableContainer')} onPress={onPress} activeOpacity={activeOpacity} style={[styles.base, styles.leadingBorder, style]} {...touchableContainerProps}>
+      {renderLeadingIcon && renderLeadingIcon()}
+      <View testID={getTestId('ContentContainer')} style={[styles.contentContainer, contentContainerStyle]} {...contentContainerProps}>
+        {text1 && text1.length > 0 && (<Text testID={getTestId('Text1')} style={[styles.text1, text1Style]} numberOfLines={text1NumberOfLines} ellipsizeMode='tail' {...text1Props}>
+            {text1}
+          </Text>)}
+        {text2 && text2?.length > 0 && (<Text testID={getTestId('Text2')} style={[styles.text2, text2Style]} numberOfLines={text2NumberOfLines} ellipsizeMode='tail' {...text2Props}>
+            {text2}
+          </Text>)}
+      </View>
+      {renderTrailingIcon && renderTrailingIcon()}
+    </Touchable>);
+}

package/lib/src/components/BaseToast.styles.d.ts

@@ -0,0 +1,41 @@
+export declare const HEIGHT = 60;
+export declare const WIDTH = 340;
+export declare const BORDER_RADIUS = 6;
+export declare const styles: {
+    base: {
+        flexDirection: "row";
+        height: number;
+        width: number;
+        borderRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        backgroundColor: string;
+    };
+    leadingBorder: {
+        borderLeftWidth: number;
+        borderLeftColor: string;
+    };
+    contentContainer: {
+        paddingHorizontal: number;
+        flex: number;
+        justifyContent: "center";
+        alignItems: "flex-start";
+    };
+    text1: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginBottom: number;
+        color: string;
+        width: string;
+    };
+    text2: {
+        fontSize: number;
+        color: string;
+        width: string;
+    };
+};