2025-01-27 07:21:10 +00:00
import Button from 'apsl-react-native-button' ;
import axios from "axios" ;
import isEqual from 'lodash/isEqual' ;
import isNil from 'lodash/isNil' ;
import PropTypes from 'prop-types' ;
import React , { Component } from 'react' ;
2025-01-07 09:47:45 +00:00
import {
Alert ,
BackHandler ,
FlatList ,
Image ,
PermissionsAndroid ,
Platform ,
ProgressBarAndroid ,
ScrollView ,
StyleSheet ,
Text ,
TouchableOpacity ,
View
} from 'react-native' ;
import * as Animatable from 'react-native-animatable' ;
2025-01-27 07:21:10 +00:00
import Dialog from "react-native-dialog" ;
import Geolocation from 'react-native-geolocation-service' ;
import I18n from 'react-native-i18n' ;
import MapView , { Marker } from 'react-native-maps' ;
import { MaterialDialog } from "react-native-material-dialog" ;
import { Dropdown } from 'react-native-material-dropdown-v2' ;
import { responsiveHeight , responsiveWidth } from 'react-native-responsive-dimensions' ;
import { ProgressDialog } from "react-native-simple-dialogs" ;
import { Fumi } from 'react-native-textinput-effects' ;
import { material } from 'react-native-typography' ;
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome' ;
2025-01-07 09:47:45 +00:00
import Icon from 'react-native-vector-icons/MaterialCommunityIcons' ;
2025-01-27 07:21:10 +00:00
import { store } from "../../redux/store" ;
import { getDefaultTown } from "../../webservice/AuthApi" ;
import { uploadImage } from "../../webservice/IlinkConstants" ;
2025-01-07 09:47:45 +00:00
import {
createGeolocatedAccount ,
createUserAccount ,
getCodeInformation ,
getCountryNetwork ,
getListCountriesActive ,
getTownInformationName
} from './../../webservice/AuthApi' ;
2025-01-27 07:21:10 +00:00
import { getPositionInformation } from './../../webservice/MapService' ;
2025-01-07 09:47:45 +00:00
const GEOLOCATION _OPTIONS = { enableHighAccuracy : true , timeout : 20000 , maximumAge : 1000 , useSignificantChanges : true } ;
let theme = require ( './../../utils/theme.json' ) ;
let route = require ( './../../route.json' ) ;
let country = require ( './../../utils/country_code.json' ) ;
/ * v a r F a b r i c = r e q u i r e ( ' r e a c t - n a t i v e - f a b r i c ' ) ;
var { Crashlytics } = Fabric ;
var { Answers } = Fabric ; * /
declare
var google ;
const propTypes = {
... Marker . propTypes ,
coordinate : PropTypes . shape ( {
latitude : PropTypes . number . isRequired ,
longitude : PropTypes . number . isRequired ,
} ) ,
children : PropTypes . node ,
geolocationOptions : PropTypes . shape ( {
enableHighAccuracy : PropTypes . bool ,
timeout : PropTypes . number ,
maximumAge : PropTypes . number ,
} ) ,
heading : PropTypes . number ,
enableHack : PropTypes . bool ,
} ;
const defaultProps = {
enableHack : false ,
geolocationOptions : GEOLOCATION _OPTIONS ,
} ;
export default class CreateUserStep2 extends Component {
static navigatorStyle = {
drawUnderNavBar : true ,
navBarHidden : true ,
drawUnderStatusBar : false ,
statusBarHidden : true ,
statusBarTextColorScheme : 'light' ,
} ;
static options ( passProps ) {
return {
topBar : {
visible : false ,
enabled : false ,
drawBehind : true ,
} ,
statusBar : {
drawBehind : true ,
enabled : false ,
}
}
}
constructor ( props ) {
super ( props ) ;
const { navigation } = this . props ;
this . type = navigation . getParam ( "type" , 0 ) ;
this . user = navigation . getParam ( 'user' , null ) ;
this . isOffline = navigation . getParam ( 'isOffline' , false ) ;
this . result = navigation . getParam ( 'result' , null ) ;
this . state = {
password : null ,
enterPhone : null ,
nameanim : null ,
networksinglePickerVisible : false ,
surnameanim : null ,
passwordanim : null ,
confirmpassanim : null ,
network : null ,
isLoging : false ,
countries : '' ,
selectedCountry : null ,
2025-02-21 09:59:59 +00:00
indicatif : '+237' ,
country : "Cameroon" ,
2025-01-07 09:47:45 +00:00
snackVisible : false ,
snackText : '' ,
disableNetwork : false ,
networks : [ ] ,
modalVisible : true ,
select _network : I18n . t ( "SELECT_NETWORK" ) ,
user : this . user ,
result : {
companies _types : [ ] ,
taxes : [ ] ,
taxes _selected : null ,
companies _types _selected : null
} ,
id _network _tax : null ,
tax _units _count : null ,
id _company _type : null ,
identification _number : null ,
trade _registry : null ,
responsable _name : null ,
image : "logo.png" ,
displayImage : false ,
loadingUpload : false ,
latitude : "" ,
longitude : "" ,
2025-02-21 09:59:59 +00:00
// town: {
// name: "Douala",
2025-04-25 09:54:38 +00:00
// id: 2",
2025-02-21 09:59:59 +00:00
// indicatif: "+237"
2025-01-07 09:47:45 +00:00
// },
} ;
this . dataToSendTemp = new FormData ( ) ;
console . log ( "is offline" , this . isOffline ) ;
console . log ( "countries" , this . countries ) ;
console . log ( "props" , this . props ) ;
}
createFormData = ( photo ) => {
this . dataToSendTemp . append ( "image" , {
name : photo . path . split ( '/' ) . pop ( ) ,
type : photo . mime ,
uri :
Platform . OS === "android" ? photo . path : photo . path . replace ( "file://" , "" )
} ) ;
} ;
retreiveCodeInformation ( ) {
const membre = this . state . user . member ;
return new Promise ( async ( resolve , reject ) => {
try {
let datas = await getCodeInformation ( membre ) ;
// Assuming the API returns country and dial_code
const { country , dial _code , ... otherData } = datas ;
resolve ( { country , dial _code , ... otherData } ) ;
} catch ( error ) {
reject ( error ) ;
}
} ) ;
}
render ( ) {
console . log ( "State" , this . state ) ;
return this . type === 1 ? this . renderUserGeoAccount ( ) : this . renderUserAccount ( )
}
async getNetworks ( indicatif ) {
if ( ! indicatif ) {
this . setState ( { modalDialog : false } ) ;
Alert . alert (
"Une erreur est survenue" ,
"Impossible de récupérer des informations du pays. Vérifiez que votre GPS est activé et que vous êtes connecté à internet, puis réessayez." ,
[
{
text : "Recommencer" ,
onPress : ( ) => {
this . setState ( { modalDialog : true } ) ;
this . watchLocation ( ) ;
}
} ,
{
text : "Annuler" ,
onPress : ( ) => this . props . navigation . popToTop ( )
}
]
) ;
return ;
}
try {
const result = await this . retreiveCodeInformation ( ) ;
console . log ( "RESULTAT " , result ) ;
if ( ! result ) {
throw new Error ( "Aucun résultat obtenu" ) ;
}
const { category , country , dial _code , child , network } = result ;
2025-02-21 09:59:59 +00:00
console . log ( "network1===>>" , network )
2025-01-07 09:47:45 +00:00
this . setState ( {
result ,
2025-02-21 09:59:59 +00:00
// country,
// indicatif: dial_code
2025-01-07 09:47:45 +00:00
} ) ;
if ( child ) {
this . setState ( { disableNetwork : true } ) ;
if ( network ) {
this . setState ( {
modalVisible : false ,
networks : [ network ] ,
... ( child === "geolocated" || child === "super" ? {
network ,
select _network : I18n . t ( "YOUR_NETWORK_SELECTED" )
} : { } )
} ) ;
} else {
2025-02-21 09:59:59 +00:00
throw new Error ( "Impossible de récupérer les informations du code hiérarchique ou taxe" ) ;
2025-01-07 09:47:45 +00:00
}
} else {
2025-02-21 09:59:59 +00:00
console . log ( "indicatif1===>>" , indicatif )
const networks = await getCountryNetwork ( "+237" ) ;
console . log ( "network2===>>" , networks )
2025-01-07 09:47:45 +00:00
const reseaux = Object . values ( networks ) . filter ( network => network !== "" ) ;
this . setState ( {
networks : reseaux ,
modalVisible : false
} ) ;
}
} catch ( error ) {
console . error ( "Erreur dans getNetworks:" , error ) ;
this . setState ( { modalVisible : false } ) ;
2025-02-21 09:59:59 +00:00
if ( error . message === "Impossible de récupérer les informations du code hiérarchique ou taxe" ) {
2025-01-07 09:47:45 +00:00
Alert . alert ( I18n . t ( 'TITLE_PROBLE_COME' ) , error . message , [ {
text : "Revenir" ,
onPress : ( ) => this . props . navigation . pop ( )
} ] ) ;
} else {
this . showErrorDialog ( ) ;
}
}
}
showErrorDialog ( ) {
this . setState ( { modalDialog : false } )
Alert . alert ( "Une erreur est survenue" , "Impossible de récuperer des informations du pays verifier que votre gps est activé," +
"et que vous êtes connecté à internet puis ressayer" , [ {
text : "Recommencer" , onPress : ( ) => {
this . watchLocation ( )
}
} , {
text : "Annuler" , onPress : ( ) => {
this . props . navigation . popToTop ( )
}
} ] )
}
componentDidMount ( ) {
this . fetchCountries ( ) ;
//this.fetchCountryInfo();
this . mounted = true ;
const { type } = this . props ;
if ( this . props . coordinate ) return ;
if ( Platform . OS === 'android' ) {
this . requestCameraPermission ( ) ;
} else {
this . watchLocation ( ) ;
}
}
fetchCountries = async ( ) => {
try {
const response = await getListCountriesActive ( ) ;
console . log ( 'Réponse de getListCountriesActive:' , response ) ;
let countriesData = [ ] ;
if ( response . error === "error" && response . error _msg ) {
const jsonMatch = response . error _msg . match ( /\[.*\]/ ) ;
if ( jsonMatch ) {
countriesData = JSON . parse ( jsonMatch [ 0 ] ) ;
}
2025-01-27 07:21:10 +00:00
} else {
countriesData = response ;
2025-01-07 09:47:45 +00:00
}
const formattedCountries = countriesData . map ( country => ( {
label : country . name ,
value : country . name ,
code _dial : country . code _dial ,
code _country : country . code _country
} ) ) ;
2025-02-21 09:59:59 +00:00
console . log ( "formattedCountries===>>" , formattedCountries )
2025-01-07 09:47:45 +00:00
this . setState ( {
2025-02-21 09:59:59 +00:00
// country: formattedCountries,
2025-01-07 09:47:45 +00:00
countries : formattedCountries [ 0 ] ,
isLoading : false ,
selectedCountry : formattedCountries [ 0 ] , // Sélectionne le premier pays par défaut
2025-02-21 09:59:59 +00:00
// indicatif: formattedCountries[0].code_dial
2025-01-07 09:47:45 +00:00
} ) ;
this . getNetworks ( formattedCountries [ 0 ] . label ) ;
} catch ( error ) {
console . error ( 'Erreur lors de la récupération des pays:' , error ) ;
this . setState ( { isLoading : false } ) ;
}
} ;
onSelectCountry = ( country ) => {
this . setState ( {
selectedCountry : country ,
2025-02-21 09:59:59 +00:00
// indicatif: country.code_dial,
2025-01-07 09:47:45 +00:00
modalVisible : false
} ) ;
this . getNetworks ( country . code _dial ) ;
} ;
// fetchCountryInfo = async () => {
// try {
// const response = await getListCountriesActive();
// console.log('Réponse de getListCountriesActive:', response);
// let countryData = null;
// if (response.error === "error" && response.error_msg) {
// const jsonMatch = response.error_msg.match(/\[.*\]/);
// if (jsonMatch) {
// const parsedData = JSON.parse(jsonMatch[0]);
// if (Array.isArray(parsedData) && parsedData.length > 0) {
// countryData = parsedData[0]; // Prendre le premier pays de la liste
// }
// }
// }
// if (countryData) {
// this.setState({
// country: countryData.name,
// indicatif: countryData.code_dial,
// isLoading: false
// });
// } else {
// throw new Error('Aucune donnée de pays valide trouvée');
// }
// } catch (error) {
// console.error('Erreur lors de la récupération des infos du pays:', error);
// this.setState({ error: error.message, isLoading: false });
// Alert.alert(
// "Erreur",
// "Impossible de récupérer les informations du pays. Veuillez réessayer.",
// [{ text: "OK" }]
// );
// }
// };
handleCountryChange = ( value , index , data ) => {
const selectedCountry = this . state . countries [ index ] ;
this . setState ( {
selectedCountry : selectedCountry ,
2025-02-21 09:59:59 +00:00
// indicatif: selectedCountry.code_dial,
2025-01-07 09:47:45 +00:00
network : null
} ) ;
this . getNetworks ( selectedCountry . code _dial ) ;
console . log ( "data :" , selectedCountry . code _dial )
} ;
async requestCameraPermission ( ) {
try {
const granted = await PermissionsAndroid . request (
PermissionsAndroid . PERMISSIONS . ACCESS _FINE _LOCATION ,
{
'title' : 'Cool Photo App Camera Permission' ,
'message' : 'Cool Photo App needs access to your camera ' +
'so you can take awesome pictures.'
}
)
if ( granted === PermissionsAndroid . RESULTS . GRANTED ) {
this . watchLocation ( ) ;
} else {
this . setState ( { modalDialog : false } )
Alert . alert ( "Echec à l'autorisation" ,
"L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision" ,
[ {
text : "Ok" , onPress : ( ) => {
this . props . navigation . popToTop ( )
}
} ] )
}
} catch ( err ) {
this . setState ( { modalDialog : false } )
Alert . alert ( "Une erreur est Survenue" ,
"Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application" ,
[ {
text : "Ok" , onPress : ( ) => {
BackHandler . exitApp ( )
}
} ] )
}
}
async watchLocation ( ) {
if ( this . isOffline ) {
Geolocation . getCurrentPosition ( ( position ) => {
this . setState ( {
modalVisible : false ,
latitude : position . coords . latitude ,
longitude : position . coords . longitude
} , ( ) => {
console . log ( "latitude" , this . state . latitude ) ;
} ) ;
if ( this . result . child ) {
this . setState ( { disableNetwork : true } ) ;
if ( this . result . network ) {
this . setState ( {
modalVisible : false , networks : [ this . result . network ] ,
} ) ;
if ( this . result . child === "geolocated" || this . result . child === "super" ) {
this . setState ( {
network : this . result . network ,
select _network : I18n . t ( "YOUR_NETWORK_SELECTED" )
} ) ;
}
} else {
this . showErrorDialog ( ) ;
}
}
} , ( e ) => {
2025-02-21 09:59:59 +00:00
Alert . alert ( I18n . t ( 'TITLE_PROBLE_COME' ) , "Impossible de recuperer les informations du code hiérarchique ou taxe" , [ {
2025-01-07 09:47:45 +00:00
text : "Reesayer" ,
onPress : ( ) => this . watchLocation ( )
} ] )
console . warn ( "POSITION ERROR" , e ) ;
this . setState ( { modalVisible : false } )
} , this . props . geolocationOptions ) ;
} else {
Geolocation . getCurrentPosition ( ( position ) => {
this . treatPosition ( position )
} , ( e ) => {
this . showErrorDialog ( ) ;
} , this . props . geolocationOptions ) ;
/ * i f ( ! t h i s . w a t c h I D ) {
Geolocation . watchPosition ( ( position ) => {
this . treatPosition ( position )
} , ( e ) => {
this . showErrorDialog ( ) ;
} , this . props . geolocationOptions )
} * /
}
}
treatPosition ( position ) {
const myLastPosition = this . state . myPosition ;
const myPosition = position . coords ;
if ( ! isEqual ( myPosition , myLastPosition ) ) {
getPositionInformation ( myPosition ) . then ( ( response ) => {
if ( response . results !== undefined ) {
if ( response . results . length > 0 ) {
let most = response . results [ 0 ]
let { address _components , formatted _address , place _id } = most
this . setState ( { address : address _components , textadress : formatted _address , place : place _id } )
let results = response . results ;
let shortcountry ;
let mcountry ;
for ( let i = 0 ; i < results [ 0 ] . address _components . length ; i ++ ) {
for ( let j = 0 ; j < results [ 0 ] . address _components [ i ] . types . length ; j ++ ) {
if ( results [ 0 ] . address _components [ i ] . types [ j ] === "country" ) {
mcountry = results [ 0 ] . address _components [ i ] ;
shortcountry = mcountry . short _name ;
this . setState ( { shortCountry : mcountry . short _name , longCountry : mcountry . long _name } )
} else if ( results [ 0 ] . address _components [ i ] . types [ j ] === "locality" ) {
const name = results [ 0 ] . address _components [ i ] . short _name ;
this . setState ( { townName : name } ) ;
getTownInformationName ( name ) . then ( ( result ) => {
let town = null ;
if ( result instanceof Array ) {
town = result [ 0 ] ;
} else
town = result ;
2025-02-21 09:59:59 +00:00
this . setState ( { town : {
name : "Douala" ,
2025-04-25 09:54:38 +00:00
id : "2" ,
2025-02-21 09:59:59 +00:00
indicatif : "+237"
} } ) ;
2025-01-07 09:47:45 +00:00
} )
} else {
getDefaultTown ( ) . then ( result => {
getTownInformationName ( result . default _locality ) . then ( ( resultTowwn ) => {
let town = null ;
if ( resultTowwn instanceof Array ) {
town = resultTowwn [ 0 ] ;
} else
town = resultTowwn ;
2025-02-21 09:59:59 +00:00
this . setState ( { town : {
name : "Douala" ,
2025-04-25 09:54:38 +00:00
id : "2" ,
2025-02-21 09:59:59 +00:00
indicatif : "+237"
} } ) ;
2025-01-07 09:47:45 +00:00
} ) ;
} )
}
}
}
getListCountriesActive ( ) . then ( ( cnt ) => {
this . setState ( { countries : cnt } )
console . debug ( "cnt, shortcountry : " , cnt , shortcountry , countries ) ;
var found = false
for ( let i of cnt ) {
if ( i . code _country === shortcountry ) {
found = true
2025-02-21 09:59:59 +00:00
this . setState ( {
// indicatif: i.code_dial,
country : i . name
} )
2025-01-07 09:47:45 +00:00
this . getNetworks ( i . code _dial ) ;
}
}
if ( ! found ) {
Alert . alert ( "Impossible de recupérer vos informations" , "Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs" , [ { text : "OK" } ] ) ;
}
} )
}
}
} ) . catch ( ( e ) => {
this . showErrorDialog ( )
} ) ;
this . setState ( { myPosition : myPosition } ) ;
if ( this . mapRef !== undefined && this . mapRef !== null ) {
this . mapRef . animateToCoordinate ( {
latitude : myPosition . latitude ,
longitude : myPosition . longitude
} , 1000 ) ;
this . mapRef . animateToRegion ( {
latitude : myPosition . latitude ,
longitude : myPosition . longitude ,
latitudeDelta : 0.03 ,
longitudeDelta : 0.01 ,
} , 1000 )
}
}
}
componentWillUnmount ( ) {
this . mounted = false ;
// eslint-disable-next-line no-undef
if ( this . watchID ) Geolocation . clearWatch ( this . watchID ) ;
}
renderLoader = ( ) => {
return (
< ProgressDialog
visible = { this . state . loadingUpload }
title = { I18n . t ( 'LOADING' ) }
message = { I18n . t ( 'LOADING_INFO' ) }
/ >
)
}
uploadImage = ( ) => {
const auth = store . getState ( ) . authKeyReducer ;
const authKey = auth !== null ? ` ${ auth . authKey . token _type } ${ auth . authKey . access _token } ` : '' ;
axios ( {
url : ` ${ uploadImage } ` ,
method : 'POST' ,
data : this . dataToSendTemp ,
headers : {
'Authorization' : authKey ,
'X-Localization' : I18n . currentLocale ( ) ,
'Content-Type' : 'multipart/form-data'
} ,
} )
. then ( response => {
console . log ( response ) ;
this . setState ( { image : response . response . filename , loadingUpload : false } ) ;
} )
. catch ( error => {
console . log ( error ) ;
if ( error . response )
console . log ( error . response ) ;
else if ( error . request )
console . log ( error . request ) ;
else
console . log ( error . message ) ;
Alert . alert ( "" , I18n . t ( 'TITLE_ERROR_SURVENU' ) , [ {
text : "Ok" ,
onPress : ( ) => {
}
} ] ) ;
this . setState ( { loadingUpload : false } ) ;
} ) ;
} ;
renderDialogImage = ( ) => {
return (
< Dialog . Container contentStyle = { { width : responsiveWidth ( 80 ) } } useNativeDriver = { true }
visible = { this . state . displayImage } >
< Dialog . Title > { I18n . t ( 'PREVISUALISATION' ) } < / D i a l o g . T i t l e >
< View >
< View style = { { width : 50 } } / >
< View style = { { justifyContent : 'center' , alignContent : 'center' , alignItems : 'center' } } >
< Image source = { { uri : this . state . image . path } } style = { {
width : this . state . image . width , height : this . state . image . height , aspectRatio : 1 ,
resizeMode : 'contain'
} } / >
< / V i e w >
< View style = { { width : 50 } } / >
< / V i e w >
< Dialog . Button bold = { true } label = { I18n . t ( 'OK' ) } onPress = { ( ) => {
this . setState ( {
displayImage : false ,
loadingUpload : true
} ) ;
this . uploadImage ( ) ;
} } / >
< / D i a l o g . C o n t a i n e r >
)
}
renderUserGeoAccount ( ) {
const { selectedCountry } = this . state ;
console . log ( "selectedCountry" , selectedCountry ) ;
return (
< View style = { styles . container } >
{ this . prepareModal ( ) }
{ this . state . displayImage && this . renderDialogImage ( ) }
{ this . state . loadingUpload && this . renderLoader ( ) }
< View style = { { flexDirection : 'row' } } >
< Icon . Button name = { "keyboard-backspace" }
color = { "white" }
size = { 24 }
backgroundColor = { theme . primary }
onPress = { ( ) => this . props . navigation . pop ( ) }
/ >
{
! isNil ( this . state . result ) ?
this . state . result . child === "geolocated" &&
< Text style = { styles . bigtitle } > { I18n . t ( 'SECOND_STEP' ) } < / T e x t >
: < Text style = { styles . bigtitle } > { I18n . t ( 'LAST_STEP' ) } < / T e x t >
}
< / V i e w >
< ScrollView style = { styles . container } >
< View
style = { {
width : responsiveWidth ( 90 ) ,
2025-02-21 09:59:59 +00:00
marginTop : 10 ,
2025-01-07 09:47:45 +00:00
alignSelf : 'center' ,
2025-02-21 09:59:59 +00:00
display : "flex" ,
flexDirection : "row" ,
2025-01-07 09:47:45 +00:00
borderRadius : 10 ,
2025-02-21 09:59:59 +00:00
paddingLeft : 5 ,
paddingRight : 5 ,
2025-01-07 09:47:45 +00:00
backgroundColor : 'white'
} } >
2025-02-21 09:59:59 +00:00
{ / * < F u m i
iconClass = { FontAwesomeIcon }
iconName = { 'flag' }
value = { selectedCountry ? ` ${ selectedCountry . code _dial } ` : '' }
enabled = { false }
editable = { false }
style = { {
width : responsiveWidth ( 30 ) ,
height : responsiveHeight ( 10 ) ,
marginLeft : responsiveWidth ( 5 ) ,
marginRight : responsiveWidth ( 5 ) ,
borderRadius : 5 ,
} }
/ >
< Text
style = { {
marginLeft : responsiveWidth ( 5 ) ,
marginRight : responsiveWidth ( 5 ) ,
color : "#00aeef" ,
fontSize : 18 ,
alignSelf : 'center'
} } >
{ selectedCountry ? ` ${ selectedCountry . label } ` : '' }
< /Text> */ }
{ / * < F u m i
2025-01-07 09:47:45 +00:00
iconClass = { FontAwesomeIcon }
label = { I18n . t ( 'COUNTRY_CHOICE' ) }
// value={this.state.countries}
value = { selectedCountry ? ` ${ selectedCountry . label } ` : '' }
enabled = { false }
editable = { false }
onChangeText = { ( value , index , data ) => {
const selectedCountry = this . state . countries [ index ] ;
this . setState ( {
countries : selectedCountry . countries ,
indicatif : selectedCountry . code _dial ,
network : null
} ) ;
this . getNetworks ( selectedCountry . label ) ;
} }
2025-02-21 09:59:59 +00:00
/> */ }
2025-01-07 09:47:45 +00:00
{ / * < D r o p d o w n
label = { I18n . t ( 'COUNTRY_CHOICE' ) }
data = { this . state . countries }
useNativeDriver = { true }
disabled = { this . state . disableNetwork }
value = { this . state . selectedCountry ? this . state . selectedCountry . label : '' }
onChangeText = { ( value , index , data ) => {
const selectedCountry = this . state . countries [ index ] ;
this . setState ( {
selectedCountry : selectedCountry ,
indicatif : selectedCountry . code _dial ,
network : null
} ) ;
this . getNetworks ( selectedCountry . code _dial ) ;
} }
valueExtractor = { ( item ) => item . label }
labelExtractor = { ( item ) => item . label }
/ >
{ / * < D r o p d o w n
label = { I18n . t ( 'COUNTRY_CHOICE' ) }
data = { this . state . countries }
useNativeDriver = { true }
disabled = { this . state . disableNetwork }
value = { this . state . country === null ? "" :
this . state . country }
onChangeText = { ( value , index , data ) => {
this . setState ( { country : value , indicatif : value . code _dial , network : null } )
this . getNetworks ( value . code _dial )
} }
valueExtractor = { ( value ) => {
return value . name
} }
labelExtractor = { ( value ) => {
return value . name
} }
/> */ }
< / V i e w >
< Animatable . View ref = { ( comp ) => {
this . numanim = comp
} } >
2025-02-21 09:59:59 +00:00
2025-01-07 09:47:45 +00:00
< View style = { { flexDirection : 'row' , flex : 1 } } >
{ / * < F u m i i c o n C l a s s = { F o n t A w e s o m e I c o n } i c o n N a m e = { ' f l a g ' }
value = { this . state . indicatif }
enabled = { false }
editable = { false }
onChangeText = { ( text ) => {
let phonenum = text + this . state . contact !== undefined ? this . state . contact : "" ;
this . setState ( { indicatif : text , phone : phonenum } )
} }
style = { {
width : responsiveWidth ( 30 ) ,
height : responsiveHeight ( 10 ) ,
alignSelf : 'center' ,
marginTop : responsiveHeight ( 2 ) ,
marginLeft : responsiveWidth ( 5 ) ,
marginRight : responsiveWidth ( 5 ) ,
borderRadius : 5 ,
} }
/> */ }
2025-02-21 09:59:59 +00:00
2025-01-07 09:47:45 +00:00
< View >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'phone' }
placeholder = { I18n . t ( 'PHONE' ) }
iconColor = { '#f95a25' }
ref = { ( comp ) => {
this . num _input = comp
} }
iconSize = { 20 }
onChangeText = { ( text ) => {
let phonenumber = text
this . setState ( { phone : phonenumber , contact : text } )
} }
style = { {
marginTop : responsiveHeight ( 2 ) ,
marginRight : responsiveWidth ( 5 ) ,
2025-02-21 09:59:59 +00:00
marginLeft : responsiveWidth ( 5 ) ,
2025-01-07 09:47:45 +00:00
2025-02-21 09:59:59 +00:00
width : responsiveWidth ( 90 ) ,
2025-01-07 09:47:45 +00:00
borderRadius : 5 ,
} }
>
< / F u m i >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'phone' }
placeholder = { I18n . t ( 'PHONE_TRANSACTION' ) }
iconColor = { '#f95a25' }
ref = { ( comp ) => {
this . num _input = comp
} }
iconSize = { 20 }
onChangeText = { ( text ) => {
let phonenumber = text
this . setState ( { phoneTransaction : phonenumber , contactTransaction : text } )
} }
style = { {
marginTop : responsiveHeight ( 2 ) ,
marginRight : responsiveWidth ( 5 ) ,
2025-02-21 09:59:59 +00:00
marginLeft : responsiveWidth ( 5 ) ,
width : responsiveWidth ( 90 ) ,
2025-01-07 09:47:45 +00:00
borderRadius : 5 ,
} }
>
< / F u m i >
< / V i e w >
< / V i e w >
< / A n i m a t a b l e . V i e w >
< Animatable . View ref = { ( comp ) => {
this . networkanim = comp
} } >
< View
style = { {
width : responsiveWidth ( 90 ) ,
marginTop : 20 ,
alignSelf : 'center' ,
borderRadius : 10 ,
paddingLeft : 20 ,
paddingRight : 20 ,
2025-02-21 09:59:59 +00:00
backgroundColor : "#ef4444" ,
2025-01-07 09:47:45 +00:00
} }
>
2025-02-21 09:59:59 +00:00
< View
style = { { borderColor : 'transparent' , padding : 15 } }
2025-01-07 09:47:45 +00:00
isDisabled = { this . state . disableNetwork }
onPress = { ( ) => {
this . setState ( { networksinglePickerVisible : true } )
} } >
< View >
2025-02-21 09:59:59 +00:00
< Text style = { { color : "#fff" , fontWeight : "500" } } > { this . state . select _network } < / T e x t >
2025-01-07 09:47:45 +00:00
< Text
2025-02-21 09:59:59 +00:00
style = { { color : "#fff" , fontWeight : "600" } } > { this . state . network ? this . state . network . name : "" } < / T e x t >
2025-01-07 09:47:45 +00:00
< / V i e w >
2025-02-21 09:59:59 +00:00
< / V i e w >
2025-01-07 09:47:45 +00:00
< / V i e w >
< / A n i m a t a b l e . V i e w >
< Text
style = { {
fontSize : 16 ,
marginTop : 10 ,
marginLeft : responsiveWidth ( 6 ) ,
marginRight : responsiveWidth ( 6 ) ,
color : 'white' ,
fontWeight : 'bold'
} }
> { I18n . t ( 'WAIT_LOADING_POSITION' ) } < / T e x t >
{
this . isOffline ?
< Animatable . View >
< View style = { { flexDirection : 'row' , flex : 1 } } >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'map-marker' }
value = { "" + this . state . latitude }
enabled = { false }
placeholder = { I18n . t ( 'LATITUDE' ) }
editable = { false }
style = { {
width : responsiveWidth ( 45 ) ,
height : responsiveHeight ( 10 ) ,
alignSelf : 'center' ,
marginLeft : responsiveWidth ( 5 ) ,
marginRight : responsiveWidth ( 5 ) ,
borderRadius : 5 ,
} }
/ >
< View >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'map-marker' }
placeholder = { I18n . t ( 'LONGITITUDE' ) }
iconColor = { '#f95a25' }
editable = { false }
enabled = { false }
iconSize = { 20 }
value = { "" + this . state . longitude }
style = { {
width : responsiveWidth ( 40 ) ,
height : responsiveHeight ( 10 ) ,
alignSelf : 'center' ,
marginRight : responsiveWidth ( 5 ) ,
borderRadius : 5 ,
} }
>
< / F u m i >
< / V i e w >
< / V i e w >
< / A n i m a t a b l e . V i e w > :
< >
< Animatable . View
ref = { ( comp ) => {
this . mapanim = comp
} }
>
< MapView
liteMode
ref = { ( ref ) => {
this . mapRef = ref
} }
style = { styles . map }
>
{ this . state . myPosition !== undefined ?
< Marker
title = { I18n . t ( 'YOUR_THERE' ) }
minZoomLevel = { 18 }
coordinate = { {
longitude : this . state . myPosition . longitude ,
latitude : this . state . myPosition . latitude
} }
/ > :
null }
< / M a p V i e w >
< / A n i m a t a b l e . V i e w >
2025-02-21 09:59:59 +00:00
{ / * < T o u c h a b l e O p a c i t y s t y l e = { { f l e x D i r e c t i o n : ' r o w ' , a l i g n I t e m s : ' c e n t e r ' } } >
2025-01-07 09:47:45 +00:00
< Image
style = { {
width : 24 , height : 24 ,
marginLeft : responsiveWidth ( 6 )
} }
source = { require ( '../../assets/img/userplace.png' ) }
/ >
< Text
style = { {
fontSize : 16 ,
marginTop : 10 ,
marginRight : responsiveWidth ( 6 ) ,
color : 'white' ,
fontWeight : 'bold'
} }
> { this . state . textadress !== undefined ? this . state . textadress : I18n . t ( 'TAKE_MY_POSITION' ) } < / T e x t >
2025-02-21 09:59:59 +00:00
< /TouchableOpacity> */ }
2025-01-07 09:47:45 +00:00
< / >
}
< Button style = { styles . btnvalide } textStyle = { styles . textbtnvalide }
isLoading = { this . state . isLoading }
onPress = { ( ) => {
this . checkUserGeolocated ( )
} } > {
this . isOffline ?
( ! isNil ( this . result ) ) &&
( this . result . child === "geolocated" ) ? I18n . t ( 'NEXT' ) : I18n . t ( 'CREATE_ACCOUNT' )
:
( ! isNil ( this . state . result ) ) ?
( this . state . result . child === "geolocated" ) ? I18n . t ( 'NEXT' ) : I18n . t ( 'CREATE_ACCOUNT' )
: I18n . t ( 'CREATE_ACCOUNT' )
} < / B u t t o n >
< / S c r o l l V i e w >
< MaterialDialog
title = { 'Selecionner un reseau' }
items = { LONG _LIST . map ( ( row , index ) => ( { value : row , label : row } ) ) }
visible = { this . state . networksinglePickerVisible }
selectedItem = { this . state . singlePickerSelectedItem }
onCancel = { ( ) => this . setState ( { networksinglePickerVisible : false } ) }
onOk = { result => {
this . setState ( { networksinglePickerVisible : false } ) ;
this . setState ( { singlePickerSelectedItem : result . selectedItem } ) ;
} }
>
< FlatList style = { { height : responsiveHeight ( 40 ) } }
data = { this . state . networks }
renderItem = { ( { item } ) => this . renderRow ( item ) } / >
< / M a t e r i a l D i a l o g >
< / V i e w >
)
}
onRowPress ( rowID ) {
this . setState ( { network : rowID } )
}
renderRow = ( row ) => (
< TouchableOpacity key = { row } onPress = { ( ) => this . onRowPress ( row ) } >
< View style = { styles . rowContainer } >
< View style = { styles . iconContainer } >
< Icon
name = { this . state . network && row . name === this . state . network . name ? 'radio-button-checked' : 'radio-button-unchecked' }
color = { this . state . network && row . name === this . state . network . name ? theme . accent : this . props . colorAccent }
size = { 24 }
/ >
< / V i e w >
< Text style = { material . subheading } > { row . name } < / T e x t >
< / V i e w >
< / T o u c h a b l e O p a c i t y >
) ;
renderUserAccount ( ) {
return ( < ScrollView style = { styles . container } >
{ this . prepareModal ( ) }
< View style = { { flexDirection : 'row' } } >
< Icon . Button name = { "keyboard-backspace" }
color = { "white" }
size = { 24 }
backgroundColor = { theme . primary }
onPress = { ( ) => this . props . navigation . pop ( ) }
/ >
< Text style = { styles . bigtitle } > { I18n . t ( 'LAST_STEP' ) } < / T e x t >
< / V i e w >
< View
style = { {
width : responsiveWidth ( 90 ) ,
marginTop : 20 ,
alignSelf : 'center' ,
borderRadius : 10 ,
paddingLeft : 20 ,
paddingRight : 20 ,
backgroundColor : 'white'
} }
>
< Dropdown
label = { I18n . t ( 'COUNTRY_CHOICE' ) }
2025-02-21 09:59:59 +00:00
data = { [ { "code_country" : "CM" , "code_dial" : "+237" , "label" : "Cameroon" , "value" : "Cameroon" } ] }
2025-01-07 09:47:45 +00:00
useNativeDriver = { true }
2025-02-21 09:59:59 +00:00
// value={this.state.country === null ? "" :
// this.state.country}
value = { this . state . country }
2025-01-07 09:47:45 +00:00
onChangeText = { ( value , index , data ) => {
2025-02-21 09:59:59 +00:00
this . setState ( {
// country: value,
// indicatif: value.code_dial,
network : null } )
2025-01-07 09:47:45 +00:00
this . getNetworks ( value . code _dial )
} }
2025-02-21 09:59:59 +00:00
// valueExtractor={(value) => {
// return value
// }}
// labelExtractor={(value) => {
// return value.name
// }}
2025-01-07 09:47:45 +00:00
/ >
< / V i e w >
< Animatable . View ref = { ( comp ) => {
this . numanim = comp
} } >
< View style = { { flexDirection : 'row' , flex : 1 } } >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'flag' }
value = { this . state . indicatif }
editable = { false }
onChangeText = { ( text ) => {
2025-02-21 09:59:59 +00:00
// this.setState({indicatif: text})
2025-01-07 09:47:45 +00:00
} }
style = { {
width : responsiveWidth ( 30 ) ,
marginTop : responsiveHeight ( 2 ) ,
marginLeft : responsiveWidth ( 5 ) ,
marginRight : responsiveWidth ( 5 ) ,
borderRadius : 5 ,
} }
/ >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'phone' }
label = { I18n . t ( 'PHONE_NUMBER' ) }
iconColor = { '#f95a25' }
ref = { ( comp ) => {
this . num _input = comp
} }
iconSize = { 20 }
onChangeText = { ( text ) => {
let phonenumber = text
this . setState ( { phone : phonenumber } )
} }
style = { {
marginTop : responsiveHeight ( 2 ) ,
marginRight : responsiveWidth ( 5 ) ,
width : responsiveWidth ( 55 ) ,
borderRadius : 5 ,
} }
>
< / F u m i >
< / V i e w >
< / A n i m a t a b l e . V i e w >
< Animatable . View ref = { ( comp ) => {
this . networkanim = comp
} } >
< View
style = { {
width : responsiveWidth ( 90 ) ,
marginTop : 20 ,
alignSelf : 'center' ,
borderRadius : 10 ,
paddingLeft : 20 ,
paddingRight : 20 ,
backgroundColor : 'white'
} }
>
< Dropdown
label = { I18n . t ( 'NETWORK_CHOICE' ) }
data = { this . state . networks }
value = { this . state . network == null ? "" : this . state . network }
onChangeText = { ( value , index , data ) => {
this . setState ( { network : value } ) ;
this . setState ( { id _network _tax : value . id } ) ;
} }
valueExtractor = { ( value ) => {
return value
} }
labelExtractor = { ( value ) => {
return value . name
} }
/ >
< / V i e w >
< / A n i m a t a b l e . V i e w >
< Button style = { styles . btnvalide } textStyle = { styles . textbtnvalide }
isLoading = { this . state . isLoading }
onPress = { ( ) => {
this . _onUserCreateAccount ( )
} } > { I18n . t ( 'CREATE_ACCOUNT' ) } < / B u t t o n >
< / S c r o l l V i e w > )
}
_onUserCreateAccount ( ) {
2025-02-21 09:59:59 +00:00
console . log ( "logmessi===>1" )
2025-01-07 09:47:45 +00:00
let { myPosition , textaddress , place , user , network , phone , indicatif } = this . state ;
this . setState ( { isLoading : true } )
if ( user !== undefined ) {
2025-02-21 09:59:59 +00:00
console . log ( "logmessi===>2" )
2025-01-07 09:47:45 +00:00
if ( this . checkOrShake ( myPosition , this . mapanim ) ) {
2025-02-21 09:59:59 +00:00
console . log ( "logmessi===>3" )
2025-01-07 09:47:45 +00:00
if ( this . checkOrShake ( phone , this . numanim ) ) {
2025-02-21 09:59:59 +00:00
console . log ( "logmessi===>4" )
2025-01-07 09:47:45 +00:00
if ( this . checkOrShake ( network , this . networkanim ) ) {
2025-02-21 09:59:59 +00:00
console . log ( "logmessi===>5" )
2025-01-07 09:47:45 +00:00
var data = { } ;
data . tag = "member"
data [ 'type' ] = "create_user"
data [ 'phone' ] = indicatif + phone ;
data [ 'network' ] = network ;
2025-02-21 09:59:59 +00:00
// data['town'] = this.state.town;
data [ 'town' ] = {
name : "Douala" ,
2025-04-25 09:54:38 +00:00
id : "2" ,
2025-02-21 09:59:59 +00:00
indicatif : "+237"
}
2025-01-07 09:47:45 +00:00
data [ 'latitude' ] = myPosition . latitude ;
data [ 'longitude' ] = myPosition . longitude ;
for ( let i in user ) {
data [ i ] = user [ i ] ;
}
console . log ( "data :" , data ) ;
2025-02-21 09:59:59 +00:00
console . log ( "logmessi===>6" , this . state . town )
2025-01-07 09:47:45 +00:00
createUserAccount ( data ) . then ( ( result ) => {
2025-02-21 09:59:59 +00:00
console . log ( "logmessi===>7" )
2025-01-07 09:47:45 +00:00
console . log ( "result : " , result )
console . log ( "Données envoyées au serveur data :" , JSON . stringify ( data , null , 2 ) ) ;
console . log ( "Réponse complète du serveur result :" , JSON . stringify ( result , null , 2 ) ) ;
if ( result . success !== undefined && result . success === 1 ) {
Alert . alert ( I18n . t ( "CONNEXION_SUCCESSFUL" ) ,
I18n . t ( 'ACCOUNT_CREATED_SUCCESS' )
, [ {
text : 'OK' , onPress : ( ) => {
this . props . navigation . popToTop ( )
this . setState ( { isLoading : false } )
}
2025-02-21 09:59:59 +00:00
} ] , { cancelable : false } ) ;
2025-01-07 09:47:45 +00:00
} else {
if ( result . error !== undefined ) {
switch ( result . error ) {
case - 3 :
Alert . alert ( I18n . t ( "ERROR_LABLE" ) , I18n . t ( 'FAILED_TEXT_CONTACT_ADMIN' )
, [ { text : 'OK' , onPress : ( ) => "" } ] , { cancelable : false } )
break ;
default :
Alert . alert ( I18n . t ( "CONNEXION_SUCCESSFUL" ) , result . error _msg
2025-02-21 09:59:59 +00:00
, [ { text : 'OK' , onPress : ( ) => {
this . props . navigation . popToTop ( ) ;
} } ] , { cancelable : false } )
setTimeout ( ( ) => {
this . setState ( { isLoading : false } )
} , 1000 )
2025-01-07 09:47:45 +00:00
}
this . setState ( { isLoading : false } )
}
}
} ) . catch ( ( error ) => {
console . error ( "Erreur lors de la création du compte :" , error ) ;
Alert . alert ( "Erreur" , "Une erreur s'est produite lors de la création du compte. Veuillez réessayer." ) ;
this . setState ( { isLoading : false } ) ;
} )
} else this . setState ( { isLoading : false } )
} else this . setState ( { isLoading : false } )
} else this . setState ( { isLoading : false } )
} else {
this . setState ( { isLoading : false } )
}
}
checkUserGeolocated ( ) {
let { myPosition , textaddress , place , indicatif , user , network , phone , phoneTransaction } = this . state ;
this . setState ( { isLoading : true } )
if ( user !== undefined ) {
if ( this . checkOrShake ( phone , this . numanim ) ) {
if ( this . checkOrShake ( network , this . networkanim ) ) {
var data = { } ;
data . tag = "member" ;
data . type = "create_geolocated_user" ;
data [ 'phone' ] = indicatif + phone ;
data [ 'phone_transaction' ] = indicatif + phoneTransaction ;
data [ 'network' ] = network ;
data [ 'town' ] = this . state . town ;
data [ 'latitude' ] = this . isOffline ? this . state . latitude : myPosition . latitude ;
data [ 'longitude' ] = this . isOffline ? this . state . longitude : myPosition . longitude ;
for ( let i in user ) {
data [ i ] = user [ i ] ;
}
data [ 'category' ] = user . category ;
data [ 'active' ] = '0' ;
if ( this . isOffline ) {
if ( ! isNil ( this . result ) ) {
if ( this . result . child === "geolocated" ) {
this . setState ( { isLoading : false } )
this . props . navigation . push ( route . createUserStep , {
type : this . type ,
user : this . state . user ,
data : data ,
result : this . result ,
isActif : false ,
isOffline : this . isOffline
} ) ;
}
}
} else {
if ( ! isNil ( this . state . result ) ) {
if ( this . state . result . child === "geolocated" ) {
this . setState ( { isLoading : false } )
this . props . navigation . push ( route . createUserStep , {
type : this . type ,
user : this . state . user ,
data : data ,
result : this . state . result ,
isActif : false ,
isOffline : this . isOffline
} ) ;
} else {
createGeolocatedAccount ( data ) . then ( ( result ) => {
console . log ( result ) ;
if ( result . success !== undefined && result . success === 1 ) {
const message = result . category === 'super' ? I18n . t ( "HYPERVISOR_MUST_VALIDATE_SUPERVISOR" )
: I18n . t ( "ACCOUNT_SUCCESSFULL_CREATED" )
Alert . alert ( "" , message , [ {
text : "Ok" ,
onPress : ( ) => {
this . props . navigation . popToTop ( )
}
} ] )
setTimeout ( ( ) => {
this . setState ( { isLoading : false } )
} , 1000 )
this . props . navigator . push ( {
screen : route . login
} )
this . setState ( { isLoading : false } )
} else {
/ * C r a s h l y t i c s . l o g ( J S O N . s t r i n g i f y ( { " t y p e " : " e r r e u r l o r s d e l a c r e a t i o n " , " d a t a " : r e s u l t } ) )
Answers . logCustom ( "error" , JSON . stringify ( result ) ) * /
console . warn ( result )
if ( result . error !== undefined ) {
switch ( result . error ) {
case - 3 :
Alert . alert ( "" , I18n . t ( 'UNABLE_TO_CREATE_ACCOUNT' ) , [ {
text : "Ok" ,
onPress : ( ) => {
}
} ] )
break ;
default :
if ( result . error _msg )
Alert . alert ( "" , result . error _msg , [ {
text : "Ok" ,
onPress : ( ) => {
}
} ] )
else if ( result . sql _error )
Alert . alert ( I18n . t ( 'UNABLE_TO_CREATE_ACCOUNT' ) , result . sql _error , [ {
text : "Ok" ,
onPress : ( ) => {
}
} ] )
}
this . setState ( { isLoading : false } )
}
}
} )
. catch ( ( error ) => {
this . setState ( { isLoading : false } ) ;
} ) ;
}
}
}
} else this . setState ( { isLoading : false } )
} else this . setState ( { isLoading : false } )
} else {
this . setState ( { isLoading : false } )
}
}
checkOrShake ( champ , view ) {
let res = false ;
if ( champ !== undefined && champ . length > 0 ) {
res = true ;
} else if ( champ !== Array && champ !== undefined ) {
res = true
} else {
view . shake ( 800 )
}
return res ;
}
prepareModal ( ) {
return ( < MaterialDialog
visible = { this . state . modalVisible }
title = { I18n . t ( "LOADING_INFO" ) }
>
< View style = { { justifyContent : 'center' , alignItems : 'center' } } >
< Text > { I18n . t ( "LOADING_DESCRIPTION_COUNTRY" ) } < / T e x t >
< ProgressBarAndroid / >
< / V i e w >
< / M a t e r i a l D i a l o g > )
}
}
const
SHORT _LIST = [ 'List element 1' , 'List element 2' , 'List element 3' ] ;
const
LONG _LIST = [
'List element 1' ,
'List element 2' ,
'List element 5' ,
'List element 6' ,
'List element 7' ,
'List element 8' ,
,
] ;
const
styles = StyleSheet . create ( {
rowContainer : {
height : 52 ,
flex : 1 ,
flexDirection : 'row' ,
justifyContent : 'flex-start' ,
alignItems : 'center' ,
} ,
iconContainer : {
marginRight : 16 ,
} ,
container : {
flex : 1 ,
backgroundColor : theme . primary ,
} ,
textbtnvalide : {
color : 'white' ,
fontWeight : 'bold'
} ,
bigtitle : {
color : 'white' ,
fontSize : 20 ,
flex : 1 ,
fontWeight : 'bold' ,
textAlign : 'center' ,
margin : 20 ,
} ,
subbigtitle : {
color : 'white' ,
fontSize : 17 ,
textAlign : 'center' ,
margin : 5 ,
} ,
map : {
height : 200 ,
marginRight : responsiveWidth ( 5 ) ,
marginLeft : responsiveWidth ( 5 ) ,
marginVertical : 10 ,
} ,
btnvalide : {
marginTop : 20 ,
marginLeft : 20 ,
marginRight : 20 ,
borderColor : 'transparent' ,
backgroundColor : theme . accentLight ,
height : 52
} ,
input : {
height : 60 ,
marginTop : responsiveHeight ( 2 ) ,
marginLeft : responsiveWidth ( 5 ) ,
marginRight : responsiveWidth ( 5 ) ,
borderRadius : 5 ,
} ,
contentPicker : {
padding : 10 ,
borderRadius : 8 ,
flex : 1 ,
alignItems : "center"
} ,
contain : { flexDirection : "row" } ,
thumb : {
borderRadius : 30 ,
marginRight : 10
} ,
point : {
width : 25 ,
height : 25 ,
borderRadius : 11 ,
alignItems : "center" ,
justifyContent : "center" ,
position : "absolute" ,
right : 9 ,
bottom : 0
} ,
} )
