@praktice/navigator-react-native-sdk
v0.1.0
Published
This package helps a React Native App to enable a component that can take user input in medical terms and navigate to the right specialist(s)
Downloads
3
Readme
Praktice-Navigator React-nativeSDK
- New Features
- Prefetch API request now also support unmount of SDK
- Improvised showDocBtn Component API for better User experience.
Minimum required version of react 16.3.x
To use navigator SDK you must have ClientID.
In case you do not have a client ID, please write to [email protected]
Table of contents
- Importing SDK and rendering host component
- Getting started with
$Generator
- Prefetch API Reuqest
- Available Props to Navigator
- SDK Native Component layout
- Rendering Custom components in SDK
Importing SDK and rendering host component
import { NavigatorSDK } from 'praktice-navigator-react-native-sdk'
export default class App extends React.Component {
render() {
return (
<NavigatorSDK
clientId = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
/>
)}
}
This will load SDK with all default UI Component, but can also pass your own component to SDK and render it.
Getting started with $Generator
$Generator
is required for accessing the dynamic data and methods of SDK, and it can be imported like
import ${Generator} from 'praktice-navigator-react-native-sdk'
every time you invoke $Generator
you have to pass request object to generate data from it
Format of requestObject
{
type: "categoryTitle"
component: Button
componentProps: [
{style: {fontWeight: "bold"}}, //React native style only
"fullWidth" //Custom props
]
}
| key |data type |description |
| ---- | -------- | ---------- |
| type | string, required | Unique for every component, see in component section |
| component | class, optional | Data will be wrapped in this component, if it is null then data will be render in it's native component |
|componentProps | array, optional |props to the above component, array can only contain either string or object|
|dataInProp| string optional| If you component require data to be pass a prop then set the value of dataInProp
equal to required prop name|
|payload | object/string, optional| Parameter for $Generator
method|
Example of genrating Symptoms list
var requestObject = {
type: "categoryList",
component:Button,
componentProps: [
{style: {fontWeight: "bold"}},
"fullWidth",
"bordered"
]
}
const ListData = $Generator(requestObject) // return the UI element List
Example of dataInProp
react-native
Button require data in title
prop so if you wish to use these type of component which require data in prop then, you can request the $Generator
in this manner
var requestObject = {
type: "categoryList",
component:Button,
componentProps: [
{style: {fontWeight: "bold"}},
"fullWidth",
"bordered"
],
dataInProp: 'title'
}
Getting started with PrefetchAPIReuqest
PrefetchAPIReuqest
is function which can be called in background during splashscreen, to reduce the time of first category render.
return-type: Boolean
PrefetchAPIReuqest({ clientId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" })
.then(console.log)
Available props to Navigator
Passing Custom component to NavigatorSDK component
List of Component can be passed to NavigatorSDK
|Component (type)| Status | Description | | - | - | - | |searchComponent|working|symptoms search box| | categoryComponent | working | component in which all symptoms are render | |selectedSymptomsComponent|working|component which render user selected symptoms| |patientInfoQueryComponent|working |component which collect user data, like age and gender |
|showDocBtn|working | this will replace the native "Search Doctors" button, you can use$Generator
in this component to obtain the end result | | errorComponent | working | this component get render when there is an error on backend side | |loader|working|this will replace the native loader component|
<NavigatorSDK
clientId = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
searchComponent={CustomSearchInputComponent}
categoryComponent={CategoryComponent}
selectedSymptomsComponent={CustomSelectedSymptomsComponent}
patientInfoQueryComponent={PatientInfoQuery}
showDocBtn={CustomShowDocBtn}
errorComponent={ErrorComponent}loader={CustomLoaderComponent}
/>
Import Autocomplete
Autocomplete can be imported and rendered by the $Generator
const AutoComplete = $Generator({type:"autoComplete"})
<AutoComplete
query={this.state.inputvalue}
onSelect={(e) => {this.setState({inputvalue: e})}}
containerStyle={...}
listStyle={...}
/>
|props|type|description| |-|-|-| |query|string, required| value of input| |onSelect| func, required| this callback function will fire when the user will select any suggestion from autocomplete, developer are advised to use this callback to set the value of input| |containerStyle|Object, optional| These styles will be applied to the container which surrounds the autocomplete component.| |listStyle|Object, optional|These style will be applied to the result list.
Custom Styling of SDK Component
Currently four component support custom styling to the SDK component, but before you proceed to this step, developer's are advised to see the component layout.
|Component|Prop name|Available keys fro style object, all keys are optional | |-|-|-| |Category Component|categoryComponentStyle| containerStylewrapperStylecategoryTitleWrapperStylecategoryTitleTextStylesymptomsWrapperStylesymptomTextStyle| |Search Component|searchComponentStyle|containerStylewrapperStylegreetingTextStyletextInputStyleiconWrapperStyleiconStyleautoCompleteContainerStyleautoCompleteListStyle| |Selected Symptoms |selectedSymptomsComponentStyle|containerStylewrapperStyletext1Styletext2StyleselectedSymptomsWrapperStylesymptomBtnStylesymptomsTextStylecrossStyle| |Patient Info Query Component|patientInfoQueryComponentStyle|containerStylewrapperStylepatientInfoTitleStyleageSliderStyleageTextStyleinfoText1StyleinfoText2imageWrapperStyleimageStyleimageStyleSelectedboyImageInbase64girlImageInbase64submitWrapperStylesubmitTextStyle
<NavigatorSDK
clientId = ""
errorComponent={ErrorComponent}
patientInfoQueryComponent={PacientInfoQuery}
showDocBtn={CustomShowDocBtn}
loader={CustomLoaderComponent}
// Custom Style Object to tune the native component style.
categoryComponentStyle={customCategoryComponentStyle}
searchComponentStyle={customInputComponetStyle}
/>
const customCategoryComponentStyle = {
containerStyle: {
backgroundColor: '#efefef',
padding: 10,
},
wrapperStyle: {
borderRadius: 10,
borderWidth: 2,
borderColor: '#d6d7da',
padding:10,
},
categoryTitleTextStyle: {
marginTop: -25,
fontSize: 14,
paddingBottom:10,
},
symptomsWrapperStyle: {
display: 'block',
},
categoryTitleWrapperStyle:{
display: 'flex',
flexDirection: 'row'
},
}
Your style object must comply with the rules of react-native style object
For example : you can not pass color
key to View
element.
Nature of each element is described in the Component layout.
Utility Props
|Props Key | data type| description|
|-|-|-|
|patientGender| string female
or male
| If this prop is passed to navigator sdk then, SDK will never ask for the patient gender from the user, it will use the provided value when needed.
|patientAge|int|If this prop is passed to navigator sdk then, SDK will never ask for the patient age from the user, it will use the provided value when needed.
|maximumNumberOfCategories| int| This limits the number of Category to be render.
|maximumTermsPerCategories|int| This is limit the numbder of terms/symptoms in one category.
Custom Listner for Seacrh Doctors
In some cases, where the related symptoms won't exist (example - treatment like a Muscle Biopsy or condition like Non Hodgkin's Lympoma, SDK would directly invoke the listener if the listner is passed as a prop. Otherwise, in such cases, where no related symptoms exist, SDK would not render any medical terms in the category component.
<NavigatorSDK
clientId = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
searchDoctorlistner={this.customListner}
>
customListner(resultData){
console.log("Hmm... no more option ..time to navigate to", resultData)
}
Rendering Custom components in SDK
Search Component
type: searchComponent
This component is fully customizable does not require any dynamic data to render, but one
$Generator
method to submit the user input back to sdk. After the submission, SDK will perform NLP on the received text and will update the selected symptoms list and category list.$Generator({type: 'inputSearch',payload: "I have a leg pain"}) // payload data type : string // return type: boolean
Category Component
type: categoryComponent
Component Layout
Dynamic data available for this component
| Data (type) |return type | provides | | ----- | ---------- | ---------| | categoryTitle | single UI element | Category Title, example: Comman Health Prombelm, Bone & Joint problems | | categoryList | List of UI Element | Symptoms List, example: Leg pain, Stress |
Getting Dynamic data
const CategoryTitle = $Generator({ type: "categoryTitle", component: Text, componentProps: [{ style: { fontWeight: "bold" } }] }); const Symptoms = $Generator({ type: "categoryList", component:Button, componentProps: [ {style: {fontWeight: "bold"}}, "fullWidth", "bordered" ] }) //Rendering the data //below whole class component is repetitive section as represented in image export class CategoryComponent extends React.Component{ render(){ return( <View> <CategoryTitle/> <SymptomsList/> </View> )} }
Selected Symptoms Component
type: selectedSymptomsComponent
This component render the selected symptoms by the user. It has to render one dynamic data, which can be obtain from the
$Generator
const SelectedList = $Generator({ type: 'selectedSymptoms', component: Button, dataInProp: "title", componentProps: [{ style: { fontWeight: 'bold' } }] }); //return type: boolean
Patient Info Query Component
type: patientInfoQueryComponent
You can design this component entire on yourself, and for submitting the data you need to call the
$Generator
with payloadDynamic Method
Format for payload and calling a
$Generator
$Generator({ type: 'submitPatientInfo', payload: { gender: this.state.gender, age: this.state.age }, }); //payload data type: object //return type: boolean
Show Doctors Button
type: showDocBtn
This component will replace the native button of Show Doctor in SDK, this component does not require any dynamic data to be render but has one method to obtain the result in json format from SDK.
This component will receive one props
isSymptomSelected
to indicate whether any symptoms selected or not, to disable the show doctor button.
If the user initiatesshowSpeciality
request without selecting any symptoms, SDK will return the default Speciality (depending on clientId).
therefore it is recommended to use theisSymptomsSelected
props to disable or active the show doctor button.Developer is responsible to navigate further on the basis of result. SDK will not navigate further, and loader component will continue.
This
$Generator
method returns promise, on resolve it will return the result objectRequest Type
$Generator({type:"showSpeciality"}).then( (resultObject) => { console.log(resultObject) })
Result Object Format
{ "specialists": [ { "specialist": "internal medicine specialist", "speciality": "internal medicine", "percentage": 68, }, { "specialist": "general physician", "speciality": "general medicine", "percentage": 31 } ] }
Error Component
type: errorComponent
This component does not require any dynamic data or method from SDK, it will render on screen if any error logs up either on front-end side or on the back-end side
currently there is no provision of detecting the error type, but in future it will have an error code and error message for developer
Loader Component
type:loader
This Component does not require any dynamic data or method from SDK, it will replace the native loader of SDK.