fix typescript errors

src/screens/About/DebugScreen.tsx

  * This screen allows the user to get and modify information on the app/device.
  */
 class DebugScreen extends React.Component<PropsType, StateType> {
-  modalRef: Modalize | null;
+  modalRef: { current: Modalize | null };
 
   modalInputValue: string;
 
    */
   constructor(props: PropsType) {
     super(props);
-    this.modalRef = null;
+    this.modalRef = React.createRef<Modalize>();
     this.modalInputValue = '';
     const currentPreferences: Array<PreferenceItemType> = [];
     Object.values(AsyncStorageManager.PREFERENCES).forEach((object: any) => {
   };
 
   /**
-   * Callback used when receiving the modal ref
-   *
-   * @param ref
-   */
-  onModalRef = (ref: Modalize) => {
-    this.modalRef = ref;
-  };
-
-  /**
    * Shows the edit modal
    *
    * @param item
     this.setState({
       modalCurrentDisplayItem: item,
     });
-    if (this.modalRef) {
-      this.modalRef.open();
+    if (this.modalRef.current) {
+      this.modalRef.current.open();
     }
   }
 
       return { currentPreferences };
     });
     AsyncStorageManager.set(key, value);
-    if (this.modalRef) {
-      this.modalRef.close();
+    if (this.modalRef.current) {
+      this.modalRef.current.close();
     }
   }
 
     const { state } = this;
     return (
       <View>
-        <CustomModal onRef={this.onModalRef}>
-          {this.getModalContent()}
-        </CustomModal>
+        <CustomModal ref={this.modalRef}>{this.getModalContent()}</CustomModal>
         <CollapsibleFlatList
           data={state.currentPreferences}
           extraData={state.currentPreferences}

src/screens/Planning/PlanningDisplayScreen.tsx

 import { getDateOnlyString, getTimeOnlyString } from '../../utils/Planning';
 import DateManager from '../../managers/DateManager';
 import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
-import { apiRequest, ERROR_TYPE } from '../../utils/WebData';
+import { ApiRejectType, apiRequest } from '../../utils/WebData';
 import ErrorView from '../../components/Screens/ErrorView';
 import CustomHTML from '../../components/Overrides/CustomHTML';
 import { TAB_BAR_HEIGHT } from '../../components/Tabbar/CustomTabBar';
 import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
 import type { PlanningEventType } from '../../utils/Planning';
 import ImageGalleryButton from '../../components/Media/ImageGalleryButton';
+import { API_REQUEST_CODES, REQUEST_STATUS } from '../../utils/Requests';
 
 type PropsType = {
   navigation: StackNavigationProp<any>;
 
   eventId: number;
 
-  errorCode: number;
+  error: ApiRejectType;
 
   /**
    * Generates data depending on whether the screen was opened from the planning or from a link
       this.displayData = props.route.params.data;
       this.eventId = this.displayData.id;
       this.shouldFetchData = false;
-      this.errorCode = 0;
+      this.error = { status: REQUEST_STATUS.SUCCESS };
       this.state = {
         loading: false,
       };
       this.displayData = null;
       this.eventId = props.route.params.eventId;
       this.shouldFetchData = true;
-      this.errorCode = 0;
+      this.error = { status: REQUEST_STATUS.SUCCESS };
       this.state = {
         loading: true,
       };
    *
    * @param error
    */
-  onFetchError = (error: number) => {
-    this.errorCode = error;
+  onFetchError = (error: ApiRejectType) => {
+    this.error = error;
     this.setState({ loading: false });
   };
 
    * @returns {*}
    */
   getErrorView() {
-    if (this.errorCode === ERROR_TYPE.BAD_INPUT) {
+    if (this.error.code === API_REQUEST_CODES.BAD_INPUT) {
       return (
         <ErrorView
           message={i18n.t('screens.planning.invalidEvent')}
     }
     return (
       <ErrorView
-        status={this.errorCode}
+        status={this.error.status}
+        code={this.error.code}
         button={{
           icon: 'refresh',
           text: i18n.t('general.retry'),
     if (loading) {
       return <BasicLoadingScreen />;
     }
-    if (this.errorCode === 0) {
+    if (
+      this.error.status === REQUEST_STATUS.SUCCESS &&
+      this.error.code === undefined
+    ) {
       return this.getContent();
     }
     return this.getErrorView();

src/screens/Services/Proximo/ProximoListScreen.tsx

   const navigation = useNavigation();
   const theme = useTheme();
   const { articles, setArticles } = useCachedProximoArticles();
-  const modalRef = useRef<Modalize>();
+  const modalRef = useRef<Modalize>(null);
 
   const [currentSearchString, setCurrentSearchString] = useState('');
   const [currentSortMode, setCurrentSortMode] = useState(2);
   const [modalCurrentDisplayItem, setModalCurrentDisplayItem] = useState<
-    React.ReactNode | undefined
+    React.ReactChild | undefined
   >();
 
   const sortModes = [sortPrice, sortPriceReverse, sortName, sortNameReverse];
 
   return (
     <View style={GENERAL_STYLES.flex}>
-      <CustomModal onRef={(ref) => (modalRef.current = ref)}>
-        {modalCurrentDisplayItem}
-      </CustomModal>
+      <CustomModal ref={modalRef}>{modalCurrentDisplayItem}</CustomModal>
       <WebSectionList
         request={() => readData<ArticlesType>(Urls.proximo.articles)}
         createDataset={createDataset}