Create PositivityToolBox Screen

[BekahHW]

Where

screens

What

• Create PositivityToolBox.js and display options as cards
• Cards need created for the following categories:
• [x] 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.

[dominicduffin1]

I would like to take this on.

[BekahHW]

@dominicduffin1 here are the ideas I have for images. I can't find anything for breathing. I might need to go outside undraw. (Also it wouldn't let me grab links from my phone so these are searchable titles)

Icons->

Affirmation -> Loving it, Mindfulness -> meditating, Breathing, Laughing -> feeling happy, Visualization -> flowers or wishes, Moving -> nature benefits

[dominicduffin1]

@BekahHW I can work on the five for the time being. Also, I forgot to ask, what do you think about the three colors I used, shall I go with them or change them?

[BekahHW]

@dominicduffin1 I like the colors you have, but I think we need different for each. I screenshotted this from a different app and I think it has a similar feel. They have some gradient and transparency going on that you don't have to worry about, unless you want to play with it, but the colors and panels are unique.

I added kind of a mock-up that you could modify--it's the last example card here: https://snack.expo.io/@bekahhw/spunky-almond

[dominicduffin1]

@BekahHW I agree, I can generate a palette of six colors using the in-search tool in DuckDuckGo with the initial three as a starting point.

[BekahHW]

Thank you so much!!!!