Organize Resources by Categories

[BekahHW]

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")}

Resources on how to help moms and identify postpartum mood disorders `

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.

[BekahHW]

Style idea:

[aishwarya-mali]

@BekahHW I'd like to work on this feature. But where would resources go?

[BekahHW]

We'll need to add new screens for those. For right now you can console.log the name. I'll add some issues for the new pages later today.