Medico - Doctor Appointment Booking App React Node v1.0.0

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: jjtec7@gmail.com

---

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​

cd project-folder
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:

export const COLORS = {
primary: '#3498db',
secondary: '#2ecc71',
};

Editing Fonts​

Edit src/utils/Fonts.js for font-related customizations:

export const FONTS = {
regular: 'Roboto-Regular',
bold: 'Roboto-Bold',
};

5. Key Features​

• Medico
• Time Management
• Localization Support
• Offline Mode

6. API Integration​

import axios from 'axios';

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 jjtec7@gmail.com.

Thank you for using this template!