Fix android list border radius Isolate list card

Author: theboi

src/components/Card/List/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {ViewStyle, View, Text, Platform, ListRenderItem} from 'react-native';
+
+import {TouchableShadow} from '../../Shadow/Touchable';
+import {K} from '../../../store/constants';
+import {ViewShadow} from '../../Shadow/View';
+import {List, ListItem} from '@ui-kitten/components';
+
+export const ListCard = (props: {
+  theme: string;
+  data: ReadonlyArray<any> | null | undefined;
+  style?: ViewStyle;
+  firstInPage?: boolean;
+}) => {
+  const themeFont = Platform.OS === 'ios' ? K.fonts.ios : K.fonts.android;
+  const themeColor = props.theme === 'dark' ? K.colors.dark : K.colors.light;
+
+  const renderItem = ({item, index}) => {
+    return (
+      <ListItem
+        title={`${item.title}`}
+        onPress={item.onPress}
+        style={{height: 50}}
+        titleStyle={{...themeFont.subhead, color: themeColor.primaryText}}
+      />
+    );
+  };
+
+  return (
+    <ViewShadow
+      theme={props.theme}
+      style={{
+        height: props.data.length * 50,
+        marginTop: props.firstInPage ? -20 : 0,
+        marginBottom: 20,
+        borderRadius: 20,
+        ...Platform.select({
+          ios: {
+
+          },
+          android: {
+            overflow: 'hidden',
+          }
+        })
+      }}>
+      <List
+        data={props.data}
+        renderItem={renderItem}
+        scrollEnabled={false}
+        style={{overflow: 'hidden', borderRadius: 20}}
+      />
+    </ViewShadow>
+  );
+};

src/components/Text/Body/index.tsx

@@ -11,6 +11,7 @@ import Modal, {
 import {K} from '../../store/constants';
 import {PageHeader} from '../../components/Page/PageHeader';
 import {ViewShadow} from '../../components/Shadow/View';
+import {ListCard} from '../../components/Card/List';
 
 const SettingsPageC = (props: any) => {
   const themeColor = props.theme === 'dark' ? K.colors.dark : K.colors.light;
@@ -41,7 +42,7 @@ const SettingsPageC = (props: any) => {
               collecting data about you if you have location sharing turned on.
             </Text>
             <Text
-            style={{color: themeColor.secondaryText}}
+              style={{color: themeColor.secondaryText}}
               onPress={() => {
                 Linking.openURL(
                   'https://firebase.google.com/terms/data-processing-terms',
@@ -149,17 +150,6 @@ const SettingsPageC = (props: any) => {
     },
   ];
 
-  const renderItem = ({item, index}) => {
-    return (
-      <ListItem
-        title={`${item.title}`}
-        onPress={item.onPress}
-        style={{height: 50}}
-        titleStyle={{...themeFont.subhead, color: themeColor.primaryText}}
-      />
-    );
-  };
-
   return (
     <Layout style={{height: '100%', flex: 1}}>
       <ScrollView>
@@ -170,24 +160,8 @@ const SettingsPageC = (props: any) => {
           navigation={props.navigation}
         />
         <Layout style={{marginHorizontal: 20}}>
-          <ViewShadow theme={props.theme} style={{height: (50*3), marginTop: -20}}>
-            <List
-              data={list1}
-              renderItem={renderItem}
-              scrollEnabled={false}
-              style={{borderRadius: 20, overflow: 'hidden'}}
-            />
-          </ViewShadow>
-          <ViewShadow
-            theme={props.theme}
-            style={{height: (50*4), marginTop: 20, marginBottom: 20}}>
-            <List
-              data={list2}
-              renderItem={renderItem}
-              scrollEnabled={false}
-              style={{overflow: 'hidden', borderRadius: 20}}
-            />
-          </ViewShadow>
+          <ListCard theme={props.theme} data={list1} firstInPage/>
+          <ListCard theme={props.theme} data={list2} />
         </Layout>
       </ScrollView>
 

src/components/Text/Header/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import {View} 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 SettingsPeoplePageC = (props: any) => {
   const themeColor = props.theme === 'dark' ? K.colors.dark : K.colors.light;
@@ -60,14 +61,7 @@ const SettingsPeoplePageC = (props: any) => {
       />
       {/* //TODO: ACTION BUTTON PRESS^^ */}
       <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 />
       </Layout>
     </Layout>
   );