<repo_name>JuandaGarcia/aplicacion-multas<file_sep>/paginas/EditarPersona.js
import React, { useState, useEffect } from 'react'
import {
	Text,
	SafeAreaView,
	ScrollView,
	View,
	ActivityIndicator,
	TextInput,
	TouchableHighlight,
	Alert
} from 'react-native'
import {
	handleAndroidBackButton,
	removeAndroidBackButtonHandler
} from '../modulos/androidBackButton'
import styles from '../modulos/styles'
import axios from 'axios'
import { useHistory } from 'react-router-native'

export default function EditarPersona(props) {
	const [nombre, setNombre] = useState('')
	const [identificacion, setIdentifiacion] = useState('')
	const [telefono, setTelefono] = useState('')
	const [direccion, setDireccion] = useState('')
	const [ciudad, setCiudad] = useState('')

	const [persona, setPersona] = useState('')

	const [loading, setLoading] = useState('')
	const [error, setError] = useState('')

	const id_parametros = props.match.params.identificacion
	const history = useHistory()

	useEffect(() => {
		fetchData()
		handleAndroidBackButton(() => history.push('/personas'))
		return () => {
			removeAndroidBackButtonHandler()
		}
	}, [])

	useEffect(() => {
		setNombre(persona.nombre)
		setTelefono(persona.telefono)
		setDireccion(persona.direccion)
		setCiudad(persona.ciudad)
	}, [persona])

	const AlertaPUT = id => {
		Alert.alert(
			'Se actualizo correctamente',
			'Oprima Aceptar para continuar',
			[
				{
					text: 'Aceptar',
					onPress: () => {
						history.push('/personas')
					}
				}
			],
			{ cancelable: false }
		)
	}

	const fetchData = async () => {
		setLoading(true)
		setError(null)

		try {
			await axios
				.get(`http://157.245.245.214/personas/${id_parametros}`)
				.then(res => {
					setPersona(res.data)
				})
			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	const PutData = async () => {
		setLoading(true)
		setError(null)

		try {
			const data = {
				identificacion: id_parametros,
				nombre: nombre,
				telefono: telefono,
				direccion: direccion,
				ciudad: ciudad
			}

			const headers = {
				'Content-Type': 'application/json'
			}

			axios
				.put(`http://192.168.127.12/personas/${id_parametros}`, data, {
					headers: headers
				})
				.then(response => {
					AlertaPUT()
				})
				.catch(error => {})

			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	if (loading) {
		return (
			<SafeAreaView>
				<Text style={styles.text_HeaderList}>Editar Persona</Text>
				<ScrollView style={styles.scrollArea}>
					<View style={styles.contenedorFormulario}>
						<Text style={styles.textoidentificacion}>
							Identificación: {id_parametros}
						</Text>
						<ActivityIndicator size="large" color="#0000ff" />
					</View>
				</ScrollView>
			</SafeAreaView>
		)
	}

	if (error) {
		return (
			<SafeAreaView>
				<Text style={styles.text_HeaderList}>Editar Persona</Text>
				<ScrollView style={styles.scrollArea}>
					<View style={styles.contenedorFormulario}>
						<Text style={styles.textoidentificacion}>
							Identificación: {id_parametros}
						</Text>
						<Text style={styles.textoidentificacion}>Error</Text>
					</View>
				</ScrollView>
			</SafeAreaView>
		)
	}

	return (
		<SafeAreaView>
			<Text style={styles.text_HeaderList}>Editar Persona</Text>
			<ScrollView style={styles.scrollArea}>
				<View style={styles.contenedorFormulario}>
					<Text style={styles.textoidentificacion}>
						Identificación: {id_parametros}
					</Text>
					<Text>Nombre</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setNombre(text)}
						value={nombre}
						placeholder="ingresa el nombre"
						maxLength={40}
					/>
					<Text>Teléfono</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setTelefono(text)}
						value={telefono}
						maxLength={10}
						placeholder="ingresa el teléfono"
						keyboardType="numeric"
					/>
					<Text>Dirección</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setDireccion(text)}
						value={direccion}
						placeholder="ingresa la dirección"
						maxLength={40}
					/>
					<Text>Ciudad</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setCiudad(text)}
						value={ciudad}
						placeholder="ingresa la ciudad"
						maxLength={40}
					/>
					<View style={styles.contenedorBotonNPersona}>
						<TouchableHighlight
							underlayColor="rgba(0,0,0,0.1)"
							style={styles.buttonAñadirPersona}
							onPress={() => {
								PutData()
							}}
						>
							<Text style={styles.textVerMas}>Guarda cambios</Text>
						</TouchableHighlight>
					</View>
				</View>
			</ScrollView>
		</SafeAreaView>
	)
}
<file_sep>/paginas/Vehiculos.js
import React, { useState, useEffect } from 'react'
import {
	Text,
	SafeAreaView,
	ScrollView,
	View,
	ActivityIndicator
} from 'react-native'
import {
	handleAndroidBackButton,
	removeAndroidBackButtonHandler
} from '../modulos/androidBackButton'
import styles from '../modulos/styles'
import axios from 'axios'

