[HomeScreen]: show <ListEmpty /> when the array of professions is empty

src/libs/native-base/native-base-extension.d.ts

@@ -0,0 +1,10 @@
+/// <reference path="../../../node_modules/native-base/index.d.ts" />
+
+declare module 'native-base' {
+  import { FlatListProps } from 'react-native';
+  namespace NativeBase {
+    interface List {
+      ListEmptyComponent?: FlatListProps<any>['ListEmptyComponent'];
+    }
+  }
+}

src/screens/App.tsx

@@ -2,7 +2,7 @@ import 'react-native-gesture-handler';
 import React, { useEffect, useRef } from 'react';
 import { ApolloProvider } from '@apollo/client';
 import RNBootSplash from 'react-native-bootsplash';
-import { StyleProvider } from 'native-base';
+import { Root, StyleProvider } from 'native-base';
 import { createClient } from 'libs/graphql';
 import { API_URI } from 'config/api';
 import Navigation from './Navigation';
@@ -24,9 +24,11 @@ const App = () => {
   return (
     <ApolloProvider client={client}>
       <StyleProvider style={theme}>
-        <SavedQualificationsProvider>
-          <BaseApp />
-        </SavedQualificationsProvider>
+        <Root>
+          <SavedQualificationsProvider>
+            <BaseApp />
+          </SavedQualificationsProvider>
+        </Root>
       </StyleProvider>
     </ApolloProvider>
   );

src/screens/HomeScreen/components/Professions/ListEmpty.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { H1, Content } from 'native-base';
+
+const ListEmpty = () => {
+  return (
+    <Content padder contentContainerStyle={styles.wrapper}>
+      <H1 style={styles.heading}>Nie znaleziono żadnej kwalifikacji</H1>
+    </Content>
+  );
+};
+
+const styles = StyleSheet.create({
+  heading: {
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    flex: 1,
+  },
+  wrapper: {
+    flex: 1,
+  },
+});
+
+export default ListEmpty;

src/screens/HomeScreen/components/Professions/Professions.tsx

@@ -1,11 +1,12 @@
 import React, { useRef, useState } from 'react';
+import { useUpdateEffect } from 'react-use';
 import { Maybe, Profession, Qualification } from 'libs/graphql';
 
-import { FlatListProps, RefreshControl } from 'react-native';
+import { FlatListProps, RefreshControl, StyleSheet } from 'react-native';
 import { List, View } from 'native-base';
 import Item from './Item';
 import QualificationModal from './QualificationModal';
-import { useUpdateEffect } from 'react-use';
+import ListEmpty from './ListEmpty';
 
 export interface ProfessionsProps
   extends Pick<FlatListProps<Profession>, 'refreshing' | 'onRefresh'> {
@@ -28,10 +29,11 @@ const Professions = ({
   }, [professions]);
 
   return (
-    <View style={{ flex: 1 }}>
+    <View style={styles.container}>
       <List
         ref={listRef}
         dataArray={professions}
+        contentContainerStyle={styles.contentContainer}
         renderItem={({ item }: { item: Profession }) => {
           return (
             <Item
@@ -43,6 +45,7 @@ const Professions = ({
             />
           );
         }}
+        ListEmptyComponent={<ListEmpty />}
         keyExtractor={item => item.id}
         refreshControl={
           <RefreshControl
@@ -60,4 +63,13 @@ const Professions = ({
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+});
+
 export default Professions;