citizenship_app_news/src/main/Home/Toolbar.js

News module for Citizenship project application

import React, { Component } from 'react'
import { View, Text, StyleSheet, Image } from 'react-native'
import { Integer, Color, FontFamily, FontSize } from '../../styles';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen'
import { Images } from '../../assets';
import { Ripple, Navigation } from '../../controllers';
import { Strings } from '../../languageservices';
import AutoScrolling from 'react-native-auto-scrolling';
import { connect } from 'react-redux';

class Toolbar extends Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    }

    renderStartElement() {
        return (
            <View style={{ height: '100%', width: '14.5%', justifyContent: 'center', alignItems: 'center' }}>
                <Ripple onPress={() => Navigation.openDrawer()}
                    rippleContainerBorderRadius={wp('4%')}
                    style={{ height: wp('9%'), width: wp('9%'), justifyContent: 'center', alignItems: 'center' }}>
                    <Image style={{ height: '70%', width: '70%', resizeMode: 'contain' }} source={Images.ic_menu} />
                </Ripple>
            </View>
        )
    }
    renderEndElement() {
        return (
            <View style={{ height: '100%', width: '14.5%', justifyContent: 'center', alignItems: 'center' }}>
                {/* <Ripple onPress={() => Navigation.openDrawer()}
                    rippleContainerBorderRadius={wp('4%')}
                    style={{ height: wp('9%'), width: wp('9%'), justifyContent: 'center', alignItems: 'center' }}>
                    <Image style={{ height: '70%', width: '70%', resizeMode: 'contain' }} source={Images.ic_menu} />
                </Ripple> */}
            </View>
        )
    }

    renderCenterElement() {
        return (
            <View style={{ height: '100%', width: '70%', justifyContent: 'center', alignItems: 'center', padding: wp('2%') }}>
                <Text style={{ fontFamily: FontFamily.TITLE, color: Color.GRADIENT_WARNING_END, fontSize: FontSize.TITLE }}>شهروند</Text>
            </View>
        )
    }

    render() {
        return (
            <View style={styles.toolbarContainer}>
                {this.renderStartElement()}
                {/* <View style={{ width: '0.5%', alignSelf: 'center', backgroundColor: Color.DEVIDER_COLOR, height: '70%' }} /> */}
                {this.renderCenterElement()}
                {this.renderEndElement()}
            </View>
        )
    }
}
const matpStateToProps = (state) => ({
    language: state.language,
})
export default connect(matpStateToProps)(Toolbar)

const styles = StyleSheet.create({
    toolbarContainer: {
        height: Integer.TOOLBAR_HEIGHT,
        width: '100%',
        backgroundColor: Color.BACKGROUND_TOOLBAR,
        flexDirection: 'row',
        shadowColor: Color.SHADOW,
        shadowOffset: {
            width: 0,
            height: Integer.SHADOW_HEIGHT,
        },
        shadowOpacity: 0.23,
        shadowRadius: Integer.BUTTON_RADIUS,
        elevation: Integer.SHADOW_ELEVATION,
    }
})