Medico - Doctor Appointment Booking App React NodeMedico - Doctor Appointment Booking App React Node
Medico - Doctor Appointment Booking & Healthcare React Native CLI App Ui KitMedico - Doctor Appointment Booking App React Node
Medico - Doctor Appointment Booking & Healthcare React Native CLI App Ui KitOverview
Medico
Medico is a React Native app template designed. This application streamlines Employee processes, providing features for managing employee data, attendance tracking, payroll, and more. It is easy to install, use, and customize.
Features
- Designed with React Native
- Ready to use
- Clean, understandable code
- Easy integration
- Separate files for each page & component
- Side menu navigation
- Bottom menu & tabs
- Modal support
- light/dark Theme
- Customizable color folder
- Input field & switch components
- Icons & images
- Dropdown menus
- Beautiful login, register & OTP screens
- Country code selection
- Home, profile, and search screens
- Favorites and rating system
- Notification system
- Language selection
- Logout functionality
What You Get
- Medico
- Full Source Code
- Documentation
- Free Version Upgrades
Requirements
Prerequisites
- Node.js(version 20.17.0 or higher)
- npm (version 10.9.2 or higher)
- React Native CLI
Instructions
Medico App Template Documentation
Created:Dec 2024
Email: [email protected]
Table of Contents
- 1. Introduction
- 2. Setup and Installation
- 3. Project Folder Structure
- 4. Customization Guide
- 5. Key Features
- 6. API Integration
- 7. Troubleshooting and FAQs
- 8. Themes (Light and Dark)
- 9. Fonts
- 10. Images
- 11. Language Files
- 12. Buttons Component
- 13. Support
1. Introduction
This React Native template is designed for Medico. It ensures seamless performance Android platforms.
2. Setup and Installation
Prerequisites
- Node.js(version 20.17.0 or higher)
- npm (version 10.9.2 or higher)
- React Native CLI
Installation Steps
npm install
npx react-native link
npm start
npx react-native run-android # For Android
3. Project Folder Structure
src/ ├── components/ │ ├── commonComponents/ │ ├── FlatListRender/ ├── image/ ├── images/ ├── Language/ ├── redux/ ├── routes/ ├── screens/ ├── styles/ ├── utils/ ├── Color.js ├── Colors.js ├── dimensions.js ├── Fonts.js
4. Customization Guide
Changing Colors
Edit src/utils/Color.js
or Colors.js
to update the color palette:
primary: '#3498db',
secondary: '#2ecc71',
};
Editing Fonts
Edit src/utils/Fonts.js
for font-related customizations:
regular: 'Roboto-Regular',
bold: 'Roboto-Bold',
};
5. Key Features
- Medico
- Time Management
- Localization Support
- Offline Mode
6. API Integration
const API = axios.create({
baseURL: 'https://api.example.com',
});
export default API;
7. Troubleshooting and FAQs
The app doesn’t build
- Ensure dependencies are installed:
npm install
- Clear the cache:
npm start --reset-cache
8. Themes (Light and Dark)
Below are the constants for light and dark themes:
Light Theme
export const lightTheme = { theme_background: '#4b4eeb', Light_theme_background: "#4b4eeb19", bottomTab: "#F8F7FB", // ... More color definitions ... };
Dark Theme
export const darkTheme = { theme_background: '#4b4eeb', Light_theme_background: "#4b4eeb19", bottomTab: "#1b1c1c", // ... More color definitions ... };
9. Fonts
The following fonts are used in the project:
const Fonts = { Poppins_Regular: 'Poppins-Regular', Poppins_Medium: 'Poppins-Medium', Poppins_Bold: 'Poppins-Bold', Poppins_Italic: 'Poppins-Italic', Poppins_MediumItalic: 'Poppins-MediumItalic', Poppins_BoldItalic: 'Poppins-BoldItalic', }; export default Fonts;
10. Images
These images are required and imported for use in the project:
const images = { App_logo: require('./hundred.png'), Image_1: require('./hundred.png'), Image_2: require('./hundred.png'), // ... Other images ... }; export default images;
11. Language Files
The following language files are used:
export { default as Fr } from './Fr.json'; export { default as Spa } from './Spa.json'; export { default as ara } from './ara.json'; export { default as en } from './en.json';
12. Buttons Component
This reusable Buttons
component is implemented as follows:
import React, { useMemo } from 'react'; import { TouchableOpacity, StyleSheet, Platform } from 'react-native'; import { Fonts, Colors, darkTheme, lightTheme } from '../../utils'; import { Button } from '@rneui/themed'; import { useSelector } from 'react-redux'; function Buttons(props) { const isDarkMode = useSelector(state => state.DarkReducer.isDarkMode); const Colors = isDarkMode ? darkTheme : lightTheme; const { title, onPress, buttonStyle, buttonTextStyle, icon } = props; const styles = useMemo(() => StyleSheet.create({ buttonStyle: { backgroundColor: Colors.theme_background, borderRadius: 8, width: '100%', }, buttonTextStyle: { color: Colors.white_color, fontFamily: Fonts.Poppins_Medium, fontSize: 17, // Assuming SF(17) }, }), [Colors]); return ( ); } export default Buttons;
Props:
title
: The text displayed on the button.onPress
: Function to handle button press.buttonStyle
: Custom styles for the button.buttonTextStyle
: Custom styles for the text inside the button.icon
: Icon displayed inside the button.
13. Support
If you have questions, please email [email protected].
Thank you for using this template!
Other items by this author
Category | App Templates / React |
First release | 29 December 2024 |
Last update | 29 December 2024 |
Operating Systems | Android 9.0, Android 10.0, Android 11.0, Android 12.0 |
Files included | .swf/.flv, .h, .m, .apk, .java, .xml, Javascript .js |
Tags | pharmacy app, health app, medicine app, doctor consultation app, medical app, clinic app, health news app, healthcare app, medico, online doctor appointment app, online doctor appointment booking app, online doctor consultation app, react native cli doctor appointment booking app, react native doctor consultation app |