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