Inicio

import React, { useState } from 'react';

import { View, Text, TouchableOpacity, Image, StyleSheet, ScrollView,
Linking } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';
import CalendarioScreen from './CalendarioScreen';
import RegistroScreen from './RegistroScreen';
import InformacionScreen from './InformacionScreen';
import LaboratorioScreen from './LaboratorioScreen';

// Estilos
const colors = {
primary: '#85b7e9',
secondary: '#6C757D',
background: '#F8F9FA',
black: '#000',
white: '#FFF',
};

const styles = StyleSheet.create({

container: {
flex: 1,
backgroundColor: '#A3CEEF',
padding: 20,
},
header: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 20,
},
logo: {
width: 50,
height: 50,
borderRadius: 25,
},
headerText: {
fontSize: 24,
fontWeight: 'bold',
marginLeft: 10,
backgroundColor: '#A3CEEF',
},
headText: {
fontSize: 24,
 fontWeight: 'bold',
marginLeft: 10,
backgroundColor: '#A3CEEF',
},

servicesContainer: {
marginBottom: 40,
},
sectionTitle: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 10,
padding: 20,

},
serviceItem: {
marginBottom: 20,
backgroundColor: 'white',
padding: 20,
borderRadius: 10,
},
serviceImage: {
width: 50,
height: 50,
marginBottom: 10,
alignSelf: 'center',
},
serviceTitle: {
fontSize: 18,
fontWeight: 'bold',
},
serviceDescription: {
fontSize: 16,
marginBottom: 10,
},
serviceButton: {
backgroundColor: colors.primary,
padding: 10,
borderRadius: 5,
alignSelf: 'flex-end',
},
serviceButtonText: {
color: 'white',
fontWeight: 'bold',
},
infoBoxContainer: {
backgroundColor: colors.primary,
borderRadius: 20,
padding: 20,
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 999,
alignItems: 'center',
justifyContent: 'center',
},
infoBoxTitle: {
fontSize: 24,
fontWeight: 'bold',
color: colors.white,
marginBottom: 10,
},
infoBoxText: {
fontSize: 18,
color: colors.white,
textAlign: 'center',
},
closeButton: {
marginTop: 15,
padding: 10,
backgroundColor: colors.secondary,
borderRadius: 10,
},
closeButtonText: {
color: colors.white,
fontWeight: 'bold',
},
bottomContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
paddingVertical: 20,
},
icon: {
fontSize: 40,
color: colors.primary,
},
 additionalContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 20,
marginTop: 20,
},
additionalItem: {
alignItems: 'center',
},
additionalImage: {
width: 80,
height: 80,
borderRadius: 40,
marginBottom: 5,
marginHorizontal: 5,
},
additionalTitle: {
fontWeight: 'bold',
},
});

// Pantalla de inicio
function APPLabo() {
const [servicesData] = useState([
{
id: 1,
title: 'Medicina General',
description: 'Atención integral a adultos y niños.',
imageUrl: 'https://cdn-icons-png.flaticon.com/128/12193/12193821.png',
},
{
id: 2,
title: 'Odontólogos',
description: 'Servicios dentales profesionales para todas las
edades.',
imageUrl: 'https://cdn-icons-png.flaticon.com/128/10346/10346932.png',
},
{
id: 3,
title: 'Consulta con especialistas',
description: 'Consultas expertas con médicos especialistas.',
imageUrl: 'https://cdn-icons-png.flaticon.com/128/10299/10299211.png',
},
]);
 const Tab = createBottomTabNavigator();

return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
activeTintColor: '#85b7e9',
inactiveTintColor: '#6C757D',
}}
>
<Tab.Screen
name="Inicio"
component={InicioScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri:
'https://cdn-icons-gif.flaticon.com/8121/8121334.gif' }}
style={{ width: 30, height: 30 }}
/>
),
}}
/>
<Tab.Screen
name="Servicio Medicos"
component={CalendarioScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri:
'https://cdn-icons-gif.flaticon.com/6416/6416392.gif' }}
style={{ width: 30, height: 30 }}
/>
),
}}
/>
<Tab.Screen
name="Iniciar Sesion"
component={RegistroScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri:
'https://cdn-icons-gif.flaticon.com/8121/8121295.gif' }}
style={{ width: 30, height: 30 }}
 />
),
}}
/>
<Tab.Screen
name="Especialista"
component={InformacionScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri:
'https://cdn-icons-gif.flaticon.com/6569/6569161.gif' }}
style={{ width: 30, height: 30 }}
/>
),
}}
/>
<Tab.Screen
name="Historial"
component={LaboratorioScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri:
'https://cdn-icons-gif.flaticon.com/6172/6172541.gif' }}
style={{ width: 30, height: 30 }}
/>
),
}}
/>

