rifqiardian/Empty.js

component that always needed when create project

import React from 'react'
import { View, Image, StyleSheet,Text, Dimensions } from 'react-native'
import { color } from '_styles'
import LottieView from 'lottie-react-native'
import { ButtonText } from '_atoms'

const {height,width} = Dimensions.get('window')

const Empty = (props) => {
    return(
        <View style={[styles.container,props.containerStyle]}>
            <Image style={[styles.image,props.imageStyle]} source={props.image} />
            {
                props.title ? <Text style={styles.title}>{props.title}</Text> : null
            }
            <Text style={{ color: color.g700,textAlign:'center',marginHorizontal:20 }}>{props.text}</Text>
            {
                props.buttonText && 
                <ButtonText 
                    title={props.buttonText} 
                    onPress={props.buttonTextPress} 
                    textColor={props.buttonTextColor} 
                    icon={props.icon} style={props.buttonTextStyle} 
                    iconColor={props.iconColor} />
            }
        </View>
    )
}

const EmptyBox = (props) => {
    return(
        <View style={{ height: height, alignItems: 'center', justifyContent: 'center' }}>
            <LottieView
                source={require('_assets/empty.json')}
                colorFilters={[{
                    keypath: "button",
                    color: "#FFFFFF"
                }, {
                    keypath: "Sending Loader",
                    color: "#FFFFFF"
                }]}
                style={{
                    width: 200,
                    height: 200,
                }}
                autoPlay
                loop
            />
            <Text style={{ fontWeight: 'bold', color: color.g700 }}>{props.text}</Text>
        </View>
    )
}

const EmptyItem = (props) => {
    return(
        <View style={styles.wrapperItem}>
            <Image style={[styles.image,props.style,{height:250,width:width/1.5,alignSelf:'center'}]} source={props.image} />
            {
                props.title ? <Text style={styles.title}>{props.title}</Text> : null
            }
            <Text style={{ color: color.g700,textAlign:'center' }}>{props.text}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container:{
        height:height,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#fff'
    },
    wrapperItem:{

    },
    title:{
        textAlign:'center',
        fontWeight: 'bold', 
        color: color.g700,
        fontSize:20
    },
    image:{
        resizeMode:'contain',
        width:width,
        height:width/1.5
    }
})

export {
    Empty,
    EmptyBox,
    EmptyItem,
}