I can show up that bottom sheet with touchable highlight's on press even at my first page but not at my second page even i just save as my first page.
import React, { Component } from 'react';
import { ScrollView, View, Text, Image, TextInput, TouchableHighlight, StatusBar, Dimensions, FlatList } from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
import { Container, Content } from 'native-base';
import { BarPasswordStrengthDisplay } from 'react-native-password-strength-meter';
import BottomSheet from 'reanimated-bottom-sheet';
import Icon from 'react-native-vector-icons/FontAwesome';
import { LOGO } from '../../../assets/img';
import { placeholder, buttonSuccess, mainBlue, mainBackground } from '../../../assets/ColorIndex';
const {width, height} = Dimensions.get('screen')
export default class FirstScreen extends Component {
constructor(props) {
super(props);
this.bottomSheetRegisterCompany = React.createRef();
this.goRegister = this._goRegister.bind(this);
this.goLogin = this._goLogin.bind(this);
this.showBottomSheet = this._showBottomSheet.bind(this);
this.headerBottomSheet = this._renderHeader.bind(this);
this.contentBottomSheet = this._renderContent.bind(this);
this.renderItem = this._renderItem.bind(this);
}
_goRegister() {
this.props.navigation.dispatch(StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Register' }) ] }));
}
_goLogin() {
this.props.navigation.dispatch(StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Login' }) ] }));
}
_renderHeader() {
const { bottomSheetActive } = this.props.registerCompany;
switch(bottomSheetActive){
case 'bussiness_entity':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Badan Usaha</Text>
</View>
);
case 'province':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Provinsi</Text>
</View>
);
case 'city':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Kota</Text>
</View>
);
case 'district':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Kecamatan</Text>
</View>
);
case 'bussiness_industry':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Bisnis Industri</Text>
</View>
);
case 'jenis_kelamin':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Jenis Kelamin</Text>
</View>
);
case 'job_position':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Jabatan</Text>
</View>
);
}
}
_renderContent(){
const { bottomSheetActive } = this.props.registerCompany;
const { bussinessEntities, bussinessIndustries, provinces, cities, districts, jenisKelamin, jobPositions } = this.props.masterData;
switch(bottomSheetActive){
case 'bussiness_entity':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(bussinessEntities.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `bussinessEntities-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={bussinessEntities}
scrollEnabled={false}
/>
</View>
);
case 'bussiness_industry':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(bussinessIndustries.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `bussinessIndustries-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={bussinessIndustries}
scrollEnabled={false}
/>
</View>
);
case 'province':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(provinces.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `provinces-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={provinces}
scrollEnabled={false}
/>
</View>
);
case 'city':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(cities.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `cities-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={cities}
scrollEnabled={false}
/>
</View>
);
case 'district':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(districts.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `districts-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={districts}
scrollEnabled={false}
/>
</View>
);
case 'jenis_kelamin':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(jenisKelamin.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `jenisKelamin-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={jenisKelamin}
scrollEnabled={false}
/>
</View>
);
case 'job_position':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(jobPositions.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `jobPositions-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={jobPositions}
scrollEnabled={false}
/>
</View>
);
}
}
_renderItem(item) {
return (
<TouchableHighlight style={{ padding: 10 }}>
<View style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row' }}>
<View style={{ justifyContent: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 10 }}>
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>{item.name}</Text>
</View>
<Icon name='circle-o' size={20} color={mainBlue} />
</View>
</TouchableHighlight>
);
}
async _showBottomSheet(type, withContent = true) {
const _type = type.toLowerCase();
const {provinceValue, cityValue} = this.props.registerCompany
switch(_type){
case 'bussiness_entity':
if(withContent){
await this.props.getBussinessEntities();
}
break;
case 'bussiness_industry':
if(withContent){
await this.props.getBussinessIndustries();
}
break;
case 'province':
if(withContent){
await this.props.getProvinces();
}
break;
case 'city':
if(withContent){
await this.props.getCitiesByProvince(provinceValue.id);
}
break;
case 'district':
if(withContent){
await this.props.getDistrictsByCity(cityValue.id);
}
break;
case 'position':
if(withContent){
await this.props.getJobPositions();
}
break;
}
this.props.setBottomSheetLoading(_type, true);
this.bottomSheetRegisterCompany.current.snapTo(1);
}
componentDidMount() {
this.props.clearProps();
}
render() {
return (
<Container style={{ backgroundColor: mainBackground, justifyContent: 'center' }}>
<StatusBar backgroundColor={mainBlue} barStyle={'light-content'} />
<Content>
<View style={{ alignItems: 'center', justifyContent: 'center', height: 100 }}>
<Image source={LOGO} resizeMode='contain' style={{ width: '20%' }} />
</View>
<View
style={{
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'space-around',
backgroundColor: '#fff',
padding: 10,
width: '90%'
}}
>
<View style={{ alignItems: 'center', width: '100%', marginBottom: 20 }}>
<Text style={{ fontSize: 20, fontWeight: 'bold', alignSelf: 'center', marginVertical: 15, color: '#000' }}>Daftar Sebagai Perusahaan</Text>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('bussiness_entity') }>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Badan Usaha</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Nama Perusahaan'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='NPWP Perusahaan'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Nomor Telepon Perusahaan'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Nomor Fax Perusahaan'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Alamat Perusahaan'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('province')}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Provinsi</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('city')} disabled={true}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Kota</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('district')} disabled={true}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Kecamatan</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('bussiness_industry')}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Bisnis Industri</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ width: '100%', height: 50, marginVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<View style={{ borderBottomWidth: 2, borderBottomColor: mainBackground, flexGrow: 1 }} />
<Text style={{ fontSize: 20, fontWeight: 'bold', paddingHorizontal: 10 }}>Data Akun</Text>
<View style={{ borderBottomWidth: 2, borderBottomColor: mainBackground, flexGrow: 1 }} />
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Email'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1, flexDirection: 'row' }}>
<TextInput
style={{ width: '90%' }}
placeholderColor={placeholder}
placeholder='Kata Sandi'
secureTextEntry={!this.props.registerCompany.showPassword}
onChangeText={() => {}}
/>
<TouchableHighlight onPress={ () => this.props.showPassword() } underlayColor={'#fff'} activeOpacity={0.5}>
{
this.props.registerCompany.showPassword ?
<Icon name='eye-slash' size={20} color={mainBlue} />
:
<Icon name='eye' size={20} color={mainBlue} />
}
</TouchableHighlight>
</View>
<BarPasswordStrengthDisplay password={this.props.registerCompany.password} width={width - 65} wrapperStyle={{ marginBottom: 10 }} />
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Konfirmasi Kata Sandi'
secureTextEntry={!this.props.registerCompany.showPassword}
onChangeText={() => {}}
/>
</View>
<View style={{ width: '100%', height: 50, marginVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<View style={{ borderBottomWidth: 2, borderBottomColor: mainBackground, flexGrow: 1 }} />
<Text style={{ fontSize: 20, fontWeight: 'bold', paddingHorizontal: 10 }}>Penanggung Jawab</Text>
<View style={{ borderBottomWidth: 2, borderBottomColor: mainBackground, flexGrow: 1 }} />
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('jenis_kelamin')}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Jenis Kelamin</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Nama Lengkap'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('job_position')}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Jabatan</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Nomor Handphone'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', marginVertical: 10 }}>
<TouchableHighlight onPress={ () => {} } underlayColor={'#fff'} activeOpacity={0.5} style={{ width: '100%', justifyContent: 'space-around', alignItems: 'center' }}>
<View style={{ width: '100%', flexDirection: 'row' }}>
<View style={{ justifyContent: 'flex-start', alignItems: 'center', marginHorizontal: 5 }}>
<Icon name='square-o' size={20} color={placeholder} />
</View>
<View style={{ justifyContent: 'flex-start', alignItems: 'center', marginHorizontal: 5 }}>
<Text>Daftar Sebagai EMKL</Text>
</View>
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', marginVertical: 10 }}>
<TouchableHighlight onPress={ () => {} } underlayColor={'#fff'} activeOpacity={0.5} style={{ width: '100%' }}>
<View style={{ width: '100%', flexDirection: 'row', paddingHorizontal: 10, justifyContent: 'space-between' }}>
<View style={{ justifyContent: 'flex-start', alignItems: 'center', marginHorizontal: 5, marginTop: 5 }}>
<Icon name='square-o' size={20} color={placeholder} />
</View>
<View style={{ justifyContent: 'flex-start', alignItems: 'center', marginHorizontal: 5 }}>
<Text>Saya telah membaca dan menyetujui Syarat dan Ketentuan, Kebijakan Privasi, dan Persetujuan Pengguna</Text>
</View>
</View>
</TouchableHighlight>
</View>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%' }}>
<TouchableHighlight style={{ width: '90%', backgroundColor: buttonSuccess, alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
<Text style={{ fontSize: 15, color: '#fff', fontWeight: 'bold', padding: 10 }}>Daftar</Text>
</TouchableHighlight>
</View>
</View>
<View style={{ position: 'relative', bottom: 0 }}>
<Text style={{ color: '#000', fontSize: 15, marginVertical: 20, alignSelf: 'center' }}>Sudah Punya Akun? <Text style={{ color: mainBlue, fontSize: 15, fontWeight: 'bold' }} onPress={ () => this.goLogin() }>Masuk disini</Text></Text>
</View>
</Content>
<BottomSheet
ref={this.bottomSheetRegisterCompany}
snapPoints={[-1000, width, height*0.9 ]}
initialSnap={0}
renderHeader={() => this.headerBottomSheet()}
renderContent={() => this.contentBottomSheet()}
/>
</Container>
);
}
}
import React, { Component } from 'react';
import { ScrollView, View, Text, Image, TextInput, TouchableHighlight, StatusBar, Dimensions, FlatList } from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
import { Container, Content } from 'native-base';
import { BarPasswordStrengthDisplay } from 'react-native-password-strength-meter';
import BottomSheet from 'reanimated-bottom-sheet';
import Icon from 'react-native-vector-icons/FontAwesome';
import { LOGO } from '../../../assets/img';
import { placeholder, buttonSuccess, mainBlue, mainBackground } from '../../../assets/ColorIndex';
const {width, height} = Dimensions.get('screen');
export default class RegisterSupplierScreen extends Component {
constructor(props) {
super(props);
this.bottomSheetRegisterSupplier = React.createRef();
this.goRegister = this._goRegister.bind(this);
this.goLogin = this._goLogin.bind(this);
this.showBottomSheet = this._showBottomSheets.bind(this);
this.headerBottomSheet = this._renderHeader.bind(this);
this.contentBottomSheet = this._renderContent.bind(this);
this.renderItem = this._renderItem.bind(this);
}
_goRegister() {
this.props.navigation.dispatch(StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Register' }) ] }));
}
_goLogin() {
this.props.navigation.dispatch(StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Login' }) ] }));
}
_renderHeader() {
const { bottomSheetActive } = this.props.registerSupplier;
switch(bottomSheetActive){
case 'bussiness_entity':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Badan Usaha</Text>
</View>
);
case 'province':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Provinsi</Text>
</View>
);
case 'city':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Kota</Text>
</View>
);
case 'district':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Kecamatan</Text>
</View>
);
case 'bussiness_industry':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Bisnis Industri</Text>
</View>
);
case 'jenis_kelamin':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Jenis Kelamin</Text>
</View>
);
case 'job_position':
return (
<View style={{ justifyContent: 'space-around', alignItems: 'center', backgroundColor: mainBackground }}>
<View style={{ height: 5, width: width*0.2, borderRadius: 20, backgroundColor: placeholder, marginVertical: 10 }} />
<Text style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 5 }}>Pilih Jabatan</Text>
</View>
);
}
}
_renderContent(){
const { bottomSheetActive } = this.props.registerSupplier;
const { bussinessEntities, bussinessIndustries, provinces, cities, districts, jenisKelamin, jobPositions } = this.props.masterData;
switch(bottomSheetActive){
case 'bussiness_entity':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(bussinessEntities.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `bussinessEntities-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={bussinessEntities}
scrollEnabled={false}
/>
</View>
);
case 'bussiness_industry':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(bussinessIndustries.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `bussinessIndustries-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={bussinessIndustries}
scrollEnabled={false}
/>
</View>
);
case 'province':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(provinces.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `provinces-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={provinces}
scrollEnabled={false}
/>
</View>
);
case 'city':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(cities.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `cities-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={cities}
scrollEnabled={false}
/>
</View>
);
case 'district':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(districts.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `districts-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={districts}
scrollEnabled={false}
/>
</View>
);
case 'jenis_kelamin':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(jenisKelamin.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `jenisKelamin-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={jenisKelamin}
scrollEnabled={false}
/>
</View>
);
case 'job_position':
return (
<View style={{ backgroundColor: mainBackground, height: Math.max(jobPositions.length*45+15, 40), minHeight: height*0.9 }}>
<FlatList
keyExtractor={item => `jobPositions-${item.id}`}
renderItem={({item}) => this.renderItem(item)}
data={jobPositions}
scrollEnabled={false}
/>
</View>
);
}
}
_renderItem(item) {
return (
<TouchableHighlight style={{ padding: 10 }}>
<View style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row' }}>
<View style={{ justifyContent: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 10 }}>
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>{item.name}</Text>
</View>
<Icon name='circle-o' size={20} color={mainBlue} />
</View>
</TouchableHighlight>
);
}
async _showBottomSheets(type, withContent = true) {
const _type = type.toLowerCase();
// const {provinceValue, cityValue} = this.props.registerSupplier
switch(_type){
case 'bussiness_entity':
if(withContent){
await this.props.getBussinessEntities();
}
break;
case 'bussiness_industry':
if(withContent){
await this.props.getBussinessIndustries();
}
break;
case 'province':
if(withContent){
await this.props.getProvinces();
}
break;
case 'city':
if(withContent){
// await this.props.getCitiesByProvince(provinceValue.id);
}
break;
case 'district':
if(withContent){
// await this.props.getDistrictsByCity(cityValue.id);
}
break;
case 'position':
if(withContent){
await this.props.getJobPositions();
}
break;
}
await this.props.setBottomSheetLoading(_type, true);
this.bottomSheetRegisterSupplier.current.snapTo(1);
console.warn('after '+this.props.registerSupplier.bottomSheetActive);
}
componentDidMount() {
this.props.clearProps();
}
render() {
return (
<Container style={{ backgroundColor: mainBackground, justifyContent: 'center' }}>
<StatusBar backgroundColor={mainBlue} barStyle={'light-content'} />
<Content>
<View style={{ alignItems: 'center', justifyContent: 'center', height: 100 }}>
<Image source={LOGO} resizeMode='contain' style={{ width: '20%' }} />
</View>
<View
style={{
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'space-around',
backgroundColor: '#fff',
padding: 10,
width: '90%'
}}
>
<View style={{ alignItems: 'center', width: '100%', marginBottom: 20 }}>
<Text style={{ fontSize: 20, fontWeight: 'bold', alignSelf: 'center', marginVertical: 15, color: '#000' }}>Daftar Sebagai Supplier</Text>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('bussiness_entity') }>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Badan Usaha</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Nama Perusahaan'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='NPWP Perusahaan'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Alamat Perusahaan'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('province')}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Provinsi</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('city')} disabled={true}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Kota</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('district')} disabled={true}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Kecamatan</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('bussiness_industry')}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Bisnis Industri</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ width: '100%', height: 50, marginVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<View style={{ borderBottomWidth: 2, borderBottomColor: mainBackground, flexGrow: 1 }} />
<Text style={{ fontSize: 20, fontWeight: 'bold', paddingHorizontal: 10 }}>Data Akun</Text>
<View style={{ borderBottomWidth: 2, borderBottomColor: mainBackground, flexGrow: 1 }} />
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Email'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<View style={{ alignItems: 'center', flexDirection: 'row', width: '100%' }}>
<TextInput
style={{ width: '90%' }}
placeholderColor={placeholder}
placeholder='Kata Sandi'
secureTextEntry={!this.props.registerSupplier.showPassword}
onChangeText={() => {}}
/>
<TouchableHighlight onPress={ () => {} } underlayColor={'#fff'} activeOpacity={0.5}>
{
this.props.registerSupplier.showPassword ?
<Icon name='eye-slash' size={20} color={mainBlue} />
:
<Icon name='eye' size={20} color={mainBlue} />
}
</TouchableHighlight>
</View>
<BarPasswordStrengthDisplay password={this.props.registerSupplier.password} width={width - 65} wrapperStyle={{ marginVertical: 10 }} />
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Konfirmasi Kata Sandi'
secureTextEntry={!this.props.registerSupplier.showPassword}
onChangeText={() => {}}
/>
</View>
<View style={{ width: '100%', height: 50, marginVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<View style={{ borderBottomWidth: 2, borderBottomColor: mainBackground, flexGrow: 1 }} />
<Text style={{ fontSize: 20, fontWeight: 'bold', paddingHorizontal: 10 }}>Penanggung Jawab</Text>
<View style={{ borderBottomWidth: 2, borderBottomColor: mainBackground, flexGrow: 1 }} />
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('jenis_kelamin')}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Jenis Kelamin</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Nama Lengkap'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TouchableHighlight onPress={() => this.showBottomSheet('job_position')}>
<View style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10 }}>
<Text style={{ color: placeholder, fontSize: 15, maxWidth: '94%', minWidth: '94%' }}>Pilih Jabatan</Text>
<Icon name='sort' size={20} color={'#000'} />
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Nomor Handphone'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Nomor Telepon'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', borderBottomColor: mainBackground, borderBottomWidth: 1 }}>
<TextInput
style={{ width: '100%' }}
placeholderColor={placeholder}
placeholder='Nomor Fax'
onChangeText={() => {}}
/>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', marginVertical: 10 }}>
<TouchableHighlight onPress={ () => {} } underlayColor={'#fff'} activeOpacity={0.5} style={{ width: '100%', justifyContent: 'space-around', alignItems: 'center' }}>
<View style={{ width: '100%', flexDirection: 'row' }}>
<View style={{ justifyContent: 'flex-start', alignItems: 'center', marginHorizontal: 5 }}>
<Icon name='square-o' size={20} color={placeholder} />
</View>
<View style={{ justifyContent: 'flex-start', alignItems: 'center', marginHorizontal: 5 }}>
<Text>PKP ( Perusahaan Kena Pajak )</Text>
</View>
</View>
</TouchableHighlight>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%', marginVertical: 10 }}>
<TouchableHighlight onPress={ () => {} } underlayColor={'#fff'} activeOpacity={0.5} style={{ width: '100%', justifyContent: 'space-around', alignItems: 'center' }}>
<View style={{ width: '100%', flexDirection: 'row' }}>
<View style={{ justifyContent: 'flex-start', alignItems: 'center', marginHorizontal: 5 }}>
<Icon name='square-o' size={20} color={placeholder} />
</View>
<View style={{ justifyContent: 'flex-start', alignItems: 'center', marginHorizontal: 5 }}>
<Text>Saya telah membaca dan menyetujui Syarat dan Ketentuan, Kebijakan Privasi, dan Persetujuan Pengguna </Text>
</View>
</View>
</TouchableHighlight>
</View>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', width: '100%' }}>
<TouchableHighlight style={{ width: '90%', backgroundColor: buttonSuccess, alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
<Text style={{ fontSize: 15, color: '#fff', fontWeight: 'bold', padding: 10 }}>Daftar</Text>
</TouchableHighlight>
</View>
</View>
<View style={{ position: 'relative', bottom: 0 }}>
<Text style={{ color: '#000', fontSize: 15, marginVertical: 20, alignSelf: 'center' }}>Sudah Punya Akun? <Text style={{ color: mainBlue, fontSize: 15, fontWeight: 'bold' }} onPress={ () => this.goLogin() }>Masuk disini</Text></Text>
</View>
<BottomSheet
ref={this.bottomSheetRegisterSupplier}
snapPoints={[0, width, height*0.9 ]}
renderHeader={() => this.headerBottomSheet()}
renderContent={() => this.contentBottomSheet()}
/>
</Content>
</Container>
);
}
}
I hope it can solved/closed ASAP.
cheers