export default ({ history }) => {
	const [vehiculos, setVehiculos] = useState([])
	const [loading, setLoading] = useState('')
	const [error, setError] = useState('')

	useEffect(() => {
		handleAndroidBackButton(() => history.push('/'))
		fetchData()
		return () => {
			removeAndroidBackButtonHandler()
		}
	}, [])

	const fetchData = async () => {
		setLoading(true)
		setError(null)

		try {
			await axios.get(`http://172.16.58.3/vehiculos`).then(res => {
				setVehiculos(res.data)
			})

			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	if (loading) {
		return (
			<SafeAreaView>
				<Text style={styles.text_HeaderList}>Vehículos</Text>
				<Text style={styles.texto_info_vehiculos}>
					Lista de vehículos registrados en la región
				</Text>
				<ScrollView style={styles.scrollArea}>
					<View style={styles.contenedorPersonas}>
						<ActivityIndicator size="large" color="#0000ff" />
					</View>
				</ScrollView>
			</SafeAreaView>
		)
	}

	if (error) {
		return (
			<SafeAreaView>
				<Text style={styles.text_HeaderList}>Vehículos</Text>
				<Text style={styles.texto_info_vehiculos}>
					Lista de vehículos registrados en la región
				</Text>
				<ScrollView style={styles.scrollArea}>
					<View style={styles.contenedorPersonas}>
						<Text style={styles.textError}>Algo salió mal!</Text>
					</View>
				</ScrollView>
			</SafeAreaView>
		)
	}

	return (
		<SafeAreaView>
			<Text style={styles.text_HeaderList}>Vehículos</Text>
			<Text style={styles.texto_info_vehiculos}>
				Lista de vehículos registrados en la región
			</Text>
			<ScrollView style={styles.scrollArea}>
				<View style={styles.contenedorPersonas}>
					{vehiculos.map(vehiculo => {
						return (
							<View
								key={vehiculo.placa}
								style={[
									styles.Marco,
									styles.container_Personas,
									styles.horizontal
								]}
							>
								<View style={styles.contenedo_info_vehiculo}>
									<Text style={styles.nombreVehiculo}>{vehiculo.modelo}</Text>
									<Text>Placa: {vehiculo.placa}</Text>
								</View>
							</View>
						)
					})}
				</View>
			</ScrollView>
		</SafeAreaView>
	)
}
<file_sep>/componets/HeaderList.js
import React from 'react'
import { Text, TouchableHighlight, StyleSheet, View } from 'react-native'
import styles from '../modulos/styles'

export default function HeaderList(props) {
	return (
		<View style={styles.contenedorTop_HeaderList}>
			<Text style={styles.text_HeaderList}>{props.titulo}</Text>
			<TouchableHighlight
				underlayColor="rgba(0,0,0,0.1)"
				style={styles.buttonAñadir}
				onPress={() => props.history.push(`/${props.url}`)}
			>
				<Text> Añadir {props.textoBoton} </Text>
			</TouchableHighlight>
		</View>
	)
}
<file_sep>/paginas/AñadirPersona.js
import React, { useState, useEffect } from 'react'
import {
	Text,
	SafeAreaView,
	ScrollView,
	View,
	ActivityIndicator,
	TextInput,
	TouchableHighlight,
	Alert
} from 'react-native'
import {
	handleAndroidBackButton,
	removeAndroidBackButtonHandler
} from '../modulos/androidBackButton'
import styles from '../modulos/styles'
import axios from 'axios'

export default ({ history }) => {
	const [nombre, setNombre] = useState('')
	const [identificacion, setIdentifiacion] = useState('')
	const [telefono, setTelefono] = useState('')
	const [direccion, setDireccion] = useState('')
	const [ciudad, setCiudad] = useState('')

	const [loading, setLoading] = useState('')
	const [error, setError] = useState('')

	useEffect(() => {
		handleAndroidBackButton(() => history.push('/personas'))
		return () => {
			removeAndroidBackButtonHandler()
		}
	}, [])

	const PostData = async () => {
		setLoading(true)
		setError(null)

		try {
			const data = {
				identificacion: identificacion,
				nombre: nombre,
				telefono: telefono,
				direccion: direccion,
				ciudad: ciudad
			}

			const headers = {
				'Content-Type': 'application/json'
			}

			axios
				.post(`http://157.245.245.214/personas/`, data, {
					headers: headers
				})
				.then(response => {
					AlertaPOST()
					/* dispatch({
						type: FOUND_USER,
						data: response.data[0]
					}) */
				})
				.catch(error => {
					/* dispatch({
						type: ERROR_FINDING_USER
					}) */
				})

			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	const AlertaPOST = () => {
		Alert.alert(
			'Se agrego correctamente',
			'Oprima Aceptar para continuar',
			[
				{
					text: 'Aceptar',
					onPress: () => {
						history.push('/personas')
					}
				}
			],
			{ cancelable: false }
		)
	}

	return (
		<SafeAreaView>
			<Text style={styles.text_HeaderList}>Añadir Persona</Text>
			<ScrollView style={styles.scrollArea}>
				<View style={styles.contenedorFormulario}>
					<Text>Nombre</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setNombre(text)}
						value={nombre}
						placeholder="ingresa el nombre"
						maxLength={40}
					/>
					<Text>Identificación</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setIdentifiacion(text)}
						value={identificacion}
						placeholder="ingresa la identificación"
						keyboardType="numeric"
						maxLength={15}
					/>
					<Text>Teléfono</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setTelefono(text)}
						value={telefono}
						maxLength={10}
						placeholder="ingresa el teléfono"
						keyboardType="numeric"
					/>
					<Text>Dirección</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setDireccion(text)}
						value={direccion}
						placeholder="ingresa la dirección"
						maxLength={40}
					/>
					<Text>Ciudad</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setCiudad(text)}
						value={ciudad}
						placeholder="ingresa la ciudad"
						maxLength={40}
					/>
					<View style={styles.contenedorBotonNPersona}>
						<TouchableHighlight
							underlayColor="rgba(0,0,0,0.1)"
							style={styles.buttonAñadirPersona}
							onPress={() => PostData()}
						>
							<Text style={styles.textVerMas}>Añadir persona</Text>
						</TouchableHighlight>
					</View>
				</View>
			</ScrollView>
		</SafeAreaView>
	)
}
<file_sep>/paginas/EditarMulta.js
import React, { useState, useEffect } from 'react'
import {
	Text,
	SafeAreaView,
	ScrollView,
	View,
	ActivityIndicator,
	TextInput,
	TouchableHighlight,
	Alert,
	Picker
} from 'react-native'
import {
	handleAndroidBackButton,
	removeAndroidBackButtonHandler
} from '../modulos/androidBackButton'
import styles from '../modulos/styles'
import axios from 'axios'
import { useHistory } from 'react-router-native'

