1488 lines
61 KiB
JavaScript
1488 lines
61 KiB
JavaScript
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';
|
|
import {
|
|
Alert,
|
|
BackHandler,
|
|
FlatList,
|
|
Image,
|
|
PermissionsAndroid,
|
|
Platform,
|
|
ProgressBarAndroid,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View
|
|
} from 'react-native';
|
|
import * as Animatable from 'react-native-animatable';
|
|
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';
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import { store } from "../../redux/store";
|
|
import { getDefaultTown } from "../../webservice/AuthApi";
|
|
import { uploadImage } from "../../webservice/IlinkConstants";
|
|
import {
|
|
createGeolocatedAccount,
|
|
createUserAccount,
|
|
getCodeInformation,
|
|
getCountryNetwork,
|
|
getListCountriesActive,
|
|
getTownInformationName
|
|
} from './../../webservice/AuthApi';
|
|
import { getPositionInformation } from './../../webservice/MapService';
|
|
|
|
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');
|
|
/*var Fabric = require('react-native-fabric');
|
|
|
|
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,
|
|
indicatif: '+237',
|
|
country: "Cameroon",
|
|
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: "",
|
|
// town: {
|
|
// name: "Douala",
|
|
// id: 2",
|
|
// indicatif: "+237"
|
|
// },
|
|
|
|
};
|
|
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;
|
|
console.log("network1===>>",network)
|
|
|
|
this.setState({
|
|
result,
|
|
// country,
|
|
// indicatif: dial_code
|
|
});
|
|
|
|
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 {
|
|
throw new Error("Impossible de récupérer les informations du code hiérarchique ou taxe");
|
|
}
|
|
} else {
|
|
console.log("indicatif1===>>",indicatif)
|
|
const networks = await getCountryNetwork("+237");
|
|
console.log("network2===>>",networks)
|
|
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 });
|
|
|
|
if (error.message === "Impossible de récupérer les informations du code hiérarchique ou taxe") {
|
|
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]);
|
|
}
|
|
}else{
|
|
countriesData = response;
|
|
}
|
|
|
|
const formattedCountries = countriesData.map(country => ({
|
|
label: country.name,
|
|
value: country.name,
|
|
code_dial: country.code_dial,
|
|
code_country: country.code_country
|
|
}));
|
|
console.log("formattedCountries===>>",formattedCountries)
|
|
this.setState({
|
|
// country: formattedCountries,
|
|
countries: formattedCountries[0],
|
|
isLoading: false,
|
|
selectedCountry: formattedCountries[0], // Sélectionne le premier pays par défaut
|
|
// indicatif: formattedCountries[0].code_dial
|
|
});
|
|
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,
|
|
// indicatif: country.code_dial,
|
|
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,
|
|
// indicatif: selectedCountry.code_dial,
|
|
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) => {
|
|
Alert.alert(I18n.t('TITLE_PROBLE_COME'), "Impossible de recuperer les informations du code hiérarchique ou taxe", [{
|
|
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);
|
|
/* if (!this.watchID) {
|
|
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;
|
|
this.setState({town: {
|
|
name: "Douala",
|
|
id: "2",
|
|
indicatif: "+237"
|
|
}});
|
|
})
|
|
} else {
|
|
getDefaultTown().then(result => {
|
|
getTownInformationName(result.default_locality).then((resultTowwn) => {
|
|
let town = null;
|
|
if (resultTowwn instanceof Array) {
|
|
town = resultTowwn[0];
|
|
} else
|
|
town = resultTowwn;
|
|
this.setState({town: {
|
|
name: "Douala",
|
|
id: "2",
|
|
indicatif: "+237"
|
|
}});
|
|
});
|
|
})
|
|
}
|
|
}
|
|
}
|
|
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
|
|
this.setState({
|
|
// indicatif: i.code_dial,
|
|
country: i.name
|
|
})
|
|
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')}</Dialog.Title>
|
|
|
|
<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'
|
|
}}/>
|
|
</View>
|
|
<View style={{width: 50}}/>
|
|
</View>
|
|
|
|
<Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
|
|
this.setState({
|
|
displayImage: false,
|
|
loadingUpload: true
|
|
});
|
|
this.uploadImage();
|
|
|
|
}}/>
|
|
</Dialog.Container>
|
|
)
|
|
}
|
|
|
|
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')}</Text>
|
|
: <Text style={styles.bigtitle}>{I18n.t('LAST_STEP')}</Text>
|
|
}
|
|
|
|
</View>
|
|
<ScrollView style={styles.container}>
|
|
<View
|
|
style={{
|
|
width: responsiveWidth(90),
|
|
marginTop: 10,
|
|
alignSelf: 'center',
|
|
display:"flex",
|
|
flexDirection:"row",
|
|
borderRadius: 10,
|
|
paddingLeft: 5,
|
|
paddingRight: 5,
|
|
backgroundColor: 'white'
|
|
}}>
|
|
{/* <Fumi
|
|
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> */}
|
|
{/* <Fumi
|
|
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);
|
|
}}
|
|
|
|
/> */}
|
|
|
|
|
|
{/* <Dropdown
|
|
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}
|
|
/>
|
|
{/* <Dropdown
|
|
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
|
|
}}
|
|
/> */}
|
|
</View>
|
|
<Animatable.View ref={(comp) => {
|
|
this.numanim = comp
|
|
}}>
|
|
|
|
<View style={{flexDirection: 'row', flex: 1}}>
|
|
{/* <Fumi iconClass={FontAwesomeIcon} iconName={'flag'}
|
|
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,
|
|
}}
|
|
/> */}
|
|
|
|
|
|
<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),
|
|
marginLeft: responsiveWidth(5),
|
|
|
|
width: responsiveWidth(90),
|
|
borderRadius: 5,
|
|
}}
|
|
>
|
|
</Fumi>
|
|
<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),
|
|
marginLeft: responsiveWidth(5),
|
|
width: responsiveWidth(90),
|
|
borderRadius: 5,
|
|
}}
|
|
>
|
|
</Fumi>
|
|
</View>
|
|
</View>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View ref={(comp) => {
|
|
this.networkanim = comp
|
|
}}>
|
|
<View
|
|
style={{
|
|
width: responsiveWidth(90),
|
|
marginTop: 20,
|
|
alignSelf: 'center',
|
|
borderRadius: 10,
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
backgroundColor:"#ef4444",
|
|
}}
|
|
|
|
>
|
|
<View
|
|
style={{borderColor: 'transparent',padding:15}}
|
|
isDisabled={this.state.disableNetwork}
|
|
onPress={() => {
|
|
this.setState({networksinglePickerVisible: true})
|
|
}}>
|
|
<View>
|
|
<Text style={{color:"#fff", fontWeight:"500"}}>{this.state.select_network}</Text>
|
|
<Text
|
|
style={{color:"#fff", fontWeight:"600"}}>{this.state.network ? this.state.network.name : ""}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
</Animatable.View>
|
|
|
|
<Text
|
|
style={{
|
|
fontSize: 16,
|
|
marginTop: 10,
|
|
marginLeft: responsiveWidth(6),
|
|
marginRight: responsiveWidth(6),
|
|
color: 'white',
|
|
fontWeight: 'bold'
|
|
}}
|
|
>{I18n.t('WAIT_LOADING_POSITION')}</Text>
|
|
|
|
{
|
|
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,
|
|
}}
|
|
>
|
|
</Fumi>
|
|
</View>
|
|
</View>
|
|
</Animatable.View> :
|
|
<>
|
|
<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}
|
|
</MapView>
|
|
</Animatable.View>
|
|
{/* <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}}>
|
|
<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')}</Text>
|
|
</TouchableOpacity> */}
|
|
</>
|
|
}
|
|
<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')
|
|
}</Button>
|
|
|
|
|
|
</ScrollView>
|
|
<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)}/>
|
|
</MaterialDialog>
|
|
</View>
|
|
)
|
|
|
|
}
|
|
|
|
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}
|
|
/>
|
|
</View>
|
|
<Text style={material.subheading}>{row.name}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
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')}</Text>
|
|
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: responsiveWidth(90),
|
|
marginTop: 20,
|
|
alignSelf: 'center',
|
|
borderRadius: 10,
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
backgroundColor: 'white'
|
|
}}
|
|
|
|
>
|
|
<Dropdown
|
|
label={I18n.t('COUNTRY_CHOICE')}
|
|
data={[{"code_country": "CM", "code_dial": "+237", "label": "Cameroon", "value": "Cameroon"}]}
|
|
useNativeDriver={true}
|
|
// value={this.state.country === null ? "" :
|
|
// this.state.country}
|
|
value={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
|
|
// }}
|
|
// labelExtractor={(value) => {
|
|
// return value.name
|
|
// }}
|
|
/>
|
|
</View>
|
|
<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) => {
|
|
|
|
// this.setState({indicatif: text})
|
|
}}
|
|
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,
|
|
}}
|
|
>
|
|
</Fumi>
|
|
</View>
|
|
</Animatable.View>
|
|
|
|
<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
|
|
}}
|
|
/>
|
|
</View>
|
|
</Animatable.View>
|
|
<Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
|
|
isLoading={this.state.isLoading}
|
|
onPress={() => {
|
|
this._onUserCreateAccount()
|
|
}}>{I18n.t('CREATE_ACCOUNT')}</Button>
|
|
|
|
</ScrollView>)
|
|
|
|
}
|
|
|
|
_onUserCreateAccount() {
|
|
console.log("logmessi===>1")
|
|
let {myPosition, textaddress, place, user, network, phone, indicatif} = this.state;
|
|
this.setState({isLoading: true})
|
|
if (user !== undefined) {
|
|
console.log("logmessi===>2")
|
|
if (this.checkOrShake(myPosition, this.mapanim)) {
|
|
console.log("logmessi===>3")
|
|
if (this.checkOrShake(phone, this.numanim)) {
|
|
console.log("logmessi===>4")
|
|
if (this.checkOrShake(network, this.networkanim)) {
|
|
console.log("logmessi===>5")
|
|
var data = {};
|
|
data.tag = "member"
|
|
data['type'] = "create_user"
|
|
data['phone'] = indicatif + phone;
|
|
data['network'] = network;
|
|
// data['town'] = this.state.town;
|
|
data['town'] = {
|
|
name: "Douala",
|
|
id: "2",
|
|
indicatif: "+237"
|
|
}
|
|
|
|
data['latitude'] = myPosition.latitude;
|
|
data['longitude'] = myPosition.longitude;
|
|
for (let i in user) {
|
|
data[i] = user[i];
|
|
}
|
|
console.log("data :", data);
|
|
console.log("logmessi===>6",this.state.town)
|
|
createUserAccount(data).then((result) => {
|
|
console.log("logmessi===>7")
|
|
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})
|
|
}
|
|
}], {cancelable: false});
|
|
} 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
|
|
, [{text: 'OK', onPress: () => {
|
|
this.props.navigation.popToTop();
|
|
}}], {cancelable: false})
|
|
setTimeout(() => {
|
|
this.setState({isLoading: false})
|
|
|
|
}, 1000)
|
|
}
|
|
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 {
|
|
|
|
/* Crashlytics.log(JSON.stringify({"type":"erreur lors de la creation","data":result}))
|
|
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")}</Text>
|
|
<ProgressBarAndroid/>
|
|
</View>
|
|
</MaterialDialog>)
|
|
}
|
|
}
|
|
|
|
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
|
|
},
|
|
})
|