Add detail doctor screen

App/Components/Styles/TopDoctorStyle.js

@@ -56,7 +56,8 @@ export default connect({
  infoDot: [
  "small-dot",
  "bg-muted",
- "mx-2"
+ "mx-2",
+ "rounded-full"
  ],
  totalReview: [
  "text-xxs",

App/Components/TopDoctor.js

@@ -22,7 +22,10 @@ const topDoctor = props => {
  </View>
  )}
  renderItem={({ item, index }) => (
- <TouchableOpacity activeOpacity={0.9} style={styles.card}>
+ <TouchableOpacity
+ activeOpacity={0.9}
+ style={styles.card}
+ onPress={() => NavigationService.navigate("DoctorDetail", {data:item})}>
  <Image source={item.thumb} style={styles.thumb} />
 
  <View style={apply("flex")}>

App/Containers/DoctorDetailScreen.js

@@ -0,0 +1,114 @@
+import React, { Component } from 'react'
+import {
+ StatusBar,
+ SafeAreaView,
+ ScrollView,
+ Text,
+ View,
+ ImageBackground,
+ TouchableOpacity,
+ TouchableNativeFeedback
+} from 'react-native'
+import { connect } from 'react-redux'
+
+import {
+ IconBack,
+ IconBookmark,
+ IconChat
+} from '../Themes/Svg'
+
+// Styles
+import styles from './Styles/DoctorDetailScreenStyle'
+import { Images } from '../Themes'
+import { apply } from '../Themes/Osmicsx'
+import { colors } from 'osmicsx'
+
+class DoctorDetailScreen extends Component {
+ constructor (props) {
+ super(props)
+
+ this.state = {
+
+ }
+ }
+
+ render () {
+ return (
+ <SafeAreaView style={apply(["flex", "bg-white"])}>
+ <StatusBar translucent={true} backgroundColor="transparent" barStyle="dark-content" />
+
+ <ScrollView style={apply("flex")} contentContainerStyle={apply("pb-7")}>
+ <ImageBackground source={Images.detailDoctor} style={styles.imgHeader}>
+ <View style={styles.imgHeaderRow}>
+ <TouchableOpacity activeOpacity={1} onPress={() => this.props.navigation.goBack()}>
+ <IconBack width={30} height={30} />
+ </TouchableOpacity>
+
+ <TouchableOpacity activeOpacity={1}>
+ <IconBookmark width={30} height={30} />
+ </TouchableOpacity>
+ </View>
+ </ImageBackground>
+
+ <View style={styles.content}>
+ <Text style={styles.name}>dr. Gilang Segara Bening</Text>
+ <View style={styles.infoWrapper}>
+ <Text style={styles.info}>Heart</Text>
+ <View style={styles.infoDot} />
+ <Text style={styles.info}>Persahabatan Hospital</Text>
+ </View>
+
+ <Text style={styles.contentText}>dr. Gilang is one of the best doctors in the Persahabatan Hospital. He has saved more than 1000 patients in the past 3 years. He has also received many awards from domestic and abroad as the best doctors. He is available on a private or schedule.</Text>
+
+ <View style={styles.spec}>
+ <View style={styles.specCol}>
+ <Text style={styles.specTitle}>Experience</Text>
+ <Text style={styles.specContent}>3 <Text style={styles.specHelper}>yr</Text></Text>
+ </View>
+
+ <View style={styles.specCol}>
+ <Text style={styles.specTitle}>Patient</Text>
+ <Text style={styles.specContent}>1221 <Text style={styles.specHelper}>ps</Text></Text>
+ </View>
+
+ <View style={[styles.specCol, apply("border-r-0")]}>
+ <Text style={styles.specTitle}>Rating</Text>
+ <Text style={styles.specContent}>5.0</Text>
+ </View>
+ </View>
+ </View>
+ </ScrollView>
+
+ <View style={styles.footer}>
+ <TouchableNativeFeedback
+ onPress={() => alert("hello!")}
+ background={TouchableNativeFeedback.Ripple("rgba(255,255,255, 0.25)")}>
+ <View style={styles.btnChat}>
+ <IconChat />
+ </View>
+ </TouchableNativeFeedback>
+
+ <TouchableNativeFeedback
+ onPress={() => alert("hello!")}
+ background={TouchableNativeFeedback.Ripple("rgba(255,255,255, 0.25)")}>
+ <View style={styles.btnAppointment}>
+ <Text style={styles.btnFooterLabel}>Make an Appointment</Text>
+ </View>
+ </TouchableNativeFeedback>
+ </View>
+ </SafeAreaView>
+ )
+ }
+}
+
+const mapStateToProps = (state) => {
+ return {
+ }
+}
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DoctorDetailScreen)

App/Containers/Styles/DoctorDetailScreenStyle.js

@@ -0,0 +1,114 @@
+import { connect } from '../../Themes/Osmicsx'
+
+export default connect({
+ imgHeader: [
+ "full",
+ "h-s80",
+ "pt-10"
+ ],
+ imgHeaderRow: [
+ "full",
+ "row",
+ "px-10",
+ "items-center",
+ "justify-between"
+ ],
+ content: [
+ "p-5",
+ "pt-7"
+ ],
+ name: [
+ "text-dark",
+ "font-bold",
+ "text-3xl",
+ "mb-3"
+ ],
+ infoWrapper: [
+ "full",
+ "row",
+ "items-center",
+ "mb-5"
+ ],
+ info: [
+ "text-gray-dark",
+ "font-regular",
+ "font-sm"
+ ],
+ infoDot: [
+ "medium-dot",
+ "bg-muted",
+ "mx-2",
+ "rounded-full"
+ ],
+ contentText: [
+ "text-regular",
+ "text-sm",
+ "text-dark",
+ "flex-wrap",
+ "leading-6"
+ ],
+ spec: [
+ "flex",
+ "row",
+ "items-center",
+ "justify-center",
+ "py-6"
+ ],
+ specCol: [
+ "items-center",
+ "border-r",
+ "border-muted",
+ "px-7"
+ ],
+ specTitle: [
+ "font-bold",
+ "text-dark",
+ "text-base",
+ "text-center",
+ "mb-5"
+ ],
+ specContent: [
+ "font-regular",
+ "text-blue-native",
+ "text-2xl"
+ ],
+ specHelper: [
+ "font-regular",
+ "text-muted",
+ "text-sm"
+ ],
+ footer: [
+ "shadow-lg",
+ "full",
+ "absolute",
+ "row",
+ "items-center",
+ "justify-between",
+ "bottom-0",
+ "z-20",
+ "p-5"
+ ],
+ btnChat: [
+ "bg-blue-native",
+ "w-56",
+ "h-56",
+ "items-center",
+ "justify-center",
+ "rounded-lg",
+ "mr-4"
+ ],
+ btnAppointment: [
+ "bg-green-native",
+ "flex",
+ "h-56",
+ "items-center",
+ "justify-center",
+ "rounded-lg"
+ ],
+ btnFooterLabel: [
+ "text-sm",
+ "text-white",
+ "font-regular",
+ "text-center"
+ ]
+})

App/Navigation/AppNavigation.js

@@ -6,9 +6,15 @@ import styles from './Styles/NavigationStyles'
 
 import SplashScreen from '../Containers/SplashScreen'
 
-import AccountScreen from '../Containers/AccountScreen'
-import InboxScreen from '../Containers/InboxScreen'
+// home stack
 import HomeScreen from '../Containers/HomeScreen'
+import DoctorDetailScreen from '../Containers/DoctorDetailScreen'
+
+// inbox stack
+import InboxScreen from '../Containers/InboxScreen'
+
+// account stack
+import AccountScreen from '../Containers/AccountScreen'
 
 // Manifest of possible screens
 const AppStack = createStackNavigator({
@@ -21,6 +27,7 @@ const AppStack = createStackNavigator({
 
  // Home Stack
  HomeScreen: { screen: HomeScreen },
+ DoctorDetail: { screen: DoctorDetailScreen },
 
  // Inbox Stack
  InboxScreen: { screen: InboxScreen },

App/Themes/Images.js

@@ -3,6 +3,7 @@ const images = {
  thumbDoctor1: require('../Images/thumb-doctor1.jpg'),
  thumbDoctor2: require('../Images/thumb-doctor2.jpg'),
  thumbDoctor3: require('../Images/thumb-doctor3.jpg'),
+ detailDoctor: require('../Images/detail-doctor.jpg')
 }
 
 export default images

App/Themes/Namespace.js

@@ -1,4 +1,4 @@
-import { scaleWidth } from 'osmicsx'
+import { scaleHeight, scaleWidth } from 'osmicsx'
 import { Platform } from 'react-native'
 
 export default {
@@ -50,6 +50,7 @@ export default {
 
  "bg-muted": { backgroundColor: "#CACCCF" },
  "text-muted": { color: "#CACCCF" },
+ "border-muted": { borderColor: "#CACCCF" },
 
  "bg-background": { backgroundColor: "#F6F6F6" },
  "text-gray-dark": { color: "#A0A4A8" },
@@ -65,12 +66,17 @@ export default {
  "w-88": { width: 88 },
  "h-80": { height: 80 },
  "h-24": { height: 24 },
+ "h-s80": { height: scaleHeight(80) },
  "min-w-38": { width: scaleWidth(38) },
 
  // top right bottom left
  "-top-3": { top: scaleWidth(-3) },
  "-left-3": { left: scaleWidth(Platform.OS == "android" ? 5 : 2) },
 
  // etc
- "small-dot": { width: 3, height: 3 }
+ "small-dot": { width: 3, height: 3 },
+ "medium-dot": { width: 5, height: 5 },
+
+ "border-r": { borderRightWidth: 1 },
+ "border-r-0": { borderRightWidth: 0 }
 }

App/Themes/Svg.js

@@ -1,4 +1,7 @@
 import IconSearchSvg from '../Images/icon-search.svg'
+import IconBackSvg from '../Images/icon-back.svg'
+import IconBookmarkSvg from '../Images/icon-bookmark.svg'
+import IconChatSvg from '../Images/icon-chat.svg'
 
 // Category Home
 import IconBandageSvg from '../Images/icon-bandage.svg'
@@ -14,6 +17,9 @@ import IconTeethSvg from '../Images/icon-teeth.svg'
 import IconStar5Svg from '../Images/icon-star5.svg'
 
 export const IconSearch = IconSearchSvg
+export const IconBack = IconBackSvg
+export const IconBookmark = IconBookmarkSvg
+export const IconChat = IconChatSvg
 
 // Category Home
 export const IconBandage = IconBandageSvg