Update all lists to use ListCard

Author: theboi

App.tsx

@@ -25,7 +25,7 @@ import {K} from './src/store/constants';
 
 import {HomePage} from './src/pages/Home';
 import {SettingsPage} from './src/pages/Settings';
-import {SettingsToggleThemePage} from './src/pages/SettingsToggleTheme';
+import {SettingsThemePage} from './src/pages/SettingsTheme';
 import {FindPage} from './src/pages/Find';
 import {SettingsPeoplePage} from './src/pages/SettingsPeople';
 
@@ -38,7 +38,7 @@ const SettingsPageNest = () => {
   return (
     <Stack.Navigator initialRouteName="Settings" headerMode="none">
       <Stack.Screen name="Settings" component={SettingsPage} />
-      <Stack.Screen name="Theme" component={SettingsToggleThemePage} />
+      <Stack.Screen name="Theme" component={SettingsThemePage} />
       <Stack.Screen name="People" component={SettingsPeoplePage} />
     </Stack.Navigator>
   );

src/components/Card/List/index.tsx

@@ -11,6 +11,7 @@ export const ListCard = (props: {
   data: ReadonlyArray<any> | null | undefined;
   style?: ViewStyle;
   firstInPage?: boolean;
+  renderItem?({ item, index }): JSX.Element;
 }) => {
   const themeFont = Platform.OS === 'ios' ? K.fonts.ios : K.fonts.android;
   const themeColor = props.theme === 'dark' ? K.colors.dark : K.colors.light;
@@ -21,7 +22,7 @@ export const ListCard = (props: {
         title={`${item.title}`}
         onPress={item.onPress}
         style={{height: 50}}
-        titleStyle={{...themeFont.subhead, color: themeColor.primaryText}}
+        titleStyle={{...themeFont.subhead, color: themeColor.primaryText, marginLeft: 10}}
       />
     );
   };
@@ -35,17 +36,15 @@ export const ListCard = (props: {
         marginBottom: 20,
         borderRadius: 20,
         ...Platform.select({
-          ios: {
-
-          },
+          ios: {},
           android: {
             overflow: 'hidden',
           }
         })
       }}>
       <List
         data={props.data}
-        renderItem={renderItem}
+        renderItem={props.renderItem ?? renderItem}
         scrollEnabled={false}
         style={{overflow: 'hidden', borderRadius: 20}}
       />

src/pages/Home/index.tsx

@@ -9,7 +9,7 @@ import {ViewShadow} from '../../components/Shadow/View';
 import {TextButton} from '../../components/Button/Text';
 
 const HomePageC = (props: any) => {
-  console.log(props.theme)
+  console.log(props.theme);
   const themeColor = props.theme === 'dark' ? K.colors.dark : K.colors.light;
   const themeFont = Platform.OS === 'ios' ? K.fonts.ios : K.fonts.android;
 
@@ -23,11 +23,14 @@ const HomePageC = (props: any) => {
           navigation={props.navigation}
         />
         <Layout style={{marginHorizontal: 20}}>
-          <ViewShadow theme={props.theme} style={{marginTop: -20}}>
+          <ViewShadow
+            theme={props.theme}
+            style={{marginTop: -20, borderRadius: 20, overflow: 'hidden'}}>
+              {/* //FIXME: SHADOW NOT SHOWING */}
             <Layout
               style={{
-                overflow: 'hidden',
                 borderRadius: 20,
+                overflow: 'hidden',
                 padding: 20,
                 backgroundColor: '#E41C1C',
               }}>

src/pages/SettingsToggleTheme/index.tsx renamed to src/pages/SettingsTheme/index.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
+import {View, Platform} from 'react-native';
 import {Layout, List, ListItem, Text} from '@ui-kitten/components';
 import {connect} from 'react-redux';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import {K} from '../../store/constants';
 import {PageHeader} from '../../components/Page/PageHeader';
 import {ViewShadow} from '../../components/Shadow/View';
-import {View} from 'react-native';
+import {ListCard} from '../../components/Card/List';
 
-const SettingsToggleThemePageC = (props: any) => {
+const SettingsThemePageC = (props: any) => {
   const themeColor = props.theme === 'dark' ? K.colors.dark : K.colors.light;
+  const themeFont = Platform.OS === 'ios' ? K.fonts.ios : K.fonts.android;
 
   const list = [
     {
@@ -45,6 +47,7 @@ const SettingsToggleThemePageC = (props: any) => {
         title={`${item.title}`}
         onPress={item.onPress}
         style={{height: 50, ...selectedStyle}}
+        titleStyle={{...themeFont.subhead, color: themeColor.primaryText, marginLeft: 10}}
         icon={() =>
           item.selected ? (
             <Icon
@@ -74,14 +77,7 @@ const SettingsToggleThemePageC = (props: any) => {
         onLeadingButtonPress={() => props.navigation.navigate('Settings')}
       />
       <Layout style={{marginHorizontal: 20}}>
-        <ViewShadow theme={props.theme} style={{height: 150, marginTop: -20}}>
-          <List
-            data={list}
-            renderItem={renderItem}
-            scrollEnabled={false}
-            style={{borderRadius: 20, overflow: 'hidden'}}
-          />
-        </ViewShadow>
+        <ListCard theme={props.theme} data={list} firstInPage renderItem={renderItem} />
       </Layout>
     </Layout>
   );
@@ -102,7 +98,7 @@ const mapDispatchToProps = (dispatch: any) => {
   };
 };
 
-export const SettingsToggleThemePage = connect(
+export const SettingsThemePage = connect(
   mapStateToProps,
   mapDispatchToProps,
-)(SettingsToggleThemePageC);
+)(SettingsThemePageC);

src/store/constants.js

@@ -1,4 +1,4 @@
-import {iOSUIKit, human} from 'react-native-typography';
+import {iOSUIKit, human, robotoWeights} from 'react-native-typography';
 
 export const K = {
   colors: {
@@ -40,16 +40,16 @@ export const K = {
       body: iOSUIKit.bodyObject,
     },
     android: {
-      largeTitleE: human.largeTitleObject,
+      largeTitleE: {...human.largeTitleObject, ...robotoWeights.medium},
       largeTitle: human.largeTitleObject,
 
-      smallTitleE: human.title3Object,
+      smallTitleE: {...human.title3Object, ...robotoWeights.medium},
       smallTitle: human.title3Object,
 
-      subheadE: human.subheadObject,
+      subheadE: {...human.subheadObject, ...robotoWeights.medium},
       subhead: human.subheadObject,
 
-      bodyE: human.bodyObject,
+      bodyE: {...human.bodyObject, ...robotoWeights.medium},
       body: human.bodyObject,
     }
   }