Source: screens/newAds/newAdScreen.js

import React, { useState } from 'react';
import { StyleSheet, View, Text, SectionList } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import * as actions from '../../store/actions/action';
import NewAds from './newAds';

const NewAdsScreen = props => {
  const session = useSelector(state => state.init.sessionData);
  const ads = useSelector(state => state.init.ads);
  const dispatch = useDispatch();

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

  /**
   * Sorting new ads
   * latest ad comes at the top of the secionList
   */
  let newads = ads.sort(function(a, b) {
    let dateA = new Date(a.published),
      dateB = new Date(b.published);
    return dateB - dateA;
  });

  let order =
    newads.length > 0
      ? [{ title: 'Trykk på annonsen for å se mer informasjon', data: newads }]
      : [];

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

  return (
    <View style={styles.wrapper}>
      <SectionList
        style={{ marginHorizontal: 16 }}
        onRefresh={() => onRefresh()}
        refreshing={refreshing}
        sections={order}
        ListEmptyComponent={
          <View style={styles.emptyComponent}>
            <Text style={{ fontSize: 30, fontFamily: 'MuseoSansRounded-700' }}>
              Det er ingen nye annonser lagt til marketsplassen
            </Text>
          </View>
        }
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <NewAds item={item} styles={styles} nav={navigation} />}
      />
    </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',
    paddingTop: 20
  },
  title: {
    fontSize: 24
  },
  emptyComponent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 10
  }
});

export default NewAdsScreen;