├── assets ├── icon.png ├── favicon.png ├── logo.jpeg ├── splash.png ├── text1.jpeg ├── course │ ├── eth.jpg │ ├── web.jpg │ ├── coding.jpg │ └── graphic.jpg ├── adaptive-icon.png └── thapa.svg ├── babel.config.js ├── .expo-shared └── assets.json ├── .gitignore ├── app.json ├── package.json ├── src ├── component │ └── Menu.js ├── api │ └── Courseapi.js └── screens │ ├── Home.js │ ├── Course.js │ ├── UserData.js │ ├── About.js │ ├── CourseDetails.js │ └── Contact.js └── App.js /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/reactNative/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/reactNative/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/reactNative/HEAD/assets/logo.jpeg -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/reactNative/HEAD/assets/splash.png -------------------------------------------------------------------------------- /assets/text1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/reactNative/HEAD/assets/text1.jpeg -------------------------------------------------------------------------------- /assets/course/eth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/reactNative/HEAD/assets/course/eth.jpg -------------------------------------------------------------------------------- /assets/course/web.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/reactNative/HEAD/assets/course/web.jpg -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/reactNative/HEAD/assets/adaptive-icon.png -------------------------------------------------------------------------------- /assets/course/coding.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/reactNative/HEAD/assets/course/coding.jpg -------------------------------------------------------------------------------- /assets/course/graphic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/reactNative/HEAD/assets/course/graphic.jpg -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "thapaclasses", 4 | "slug": "thapaclasses", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "android": { 23 | "adaptiveIcon": { 24 | "foregroundImage": "./assets/adaptive-icon.png", 25 | "backgroundColor": "#FFFFFF" 26 | } 27 | }, 28 | "web": { 29 | "favicon": "./assets/favicon.png" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "thapaclasses", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web", 10 | "eject": "expo eject" 11 | }, 12 | "dependencies": { 13 | "@expo-google-fonts/josefin-sans": "^0.2.2", 14 | "@expo-google-fonts/nunito": "^0.2.2", 15 | "@expo-google-fonts/work-sans": "^0.2.2", 16 | "@react-navigation/native": "^6.0.8", 17 | "@react-navigation/native-stack": "^6.5.0", 18 | "expo": "~44.0.0", 19 | "expo-app-loading": "~1.3.0", 20 | "expo-checkbox": "~2.0.0", 21 | "expo-status-bar": "~1.2.0", 22 | "react": "17.0.1", 23 | "react-dom": "17.0.1", 24 | "react-native": "0.64.3", 25 | "react-native-safe-area-context": "3.3.2", 26 | "react-native-screens": "~3.10.1", 27 | "react-native-web": "0.17.1" 28 | }, 29 | "devDependencies": { 30 | "@babel/core": "^7.12.9" 31 | }, 32 | "private": true 33 | } 34 | -------------------------------------------------------------------------------- /src/component/Menu.js: -------------------------------------------------------------------------------- 1 | import { useNavigation } from "@react-navigation/native"; 2 | import React from "react"; 3 | import { TouchableOpacity, View, StyleSheet, Text, Image } from "react-native"; 4 | 5 | const Menu = () => { 6 | const navigation = useNavigation(); 7 | return ( 8 | 9 | navigation.navigate("Course")}> 12 | {/* Course */} 13 | 19 | 20 | 21 | navigation.navigate("Student")}> 24 | 30 | 31 | 32 | navigation.navigate("About")}> 35 | 41 | 42 | 43 | navigation.navigate("Contact")}> 46 | 52 | 53 | 54 | ); 55 | }; 56 | 57 | const styles = StyleSheet.create({ 58 | menuContainer: { 59 | flexDirection: "row", 60 | justifyContent: "space-evenly", 61 | }, 62 | textStyle: { 63 | textTransform: "uppercase", 64 | }, 65 | iconStytle: { 66 | width: "100%", 67 | height: 50, 68 | aspectRatio: 1, 69 | }, 70 | }); 71 | 72 | export default Menu; 73 | -------------------------------------------------------------------------------- /src/api/Courseapi.js: -------------------------------------------------------------------------------- 1 | const Courses = [ 2 | { 3 | id: "1", 4 | title: "Web Development", 5 | image: require("../../assets/course/web.jpg"), 6 | description: 7 | "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor adipiscing elit. ", 8 | course1: "html", 9 | course2: "css", 10 | course3: "javascript", 11 | price: 5000, 12 | }, 13 | { 14 | id: "2", 15 | title: "Graphic Designing ", 16 | image: require("../../assets/course/graphic.jpg"), 17 | description: 18 | "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor adipiscing elit. ", 19 | course1: "Photoshop", 20 | course2: "Figma", 21 | course3: "Adobe XD", 22 | price: 3000, 23 | }, 24 | { 25 | id: "3", 26 | title: "Coding Fundamentals", 27 | image: require("../../assets/course/coding.jpg"), 28 | description: 29 | "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor adipiscing elit. ", 30 | course1: "JavaScript", 31 | course2: "Algorithm", 32 | course3: "Data Structure", 33 | price: 1000, 34 | }, 35 | { 36 | id: "4", 37 | title: "Ethical Hacking", 38 | image: require("../../assets/course/eth.jpg"), 39 | description: 40 | "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor adipiscing elit. ", 41 | course1: "Testing", 42 | course2: "Exploitation", 43 | course3: "Linux OS", 44 | price: 6000, 45 | }, 46 | { 47 | id: "5", 48 | title: "Web Development", 49 | image: require("../../assets/course/web.jpg"), 50 | description: 51 | "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor adipiscing elit. ", 52 | course1: "html", 53 | course2: "css", 54 | course3: "javascript", 55 | price: 5000, 56 | }, 57 | { 58 | id: "6", 59 | title: "Web Development", 60 | image: require("../../assets/course/web.jpg"), 61 | description: 62 | "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor adipiscing elit. ", 63 | course1: "html", 64 | course2: "css", 65 | course3: "javascript", 66 | price: 5000, 67 | }, 68 | ]; 69 | 70 | export default Courses; 71 | -------------------------------------------------------------------------------- /src/screens/Home.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Text, View, Image } from "react-native"; 2 | import React from "react"; 3 | import Menu from "../component/Menu"; 4 | import { useFonts, WorkSans_400Regular } from "@expo-google-fonts/work-sans"; 5 | import { Nunito_700Bold } from "@expo-google-fonts/nunito"; 6 | import AppLoading from "expo-app-loading"; 7 | 8 | const Home = (props) => { 9 | let [fontsLoaded] = useFonts({ 10 | WorkSans_400Regular, 11 | Nunito_700Bold, 12 | }); 13 | 14 | if (!fontsLoaded) { 15 | ; 16 | } 17 | const description = 18 | "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. "; 19 | 20 | return ( 21 | 22 | 23 | 28 | 29 | Welcome to 30 | 39 | {props.channelName} 40 | 41 | 42 | {description} 43 | 44 | 45 | 46 | 47 | 48 | 55 | 56 | 57 | ); 58 | }; 59 | 60 | const styles = StyleSheet.create({ 61 | mainContainer: { 62 | height: "100%", 63 | display: "flex", 64 | justifyContent: "space-between", 65 | paddingHorizontal: 20, 66 | backgroundColor: "#fff", 67 | textAlign: "center", 68 | }, 69 | 70 | homeTop: { 71 | // height: "100%", 72 | display: "flex", 73 | justifyContent: "center", 74 | alignItems: "center", 75 | paddingHorizontal: 10, 76 | }, 77 | 78 | headerImage: { 79 | height: undefined, 80 | width: "100%", 81 | aspectRatio: 1, 82 | display: "flex", 83 | alignItems: "stretch", 84 | marginTop: 50, 85 | borderRadius: 20, 86 | }, 87 | 88 | mainHeader: { 89 | fontSize: 30, 90 | color: "#344055", 91 | textTransform: "uppercase", 92 | fontFamily: "Nunito_700Bold", 93 | }, 94 | 95 | paraStyle: { 96 | textAlign: "left", 97 | fontSize: 18, 98 | color: "#7d7d7d", 99 | marginTop: 30, 100 | paddingBottom: 50, 101 | lineHeight: 27, 102 | fontFamily: "WorkSans_400Regular", 103 | }, 104 | 105 | lineStyle: { 106 | marginBottom: 10, 107 | borderWidth: 0.5, 108 | borderColor: "grey", 109 | }, 110 | }); 111 | 112 | export default Home; 113 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavigationContainer } from "@react-navigation/native"; 3 | import { createNativeStackNavigator } from "@react-navigation/native-stack"; 4 | import Home from "./src/screens/Home"; 5 | import About from "./src/screens/About"; 6 | import Contact from "./src/screens/Contact"; 7 | import Course from "./src/screens/Course"; 8 | import UserData from "./src/screens/UserData"; 9 | import CourseDetails from "./src/screens/CourseDetails"; 10 | import { useFonts, WorkSans_400Regular } from "@expo-google-fonts/work-sans"; 11 | import { Nunito_700Bold } from "@expo-google-fonts/nunito"; 12 | import AppLoading from "expo-app-loading"; 13 | 14 | export default function App() { 15 | const Stack = createNativeStackNavigator(); 16 | 17 | let [fontsLoaded] = useFonts({ 18 | WorkSans_400Regular, 19 | Nunito_700Bold, 20 | }); 21 | 22 | if (!fontsLoaded) { 23 | ; 24 | } 25 | 26 | return ( 27 | 28 | 29 | {/* home screen */} 30 | 35 | {(props) => } 36 | 37 | 38 | {/* Course Screen */} 39 | 51 | 52 | {/* UserData Screen */} 53 | 65 | 66 | {/* About Screen */} 67 | 78 | 79 | {/* Contact Screen */} 80 | 91 | 92 | {/* CourseDetails Screen */} 93 | 104 | 105 | 106 | ); 107 | } 108 | -------------------------------------------------------------------------------- /src/screens/Course.js: -------------------------------------------------------------------------------- 1 | import { 2 | FlatList, 3 | StyleSheet, 4 | Text, 5 | View, 6 | Image, 7 | Touchable, 8 | TouchableOpacity, 9 | } from "react-native"; 10 | import React from "react"; 11 | import Courses from "../api/Courseapi"; 12 | import { useFonts, WorkSans_400Regular } from "@expo-google-fonts/work-sans"; 13 | import { Nunito_700Bold } from "@expo-google-fonts/nunito"; 14 | import AppLoading from "expo-app-loading"; 15 | 16 | const Course = ({ navigation }) => { 17 | let [fontsLoaded] = useFonts({ 18 | WorkSans_400Regular, 19 | Nunito_700Bold, 20 | }); 21 | 22 | if (!fontsLoaded) { 23 | ; 24 | } 25 | 26 | const courseCard = ({ item }) => { 27 | return ( 28 | 29 | 30 | 31 | 36 | 37 | 38 | {item.title} 39 | 40 | {item.description} 41 | 42 | 43 | 46 | navigation.navigate("CourseDetails", { 47 | courseId: item.id, 48 | }) 49 | }> 50 | course Details 51 | 52 | 53 | 54 | 55 | ); 56 | }; 57 | 58 | return ( 59 | item.id} 61 | data={Courses} 62 | renderItem={courseCard} 63 | /> 64 | ); 65 | }; 66 | 67 | const styles = StyleSheet.create({ 68 | cardImage: { 69 | width: "100%", 70 | height: undefined, 71 | aspectRatio: 1, 72 | }, 73 | mainContainer: { 74 | paddingHorizontal: 20, 75 | }, 76 | courseContainer: { 77 | padding: 30, 78 | backgroundColor: "rgba(255, 255, 255, 0.90)", 79 | textAlign: "center", 80 | borderRadius: 5, 81 | shadowColor: "grey", 82 | shadowOffset: { width: 0, height: 0 }, 83 | shadowOpacity: 0.5, 84 | shadowRadius: 8, 85 | elevation: 8, 86 | marginVertical: 30, 87 | }, 88 | mainHeader: { 89 | fontSize: 22, 90 | color: "#344055", 91 | textTransform: "uppercase", 92 | // fontWeight: 500, 93 | paddingBottom: 15, 94 | textAlign: "center", 95 | fontFamily: "Nunito_700Bold", 96 | }, 97 | description: { 98 | textAlign: "left", 99 | fontFamily: "WorkSans_400Regular", 100 | paddingBottom: 15, 101 | lineHeight: 20, 102 | fontSize: 16, 103 | color: "#7d7d7d", 104 | }, 105 | buttonContainer: { 106 | display: "flex", 107 | flexDirection: "row", 108 | justifyContent: "center", 109 | }, 110 | buttonStyle: { 111 | backgroundColor: "#809fff", 112 | borderRadius: 5, 113 | paddingVertical: 10, 114 | paddingHorizontal: 20, 115 | display: "flex", 116 | justifyContent: "center", 117 | alignItems: "center", 118 | }, 119 | buttonText: { 120 | fontSize: 20, 121 | color: "#eee", 122 | fontFamily: "WorkSans_400Regular", 123 | textTransform: "capitalize", 124 | }, 125 | }); 126 | 127 | export default Course; 128 | -------------------------------------------------------------------------------- /src/screens/UserData.js: -------------------------------------------------------------------------------- 1 | import { View, Text, FlatList, StyleSheet, Image } from "react-native"; 2 | import React, { useState, useEffect } from "react"; 3 | import { useFonts, WorkSans_400Regular } from "@expo-google-fonts/work-sans"; 4 | import { Nunito_700Bold } from "@expo-google-fonts/nunito"; 5 | import AppLoading from "expo-app-loading"; 6 | 7 | const UserData = () => { 8 | let [fontsLoaded] = useFonts({ 9 | WorkSans_400Regular, 10 | Nunito_700Bold, 11 | }); 12 | 13 | if (!fontsLoaded) { 14 | ; 15 | } 16 | 17 | const [isLoaded, setIsLoaded] = useState(true); 18 | const [myData, setMyData] = useState([]); 19 | 20 | const getUserData = async () => { 21 | try { 22 | const response = await fetch( 23 | "https://thapatechnical.github.io/userapi/users.json" 24 | ); 25 | const realData = await response.json(); 26 | setMyData(realData); 27 | setIsLoaded(false); 28 | // console.log(realData); 29 | } catch (error) { 30 | console.log(error); 31 | } 32 | }; 33 | 34 | useEffect(() => getUserData(), []); 35 | 36 | // render the students cards 37 | const showUserData = ({ item }) => { 38 | return ( 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | Bio-Data 47 | 48 | {item.id < 10 ? `#0${item.id}` : `#{item.id}`} 49 | 50 | 51 | 52 | 53 | Name: {item.name} 54 | email: {item.email} 55 | mobile: {item.mobile} 56 | 57 | 58 | 59 | ); 60 | }; 61 | 62 | return ( 63 | 64 | List of Students 65 | item.id} 67 | data={myData} 68 | renderItem={showUserData} 69 | horizontal 70 | showsHorizontalScrollIndicator={false} 71 | /> 72 | 73 | ); 74 | }; 75 | 76 | const styles = StyleSheet.create({ 77 | mainContainer: { 78 | width: "100%", 79 | minHeight: "100%", 80 | paddingVertical: 50, 81 | backgroundColor: "#ebedee", 82 | }, 83 | card: { 84 | width: 250, 85 | // height: 350, 86 | backgroundColor: "#fff", 87 | borderRadius: 5, 88 | marginHorizontal: 20, 89 | }, 90 | bioDataContainer: { 91 | width: "100%", 92 | display: "flex", 93 | flexDirection: "row", 94 | alignItems: "center", 95 | justifyContent: "space-between", 96 | backgroundColor: "#353535", 97 | paddingVertical: 10, 98 | fontFamily: "WorkSans_400Regular", 99 | }, 100 | idNumber: { 101 | fontSize: 20, 102 | color: "rgba(255, 255, 255, 0.5)", 103 | fontFamily: "WorkSans_400Regular", 104 | paddingRight: 10, 105 | }, 106 | bioData: { 107 | fontSize: 30, 108 | color: "#fff", 109 | fontFamily: "WorkSans_400Regular", 110 | }, 111 | mainHeader: { 112 | fontSize: 30, 113 | color: "#a18ce5", 114 | textAlign: "center", 115 | fontFamily: "WorkSans_400Regular", 116 | paddingVertical: 50, 117 | }, 118 | imgContainer: { 119 | padding: 10, 120 | }, 121 | imgStyle: { 122 | width: "100%", 123 | height: 180, 124 | }, 125 | mainContain: { 126 | padding: 10, 127 | backgroundColor: "#353535", 128 | borderBottomLeftRadius: 5, 129 | borderBottomRightRadius: 5, 130 | paddingBottom: 20, 131 | }, 132 | myName: { 133 | fontSize: 14, 134 | color: "#fff", 135 | marginBottom: 10, 136 | alignSelf: "flex-start", 137 | textTransform: "capitalize", 138 | fontFamily: "WorkSans_400Regular", 139 | }, 140 | }); 141 | 142 | export default UserData; 143 | -------------------------------------------------------------------------------- /src/screens/About.js: -------------------------------------------------------------------------------- 1 | import { 2 | Linking, 3 | StyleSheet, 4 | Text, 5 | TouchableOpacity, 6 | View, 7 | Image, 8 | } from "react-native"; 9 | import React from "react"; 10 | import { useFonts, WorkSans_400Regular } from "@expo-google-fonts/work-sans"; 11 | import { Nunito_700Bold } from "@expo-google-fonts/nunito"; 12 | import AppLoading from "expo-app-loading"; 13 | 14 | const About = () => { 15 | let [fontsLoaded] = useFonts({ 16 | WorkSans_400Regular, 17 | Nunito_700Bold, 18 | }); 19 | 20 | if (!fontsLoaded) { 21 | ; 22 | } 23 | 24 | return ( 25 | 26 | Vinod bahadur thapa 27 | I am a full stack developer 😀 28 | 29 | 30 | 36 | 37 | 38 | 39 | About me 40 | 41 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean 42 | commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer 43 | adipiscing elit. Aenean commodo ligula eget dolor. 44 | 45 | 46 | 47 | Follow me on Social Network 48 | 49 | 50 | 53 | Linking.openURL("https://www.instagram.com/thapatechnical/") 54 | }> 55 | 61 | 62 | 63 | 66 | Linking.openURL( 67 | "https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA" 68 | ) 69 | }> 70 | 76 | 77 | 78 | Linking.openURL("https://discord.gg/AN8ThRBXtY")}> 81 | 87 | 88 | 89 | 90 | ); 91 | }; 92 | 93 | const styles = StyleSheet.create({ 94 | aboutContainer: { 95 | display: "flex", 96 | alignItems: "center", 97 | }, 98 | 99 | imgStyle: { 100 | width: 150, 101 | height: 150, 102 | borderRadius: 100, 103 | }, 104 | mainHeader: { 105 | fontSize: 18, 106 | color: "#344055", 107 | textTransform: "uppercase", 108 | fontWeight: "500", 109 | // marginTop: 50, 110 | marginTop: 40, 111 | marginBottom: 10, 112 | fontFamily: "Nunito_700Bold", 113 | }, 114 | paraStyle: { 115 | fontSize: 18, 116 | color: "#7d7d7d", 117 | paddingBottom: 30, 118 | fontFamily: "WorkSans_400Regular", 119 | }, 120 | aboutLayout: { 121 | backgroundColor: "#4c5dab", 122 | paddingHorizontal: 30, 123 | // marginVertical: 30, 124 | marginTop: 20, 125 | }, 126 | aboutSubHeader: { 127 | fontSize: 18, 128 | color: "#fff", 129 | textTransform: "uppercase", 130 | fontWeight: "500", 131 | marginVertical: 15, 132 | fontFamily: "Nunito_700Bold", 133 | alignSelf: "center", 134 | }, 135 | aboutPara: { 136 | color: "#fff", 137 | fontSize: 18, 138 | fontFamily: "WorkSans_400Regular", 139 | lineHeight: 26, 140 | }, 141 | menuContainer: { 142 | width: "100%", 143 | flexDirection: "row", 144 | justifyContent: "space-evenly", 145 | }, 146 | 147 | iconStyle: { 148 | width: "100%", 149 | height: 50, 150 | aspectRatio: 1, 151 | }, 152 | }); 153 | 154 | export default About; 155 | -------------------------------------------------------------------------------- /src/screens/CourseDetails.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native"; 2 | import React from "react"; 3 | import Courses from "../api/Courseapi"; 4 | import { useFonts, WorkSans_400Regular } from "@expo-google-fonts/work-sans"; 5 | import { Nunito_700Bold } from "@expo-google-fonts/nunito"; 6 | import AppLoading from "expo-app-loading"; 7 | 8 | const CourseDetails = ({ navigation, route }) => { 9 | let [fontsLoaded] = useFonts({ 10 | WorkSans_400Regular, 11 | Nunito_700Bold, 12 | }); 13 | 14 | if (!fontsLoaded) { 15 | ; 16 | } 17 | 18 | const id = route.params.courseId; 19 | console.log(id); 20 | 21 | const selectedCourse = Courses.find((element) => { 22 | return id === element.id; 23 | }); 24 | 25 | return ( 26 | 27 | 28 | 29 | 34 | 35 | 36 | {selectedCourse.title} 37 | 38 | {selectedCourse.description} 39 | 40 | 41 | {selectedCourse.course1} 42 | 43 | 44 | 45 | {selectedCourse.course2} 46 | 47 | 48 | 49 | {selectedCourse.course3} 50 | 51 | 52 | 53 | {selectedCourse.price} 54 | navigation.navigate("Course")}> 57 | Join Now 58 | 59 | 60 | 61 | 62 | ); 63 | }; 64 | 65 | // !todo style the course1 and make it uppercase 66 | 67 | const styles = StyleSheet.create({ 68 | mainContainer: { 69 | // backgroundColor: "red", 70 | paddingHorizontal: 20, 71 | }, 72 | courseContainer: { 73 | // height: "50%", 74 | // display: "flex", 75 | padding: 30, 76 | backgroundColor: "rgba(255, 255, 255, 0.90)", 77 | textAlign: "center", 78 | borderRadius: 5, 79 | shadowColor: "grey", 80 | shadowOffset: { width: 0, height: 0 }, 81 | shadowOpacity: 0.5, 82 | shadowRadius: 8, 83 | elevation: 8, 84 | marginVertical: 30, 85 | }, 86 | 87 | cardImage: { 88 | width: "100%", 89 | display: "flex", 90 | alignSelf: "center", 91 | height: undefined, 92 | aspectRatio: 1, 93 | }, 94 | 95 | mainHeader: { 96 | fontSize: 22, 97 | color: "#344055", 98 | textTransform: "uppercase", 99 | fontWeight: "500", 100 | paddingTop: 10, 101 | paddingBottom: 15, 102 | fontFamily: "Nunito_700Bold", 103 | textAlign: "center", 104 | }, 105 | 106 | subHeader: { 107 | fontSize: 18, 108 | color: "#344055", 109 | textTransform: "uppercase", 110 | fontWeight: "500", 111 | paddingBottom: 15, 112 | fontFamily: "WorkSans_400Regular", 113 | textAlign: "center", 114 | }, 115 | 116 | description: { 117 | textAlign: "center", 118 | fontSize: 16, 119 | color: "#7d7d7d", 120 | paddingBottom: 20, 121 | fontFamily: "WorkSans_400Regular", 122 | lineHeight: 20, 123 | }, 124 | subCourse: { 125 | textTransform: "uppercase", 126 | color: "#344055", 127 | }, 128 | 129 | buttonContainer: { 130 | display: "flex", 131 | flexDirection: "row", 132 | justifyContent: "center", 133 | }, 134 | 135 | price: { 136 | backgroundColor: "#344055", 137 | color: "#eee", 138 | paddingVertical: 10, 139 | paddingHorizontal: 15, 140 | display: "flex", 141 | justifyContent: "center", 142 | alignItems: "center", 143 | borderBottomLeftRadius: 1, 144 | borderTopLeftRadius: 1, 145 | fontSize: 20, 146 | fontFamily: "WorkSans_400Regular", 147 | textAlign: "center", 148 | }, 149 | buttonStyle: { 150 | backgroundColor: "#809fff", 151 | borderBottomRightRadius: 5, 152 | borderTopRightRadius: 5, 153 | paddingVertical: 10, 154 | paddingHorizontal: 18, 155 | display: "flex", 156 | justifyContent: "center", 157 | alignItems: "center", 158 | }, 159 | buttonText: { 160 | fontSize: 20, 161 | color: "#eee", 162 | fontFamily: "WorkSans_400Regular", 163 | }, 164 | }); 165 | 166 | export default CourseDetails; 167 | -------------------------------------------------------------------------------- /src/screens/Contact.js: -------------------------------------------------------------------------------- 1 | import { 2 | StyleSheet, 3 | Text, 4 | View, 5 | TextInput, 6 | TouchableOpacity, 7 | Alert, 8 | } from "react-native"; 9 | import React, { useState } from "react"; 10 | import Checkbox from "expo-checkbox"; 11 | import { useFonts, WorkSans_400Regular } from "@expo-google-fonts/work-sans"; 12 | import { Nunito_700Bold } from "@expo-google-fonts/nunito"; 13 | import AppLoading from "expo-app-loading"; 14 | 15 | const Contact = ({ navigation }) => { 16 | let [fontsLoaded] = useFonts({ 17 | WorkSans_400Regular, 18 | Nunito_700Bold, 19 | }); 20 | 21 | if (!fontsLoaded) { 22 | ; 23 | } 24 | 25 | const [name, setName] = useState(""); 26 | const [email, setEmail] = useState(""); 27 | const [phone, setPhone] = useState(""); 28 | const [message, setMessage] = useState(""); 29 | const [agree, setAgree] = useState(false); 30 | 31 | const submit = () => { 32 | if (!name && !email && !phone && !message) { 33 | Alert.alert("Plzz fill all the fields"); 34 | } else { 35 | Alert.alert(`Thank You ${name}`); 36 | navigation.navigate("Home"); 37 | } 38 | }; 39 | 40 | return ( 41 | 42 | Level up your knowledge 43 | 44 | 45 | You can reach us anytime via thapa@vinod.com 46 | 47 | 48 | 49 | Enter your name 50 | setName(userdata)} 55 | /> 56 | 57 | 58 | 59 | Enter your Email 60 | setEmail(email)} 65 | /> 66 | 67 | 68 | 69 | Enter your mobile 70 | setPhone(phone)} 75 | /> 76 | 77 | 78 | 79 | How can we help you? 80 | setMessage(msg)} 85 | numberOfLines={5} 86 | multiline={true} 87 | /> 88 | 89 | 90 | {/* checkbox */} 91 | 92 | 93 | setAgree(!agree)} 96 | color={agree ? "#4630EB" : undefined} 97 | /> 98 | 99 | I have read and agreed with the TC 100 | 101 | 102 | 103 | {/* submit button */} 104 | 105 | 114 | Contact Us 115 | 116 | 117 | ); 118 | }; 119 | 120 | const styles = StyleSheet.create({ 121 | mainContainer: { 122 | height: "100%", 123 | paddingHorizontal: 30, 124 | backgroundColor: "#fff", 125 | }, 126 | mainHeader: { 127 | fontSize: 24, 128 | color: "#344055", 129 | fontWeight: "500", 130 | paddingTop: 20, 131 | paddingBottom: 15, 132 | fontFamily: "Nunito_700Bold", 133 | textTransform: "capitalize", 134 | }, 135 | description: { 136 | fontSize: 18, 137 | color: "#7d7d7d", 138 | paddingBottom: 20, 139 | fontFamily: "WorkSans_400Regular", 140 | lineHeight: 25, 141 | }, 142 | 143 | inputContainer: { 144 | marginTop: 20, 145 | }, 146 | labels: { 147 | // fontWeight: "bold", 148 | fontSize: 15, 149 | color: "#7d7d7d", 150 | paddingBottom: 5, 151 | fontFamily: "WorkSans_400Regular", 152 | lineHeight: 25, 153 | }, 154 | inputStyle: { 155 | borderWidth: 1, 156 | borderColor: "rgba(0, 0, 0, 0.3)", 157 | paddingHorizontal: 15, 158 | paddingVertical: 6, 159 | borderRadius: 2, 160 | }, 161 | multiineStyle: { 162 | paddingVertical: 4, 163 | }, 164 | buttonStyle: { 165 | borderRadius: 5, 166 | paddingVertical: 10, 167 | paddingHorizontal: 18, 168 | display: "flex", 169 | justifyContent: "center", 170 | alignItems: "center", 171 | marginVertical: 30, 172 | }, 173 | buttonText: { 174 | color: "#eee", 175 | }, 176 | wrapper: { 177 | display: "flex", 178 | flexDirection: "row", 179 | marginTop: 20, 180 | fontFamily: "WorkSans_400Regular", 181 | }, 182 | wrapperText: { 183 | marginLeft: 10, 184 | color: "#7d7d7d", 185 | fontFamily: "WorkSans_400Regular", 186 | }, 187 | }); 188 | 189 | export default Contact; 190 | -------------------------------------------------------------------------------- /assets/thapa.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------