Skip to content

C
clone_excelso
Commit 93e94724 authored by Trisno's avatar Trisno
Browse files
Options

design change language

parent ccd3831e
Show whitespace changes
Inline Side-by-side
Showing with 104 additions and 39 deletions
view/ChangeLanguage.js
View file @ 93e94724
......@@ -3,6 +3,8 @@ import { StyleSheet, Text, View, Button, StatusBar, TouchableOpacity, Image } fr
import { connect } from 'react-redux';
import ActionType from '../redux/globalActionType';
import i18n from 'i18n-js';
import CheckBox from 'react-native-check-box'
import { FontAwesome, AntDesign, Feather } from '@expo/vector-icons';
class Language extends React.Component {
constructor(props) {
......@@ -32,40 +34,103 @@ class Language extends React.Component {
render() {
console.log(this.props.language)
return (
<View style={styles.container}>
<View style={styles.header}>
<StatusBar barStyle='dark-content' />
<Text style={styles.titleText}> {i18n.t('welcome')}</Text>
</View>
<View style={{ flex: 0.2 }} />
<View style={styles.body}>
<TouchableOpacity onPress={() => this._changLanguage()}>
<View style={styles.languageBorder}>
<View style={styles.languageSpace}>
{/* <Image style={styles.icon} source={require('../assets/English-Language-icon.png')}></Image> */}
{
this.props.language == 'en' ? (
<>
<TouchableOpacity style={{ flex: 0.2, flexDirection: 'row', backgroundColor: '#CFB368', margin: 10, marginHorizontal: 50, justifyContent: 'center', alignItems: 'center', borderRadius: 10, paddingVertical: 10, paddingHorizontal: 20 }}
onPress={() => this._changLanguage()}>
<View style={{ flex: 0.3, }}>
<Image style={{ height: 26, width: 40 }} source={require('../assets/images/english-flag.png')} />
</View>
<View style={styles.languageSpace}>
<Text>ENG</Text>
<View style={{ flex: 0.4, alignItems: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'white' }}>ENGLISH</Text>
</View>
<View style={{ flex: 0.2, alignItems: 'flex-end' }}>
<CheckBox
onClick={() => this._changLanguage()}
isChecked={true}
checkedImage={<AntDesign name='checkcircleo' size={30} color={'#fff'} />}
unCheckedImage={<Feather name='circle' size={30} color={'#fff'} />}
/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => this._changLanguageId()}>
<View style={styles.languageBorder}>
<View style={styles.languageSpace}>
{/* <Image style={styles.icon} source={require('../assets/Indonesia-Flag-icon.png')}></Image> */}
<TouchableOpacity style={{ flex: 0.2, flexDirection: 'row', backgroundColor: 'white', margin: 10, marginHorizontal: 50, justifyContent: 'center', alignItems: 'center', borderRadius: 10, borderWidth:1, borderColor:'gray', paddingVertical: 10, paddingHorizontal: 20 }}
onPress={() => this._changLanguageId()}>
<View style={{ flex: 0.3, }}>
<Image style={{ height: 26, width: 40,borderWidth:1, borderColor:'gray' }} source={require('../assets/images/indonesia-flag.png')} />
</View>
<View style={styles.languageSpace}>
<Text>ID</Text>
<View style={{ flex: 0.4, alignItems: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'gray' }}>INDONESIAN</Text>
</View>
<View style={{ flex: 0.2, alignItems: 'flex-end' }}>
<CheckBox
onClick={() => this._changLanguageId()}
isChecked={false}
checkedImage={<AntDesign name='checkcircleo' size={30} color={'gray'} />}
unCheckedImage={<Feather name='circle' size={30} color={'gray'} />}
/>
</View>
</TouchableOpacity>
</>
) : (
<>
<TouchableOpacity style={{ flex: 0.2, flexDirection: 'row', backgroundColor: 'white', margin: 10, marginHorizontal: 50, justifyContent: 'center', alignItems: 'center', borderRadius: 10, borderWidth:1, borderColor:'gray', paddingVertical: 10, paddingHorizontal: 20 }}
onPress={() => this._changLanguage()}>
<View style={{ flex: 0.3, }}>
<Image style={{ height: 26, width: 40 }} source={require('../assets/images/english-flag.png')} />
</View>
<View style={{ flex: 0.4, alignItems: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'gray' }}>ENGLISH</Text>
</View>
<View style={{ flex: 0.2, alignItems: 'flex-end' }}>
<CheckBox
onClick={() => this._changLanguage()}
isChecked={false}
checkedImage={<AntDesign name='checkcircleo' size={30} color={'gray'} />}
unCheckedImage={<Feather name='circle' size={30} color={'gray'} />}
/>
</View>
</TouchableOpacity>
<TouchableOpacity style={{ flex: 0.2, flexDirection: 'row', backgroundColor: '#CFB368', margin: 10, marginHorizontal: 50, justifyContent: 'center', alignItems: 'center', borderRadius: 10, paddingVertical: 10, paddingHorizontal: 20 }}
onPress={() => this._changLanguageId()}>
<View style={{ flex: 0.3, }}>
<Image style={{ height: 26, width: 40 }} source={require('../assets/images/indonesia-flag.png')} />
</View>
<View style={{ flex: 0.4, alignItems: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'white' }}>INDONESIAN</Text>
</View>
<View style={{ flex: 0.2, alignItems: 'flex-end' }}>
<CheckBox
onClick={() => this._changLanguageId()}
isChecked={true}
checkedImage={<AntDesign name='checkcircleo' size={30} color={'#fff'} />}
unCheckedImage={<Feather name='circle' size={30} color={'#fff'} />}
/>
</View>
</TouchableOpacity>
</>
)
}
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<View style={styles.button}>
<Button title="save" onPress={()=>this.props.navigation.goBack()}/>
<Text style={{ color: 'white', fontSize: 12, fontFamily: 'Gotham-Black' }}>Save</Text>
</View>
</TouchableOpacity>
</View>
</View>
)
}
}
......@@ -75,7 +140,7 @@ class Language extends React.Component {
const styles = StyleSheet.create({
container: {
flex: 1,
borderWidth: 1
backgroundColor:'white'
},
header: {
flex: 0.2,
......@@ -83,31 +148,31 @@ const styles = StyleSheet.create({
justifyContent: 'center'
},
body: {
flex: 0.6,
flexDirection: 'column',
borderWidth: 1,
marginLeft: 60,
marginRight: 60,
flex: 0.8,
flexDirection: 'column'
},
titleText: {
fontSize: 26,
fontWeight: 'bold',
},
languageBorder: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
borderWidth: 1,
marginTop: 50,
marginRight: 40,
marginLeft: 40
},
languageSpace: {
marginLeft: 20
},
button: {
marginTop: 50,
marginLeft: 60,
marginRight: 60
flex: 0.2,
backgroundColor: '#CFB368',
marginTop: 20,
marginHorizontal: 80,
borderRadius: 15,
padding: 20,
alignItems: 'center',
justifyContent: 'center'
},
icon: {
height: 60,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment