Source: screens/todo/todoScreen.js

import React, { useState } from 'react';
import { SectionList, View, StyleSheet, Text } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';

import * as actions from '../../store/actions/action';
import TodoItem from './TodoItem';

const todoScreen = props => {
  const session = useSelector(state => state.init.sessionData);
  const todo = useSelector(state => state.init.orders);
  const dispatch = useDispatch();

  const { navigation } = props;
  const [refreshing, setRefreshing] = useState(false);

  /**
   * Sorting todoItems
   * Oldest task comes at the top of the secionList
   */
  let newtodo = todo.sort(function(a, b) {
    let dateA = new Date(a.lastModified);
    let dateB = new Date(b.lastModified);
    return dateA - dateB;
  });

  let order = [];
  if (newtodo.length > 0) {
    order = [{ data: newtodo }];
  }

  function onRefresh() {
    setRefreshing(true);
    dispatch(actions.getOrders(session.organisationType));
    setTimeout(function() {
      setRefreshing(false);
    }, 1000);
  }

  return (
    <View style={styles.wrapper}>
      <SectionList
        style={{ marginHorizontal: 16 }}
        onRefresh={() => onRefresh()}
        refreshing={refreshing}
        sections={order}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <TodoItem item={item} nav={navigation} />}
        ListEmptyComponent={() => <EmptyListComponent />}
      />
    </View>
  );
};

const EmptyListComponent = () => {
  return (
    <View>
      <Text style={{ fontSize: 30, fontFamily: 'MuseoSansRounded-700' }}>
        Vi gir beskjed så snart det dukker opp noe du trenger å gjøre{' '}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: '#EEEEEE'
  },
  item: {
    backgroundColor: '#FFFFFF',
    padding: 20,
    marginVertical: 8
  },
  header: {
    fontSize: 32,
    fontWeight: 'bold',
    fontFamily: 'MuseoSansRounded-700',
    backgroundColor: '#EEEEEE'
  },
  title: {
    fontSize: 24
  },
  emptyComponent: {
    fontSize: 20
  }
});
export default todoScreen;