{/* Agrega aquí otras pantallas si es necesario */}

</Tab.Navigator>
</NavigationContainer>
);

function InicioScreen({ navigation }) {

const [showInfoBox, setShowInfoBox] = useState(false);
const [selectedService, setSelectedService] = useState(null);

const showServiceInfo = (service) => {

setSelectedService(service);
setShowInfoBox(true);
};
 const closeInfoBox = () => {
setShowInfoBox(false);
};

const goToCallPage = () => {

Linking.openURL('tel:+1234567890');
};

const goToEmailPage = () => {

Linking.openURL('mailto:[email protected]');
};

return (
<ScrollView style={styles.container}>
{/* Header */}
<View style={styles.header}>
<Image
source={{ uri: 'your-logo-url' }}
style={styles.logo}
/>
<Text style={[styles.headerText, { color: 'white' }]}>Centro
Médico</Text>

</View>
{/* Additional Circles with Images and Titles */}

<Text style={[styles.headerText, { color: 'white' }]}>Cuidados</Text>

<View style={styles.additionalContainer}>
<View style={styles.additionalItem}>
<Image
source={{ uri:
'https://th.bing.com/th/id/OIP.zLbyLh3xRMoSDZlSleQEDgAAAA?
w=177&h=180&c=7&r=0&o=5&cb=11&pid=1.7' }}
style={styles.additionalImage}
/>
<Text style={[styles.additionalTitle, { color: 'white' }]}>Title
1</Text>
</View>
<View style={styles.additionalItem}>
<Image
source={{ uri:
'https://enfermeriaactual.com/wp-content/uploads/2023/04/Prevencion-de-
Enfermedads.jpg' }}
style={styles.additionalImage}
 />
<Text style={[styles.additionalTitle, { color: 'white' }]}>Title
2</Text>
</View>
<View style={styles.additionalItem}>
<Image
source={{ uri: 'https://th.bing.com/th/id/OIP.0Lk3-
RX7ntI4WPyJXMqB2AHaHg?w=155&h=180&c=7&r=0&o=5&cb=11&pid=1.7' }}
style={styles.additionalImage}
/>
<Text style={[styles.additionalTitle, { color: 'white' }]}>Title
3</Text>
</View>
</View>

{/* Services */}

<View style={styles.servicesContainer}>
<Text style={[styles.sectionTitle, { color: 'white' }]}>NUESTROS
SERVICIOS</Text>

{servicesData.map((service) => (
<TouchableOpacity key={service.id} style={styles.serviceItem}
onPress={() => showServiceInfo(service)}>
<Image
source={{ uri: service.imageUrl }}
style={styles.serviceImage}
/>
<Text style={styles.serviceTitle}>{service.title}</Text>
<Text
style={styles.serviceDescription}>{service.description}</Text>
<TouchableOpacity style={styles.serviceButton} onPress={() =>
showServiceInfo(service)}>
<Text style={styles.serviceButtonText}>Informacion</Text>
</TouchableOpacity>
</TouchableOpacity>
))}
</View>

{/* Info Box */}

{showInfoBox && (
<View style={styles.infoBoxContainer}>
<Image
source={{ uri: selectedService.imageUrl }}
style={{ width: 100, height: 100, marginBottom: 10 }}
 />
<Text style={styles.infoBoxTitle}>{selectedService.title}</Text>
<Text
style={styles.infoBoxText}>{selectedService.description}</Text>
<TouchableOpacity style={styles.closeButton}
onPress={closeInfoBox}>
<Text style={styles.closeButtonText}>Close</Text>
</TouchableOpacity>
</View>
)}

{/* Bottom Icons */}

<View style={styles.bottomContainer}>
<TouchableOpacity onPress={goToCallPage}>
<Icon name="phone" style={styles.icon} />
</TouchableOpacity>
<TouchableOpacity onPress={goToEmailPage}>
<Icon name="envelope" style={styles.icon} />
</TouchableOpacity>
</View>
</ScrollView>
);
}
}

export default APPLabo;

Cita
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Image, StyleSheet, ScrollView,
TextInput, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const styles22 = StyleSheet.create({

container: {
flex: 1,
backgroundColor: '#3498db',
},
topBox: {
backgroundColor: '#fff',
padding: 10,
},
topContent: {
 flexDirection: 'column',
alignItems: 'center',
},
topImage: {
width: 80, // Ajustar el tamaño de la imagen
height: 80, // Ajustar el tamaño de la imagen
},
topText: {
alignItems: 'center',
color: '#333',
fontSize: 24, // Ajustar el tamaño del texto
fontWeight: 'bold',
marginBottom: 10, // Reducir el espacio inferior
},
scrollViewContainer: {
flexGrow: 1,
paddingBottom: 60,
},
scrollView: {
backgroundColor: '#3498db',
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 20,
color: '#fff',
},
gridContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
},
categoryButton: {
width: '45%',
flexDirection: 'column',
alignItems: 'center',
backgroundColor: '#fff',
paddingVertical: 10, // Reducir el espacio vertical
paddingHorizontal: 15, // Reducir el espacio horizontal
margin: '2.5%',
borderRadius: 20,
borderWidth: 1,
borderColor: '#ccc',
elevation: 2,
},
categoryImage: {
width: 40, // Ajustar el tamaño de la imagen
height: 40, // Ajustar el tamaño de la imagen
marginBottom: 5, // Reducir el espacio inferior
},
categoryName: {
fontSize: 14, // Ajustar el tamaño del texto
fontWeight: 'bold',
color: '#333',
},
formContainer: {
backgroundColor: '#fff',
paddingHorizontal: 20,
paddingVertical: 20, // Reducir el espacio vertical
margin: 20,
borderRadius: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
formFields: {
flex: 1,
marginLeft: 10, // Reducir el espacio izquierdo
alignItems: 'center',
},
input: {
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 10,
padding: 10, // Reducir el espacio interior
marginBottom: 10, // Reducir el espacio inferior
width: '100%',
},
confirmationText: {
fontSize: 16, // Ajustar el tamaño del texto
fontWeight: 'bold',
textAlign: 'center',
marginTop: 10,
color: 'green',
},
formImage: {
width: 80, // Ajustar el tamaño de la imagen
height: 80, // Ajustar el tamaño de la imagen
marginRight: 10, // Reducir el espacio derecho
},
});

function CalendarioScreen() {
const navigation = useNavigation();
const [selectedCategory, setSelectedCategory] = useState(null);
const [formData, setFormData] = useState({
name: '',
email: '',
phoneNumber: '',
message: '',
});
const [confirmationMessage, setConfirmationMessage] = useState('');

useEffect(() => {
if (confirmationMessage) {
setTimeout(() => {
setConfirmationMessage('');
setSelectedCategory(null);
}, 3000); // Cerrar el mensaje de confirmación después de 3 segundos
}
}, [confirmationMessage]);

const categories = [
{ id: 1, name: 'Medicina General', image: { uri: 'https://cdn.icon-
icons.com/icons2/1749/PNG/96/18_113669.png' } },
{ id: 2, name: 'Pediatría', image: { uri:
'https://th.bing.com/th/id/OIP.JHUw7cBT_vwGRYs8RE97LQHaHa?
rs=1&pid=ImgDetMain' } },
{ id: 3, name: 'Dentista', image: { uri:
'https://cdn.icon-icons.com/icons2/944/PNG/96/medical-24_icon-
icons.com_73920.png' } },
{ id: 4, name: 'Dermatología', image: { uri: 'https://cdn-icons-
png.flaticon.com/128/6025/6025105.png' } },
{ id: 5, name: 'Oftalmología', image: { uri: 'https://cdn-icons-
png.flaticon.com/128/2857/2857950.png' } },
{ id: 6, name: 'Consulta', image: { uri:
'https://cdn.icon-icons.com/icons2/831/PNG/96/medical_icon_stethoscope_icon-
icons.com_66663.png' } },
{ id: 5, name: 'Laboratorio clínico ', image: { uri: 'https://cdn-icons-
png.flaticon.com/128/6976/6976273.png' } },
{ id: 6, name: 'Cardiología', image: { uri: 'https://cdn.icon-
icons.com/icons2/944/PNG/96/medical-08_icon-icons.com_73945.png' } },
{ id: 5, name: 'Psicologo', image: { uri: 'https://cdn-icons-
png.flaticon.com/128/4525/4525519.png' } },
 { id: 6, name: 'Ortopedia', image: { uri: 'https://cdn-icons-
png.flaticon.com/128/9340/9340043.png' } },
];

const handleCategorySelect = (category) => {

setSelectedCategory(category);
};

const handleFormSubmit = () => {

// Handle form submission here, e.g., send data to server
console.log(formData);
// Clear form fields after submission
setFormData({
name: '',
email: '',
phoneNumber: '',
message: '',
});
// Show confirmation message
setConfirmationMessage('¡Cita agendada con éxito!');
};

return (
<View style={styles22.container}>
<View style={styles22.topBox}>
<View style={styles22.topContent}>
<Image
source={{ uri:
'https://th.bing.com/th/id/OIP.igRNQL_w48lKs47obKClOwHaHa?
pid=ImgDet&w=201&h=201&c=7' }}
style={styles22.topImage}
/>
<Text style={styles22.topText}>Consultas Medicas</Text>
</View>
</View>
<Text style={styles22.title}>Selecciona una Especialidad:</Text>
<ScrollView
contentContainerStyle={styles22.scrollViewContainer}
style={styles22.scrollView}
>
<View style={styles22.gridContainer}>
{categories.map((category) => (
<TouchableOpacity
key={category.id}
style={styles22.categoryButton}
 onPress={() => handleCategorySelect(category)}
>
<Image
source={category.image}
style={styles22.categoryImage}
/>
<Text style={styles22
.categoryName}>
{category.name}
</Text>
</TouchableOpacity>
))}
</View>
</ScrollView>

{/* Form */}

{selectedCategory && (
<View style={styles22.formContainer}>
<View style={styles22.formFields}>
<Image
source={selectedCategory.image}
style={styles22.formImage}
/>
<Text style={{ fontSize: 16, marginBottom: 5 }}>
Complete el formulario para la especialidad:
{selectedCategory.name}
</Text>
<TextInput
style={styles22.input}
placeholder="Nombre"
value={formData.name}
onChangeText={(text) => setFormData({ ...formData, name:
text })}
/>
<TextInput
style={styles22.input}
placeholder="Hora"
value={formData.email}
onChangeText={(text) => setFormData({ ...formData, email: text
})}
/>
<TextInput
style={styles22.input}
placeholder="Fecha"
value={formData.phoneNumber}
 onChangeText={(text) => setFormData({ ...formData,
phoneNumber: text })}
/>
<TextInput
style={[styles22.input, { height: 80 }]}
placeholder="Motivo"
multiline
value={formData.message}
onChangeText={(text) => setFormData({ ...formData, message:
text })}
/>
<Button title="Enviar" onPress={handleFormSubmit} />
{/* Mensaje de confirmación */}
{confirmationMessage !== '' && (
<Text
style={styles22.confirmationText}>{confirmationMessage}</Text>
)}
</View>
</View>
)}
</View>
);
}

export default CalendarioScreen;

Registro
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, Image, StyleSheet } from
'react-native';
import { useNavigation } from '@react-navigation/native'; // Importa
useNavigation
// Asegúrate de que 'PaginaNueva' esté definido en tus rutas de navegación

function RegistroScreen() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const navigation = useNavigation(); // Obtén la función de navegación

const defaultUser = {
email: '[email protected]',
 password: '123',
};

const handleLogin = () => {

console.log('Iniciando sesión con:', { email, password });
if (email === defaultUser.email && password === defaultUser.password) {
console.log('Inicio de sesión exitoso como usuario predeterminado');
navigation.navigate('Inicio');
} else {
console.log('Credenciales incorrectas');
}
};

const handleGoToRegister = () => {

navigation.navigate('PaginaNueva'); // Cambia 'PaginaNueva' al nombre
correcto de tu página nueva
};

return (
<View style={styles.container}>
<Text style={styles.title}>Inicio de Sesión</Text>
<Image
source={{
uri: 'https://th.bing.com/th/id/OIP.2DzLB3PVM-Zp7jv1lOa_QgHaF7?
w=225&h=180&c=7&r=0&o=5&cb=11&pid=1.7',
}}
style={styles.logo}
/>
<TextInput
style={styles.input}
placeholder="Correo electrónico"
keyboardType="email-address"
placeholderTextColor="#999"
value={email}
onChangeText={setEmail}
/>
<TextInput
style={styles.input}
placeholder="Contraseña"
secureTextEntry
placeholderTextColor="#999"
value={password}
onChangeText={setPassword}
/>
<TouchableOpacity style={styles.button} onPress={handleLogin}>
 <Text style={styles.buttonText}>Iniciar Sesión</Text>
</TouchableOpacity>
<TouchableOpacity onPress={handleGoToRegister}>
<Text style={styles.registerText}></Text>
</TouchableOpacity>
</View>
);
}

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffff',
},
title: {
fontSize: 28,
fontWeight: 'bold',
marginBottom: 30,
color: '#333',
},
input: {
height: 50,
width: '80%',
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 8,
paddingHorizontal: 15,
marginBottom: 20,
fontSize: 16,
color: '#333',
},
button: {
backgroundColor: '#85b7e9',
paddingVertical: 15,
paddingHorizontal: 30,
borderRadius: 8,
marginBottom: 20,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
 },
registerText: {
fontSize: 16,
color: '#666',
textDecorationLine: 'underline', // Agregado para que se vea como un
enlace
},
logo: {
width: 300,
height: 300,
marginBottom: 20,
},
});

export default RegistroScreen;

Especialista
import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, Image, TouchableOpacity,
StyleSheet, SafeAreaView } from 'react-native';

const InformacionScreen = ({ navigation }) => {

const [searchText, setSearchText] = useState('');
const [selectedDoctor, setSelectedDoctor] = useState(null);
const [rating, setRating] = useState(null);
const [filteredDoctors, setFilteredDoctors] = useState([]);

const medications = [
{ id: 1, name: 'Dr. Hiromi Hernandez', image:
'https://th.bing.com/th/id/OIP.Hr64V0wGFl9eIcLewy3zYQHaE7?
w=259&h=180&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Cardiología\
nExperiencia: 10 años\nUbicación: Hospital Central', phone: '123-456-
7890' },
{ id: 2, name: 'Dr. Manuel Mendoza', image:
'https://th.bing.com/th/id/OIP.jswifnaRgWnkl5Yv_WJwoAHaE8?
w=260&h=188&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Pediatría\
nExperiencia: 8 años\nUbicación: Centro Médico ABC', phone: '456-789-
0123' },
{ id: 3, name: 'Dr. Silvia Garcia', image:
'https://th.bing.com/th/id/OIP.PM9z0KtPLua5c6k0HFSfEQHaJY?
w=145&h=183&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Ginecología\
nExperiencia: 12 años\nUbicación: Hospital Universitario', phone: '789-012-
3456' },
{ id: 4, name: 'Dr. David Méndez', image:
'https://th.bing.com/th/id/OIP.kmyIEPMSiCKD8RhAS60C6AHaFb?
w=246&h=181&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Cirugía General\
nExperiencia: 15 años\nUbicación: Hospital Metropolitano', phone: '012-345-
6789' },
{ id: 5, name: 'Dr. Wiliam Piñero', image:
'https://th.bing.com/th/id/OIP.vLCaIp6TvzOHhp6A3HgNvAHaEQ?
w=283&h=180&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Psiquiatría\
nExperiencia: 7 años\nUbicación: Clínica del Este', phone: '345-678-9012' },
{ id: 6, name: 'Dr. Romina Avila', image:
'https://th.bing.com/th/id/OIP.bX7sJjV0-DZkiurvXiSY4AHaFd?
w=217&h=185&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Dermatología\
nExperiencia: 9 años\nUbicación: Centro Médico San Francisco', phone: '678-
901-2345' },
{ id: 7, name: 'Dr. Sebastian Torres', image:
'https://th.bing.com/th/id/OIP.s3mQLGK7nHMzwrv3BNgQTAHaEl?
w=283&h=180&c=7&r=0&o=5&pid=1.7', info: 'Especialidad: Oftalmología\
nExperiencia: 11 años\nUbicación: Clínica Oftalmológica Avanzada', phone:
'901-234-5678' },
];

const handleSearch = (text) => {

setSearchText(text);
const filtered = medications.filter((doctor) =>
doctor.name.toLowerCase().includes(text.toLowerCase())
);
setFilteredDoctors(filtered);
};

const handleDoctorDetail = (doctor) => {

setSelectedDoctor(doctor);
// Resetear la calificación cuando se selecciona un nuevo médico
setRating(null);
};

const handlePositiveRating = () => {

setRating('positive');
};

const handleNegativeRating = () => {

setRating('negative');
};
 const renderItem = ({ item }) => (
<TouchableOpacity onPress={() => handleDoctorDetail(item)}>
<View style={styles.itemContainer}>
<Image source={{ uri: item.image }} style={styles.itemImage} />
<Text style={styles.itemText}>{item.name}</Text>
</View>
</TouchableOpacity>
);

return (
<SafeAreaView style={styles.safeAreaContainer}>
<View style={styles.container}>
<View style={styles.headerContainer}>
<Text style={styles.headerText}>Doctores</Text>
</View>

<View style={styles.searchContainer}>
<TextInput
style={styles.input}
placeholder="Buscar médico..."
onChangeText={(text) => handleSearch(text)}
/>
<Button title="Buscar" onPress={() => {}} />
</View>

<FlatList
data={searchText ? filteredDoctors : medications}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>

{selectedDoctor && (
<View style={styles.doctorDetailContainer}>
<Image source={{ uri: selectedDoctor.image }}
style={styles.doctorDetailImage} />
<Text
style={styles.doctorDetailText}>{selectedDoctor.name}</Text>
<Text style={styles.doctorInfoText}>{selectedDoctor.info}</Text>
<Text style={styles.doctorPhoneText}>Teléfono:
{selectedDoctor.phone}</Text>
<Text style={styles.ratingText}>¿Cómo calificarías a este
médico?</Text>
<View style={styles.ratingContainer}>
{/* Estilo personalizado para los botones de calificación */}
 <TouchableOpacity style={styles.positiveButton}
onPress={handlePositiveRating}>

<Text style={styles.buttonText}>🙂 Feliz</Text>

</TouchableOpacity>
<TouchableOpacity style={styles.negativeButton}
onPress={handleNegativeRating}>

<Text style={styles.buttonText}> Descontento</Text>

</TouchableOpacity>
</View>
{/* Mostrar mensaje de calificación */}
{rating && (
<Text style={styles.ratingMessage}>
Gracias por tu
calificación {rating === 'positive' ? 'positiva' : 'negativa'}.
</Text>
)}
</View>
)}
{/* Botón de regreso */}
<Button title="Regresar" onPress={() => setSelectedDoctor(null)} />
</View>
</SafeAreaView>
);
};

const styles = StyleSheet.create({

safeAreaContainer: {
flex: 1,
backgroundColor: '#fff',
},
container: {
flex: 1,
backgroundColor: '#fff',
},
headerContainer: {
backgroundColor: '#fff',
padding: 20,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
alignItems: 'center',
},
headerText: {
fontSize: 18,
fontWeight: 'bold',
color: '#333',
},
searchContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 16,
marginTop: 10,
},
input: {
flex: 1,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 8,
paddingHorizontal: 10,
marginRight: 10,
},
flatList: {
flex: 1,
marginTop: 16,
},
itemContainer: {
backgroundColor: '#fff',
borderRadius: 8,
padding: 16,
marginHorizontal: 16,
marginBottom: 16,
flexDirection: 'row',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
elevation: 5,
},
itemImage: {
width: 50,
height: 50,
borderRadius: 25,
marginRight: 16,
},
itemText: {
fontSize: 16,
color: '#333',
},
doctorDetailContainer: {
alignItems: 'center',
marginTop: 20,
},
doctorDetailImage: {
width: 100,
height: 100,
borderRadius: 50,
},
doctorDetailText: {
fontSize: 20,
fontWeight: 'bold',
marginTop: 10,
},
doctorInfoText: {
fontSize: 16,
marginTop: 10,
textAlign: 'center',
paddingHorizontal: 20,
},
doctorPhoneText: {
fontSize: 16,
marginTop: 10,
fontWeight: 'bold',
},
ratingText: {
fontSize: 16,
fontWeight: 'bold',
marginTop: 20,
},
ratingContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
width: '80%',
marginTop: 10,
},
// Estilos personalizados para los botones de calificación
positiveButton: {
backgroundColor: '#4CAF50', // Color verde
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 8,
},
negativeButton: {
backgroundColor: '#FF5733', // Color naranja
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 8,
},
buttonText: {
color: '#fff', // Texto blanco
fontWeight: 'bold',
fontSize: 16,
},
ratingMessage: {
fontSize: 16,
marginTop: 10,
color: '#333',
},
});

export default InformacionScreen;

Historial
import React from 'react';
import { View, Text, FlatList, ImageBackground, StyleSheet } from 'react-
native';

function LaboratorioScreen({ navigation }) {

const appointments = [
{ id: '1', doctorName: 'Dr. Smith', date: '2022-03-10', time: '10:30 AM'
},
{ id: '2', doctorName: 'Dr. Johnson', date: '2022-03-15', time: '02:00
PM' },
// Agregar más datos de citas según sea necesario
];

const renderItem = ({ item }) => (

<View style={styles.listItem}>
<View style={styles.citaContainer}>
<Text style={styles.doctorName}>{item.doctorName}</Text>
<Text style={styles.dateText}>{`${item.date} a las $
{item.time}`}</Text>
</View>
</View>
);
 return (
<ImageBackground
source={{
uri: 'https://example.com/path-to-your-image.jpg',
}}
style={styles.backgroundImage}
>
<View style={styles.container}>
<Text style={styles.title}>Historial de Citas Médicas</Text>
<FlatList
data={appointments}
keyExtractor={(item) => item.id}
renderItem={renderItem}
contentContainerStyle={styles.flatListContainer}
/>
</View>
</ImageBackground>
);
}

const styles = StyleSheet.create({

container: {
flex: 1,
backgroundColor: '#3E77B6',
padding: 20,
borderRadius: 15,
margin: 20,
},
title: {
fontSize: 28,
fontWeight: 'bold',
textAlign: 'center',
marginBottom: 20,
color: '#FFF',
},
backgroundImage: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
flatListContainer: {
paddingBottom: 20,
},
listItem: {
backgroundColor: 'transparent',
 borderRadius: 15,
marginBottom: 15,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.27,
shadowRadius: 4.65,
elevation: 6,
},
citaContainer: {
backgroundColor: 'rgba(255, 255, 255, 0.9)',
borderRadius: 15,
padding: 20,
},
doctorName: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 8,
color: '#333',
},
dateText: {
fontSize: 18,
color: '#6C757D',
},
});

export default LaboratorioScreen;