Lists/index.js
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';
function Lists({listsCount, wordsCount}){
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} />
<RadialButton />
</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,
},
});
App.js
import React, {useEffect, useState} from 'react';
import * as Font from 'expo-font'
import { ActivityIndicator } from 'react-native';
import { Provider } from 'react-redux';
import Navigator from './src/components/Navigator'
import store from './src/external/redux/store'
import 'react-native-gesture-handler'
import fonticons from './src/assets/fonts/fontIcon/fonticons.ttf'
import RobotoBold from './src/assets/fonts/Roboto/Roboto-Bold.ttf'
import RobotoMedium from './src/assets/fonts/Roboto/Roboto-Medium.ttf'
import RobotoRegular from './src/assets/fonts/Roboto/Roboto-Regular.ttf'
export default function App() {
const [show, setShow] = useState(false);
useEffect(()=>{
const fontLoads = async function(){
await Font.loadAsync({
fonticons,
RobotoBold,
RobotoMedium,
RobotoRegular
})
setShow(true)
}
fontLoads()
}, [])
if(!show){
return (
<ActivityIndicator size='small' />
)
}
else {
return (
<Provider store={store}>
<Navigator />
</Provider>
)
};
}
