fix/props/style

ArunGovil · Jan 15, 2023 · 89ed700 · 89ed700
1 parent 39b9367
commit 89ed700
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 29 deletions.
diff --git a/src/components/common/ListItem.tsx b/src/components/common/ListItem.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import {View, Text, Image, useWindowDimensions} from 'react-native';
+import {styles} from '../../styles';
+import {TextStyles} from '../../types';
+
+type ListItemProps = {
+  icon: any;
+  title: string;
+  description: string;
+  headingStyle?: TextStyles;
+  descriptionStyle?: TextStyles;
+};
+
+const ListItem = ({
+  icon,
+  title,
+  description,
+  headingStyle,
+  descriptionStyle,
+}: ListItemProps) => {
+  const {width} = useWindowDimensions();
+  return (
+    <View style={[styles.swipeItem, {width: width}]}>
+      <Image style={styles.image} source={icon} />
+      <Text style={[styles.primaryText, headingStyle && headingStyle]}>
+        {title}
+      </Text>
+      <Text
+        style={[styles.secondaryText, descriptionStyle && descriptionStyle]}>
+        {description}
+      </Text>
+    </View>
+  );
+};
+
+export default ListItem;
diff --git a/src/components/standard/StandardStepper.tsx b/src/components/standard/StandardStepper.tsx
@@ -46,9 +46,13 @@ export default function StandardStepper({
           <Text style={[styles.nextButton]}>Next</Text>
         </TouchableOpacity>
       ) : (
-        <TouchableOpacity style={styles.skipButton} onPress={onFinish}>
-          <Text
-            style={[styles.skipItem, {backgroundColor: accentColor ? accentColor : '#93c01f'}]}>
+        <TouchableOpacity
+          style={[
+            styles.skipButton,
+            {backgroundColor: accentColor ? accentColor : '#93c01f'},
+          ]}
+          onPress={onFinish}>
+          <Text style={styles.skipItem}>
             {buttonTitle ? buttonTitle : 'Get Started'}
           </Text>
         </TouchableOpacity>

diff --git a/src/screens/FlatBoard.tsx b/src/screens/FlatBoard.tsx
@@ -1,10 +1,10 @@
-import {View, Text, Image, StatusBar, FlatList} from 'react-native';
+import {View, StatusBar, FlatList} from 'react-native';
 import React, {useState, useRef} from 'react';
-import {useWindowDimensions} from 'react-native';
 import {styles} from '../styles';
 import {OnBoardingData, TextStyles} from '../types';
 import ModernStepper from '../components/modern/ModernStepper';
 import StandardStepper from '../components/standard/StandardStepper';
+import ListItem from '../components/common/ListItem';
 
 type FlatBoardProps = {
   data: OnBoardingData[];
@@ -27,7 +27,6 @@ export default function FlatBoard({
   headingStyle,
   descriptionStyle,
 }: FlatBoardProps) {
-  const {width} = useWindowDimensions();
   const swipeRef = useRef<FlatList>(null);
   const [step, setStep] = useState(0);
 
@@ -49,27 +48,6 @@ export default function FlatBoard({
       });
   };
 
-  type ListItemProps = {
-    icon: any;
-    title: string;
-    description: string;
-  };
-
-  const ListItem = ({icon, title, description}: ListItemProps) => {
-    return (
-      <View style={[styles.swipeItem, {width: width}]}>
-        <Image style={styles.image} source={icon} />
-        <Text style={[styles.primaryText, headingStyle && headingStyle]}>
-          {title}
-        </Text>
-        <Text
-          style={[styles.secondaryText, descriptionStyle && descriptionStyle]}>
-          {description}
-        </Text>
-      </View>
-    );
-  };
-
   return (
     <View style={styles.container}>
       <StatusBar barStyle={'dark-content'} backgroundColor={'white'} />
@@ -92,6 +70,8 @@ export default function FlatBoard({
             icon={item.icon}
             description={item.description}
             title={item.title}
+            headingStyle={headingStyle}
+            descriptionStyle={descriptionStyle}
           />
         )}
         contentContainerStyle={[

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -53,10 +53,8 @@ export const styles = StyleSheet.create({
   skipButton: {
     padding: 5,
     borderRadius: 24,
-    backgroundColor: '#93c01f',
     color: '#ffffff',
     minWidth: 90,
-    textAlign: 'center',
   },
   skipItem: {
     color: '#ffffff',