1233: Implement lists as actual list

native/src/components/SearchListItem.tsx

@@ -9,6 +9,7 @@ import { contentDirection } from '../constants/contentDirection'
 import { PageResourceCacheStateType } from '../utils/DataContainer'
 import { getCachedThumbnail } from './Categories'
 import { CategoryThumbnail } from './CategoryListItem'
+import List from './List'
 import Pressable from './base/Pressable'
 
 const FlexStyledLink = styled(Pressable)`
@@ -85,7 +86,8 @@ const SearchListItem = ({
       }}
     />
   )
-  return (
+
+  const SearchList = (
     <FlexStyledLink onPress={() => onItemPress(category)}>
       <DirectionContainer language={language}>
         <SearchEntryContainer>
@@ -100,6 +102,8 @@ const SearchListItem = ({
       </DirectionContainer>
     </FlexStyledLink>
   )
+
+  return <List items={category} renderItem={({ item: category }) => category} Header={SearchList} />
 }
 
 export default memo(SearchListItem)

native/src/routes/CityNotCooperating.tsx

@@ -3,13 +3,16 @@ import React, { ReactElement, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components/native'
 
+import List from '../components/List'
+import NothingFound from '../components/NothingFound'
 import Icon from '../components/base/Icon'
 import TextButton from '../components/base/TextButton'
 import buildConfig, { buildConfigAssets } from '../constants/buildConfig'
 
-const Container = styled.ScrollView`
+const Container = styled.View`
   display: flex;
-  padding: 30px;
+  flex: 1;
+  padding: 30px 30px 0 30px;
 `
 
 const Heading = styled.Text`
@@ -30,6 +33,7 @@ const ListHeading = styled(Heading)`
 `
 
 const ListItem = styled.View`
+  top: -130px;
   flex-direction: row;
   margin: 10px 0;
   align-items: center;
@@ -53,30 +57,51 @@ const StepExplanation = styled.Text`
 `
 
 const StyledButton = styled(TextButton)`
+  top: -130px;
   z-index: 1;
   margin: 15px auto 0;
   width: 70%;
 `
 
 const TemplateText = styled.Text`
-  top: -20px;
+  top: -150px;
   border: 1px solid ${props => props.theme.colors.themeColor};
   padding: 50px 30px 30px;
   margin-bottom: 40px;
 `
 
 const StyledIcon = styled(Icon)`
+  margin: 10px 0;
   align-self: center;
   width: 50%;
-  height: 20%;
+  height: 30%;
 `
 
+type Step = {
+  number: string
+  id: string
+  explanation: string
+}
+
 const CityNotCooperating = (): ReactElement | null => {
   const { t } = useTranslation('cityNotCooperating')
   const [isCopied, setIsCopied] = useState<boolean>(false)
   const template = buildConfig().featureFlags.cityNotCooperatingTemplate
   const CityNotCooperatingIcon = buildConfigAssets().CityNotCooperatingIcon
 
+  const steps: Step[] = [
+    {
+      id: '1',
+      number: '1',
+      explanation: 'findOutMail',
+    },
+    {
+      id: '2',
+      number: '2',
+      explanation: 'sendText',
+    },
+  ]
+
   if (!template) {
     return null
   }
@@ -86,24 +111,38 @@ const CityNotCooperating = (): ReactElement | null => {
     setIsCopied(true)
   }
 
-  return (
-    <Container>
-      <Heading>{t('callToAction')}</Heading>
+  const renderStepsList = ({ item }: { item: Step; index: number }) => (
+    <ListItem>
+      <StepNumber>{item.number}</StepNumber>
+      <StepExplanation>{t(item.explanation)}</StepExplanation>
+    </ListItem>
+  )
 
+  const CooperationHeader = (
+    <>
+      <Heading>{t('callToAction')}</Heading>
       <Description>{t('explanation')}</Description>
       {CityNotCooperatingIcon && <StyledIcon Icon={CityNotCooperatingIcon} />}
       <ListHeading>{t('whatToDo')}</ListHeading>
-      <ListItem>
-        <StepNumber>1</StepNumber>
-        <StepExplanation>{t('findOutMail')}</StepExplanation>
-      </ListItem>
-      <ListItem>
-        <StepNumber>2</StepNumber>
-        <StepExplanation>{t('sendText')}</StepExplanation>
-      </ListItem>
+    </>
+  )
 
+  const CooperationFooter = (
+    <>
       <StyledButton onPress={copyToClipboard} text={isCopied ? t('common:copied') : t('copyText')} />
       <TemplateText>{template}</TemplateText>
+    </>
+  )
+
+  return (
+    <Container>
+      <List
+        items={steps}
+        renderItem={renderStepsList}
+        Header={CooperationHeader}
+        Footer={CooperationFooter}
+        noItemsMessage={<NothingFound />}
+      />
     </Container>
   )
 }