refactor: move reusable component styles to separate file

seniv · Jan 19, 2025 · 43f71c9 · 43f71c9
1 parent 4aea181
commit 43f71c9
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 58 deletions.
diff --git a/src/ui-components/Notification.tsx b/src/ui-components/Notification.tsx
@@ -11,19 +11,10 @@ import {
   type StyleProp,
 } from 'react-native';
 import type { NotifierComponentProps } from '../types';
+import { commonStyles } from './common';
 
 const s = StyleSheet.create({
   container: {
-    shadowColor: '#000000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-
-    elevation: 10,
-
     backgroundColor: '#ffffff',
     borderRadius: 5,
     margin: 10,
@@ -70,7 +61,7 @@ export interface NotificationComponentProps extends NotifierComponentProps {
   maxDescriptionLines?: number;
 
   /** A container of the component. Set it in case you use different SafeAreaView than the custom `ViewWithOffsets`
-   * @default SafeAreaView */
+   * @default ViewWithOffsets */
   ContainerComponent?: React.ElementType;
 
   /** The style to use for rendering title
@@ -107,7 +98,7 @@ export const NotificationComponent = ({
   const Container = ContainerComponent ?? ViewWithOffsets;
   return (
     <Container>
-      <View style={[s.container, containerStyle]}>
+      <View style={[s.container, commonStyles.shadow, containerStyle]}>
         {!!imageSource && (
           <Image style={[s.image, imageStyle]} source={imageSource} />
         )}

diff --git a/src/ui-components/SimpleToast.tsx b/src/ui-components/SimpleToast.tsx
@@ -35,7 +35,7 @@ export interface SimpleToastProps extends NotifierComponentProps {
   maxTitleLines?: number;
 
   /** A container of the component. Set it in case you use different SafeAreaView than the custom `ViewWithOffsets`
-   * @default SafeAreaView */
+   * @default ViewWithOffsets */
   ContainerComponent?: React.ElementType;
 
   /** The style to use for rendering title

diff --git a/src/ui-components/Toast.tsx b/src/ui-components/Toast.tsx
@@ -11,41 +11,13 @@ import {
   type ImageStyle,
 } from 'react-native';
 import type { NotifierComponentProps } from '../types';
-
-type Types =
-  | 'error'
-  | 'warn'
-  | 'info'
-  | 'success'
-  | 'connected'
-  | 'disconnected';
-
-const iconColors: Record<Types, string> = {
-  warn: '#FD9F02',
-  error: '#F34F4E',
-  info: '#3150EC',
-  success: '#24BF60',
-  connected: '#24BF60',
-  disconnected: '#CCCCCC',
-};
-
-const backgroundColors: Record<Types, string> = {
-  warn: '#FFF6E5',
-  error: '#FFF2F2',
-  info: '#F3F3FF',
-  success: '#E7F8F0',
-  connected: '#E7F8F0',
-  disconnected: '#F2F2F2',
-};
-
-const icons: Record<Types, ImageSourcePropType> = {
-  warn: require('./icons/warn.png'),
-  error: require('./icons/error.png'),
-  success: require('./icons/success.png'),
-  info: require('./icons/info.png'),
-  connected: require('./icons/connected.png'),
-  disconnected: require('./icons/disconnected.png'),
-};
+import {
+  backgroundColors,
+  commonStyles,
+  iconColors,
+  icons,
+  type Types,
+} from './common';
 
 const s = StyleSheet.create({
   container: {
@@ -61,16 +33,6 @@ const s = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 8,
-
-    shadowColor: '#000000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-
-    elevation: 10,
   },
   contentContainerNoIcon: {
     paddingLeft: 20,
@@ -193,6 +155,7 @@ export const ToastComponent = ({
       <View
         style={[
           s.contentContainer,
+          commonStyles.shadow,
           !type && !iconSource && s.contentContainerNoIcon,
           contentContainerStyle,
         ]}

diff --git a/src/ui-components/common.ts b/src/ui-components/common.ts
@@ -0,0 +1,50 @@
+import { StyleSheet, type ImageSourcePropType } from 'react-native';
+
+export type Types =
+  | 'error'
+  | 'warn'
+  | 'info'
+  | 'success'
+  | 'connected'
+  | 'disconnected';
+
+export const iconColors: Record<Types, string> = {
+  warn: '#FD9F02',
+  error: '#F34F4E',
+  info: '#3150EC',
+  success: '#24BF60',
+  connected: '#24BF60',
+  disconnected: '#CCCCCC',
+};
+
+export const backgroundColors: Record<Types, string> = {
+  warn: '#FFF6E5',
+  error: '#FFF2F2',
+  info: '#F3F3FF',
+  success: '#E7F8F0',
+  connected: '#E7F8F0',
+  disconnected: '#F2F2F2',
+};
+
+export const icons: Record<Types, ImageSourcePropType> = {
+  warn: require('./icons/warn.png'),
+  error: require('./icons/error.png'),
+  success: require('./icons/success.png'),
+  info: require('./icons/info.png'),
+  connected: require('./icons/connected.png'),
+  disconnected: require('./icons/disconnected.png'),
+};
+
+export const commonStyles = StyleSheet.create({
+  shadow: {
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+
+    elevation: 10,
+  },
+});