React-Native CareCard
React-Native Care Card for a Mindful Eating App
This is the first of the series to make a mindful eating app using react-native and FHIR. The overall app will have a high level dashboard with what i call care cards to show the current mental and health state for patients. It will also track how frequently they practice mindful eating and can log each of their sessions. This can help to determine what is effective in improving their mental and physical wellbeing. One major aim is to make it easy for users to enter in data so that there is a large amount of data to gain meaningful insights.
For the first part of the app we will be creating the high level dashboard. This consists of a reusable reactive component we call a CareCard. This care card will have the parameter we are measuring such as Mood weight, Blood pressure, or mindful eating sessions. It will display the current value of the parameter, icon and the last date the value was updated. The care card is also the entry point to a more detailed view of the scene.
Ultimintly we will connect the data that is captured from the app to the patient’s EHR. This will allow clinicians more data that they can utilize for diagnosis or prevention.
Design of the Care Card
To design the care card we will break up the card into 4 different components. The title of the parameter 2. The Icon 3. the value 4. the date last updated.
To start our dashboard of cards we will have a container that will wrap all our components. This will include the padding on the top and bottom for our nav bars.
Lets create a basic version of our care card without any styling. All we need to do is layout the components.
The beauty of react is now that i have created a modular component i can use it reputably with the flexibility to change its contents based on the props we pass. So i can use the same cards component to create my mood weight and blood pressure cards. This way our cards are easy to create and they have a consistent layout/theme.
Creating the Basic Layout
we pass each of these props into our component and display it. For our first iteration it does not look so aesthetic, but it gives you a basic structure of the card. Finally we export default component so it can be used throughout our app.
for our first style we will create the cards. All you have to do is create a boarder with a size and weight. Then add some margin on the side so the background of the container is showing. To add some depth to the bottom of the card we can increase its thickness.
Right now the image and value are stacked on top of each other. We want them to be aligned side by side horizontally. To do this we wrap the image and text element in a view. This view will have a flex direction of row.
For the last updated section we will want to create a line separating the top part of the card.
We wrap the date text in a view that has a top boarder only.
create. A card component that you can pass props to.
Styling our Care Card
We are making a simple react care card component. Each card will have a similar layout where you can then customize the color, text and images. This makes it easier to create different care cards.
lets create a progressive styling for the cards.
our end goal is to create a react component that we can pass props and styling effects for each individual card.
