ilink-world/screens/wallet/PaiementFacture.js

import React, {Component} from 'react';
import {StatusBar, StyleSheet, View} from 'react-native';
import I18n from 'react-native-i18n';
import {Appbar, Provider} from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {Color} from '../../config/Color';
import {IlinkEmitter} from "../../utils/events";
import OutlineTextInput from '../../components/OutlineTextInput';
import CustomButton from '../../components/CustomButton';
import {ScrollView} from 'react-native-gesture-handler';

const route = require('../../route.json');
let slugify = require('slugify');

export default class PaiementFacture extends Component {

    constructor(props) {
        super(props);
        IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
        this.state = {
            title: this.props.navigation.state.params.title,
            type: this.props.navigation.state.params.type,
        }
        console.log("Paiement facture props", this.props);

    }

    updateLangue() {
        this.props.navigation.setParams({name: I18n.t('WALLET')})
        this.forceUpdate();
    }

    static navigationOptions = ({navigation}) => ({
        header: null,
        headerMode: 'none',
        headerTitle: null,
        activeColor: '#f0edf6',
        inactiveColor: '#3e2465',
        barStyle: {backgroundColor: '#694fad'},
        drawerLabel: I18n.t('CREDIT_MANAGE'),
        drawerIcon: ({tintColor}) => (
            <Icon
                name={'credit-card'}
                size={24}
            />)
    });

    renderLabel = () => {
        const {type} = this.state;

        switch (type) {
            case 'PAIEMENT_ECOLE':
                return I18n.t('IDENTIFIANT_ETUDIANT')
            case 'PAIEMENT_EAU':
                return I18n.t('NUMERO_ABONNE')
            case 'PAIEMENT_ELECTRICITE':
                return I18n.t('NUMERO_ABONNE')
            case 'PAIEMENT_CREDIT_TELEPHONE':
                return I18n.t('PHONE_NUMBER')
            case 'PAIEMENT_ABONNEMENT_TV':
                return I18n.t('NUMERO_ABONNE')

            default:
                break;
        }
    }

    render() {
        return (
            <Provider>
                <View style={{flex: 1}}>

                    <StatusBar
                        backgroundColor={Color.primaryDarkColor}
                        barStyle="light-content"
                        translucent={false}
                    />

                    <Appbar.Header dark={true} style={{backgroundColor: Color.primaryColor}}>
                        <Appbar.BackAction
                            onPress={() => {
                                this.props.navigation.pop()
                            }}
                        />
                        <Appbar.Content
                            title={this.state.title}
                        />
                    </Appbar.Header>

                    <View style={styles.container}>

                        <ScrollView style={{padding: 20}}>

                            <View style={{marginTop: 10, marginRight: 20, marginLeft: 20}}>
                                <OutlineTextInput
                                    borderBottomColor={'black'}
                                    keyboardType="numeric"
                                    label={this.renderLabel()}
                                    style={{marginTop: 10}}
                                    placeholder={this.renderLabel()}
                                />
                            </View>

                            <View style={{marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10}}>
                                <OutlineTextInput
                                    borderBottomColor={'black'}
                                    keyboardType="numeric"
                                    label={I18n.t('AMOUNT')}
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('AMOUNT_LABEL_DESCRIPTION')}
                                />
                            </View>


                            <View style={{margin: 10}}>
                                <CustomButton outline onPress={() => {
                                }}>
                                    {I18n.t('VALIDATE')}
                                </CustomButton>
                            </View>

                        </ScrollView>


                    </View>

                </View>
            </Provider>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Color.containerBackgroundColor
    },
});