Display a nice Component when no Items are available to show.

NoItemComponent.md

NoItemComponent

Display a nice Component when no Items are available to show.

import React, { Component } from 'react';
import { Text, View, Dimensions, StyleSheet } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import Colors from '../constants/Colors';


class NoItemComponent extends Component {
	constructor(props) {
		super(props);
	}
	render (){
		return (
            <View style={styles.alignContainers}>
				<View style={styles.containerStyle}>
					<FontAwesome
						name={this.props.iconName}
						size={64}
						color={Colors.tabIconDefault}
					  />
					  <Text style={styles.infoHeadingStyle}>
					  {this.props.infoHeading}
					  </Text>
					  <Text style={styles.infoParagraphStyle}>
					  {this.props.infoParagraph}
					  </Text>
				</View>
		    </View>
		);
	}
};

const styles = StyleSheet.create({
	alignContainers: {
		justifyContent: 'center',
		alignItems: 'center',
		width: Dimensions.get('window').width,
		height: Dimensions.get('window').height - 150
	},
	containerStyle: {
		alignItems: 'center',
		justifyContent: 'center'
	},
	infoHeadingStyle: {
		fontSize: 24,
		textAlign: 'center',
		marginTop: 5
	},
	infoParagraphStyle: {
        textAlign: 'center',
		padding: 10,
		fontSize: 16,
		color: '#888',
		width: Dimensions.get('window').width/1.75
	},
	textStyle: {
		fontSize: 20
	}
});

export default NoItemComponent;

and use the component like this.

<NoItemComponent
  iconName='heart'
  infoHeading="No Favourites"
  infoParagraph="Add stories to your favouries, and they will be shown here."
/>

cool!

file is at components/NoItemComponent.js