Untitled

import React, { useState } from 'react';
import { View, StyleSheet, Dimensions, Platform } from 'react-native';
import { Card, Text, List, ListItem, Left, Body, Button, Container } from 'native-base';
import Icon1 from 'react-native-vector-icons/SimpleLineIcons';
import NavigationService from '../components/NavigationService';
import Modal from "react-native-modal";
import RNRestart from 'rn-restart';
import I18n from '../locales';
import { switchLanguage } from '../locales';
import RF from 'react-native-responsive-fontsize';
import { URL } from '../components/url';
import { heightPercentageToDP as hp } from 'react-native-responsive-screen';
import AppHeader from '../components/AppHeader';
var ls = require('react-native-local-storage');
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Platform.OS === "ios"
    ? Dimensions.get("window").height
    : 2000;
export default function GoBakuCardInfo() {

    const [isModalVisible1, setIsModalVisible1] = useState(false);
    const [language, setLanguage] = useState('en');

    toggleModal1 = async () => {
        setIsModalVisible1(!isModalVisible1);
        let l = await ls.get('language');
        if (l !== null) {
            setLanguage(l);
        }
    };

    onSetLang = async (lang) => {
        setIsModalVisible1(!isModalVisible1);
        ls.save('language', lang);
        let l = await ls.get('language');
        switchLanguage(l, this);
        if (isModalVisible1 === true) {
            RNRestart.Restart();
        }
    };

    return (
        <Container>
            <AppHeader title={I18n.t('gobakucardText')} type={'gobakucard'} />
            <View style={styles.viewStyle}>
                <View style={{ flex: 0.5 }}></View>
                <View style={styles.listViewStyle}>
                    <List style={styles.listStyle}>
                        <ListItem onPress={() => NavigationService.navigate('InfoDetail', { url: URL + language + '/app-terms-and-conditions/', title: I18n.t('termsText'), anchor: "#"+8414 })} style={styles.listItemStyle} icon noBorder>
                            <Left>
                                <Icon1 name="credit-card" size={18} />
                            </Left>
                            <Body>
                                <Text style={styles.textStyle}>{I18n.t('termsText')}</Text>
                            </Body>
                        </ListItem>
                        <ListItem onPress={() => NavigationService.navigate('UsefulInfo', { title: I18n.t('usefulInfoText') })} style={styles.listItemStyle} icon noBorder>
                            <Left>
                                <Icon1 name="info" size={18} />
                            </Left>
                            <Body>
                                <Text style={styles.textStyle}>{I18n.t('usefulInfoText')}</Text>
                            </Body>
                        </ListItem>
                        <ListItem onPress={() => NavigationService.navigate('Favourite', { title: I18n.t('favoritesText'), from_page: 'GoBakuCard' })} style={styles.listItemStyle} icon noBorder>
                            <Left>
                                <Icon1 name="heart" size={18} />
                            </Left>
                            <Body>
                                <Text style={styles.textStyle}>{I18n.t('favoritesText')}</Text>
                            </Body>
                        </ListItem>
                        <ListItem onPress={() => this.toggleModal1()} style={styles.listItemStyle} icon noBorder>
                            <Left>
                                <Icon1 name="globe" size={18} />
                            </Left>
                            <Body>
                                <Text style={styles.textStyle}>{I18n.t('languageText')}</Text>
                            </Body>
                        </ListItem>
                    </List>
                    {(isModalVisible1) ? <Modal
                        style={{ marginTop: hp('30%') }}
                        deviceWidth={deviceWidth}
                        deviceHeight={deviceHeight}
                        backdropColor="#abacac" backdropOpacity={0.90}
                        isVisible={isModalVisible1}
                        onBackdropPress={() => setIsModalVisible1(!isModalVisible1)}>
                        <View style={{ flex: 1 }}>
                            <Card style={styles.modalStyle}>
                                <List style={styles.languageListStyle}>
                                    <ListItem style={[styles.listItemStyle, { marginTop: 20 }]} noBorder>
                                        {(language === 'en') ? (<Button style={styles.activeBtnStyle} bordered dark block>
                                            <Text>English</Text>
                                        </Button>) : (<Button onPress={() => this.onSetLang('en')} style={styles.deactiveBtnStyle} block>
                                            <Text style={{ color: '#333' }}>English</Text>
                                        </Button>)}

                                    </ListItem>
                                    <ListItem style={styles.listItemStyle} noBorder>
                                        {(language === 'ru') ? (<Button style={styles.activeBtnStyle} bordered dark block>
                                            <Text>русский</Text>
                                        </Button>) : (<Button onPress={() => this.onSetLang('ru')} style={styles.deactiveBtnStyle} block>
                                            <Text style={{ color: '#333' }}>русский</Text>
                                        </Button>)}
                                    </ListItem>
                                </List>
                            </Card>
                        </View>
                    </Modal> : null}
                </View>
                <View style={{ flex: 0.5 }}></View>
            </View>
        </Container>
    );

}
const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        backgroundColor: '#F5F7F6'
    },
    listViewStyle: {
        flex: 2,
        marginLeft: 30,
        marginRight: 30,
        borderRadius: 5,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
        elevation: 4
    },
    modalStyle: {
        borderRadius: 5,
        padding: 30,
        justifyContent: 'center',
        alignItems: 'center'
    },
    listStyle: {
        paddingTop: hp('20%'),
        paddingBottom: hp('20%'),
        marginLeft: 'auto',
        marginRight: 'auto'
    },
    listItemStyle: {
        width: '110%',
        paddingTop: -5
    },
    textStyle: {
        fontSize: RF(2.4),
        paddingLeft: 10
    },
    languageListStyle: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    activeBtnStyle: {
        width: 250,
        borderRadius: 5
    },
    deactiveBtnStyle: {
        backgroundColor: '#fff',
        elevation: 0
    }
});