citizenship_app_news/src/main/Home/DrawerLayout.js

News module for Citizenship project application

import React, { Component } from 'react'
import { Text, View, Image, FlatList, ImageBackground } from 'react-native'
import LinearGradient from 'react-native-linear-gradient';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { Color, FontFamily, FontSize } from '../../styles';
import { Images } from '../../assets';
import { Ripple, Navigation } from '../../controllers';
import { Strings } from '../../languageservices';

class DrawerLayout extends Component {
    constructor(props) {
        super(props)
        this.state = {
            routes: [
                { id: 1, key: 'favorites', name: Strings.favorites, icon: Images.ic_not_liked },
                { id: 1, key: 'raifoodBlog', name: "اعلانات", icon: Images.ic_magazine },
                { id: 1, key: 'increaseCredit', name: Strings.increaseCredit, icon: Images.ic_credit },
                { id: 1, key: 'exit', name: Strings.exit, icon: Images.ic_exit },
            ]
        }
    }
    navigateRoute(key) {
        Navigation.closeDrawer()
        switch (key) {
            case "orderList":
                Navigation.navigate("OrderListScreen")
                break;
        }
    }
    render() {
        return (
            <View style={{ height: '100%', width: '100%', flexDirection: 'column' }}>
                <LinearGradient
                    start={{ x: 1, y: 0 }}
                    end={{ x: 0, y: 1 }}
                    colors={[Color.BACKGROUND_SPLASH_START, Color.BACKGROUND_SPLASH_END]}
                    style={{ width: '100%', height: hp('30%'), flexDirection: 'column' }}>
                    <ImageBackground imageStyle={{ height: '100%', width: '100%', resizeMode: 'cover' }} style={{ height: '100%', width: '100%' }} source={Images.top_pattern}>
                        <View style={{ width: '100%', height: '80%', paddingTop: wp('8%'), justifyContent: 'flex-start', alignItems: 'center', flexDirection: 'column' }}>
                            <View style={{ height: wp('16%'), width: wp('16%'), justifyContent: 'center', alignItems: 'center', borderRadius: wp('8%'), backgroundColor: Color.BACKGROUND_MAIN }}>
                                <Image style={{ height: '90%', width: '90%', resizeMode: 'contain',borderRadius: wp('7%') }} source={Images.ic_no_avatar} />
                            </View>
                            <View style={{ flexDirection: 'row',justifyContent: 'center',alignItems: 'center' }}>
                                <Text style={{ color: Color.GRADIENT_WARNING_END, fontFamily: FontFamily.TITLE, fontSize: FontSize.SUBTITLE }}>Abbas Moosavi</Text>
                                {/* <Ripple rippleContainerBorderRadius={wp('2.5%')}
                                    style={{ height: wp('5%'), width: wp('5%'), justifyContent: 'center', alignItems: 'center' }}>
                                    <Image style={{ tintColor: Color.TEXT_bUTTON_FIRST, height: '75%', width: '75%', resizeMode: 'contain' }} source={Images.ic_arrow_bottom} />
                                </Ripple> */}
                            </View>
                            <Text style={{ color: Color.TEXT_DRAWER_MOBILE, fontFamily: FontFamily.CONTENT, fontSize: FontSize.CONTENT }}>09306373499</Text>
                        </View>
                        <LinearGradient
                            start={{ x: 0.2, y: 0.2 }}
                            end={{ x: 0, y: 0 }}
                            colors={[Color.BACKGROUND_SPLASH_END, Color.BACKGROUND_SPLASH_END]}
                            style={{ width: '100%', height: '20%', padding: wp('2%'), justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
                            {/* <Text style={{ margin: wp('2%'), color: Color.TEXT_GO_CART, fontFamily: FontFamily.CONTENT, fontSize: FontSize.SMALL }}>{Strings.raisen}:  20</Text> */}
                            {/* <View style={{ margin: wp('2%'), backgroundColor: Color.TEXT_HELP, height: '100%', width: wp('0.4%') }} /> */}
                            <Text style={{ margin: wp('2%'), color: Color.LIKED, fontFamily: FontFamily.CONTENT, fontSize: FontSize.SMALL }}>{Strings.wallet}:  0 {Strings.priceUnit}</Text>
                            {/* <View style={{ margin: wp('2%'), backgroundColor: Color.TEXT_HELP, height: '100%', width: wp('0.4%') }} /> */}
                            {/* <Text style={{ margin: wp('2%'), color: Color.TEXT_GO_CART, fontFamily: FontFamily.CONTENT, fontSize: FontSize.SMALL }}>{Strings.coupon}:  4</Text> */}
                        </LinearGradient>
                    </ImageBackground>
                </LinearGradient>
                <FlatList
                    style={{ width: '100%', padding: wp('6%') }}
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                    data={this.state.routes}
                    renderItem={({ item }) => (
                        <View style={{ width: '100%', height: hp('8%'), flexDirection: 'column' }}>
                            <Ripple onPress={() => this.navigateRoute(item.key)}
                                style={{ width: '100%', height: hp('7.8%'), flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                                <Image style={{ tintColor: '#707070', height: wp('6%'), width: wp('6%'), resizeMode: 'contain' }} source={item.icon} />
                                <Text style={{ marginStart: wp('4%'), color: '#707070', fontFamily: FontFamily.SUBTITLE, fontSize: FontSize.CONTENT }}>{item.name}</Text>
                            </Ripple>
                            <View style={{ width: '100%', height: hp('0.2'), backgroundColor: Color.BORDER_VIEW }} />
                        </View>
                    )}
                />
            </View>
        )
    }
}

export default DrawerLayout