Describe the bug
Markdown syntax (#, lists, etc) has formatting issues, resulting in visible modifiers.

To Reproduce
Steps to reproduce the behavior:

1. https://github.com/BekahHW/postpartum-wellness-app/blob/master/CONTRIBUTING.md

Expected behavior
Syntax modifiers such as # should not be visible, and instead format the text.

-For when data is loading, display an affirmation.

• In the screens folder, create a file called LoadingAffirmation.js
• copy the code from HomeScreen.js
• Update HomeScreen to use LoadingAffirmation
• Delete buttons and navigationOptions
• Update Postpartum Wellness text to "I am a powerhouse; I am indestructible."

For later update: Here are some good affirmations for faked data: https://www.huffpost.com/entry/affirmations_b_3527028.

Is your feature request related to a problem? Please describe.

Prettier is a code formatting tool that is quite mature and stable now. It is a tool that is used quite frequently in frontend projects.

Describe the solution you'd like

Add the prettier package and any eslint related plugins for prettier. This issues relies on issue #44 being implemented.

• Prettier and the eslint configuration for prettier packages need to be installed in the project. Run yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-universe
• The eslint configuration will need to be created. To do this, create a .eslintrc.js file in the root of the project and add the following code into it and save the file.

module.exports = {
  extends: 'universe',
};

Note: 'universe' is an eslint configuration for expo projects. It contains all the rules required for prettier eslint rules and eslint rules for React.

• A prettier configuration file needs to be created. Create a file called .prettierrc.json (two "R"s at the end) and add the following to the file.

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

• The lint-staged configuration will need to be updated in the package.json file. Change

"lint-staged": {
  "*.{js,ts,tsx}": [
    "jest --findRelatedTests"
  ]
}

to

"lint-staged": {
  "*.{js,ts,tsx}": [
    "prettier --write",
    "eslint --fix",
    "jest --findRelatedTests"
  ],
  "*.json": [
    "prettier --write"
  ],
  "*.md": [
    "prettier --write --prose-wrap always"
  ]
}

The new configuration will format JavaScript, TypeScript, JSON and Markdown files using prettier when code is being committed to the repository. ESLint will also run on JavaScript and TypeScript files.

Describe alternatives you've considered

N/A

Additional context

• eslint-config-universe
• Prettier Configuration File documentation.

Is your feature request related to a problem? Please describe.
It is now standard practice to use main instead of master for branch naming.

Describe the solution you'd like
I would like the name to be changed to main.

Describe alternatives you've considered
I suppose you could name it anything you want (primary, frank, pineapple) but the least confusing choice would be main.

Additional context
https://github.com/github/renaming

Is your feature request related to a problem? Please describe.
User feedback says that resources are super important here. Because there will likely be more resources than I anticipated, we'll need to handle those in a different way.

Describe the solution you'd like
I'm thinking--but open to feedback-- that initially there are some clear click links for immediate help:

• SAMHSA
• PSI -Postpartum Support International
• National Suicide Hotline

And below that there are resource cards that when clicked, open to a set of links. Ideas for the cards:

• Postpartum Mental Health Issues (descriptions, how to seek help, how to talk about it)
• Family Support

I thought about a carousel, but I don't like that they'd have to swipe to find what they need.

We're already using React Native Paper, so this might be one option: https://callstack.github.io/react-native-paper/card.html
An onPress function could change the state to open or something, and then the resources will pop up. I'm not sure how that will work with layout, but I'll look into that.

Might be useful: https://blog.bitsrc.io/demystifying-flexbox-in-react-native-4b62979fa9ea

Steps

• imports: import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
  import { StyleSheet, TouchableOpacity, View, ScrollView } from 'react-native';
• The card will take a title and subtitle, and maybe a paragraph. There's also an option for a card cover image, but I'm thinking maybe the styling will either be solid colors or something that blends in like a background.
  -We'll need to add Touchable Opacity to enable the onPress to work
  -We'll also need to add [ScrollView](https://reactnative.dev/docs/scrollview) to allow the user to scroll on the screen if our cards exceed the visible screen.

It will look something like this
`<Card style={styles.surface} onPress={() => console.log("cc")}

<Card.Title title="Postpartum Mood Disorders" subtitle="Fact, guidelines"  />
<Card.Content>
  <Paragraph>Resources on how to help moms and identify postpartum mood disorders</Paragraph>
</Card.Content>
<Card.Cover source={{ uri: 'https://picsum.photos/600' }} />

`

In this first pass, we'll worry most about getting the cards in place. Right now I don't know if when you click them it will take you to a new Screen or if we set state [open, setIsOpen] and when you press the card, it add the resources to the cards. If the latter is the case, we'll also need to import useState from react.

Describe the bug
The app won't load bc of an issue with the home screen export

To Reproduce
Steps to reproduce the behavior:
load the project
see the error

How to fix the issue

• Exporting HomeScreen.tsx as a default export removes the error and allows the user to run the app.

Screenshots

Desktop (please complete the following information):

• OS: big sur
• Browser chrome

.

Describe the bug!
In navigation/index.tsx AffirmationScreen is imported from "../screens/AffirmationScreen" which doesn't exist. Screen is instead named LoadingAffirmation, which makes the link invalid.

To Reproduce
Steps to reproduce the behavior:

1. Run Yarn start
2. Run IOS simulator on metro bundler
3. See error

Expected behavior
Affirmation page should render the affirmation data inputed in affirmationScreen

Screenshots

Desktop (please complete the following information):
N/A

Smartphone (please complete the following information):

• Iphone 11 simulator
• iOS 14.5

Additional context
Add any other context about the problem here.

Everything has been installed and there is currently one test (screens > __tests__ > homescreen.js) using (and failing) with RNTL

Docs

https://callstack.github.io/react-native-testing-library/docs/getting-started

To see the failing test run yarn test

Is your feature request related to a problem? Please describe.
At present, most stylistic values are defined on a screen-by-screen basis in the StyleSheet.create() function. There are also some colors declared in a Colors.ts file. It feels difficult to ensure consistency between screens with this setup.

Describe the solution you'd like

My thinking is that it would help to ensure consistency if values (colors, lengths, amount of padding etc) were all defined in the constants folder along the lines of Colors.ts. This would provide a single point of reference for contributors (easing onboarding for new contributors), ease consistent style implementation, and aid maintainability by providing a single place from which to apply stylistic changes across the whole app.

Describe alternatives you've considered

An alternative option would be to create comprehensive documentation of styles for the app to serve as a point of reference for contributors when writing or editing StyleSheet.create() functions. This would still aid the onboarding process and ease aid consistent styling. If styles were to be changed, though, it would still be necessary to make the changes separately for each screen. If there are advantages to defining style values on a screen-by-screen basis that I am not aware of (I am not a React Native expert) this would be an option to consider.

Is your feature request related to a problem? Please describe.

Git hooks allow you to run tasks at different stages of the Git pipeline, for example at the pre-commit stage. For frontend projects, husky and lint-staged are two packages that allow you to do this fairly easily. For an example of this in action, see https://github.com/forem/forem/blob/master/package.json#L31

Describe the solution you'd like

A pre-commit hook so when you commit code, certain tasks run such as run all tests related to the files being changed, running eslint etc.

Steps:

• Run yarn add --dev husky lint-staged to install the required packages.
• In the package.json file, add the configuration for husky

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

• In the package.json file, add the configuration for lint-staged

"lint-staged": {
  "*.{js,ts,tsx}": [
    "jest --findRelatedTests"
  ]
}

Note: ts and tsx are included because the project uses TypeScript.

With the above configurations, when code is committed to the repository, eslint will run and attempt to fix any issues it can. If there are any tests related to the file changes, jest will run them.

Describe alternatives you've considered

You could do this by wiring up the Git hook yourself, but that is more complicated.

Additional context

N/A

We have the positivity toolbox, and now we need to add some activities for each of the "tools." This is for the Mindfulness Screen.

Steps

I need to add some thoughts on design, but for now, it needs to stay consistent with the colors and fonts we've been using.

• Create a file called MindfulnessScreen
• For this screen, let's start by hard-coding this mindfulness activity:
  - "Let's be present at this moment through all of our senses: What do you hear? What do you see? What can you taste?
  What can you smell? What can you feel?"
• In the positivity toolbox, add this to the path for the mindfulness card.

Is your feature request related to a problem? Please describe.
The project is currently running Expo version 39. This version is deprecated.

Describe the solution you'd like
The latest version of Expo is 46. We should upgrade to this version
.
Describe alternatives you've considered
You could upgrade to version 43 or newer to avoid using a deprecated sdk.

Additional context
https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/

Firm up the design of the home screen (right now, its just two buttons - sign in, and sign up)

Need to incorporate the following elements:

• Mood Tracker (see #22 for a possible layout)
• Sleep Tracker
• Nutrition - are we getting enough food/water?

Add more resources for dads
Right now there's only one resource for dads during the postpartum phase.

Describe the solution you'd like
-Find 3 or 4 reputable resources to add
-Copy the current resource and update the URL and Text according to your resource

 <Text
            style={styles.linkText}
            onPress={() =>
              Linking.openURL(
                "This is where the link goes"
              )
            }
          >
            This is the title of your resource
          </Text>

To view your changes
Run the app and click the resources link in the center of the bottom nav

Depends on issue #23

Issue
The form is currently incomplete. supportNetwork and breastfeeding variables need boolean inputs

Describe the solution you'd like

• This for reference https://reactnative.dev/docs/switch.html
• Delete the device Background color

For supportNetwork, ask whether or not the user feels supported as a parent by someone close to her in a yes/no toggle

• This for reference https://reactnative.dev/docs/switch.html
• instead of isEnabled, use supportNetwork
• instead of setIsEnabled, use setSupportNetwork

For breastfeeding, ask whether or not the user feels supported as a parent by someone close to her in a yes/no toggle

• This for reference https://reactnative.dev/docs/switch.html
• instead of isEnabled, use breastfeeding
• instead of setIsEnabled, use setBreastfeeding

To test
With the app running, click the profile button in the bottom right. This will take you to the CreateProfileScreen, where you should see all your changes.

Where

screens > CreateProfileScreen.tsx

What

What should be a form is currently

Why

Best guess is that there is something going on with the styles

To see the screen, run yarn ios and then click the profile button in the bottom right.

-Add "Welcome to the Postpartum Wellness App"
-Sign-in and Signup buttons
(following material design principles"

Where

screens

What

• Create PositivityToolBox.js and display options as cards
• Cards need created for the following categories:

• Affirmation,
• Mindfulness,
• Breathing,
• Laughing,
• Visualization,
• Moving

How

After creating the file in the screens folder

• Add a title: Positivity Toolbox

• Using ReactNative Paper - Card, create a card for each with the title and either a subtitle or paragraph for a brief description (you can just use filler text for now)

• Use TouchableOpacity for each card so that when a user touches the card, it will navigate to the right screen. For now, the onPress should just be onPress={() => console.log("title of that card") }

• Theme each card either with distinct colors, an image, or both. (Also, if you have ideas, feel free to take artistic liberty here.)

• Feel free to add colors to the colors.ts file. This might be helpful: https://material.io/design/material-theming/implementing-your-theme.html#color

• Add ScrollView to the component to allow the user to scroll past the main view.

• Your imports will look like this `import React from "react";
  import { StyleSheet, Text, View, ScrollView, Switch } from "react-native";
  import { Card, Title, Paragraph } from 'react-native-paper';

• Your file will look something like this:
  `

<View style={styles.container}>
      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.contentContainer}
      >
        <View style={styles.getStartedContainer}>
          <Text style={styles.getStartedText}>Positivity Toolbox</Text>
<Card/>
<Card/>
<Card/>
</View>
</ScrollView>
</View>

`

Reference

• For styles, check out the CreateProfileScreen.tsx file
• For card examples, check out https://snack.expo.io/@bekahhw/spunky-almond
• To test the screen, go to BottomTabNavigator.tsx and import the screen and replace all the places for resources with PositivityToolbox -- that will give you access to the screen in the bottom navigator.

What

An error on the page is preventing it from loading.

Where

DayPromptScreen.tsx

Why

This project was left in a dusty corner for a while and in updating everything, the current page is not loading. I haven't had time to look at what the problem is, but it was originally a js file and now is using tsx, and that's been a recurring update I've needed to make.

Basically, the goal is to get the page working

Is your feature request related to a problem? Please describe.
Creating a clear reference point for reuseable components and styling is really important for making more progress on this app.

Describe the solution you'd like
Let's add Storybook for React Native to build UI components, and to help with reusability and testing.

• Add Storybook
• Add jest field as well
• We can add simple components in a separate issue. The concern here is just adding sb to the repo. But feel free to create an issue to start adding components, bc that's next.

Issue
The form is currently incomplete. birthExperience needs a rating input

Describe the solution you'd like

• Add ReactNative slider: yarn add @react-native-community/slider
  -for Ref: https://github.com/react-native-community/react-native-slider

For birthExperience, add in a Component the text: Rate your birth experience (0- traumatic and 10-joyful)
For the slider, the example in the docs will work but change the maximum value to 10

To test
With the app running, click the profile button in the bottom right. This will take you to the CreateProfileScreen, where you should see all your changes.

Is your feature request related to a problem? Please describe.
We need a splash screen when the app loads up. Splash screen is about 3 secs and should be a simple graphic and maybe the name of the app.

Describe the solution you'd like
Here's a good place to get started: https://docs.expo.io/guides/splash-screens/

Additional context
You can find the image here: https://drive.google.com/file/d/12ODlm2r6EkEjXUAJVbDyXlS4sipzLw6E/view?usp=sharing

This project is a labor of love, and I'm learning as I go. If you have suggestions for how I can improve this project in any way, please let me know by commenting in this issue.

Connection is a really important part of getting help when you need it. This screen should ask for contact information for a friend, partner, or a family member in case the mom needs support. The default number for US moms should be SAMHSA’s National Helpline, 1-800-662-HELP (4357).

Steps

• Create ContactFriendsScreen.tsx in the Screens Folder
• Add a Text Component: Connection for when you need it most.
• Add a placeholder image--once we settle on a design this will be replaced.
• Add a Text Component: Sometimes life can get hard fast. Staying connected with others can help. Add the phone number of a friend, partner, or a family member if you need to connect easily. (We'll never share this information. It is for your use only.)
• Input for contact name and an input for contact number.
• Add a save button with touchable opacity. For the onPress, console log the values of the input and contact number.

Describe the bug
I was trying to go back to the PositivityToolBox then I got stuck here.

To Reproduce

1. Go to Home
2. Click on PositivityToolBox
3. Click on any card
4. See the screen without a back button

Expected behavior
I feel there should be a back button or a kind of gesture to go back

Screenshots

Smartphone (please complete the following information):

• Device: [iPhone8]
• OS: [iOS]
• Version [15]

Is your feature request related to a problem? Please describe.
There's no back button 😭

Describe the solution you'd like
At the top left of the screen add a back arrow to navigate back
Ideas

• .goBack( ) function
• history prop

Context

• We're using React Navigation and BottomTabNavigator

There's an issue with the TabBar that might have something to do with the font imports.

Looks like MainTabNavigator.js might be the source of the error.

Docs

https://reactnavigation.org/docs/bottom-tab-navigator/

Error Messages

Where

screens > SignUpScreen

What

The onPress currently navigates to the HomeScreen. Instead, when the button is pressed, this message should be displayed, "Thank you for signing up! Please check your email for verification."

How

It might make sense to add state here [signedUp, setSignedUp] = useState(false) and then the onPress changes the state to true. Using a ternary, display the Thank you message in a text component instead of the text and text inputs that are currently displayed.

Add more resources for moms
Right now there's only one resource

Describe the solution you'd like
-Find 3 or 4 reputable resources to add
-Copy the current resource and update the URL and Text according to your resource

 <Text
            style={styles.linkText}
            onPress={() =>
              Linking.openURL(
                "This is where the link goes"
              )
            }
          >
            This is the title of your resource
          </Text>

To view your changes
Run the app and click the resources link in the center of the bottom nav

There's currently a screen file called ProfileScreen.tsx. Because we don't have anything set up for login right now, let's get the design in there and hardcode what needs to be there.

• User picture - rounded border
• days in a row tracked
• get support -> <Button> that immediately sends a message to support system. For now console.log('text a friend')
  Get help now -> For now console.log('help now')

I'm thinking something like this for the top of profile screen, but I'm up for suggestions.

Describe the bug
We're currently getting these errors:
'View' cannot be used as a JSX component., 'Text' cannot be used as a JSX component.

To Reproduce
Steps to reproduce the behavior:

1. Go to ResourcesScreen
2. Hover over the View and/or Text elements. See the warning that comes up.

This issue addresses the problem we're seeing here. Use that to identify the packages causing the conflicts and update the packages to remove the warnings.

Navigate to correct paths in HomeScreen.tsx
Currently the paths are navigation to root as default and need to be updated.

Describe the solution you'd like

• Sign-In button needs to navigate to SignInScreen.tsx
• Sign-up button needs to navigate to SignUpScreen.tsx

Additional context
-These docs might be helpful

Add testing library
To ensure that the app is working for users.

Describe the solution you'd like
Allow tests to be written with RNTL to ensure things are working right.

Additional context
You can find directions starting here

Adding First Test
-Keep it simple just to ensure it's working.
-test HomeScreen.tsx to ensure Sign-In and Sing-Up buttons are visible.

Describe the bug
Running the application in dev mode, the "Sign-up" screen shows warnings related to usage of removeListener method from EventEmitter (see Screenshots below). This occurs because the removeListener method has been deprecated.

To Reproduce
Steps to reproduce the behavior:

1. Start the application server in dev mode using the command: yarn start
2. Run the app on a simulator or device.
3. Once the app loads, go to "Home" tab.
4. Press "Sign-up" button to go to the sign-up page.
5. The warnings will show up at the bottom of the screen. Click on them to expand.

Expected behavior
Ideally, there shouldn't be any warnings/errors.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 13 Pro Max
• OS: iOS 15.5
• Version: 1.0.0

Describe the bug
On the Sign-up screen, entering a password in the Password field also fills up the Re-enter password for validation field (see Video below).

To Reproduce
Steps to reproduce the behavior:

1. Go to Home tab and press Sign-up button to open the Sign-up screen.
2. Enter the password in the Password field. Notice that the Re-enter password for validation field also changes as you type in the password.

Expected behavior
The Re-enter password for validation should be independent of Password field. Although the value in both fields should match, the user should fill these fields separately.

Video

Smartphone:

• Device: iPhone 13 Pro Max
• OS: iOS 15.5
• Version: 1.0.0