task 3801 stage 14

Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.
task 3801 stage 14

fleed

import React from 'react';
import { View, StyleSheet, Text, FlatList, SafeAreaView } from 'react-native';
import colors from '../../assets/styles/colors';
import NavigationHeader from '../../components/NavigationHeader';
import RadialButton from '../../components/Buttons/RadialButton';
import { connect } from 'react-redux';
import { ADD_LIST_SCREEN } from '../../../constants';
import List from './List'


function Lists({listsCount, wordsCount, navigation, lists}){
  const renderItem = ({ item }) => {
    return (
      <List createAt={item.createAt} listKey={item.key} />
    )
  }
    return(
      <>
        <SafeAreaView style={styles.container}>
          <NavigationHeader barStyle='light' />
          <View style={styles.header}>
              <View style={styles.info}>
                <View style={styles.list}>
                  <Text style={styles.count}>{listsCount}</Text>
                  <Text style={styles.label}>Lists</Text>
                </View>
              <View style={styles.word}>
                <Text style={styles.count}>{wordsCount}</Text>
                <Text style={styles.label}>Words</Text>
              </View>
            </View>
          </View>
          <View style={styles.body}>
            <Text style={styles.title}>My dictionary</Text>
            <FlatList 
              style={styles.flatList}
              data={lists}
              renderItem={renderItem} 
            />
            <RadialButton onPress={()=> navigation.navigate(ADD_LIST_SCREEN)}/>
          </View>
        </SafeAreaView>
        <SafeAreaView style={{flex:0, backgroundColor: colors.blue1}}>
          
        </SafeAreaView>
      </>
    );
}

const mapStateToProps = ({ LISTS: lists, WORDS: words }) => ({
    lists: lists,
    wordsCount: words.length,
    listsCount: lists.length, 
});

export default connect(mapStateToProps)(Lists);

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.blue,
    },
    header: {
      flex: 0.5,
      paddingBottom: 25,
      paddingLeft: 20,
    },
    info: {
      flex: 1,
      flexDirection: 'row',
      height: 40,
      maxHeight: 40,
    },
    list: {
      width: 66,
      alignItems: 'center',
      justifyContent: 'center',
    },
    word: {
      width: 81,
      alignItems: 'center',
      justifyContent: 'center',
      borderLeftWidth: 2,
      borderColor: colors.white,
    },
    count: {
      fontSize: 22,
      color: colors.white,
      fontFamily: 'RobotoBold',
    },
    label: {
      fontSize: 12,
      color: colors.blue2,
      fontFamily: 'RobotoRegular',
    },
    body: {
      flex: 8,
      backgroundColor: colors.blue1,
      borderTopLeftRadius: 15,
      borderTopRightRadius: 15,
    },
    title: {
      fontSize: 20,
      color: colors.black,
      fontFamily: 'RobotoRegular',
      marginTop: 26,
      marginLeft: 16,
    },
    flatList: {
      marginVertical: 21,
    },
});