export default props => {
	const [fecha, setFecha] = useState('')
	const [observacion, setObservacion] = useState('')
	const [total_pagar, setTotal_pagar] = useState('')
	const [id_persona, setId_persona] = useState('')
	const [placa_carro, setPlaca_carro] = useState('')

	const [personas, setPersonas] = useState([])
	const [vehiculos, setVehiculos] = useState([])
	const [multa, setMulta] = useState([])

	const [loading, setLoading] = useState('')
	const [error, setError] = useState('')

	const codigo_parametros = props.match.params.codigo
	const history = useHistory()

	useEffect(() => {
		handleAndroidBackButton(() => history.push('/multas'))
		fetchData()
		return () => {
			removeAndroidBackButtonHandler()
		}
	}, [])

	useEffect(() => {
		setFecha(multa.fecha)
		setObservacion(multa.observacion)
		setTotal_pagar(multa.total_pagar)
		setId_persona(multa.id_persona)
		setPlaca_carro(multa.placa_carro)
	}, [multa])

	const fetchData = async () => {
		setLoading(true)
		setError(null)

		try {
			await axios.get(`http://172.16.31.10/personas/`).then(res => {
				setPersonas(res.data)
			})
			await axios.get(`http://157.245.245.214/vehiculos/`).then(res => {
				setVehiculos(res.data)
			})
			await axios
				.get(`http://157.245.245.214/multas/${codigo_parametros}`)
				.then(res => {
					setMulta(res.data)
				})

			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	const PostData = async () => {
		setLoading(true)
		setError(null)

		try {
			const data = {
				fecha: fecha,
				observacion: observacion,
				total_pagar: total_pagar,
				id_persona: id_persona,
				placa_carro: placa_carro
			}

			const headers = {
				'Content-Type': 'application/json'
			}

			axios
				.post(`http://157.245.245.214/multas/`, data, {
					headers: headers
				})
				.then(response => {
					AlertaPOST()
				})
				.catch(error => {})

			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	const AlertaPUT = id => {
		Alert.alert(
			'Se actualizo correctamente',
			'Oprima Aceptar para continuar',
			[
				{
					text: 'Aceptar',
					onPress: () => {
						history.push('/multas')
					}
				}
			],
			{ cancelable: false }
		)
	}

	const PutData = async () => {
		setLoading(true)
		setError(null)

		try {
			const data = {
				fecha: fecha,
				observacion: observacion,
				total_pagar: total_pagar,
				id_persona: id_persona,
				placa_carro: placa_carro
			}

			const headers = {
				'Content-Type': 'application/json'
			}

			axios
				.put(`http://157.245.245.214/multas/${codigo_parametros}`, data, {
					headers: headers
				})
				.then(response => {
					AlertaPUT()
				})
				.catch(error => {})

			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	if (loading) {
		return (
			<SafeAreaView>
				<Text style={styles.text_HeaderList}>Editar multa</Text>
				<ScrollView style={styles.scrollArea}>
					<View style={styles.contenedorFormulario}>
						<Text style={styles.textoidentificacion}>
							Codigo: {codigo_parametros}
						</Text>
						<ActivityIndicator size="large" color="#0000ff" />
					</View>
				</ScrollView>
			</SafeAreaView>
		)
	}

	if (error) {
		return (
			<SafeAreaView>
				<Text style={styles.text_HeaderList}>Editar multa</Text>
				<ScrollView style={styles.scrollArea}>
					<View style={styles.contenedorFormulario}>
						<Text style={styles.textoidentificacion}>
							Codigo: {codigo_parametros}
						</Text>
						<Text style={styles.textError}>Algo salió mal!</Text>
					</View>
				</ScrollView>
			</SafeAreaView>
		)
	}

	return (
		<SafeAreaView>
			<Text style={styles.text_HeaderList}>Editar multa</Text>
			<ScrollView style={styles.scrollArea}>
				<View style={styles.contenedorFormulario}>
					<Text style={styles.textoidentificacion}>
						Codigo: {codigo_parametros}
					</Text>
					<Text>Fecha</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setFecha(text)}
						value={fecha}
						placeholder="AAAA-MM-DD"
						maxLength={40}
					/>
					<Text>Observación</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setObservacion(text)}
						value={observacion}
						placeholder="ingresa la observación"
						maxLength={200}
					/>
					<Text>Total a pagar {`(Actual: ${total_pagar})`}</Text>
					<TextInput
						style={styles.inputText}
						onChangeText={text => setTotal_pagar(text)}
						value={total_pagar}
						placeholder="ingresa el total a pagar"
						keyboardType="numeric"
						maxLength={15}
					/>
					<Text>Identificacion de la persona</Text>
					<Text>{`(Actual: ${id_persona})`}</Text>
					<Picker
						selectedValue={id_persona}
						style={{ height: 50, width: 300 }}
						onValueChange={text => setId_persona(text)}
					>
						{personas.map(persona => {
							return (
								<Picker.Item
									key={persona.identificacion}
									label={`${persona.identificacion} - ${persona.nombre}`}
									value={persona.identificacion}
								/>
							)
						})}
					</Picker>
					<Text>Placa del carro</Text>
					<Text>{`(Actual: ${placa_carro})`}</Text>
					<Picker
						selectedValue={placa_carro}
						style={{ height: 50, width: 300 }}
						onValueChange={text => setPlaca_carro(text)}
					>
						{vehiculos.map(vehiculo => {
							return (
								<Picker.Item
									key={vehiculo.placa}
									label={`${vehiculo.placa} - ${vehiculo.modelo}`}
									value={vehiculo.placa}
								/>
							)
						})}
					</Picker>

					<View style={styles.contenedorBotonNPersona}>
						<TouchableHighlight
							underlayColor="rgba(0,0,0,0.1)"
							style={styles.buttonAñadirPersona}
							onPress={() => {
								PutData()
							}}
						>
							<Text style={styles.textVerMas}>Editar multa</Text>
						</TouchableHighlight>
					</View>
				</View>
			</ScrollView>
		</SafeAreaView>
	)
}
<file_sep>/App.js
import React from 'react'
import { NativeRouter, Switch, Route } from 'react-router-native'
import Home from './paginas/Home'
import Vehiculos from './paginas/Vehiculos'
import Personas from './paginas/Personas'
import Multas from './paginas/Multas'
import EditarPersona from './paginas/EditarPersona'
import AñadirPersona from './paginas/AñadirPersona'
import AñadirMultas from './paginas/AñadirMultas'
import EditarMulta from './paginas/EditarMulta'

export default function App() {
	return (
		<NativeRouter>
			<Switch>
				<Route exact path="/" component={Home} />
				<Route exact path="/personas" component={Personas} />
				<Route
					exact
					path="/editar-persona/:identificacion"
					component={EditarPersona}
				/>
				<Route exact path="/añadir-personas" component={AñadirPersona} />
				<Route exact path="/multas" component={Multas} />
				<Route exact path="/añadir-multas" component={AñadirMultas} />
				<Route exact path="/editar-multa/:codigo" component={EditarMulta} />
				<Route exact path="/vehiculos" component={Vehiculos} />
			</Switch>
		</NativeRouter>
	)
}
<file_sep>/paginas/Multas.js
import React, { useState, useEffect } from 'react'
import {
	Text,
	TouchableHighlight,
	SafeAreaView,
	ScrollView,
	View,
	ActivityIndicator,
	Alert
} from 'react-native'
import {
	handleAndroidBackButton,
	removeAndroidBackButtonHandler
} from '../modulos/androidBackButton'
import HeaderList from '../componets/HeaderList'
import axios from 'axios'
import styles from '../modulos/styles'

export default ({ history }) => {
	const [multas, setMultas] = useState([])
	const [loading, setLoading] = useState('')
	const [error, setError] = useState('')

	useEffect(() => {
		handleAndroidBackButton(() => history.push('/'))
		fetchData()
		return () => {
			removeAndroidBackButtonHandler()
		}
	}, [])

	const fetchData = async () => {
		setLoading(true)
		setError(null)

		try {
			await axios.get(`http://172.16.58.3/multas/`).then(res => {
				setMultas(res.data)
			})

			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	const AlertaEliminar = id => {
		Alert.alert(
			'Eliminar',
			'¿Está seguro que desea eliminar esta multa?',
			[
				{
					text: 'Cancelar',
					onPress: () => console.log('Cancel Pressed'),
					style: 'cancel'
				},
				{
					text: 'Eliminar',
					onPress: () => {
						DeleteMulta(id)
					}
				}
			],
			{ cancelable: false }
		)
	}

	const DeleteMulta = async id => {
		setLoading(true)
		setError(null)

		try {
			await axios.delete(`http://192.168.127.124/multas/${id}`).then(res => {})
			await axios.get(`http://157.245.245.214/multas/`).then(res => {
				setMultas(res.data)
			})

			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	if (loading) {
		return (
			<SafeAreaView>
				<HeaderList
					history={history}
					titulo={'Multas'}
					textoBoton={'multa'}
					url={'añadir-multas'}
				/>
				<ScrollView style={styles.scrollArea}>
					<ActivityIndicator size="large" color="#0000ff" />
				</ScrollView>
			</SafeAreaView>
		)
	}

	if (error) {
		return (
			<SafeAreaView>
				<HeaderList
					history={history}
					titulo={'Multas'}
					textoBoton={'multa'}
					url={'añadir-multas'}
				/>
				<ScrollView style={styles.scrollArea}>
					<Text style={styles.textError}>Algo salió mal!</Text>
				</ScrollView>
			</SafeAreaView>
		)
	}

	return (
		<SafeAreaView style={{ flex: 1 }}>
			<HeaderList
				history={history}
				titulo={'Multas'}
				textoBoton={'multa'}
				url={'añadir-multas'}
			/>
			<ScrollView style={styles.scrollArea}>
				<View style={styles.contenedorPersonas}>
					{multas.map(multa => {
						return (
							<View
								key={multa.codigo}
								style={[
									styles.ItemMulta,
									styles.container_Personas,
									styles.horizontal
								]}
							>
								<View style={styles.contenedo_info_vehiculo}>
									<Text style={styles.nombrePersona}>
										Codigo: {multa.codigo}
									</Text>
									<Text style={styles.nombrePersona}>
										Persona: {multa.id_persona}
									</Text>
									<Text>Fecha: {multa.fecha}</Text>
									<Text style={styles.containerObservacion}>
										Observacion: {multa.observacion}
									</Text>
									<Text>Placa del carro: {multa.placa_carro}</Text>
									<Text style={styles.nombrePersona}>
										Total a pagar: {multa.total_pagar}
									</Text>
								</View>
								<View style={styles.contenedor_botones_persona}>
									<TouchableHighlight
										underlayColor="rgba(0,0,0,0.1)"
										style={styles.verMas}
										onPress={() => {
											history.push(`/editar-multa/${multa.codigo}`)
										}}
									>
										<Text style={styles.textVerMas}>Editar</Text>
									</TouchableHighlight>
									<TouchableHighlight
										underlayColor="rgba(0,0,0,0.1)"
										style={styles.Eliminar_persona}
										onPress={() => {
											AlertaEliminar(multa.codigo)
										}}
									>
										<Text style={styles.textVerMas}>Eliminar</Text>
									</TouchableHighlight>
								</View>
							</View>
						)
					})}
				</View>
			</ScrollView>
		</SafeAreaView>
	)
}
<file_sep>/modulos/styles.js
import { StyleSheet, Dimensions } from 'react-native'

const styles = StyleSheet.create({
	container_Home: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center'
	},
	button_Home: {
		alignItems: 'center',
		justifyContent: 'center',
		borderWidth: 2,
		borderColor: '#292b98',
		backgroundColor: 'transparent',
		borderRadius: 25,
		height: 50,
		width: 230,
		marginBottom: 20
	},
	MarcoPersona_Personas: {
		alignItems: 'center',
		justifyContent: 'center',
		borderWidth: 2,
		borderColor: '#292b98',
		backgroundColor: 'transparent',
		borderRadius: 5,
		height: 150,
		width: 350,
		marginBottom: 20
	},
	Marco: {
		alignItems: 'center',
		justifyContent: 'center',
		borderWidth: 2,
		borderColor: '#292b98',
		backgroundColor: 'transparent',
		borderRadius: 5,
		height: 70,
		width: 310,
		marginBottom: 20
	},
	scrollArea: {
		width: Dimensions.get('window').width
	},
	contenedorPersonas: {
		alignItems: 'center'
	},
	contenedorTitulo: {
		display: 'flex'
	},
	goBack: {
		width: 40
	},
	textError: {
		textAlign: 'center',
		fontSize: 20,
		color: '#FFA9A9'
	},
	container_Personas: {
		flex: 1,
		justifyContent: 'center'
	},
	horizontal: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		padding: 10
	},
	contenedor_botones_persona: {
		position: 'absolute',
		right: 15
	},
	verMas: {
		alignItems: 'center',
		justifyContent: 'center',
		height: 50,
		width: 100,
		backgroundColor: '#68B1FF',
		borderRadius: 5,
		margin: 10
	},
	Eliminar_persona: {
		alignItems: 'center',
		justifyContent: 'center',
		height: 50,
		width: 100,
		backgroundColor: '#FF8D8D',
		borderRadius: 5,
		margin: 10
	},
	textVerMas: {
		color: 'white',
		fontWeight: 'bold'
	},
	nombrePersona: {
		fontWeight: 'bold'
	},
	nombreVehiculo: {
		fontWeight: 'bold'
	},
	contenedorTop_HeaderList: {
		alignItems: 'center'
	},
	buttonAñadir: {
		alignItems: 'center',
		justifyContent: 'center',
		borderWidth: 2,
		borderColor: '#292b98',
		backgroundColor: 'transparent',
		borderRadius: 25,
		height: 50,
		width: 230,
		marginBottom: 35
	},
	text_HeaderList: {
		fontSize: 40,
		fontWeight: 'bold',
		paddingTop: 40,
		paddingBottom: 10,
		textAlign: 'center'
	},
	texto_info_vehiculos: {
		textAlign: 'center',
		marginBottom: 40
	},
	contenedo_info_vehiculo: {
		position: 'absolute',
		left: 15
	},
	inputText: {
		height: 50,
		borderColor: 'gray',
		borderWidth: 2,
		borderRadius: 5,
		marginBottom: 15,
		marginTop: 5,
		padding: 10
	},
	contenedorFormulario: {
		padding: 40,
		paddingTop: 0,
		marginTop: 20
	},
	buttonAñadirPersona: {
		borderRadius: 5,
		height: 50,
		width: 200,
		backgroundColor: '#8DFFAE',
		justifyContent: 'center',
		alignItems: 'center',
		marginTop: 15
	},
	contenedorBotonNPersona: {
		alignItems: 'center'
	},
	textoidentificacion: {
		fontWeight: 'bold',
		marginBottom: 10
	},
	containerObservacion: {
		width: 200,
		marginBottom: 10,
		marginTop: 10
	},
	ItemMulta: {
		alignItems: 'center',
		justifyContent: 'center',
		borderWidth: 2,
		borderColor: '#292b98',
		backgroundColor: 'transparent',
		borderRadius: 5,
		height: 230,
		width: 350,
		marginBottom: 20
	}
})

export default styles
<file_sep>/paginas/Personas.js
import React, { useState, useEffect } from 'react'
import {
	Text,
	TouchableHighlight,
	SafeAreaView,
	ScrollView,
	View,
	ActivityIndicator,
	Alert
} from 'react-native'
import {
	handleAndroidBackButton,
	removeAndroidBackButtonHandler
} from '../modulos/androidBackButton'
import HeaderList from '../componets/HeaderList'
import axios from 'axios'
import styles from '../modulos/styles'

export default ({ history }) => {
	const [personas, setPersonas] = useState([])
	const [loading, setLoading] = useState('')
	const [error, setError] = useState('')

	useEffect(() => {
		handleAndroidBackButton(() => history.push('/'))
		fetchData()
		return () => {
			removeAndroidBackButtonHandler()
		}
	}, [])

	const fetchData = async () => {
		setLoading(true)
		setError(null)

		try {
			await axios.get(`http://172.16.31.10/personas/`).then(res => {
				setPersonas(res.data)
			})

			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	const AlertaEliminar = id => {
		Alert.alert(
			'Eliminar',
			'¿Está seguro que desea eliminar esta persona?',
			[
				{
					text: 'Cancelar',
					onPress: () => console.log('Cancel Pressed'),
					style: 'cancel'
				},
				{
					text: 'Eliminar',
					onPress: () => {
						DeletePerson(id)
					}
				}
			],
			{ cancelable: false }
		)
	}

	const DeletePerson = async id => {
		setLoading(true)
		setError(null)

		try {
			await axios
				.delete(`http://192.168.127.124/personas/${id}`)
				.then(res => {})
			await axios.get(`http://157.245.245.214/personas/`).then(res => {
				setPersonas(res.data)
			})

			setLoading(false)
		} catch (error) {
			setError(error)
		}
	}

	if (loading) {
		return (
			<SafeAreaView>
				<HeaderList
					history={history}
					titulo={'Personas'}
					textoBoton={'Persona'}
					url={'añadir-personas'}
				/>
				<ScrollView style={styles.scrollArea}>
					<ActivityIndicator size="large" color="#0000ff" />
				</ScrollView>
			</SafeAreaView>
		)
	}
	if (error) {
		return (
			<SafeAreaView>
				<HeaderList
					history={history}
					titulo={'Personas'}
					textoBoton={'Persona'}
					url={'añadir-personas'}
				/>
				<ScrollView style={styles.scrollArea}>
					<Text style={styles.textError}>Algo salió mal!</Text>
				</ScrollView>
			</SafeAreaView>
		)
	}

	return (
		<SafeAreaView style={{ flex: 1 }}>
			<HeaderList
				history={history}
				titulo={'Personas'}
				textoBoton={'Persona'}
				url={'añadir-personas'}
			/>
			<ScrollView style={styles.scrollArea}>
				<View style={styles.contenedorPersonas}>
					{personas.map(persona => {
						return (
							<View
								key={persona.identificacion}
								style={[
									styles.MarcoPersona_Personas,
									styles.container_Personas,
									styles.horizontal
								]}
							>
								<View style={styles.contenedo_info_vehiculo}>
									<Text style={styles.nombrePersona}>{persona.nombre}</Text>
									<Text>{persona.identificacion}</Text>
									<Text>Teléfono: {persona.telefono}</Text>
									<Text>Dirección: {persona.direccion}</Text>
									<Text>Ciudad: {persona.ciudad}</Text>
								</View>
								<View style={styles.contenedor_botones_persona}>
									<TouchableHighlight
										underlayColor="rgba(0,0,0,0.1)"
										style={styles.verMas}
										onPress={() =>
											history.push(`/editar-persona/${persona.identificacion}`)
										}
									>
										<Text style={styles.textVerMas}>Editar</Text>
									</TouchableHighlight>
									<TouchableHighlight
										underlayColor="rgba(0,0,0,0.1)"
										style={styles.Eliminar_persona}
										onPress={() => {
											AlertaEliminar(persona.identificacion)
										}}
									>
										<Text style={styles.textVerMas}>Eliminar</Text>
									</TouchableHighlight>
								</View>
							</View>
						)
					})}
				</View>
			</ScrollView>
		</SafeAreaView>
	)
}
