{"id":19261553,"url":"https://github.com/emilydaykin/goals","last_synced_at":"2026-05-09T09:02:21.578Z","repository":{"id":256217180,"uuid":"531018197","full_name":"emilydaykin/Goals","owner":"emilydaykin","description":"🎯 My first ever mobile app in React Native! Use Goals to add, track and delete your goals","archived":false,"fork":false,"pushed_at":"2022-09-10T15:46:56.000Z","size":2001,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T18:35:26.152Z","etag":null,"topics":["android","ios","mobile-app","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emilydaykin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-31T09:35:21.000Z","updated_at":"2022-09-10T15:43:15.000Z","dependencies_parsed_at":"2024-09-09T17:20:30.947Z","dependency_job_id":"16218d17-b3c0-4ff5-a702-eccc0ef44e09","html_url":"https://github.com/emilydaykin/Goals","commit_stats":null,"previous_names":["emilydaykin/goals"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/emilydaykin/Goals","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emilydaykin%2FGoals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emilydaykin%2FGoals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emilydaykin%2FGoals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emilydaykin%2FGoals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emilydaykin","download_url":"https://codeload.github.com/emilydaykin/Goals/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emilydaykin%2FGoals/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266135685,"owners_count":23881803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","mobile-app","react-native"],"created_at":"2024-11-09T19:27:25.326Z","updated_at":"2026-05-09T09:02:16.548Z","avatar_url":"https://github.com/emilydaykin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Goals\nMy first ever mobile application! Goals is built with React Native, which works on iOS and Android. Users can add and remove goals, and see and scroll their list of added goals.\n\n## Application Walkthrough:\n#### Input Goal Modal (iOS \u0026 Android)\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/add_goal_modal_iOS.png\" width=\"32.5%\"  /\u003e\n  \u0026ensp;\n  \u003cimg src=\"assets/readme/add_goal_modal_android.png\" width=\"30%\"  /\u003e\n\u003c/p\u003e\n\n#### All Goals Display (iOS \u0026 Android)\n- Observe Android's `fadingEdgeLength` (list top) to indicate more scroll elements\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/display_goals_iOS.png\" width=\"32.5%\"  /\u003e\n  \u0026ensp;\n  \u003cimg src=\"assets/readme/display_goals_android.png\" width=\"30%\"  /\u003e\n\u003c/p\u003e\n\n#### Deleting and Adding Goals (iOS \u0026 Android)\n- Observe the `android_ripple` effect upon press/delete\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/adding_deleting_iOS.gif\" width=\"33%\"  /\u003e\n  \u0026emsp;\n  \u003cimg src=\"assets/readme/adding_deleting_android.gif\" width=\"30%\"  /\u003e\n\u003c/p\u003e\n\n\n\n## Installation:\nThis app is not published to the App Store or Google Play yet. To run locally:\n  - `cd` into this project repo, then run `npm start`\n  - To view on your device:\n      - Install \"Expo Go\" from the AppStore or Google Play\n      - Scan the QR code shown in the terminal with Expo Go (Android) or the Camera app (iOS)\n  - To view on your laptop/desktop (via a iOS Simulator or Android Emulator)\n    - Type `i` for the iOS Simulator (must have XCode installed) or `a` for the Android Emulator (must have [Android Studio](https://developer.android.com/studio) installed and a PlayStore-compatible device emulator running)\n    - (`shift + i` or `shift + a` to toggle between different device versions/models)\n\n## Code Snippets\n#### 1. Goal Input Modal (Slide up overlay) [[code]](https://github.com/emilydaykin/Goals/commit/ce715da5e56c1ef183361a818a8b36aa6338a3b7)\n  ```javascript\n  return (\n    \u003cModal visible={modalIsVisible} animationType='slide'\u003e\n      \u003cView style={styles.inputContainer}\u003e\n        \u003cTextInput\n          placeholder='Your goals'\n          style={styles.textInput}\n          onChangeText={goalInputHandler}\n          value={goalInput}\n        /\u003e\n        \u003cButton title='Add Goal' onPress={addGoalHandler} /\u003e\n      \u003c/View\u003e\n    \u003c/Modal\u003e\n  );\n  ```\n\n#### 2. Adding press functionality to each added/displayed goal via the `Pressable` component (as well as `.bind`), which will delete the goal [[code]](https://github.com/emilydaykin/Goals/commit/ee3ff50284d9f78d63039b017ac2ceb0c04cb917)\n  ```javascript\n  \u003cPressable\n    android_ripple={{ color: '#8d38fc' }}\n    onPress={onDeleteGoal.bind(this, itemData.item.key)}\n    style={({ pressed }) =\u003e pressed \u0026\u0026 styles.pressedItem}\n  \u003e\n    \u003cText style={styles.goalText}\u003e{itemData.item.text}\u003c/Text\u003e\n  \u003c/Pressable\u003e\n  ```\n\n\n#### 3. `FlatList` instead of a `ScrollView` to improve performance by only rendering elements as needed [[code]](https://github.com/emilydaykin/Goals/commit/39185a4cc59575c3232d7fd31651a1334210dcc9)\n  ```javascript\n  \u003cFlatList\n    data={goals}\n    renderItem={(itemData) =\u003e {\n      return \u003cText style={styles.goalItem}\u003e{itemData.item.text}\u003c/Text\u003e;\n    }}\n    keyExtractor={(item, index) =\u003e {\n      return item.id;\n    }}\n    alwaysBounceVertical={false}\n    fadingEdgeLength={50}\n  /\u003e\n  ```\n\n#### 4. `ScrollView` instead of a plain `View` to enable scrolling [[code]](https://github.com/emilydaykin/Goals/commit/be89a7e2beba9bb7aab2d12e8ffe43507f32b88b)\n  ```javascript\n  \u003cScrollView alwaysBounceVertical={false}\u003e\n    {goals.map((goal, _id) =\u003e (\n      \u003cText style={styles.goalItem} key={_id}\u003e\n        {goal}\n      \u003c/Text\u003e\n    ))}\n  \u003c/ScrollView\u003e\n  ```\n\n#### 5. `Button` element styling by wrapping a `View` around it, and using stylesheet objects [[code]](https://github.com/emilydaykin/Goals/blob/main/components/GoalInput.js)\n  ```javascript\n  \u003cView style={styles.button}\u003e\n    \u003cButton title='Cancel' onPress={onCancel} color='#ff5555' /\u003e\n  \u003c/View\u003e\n\n  ...\n\n  const styles = StyleSheet.create({\n    ...\n    button: {\n      margin: 10,\n      width: '30%',\n      color: '#ffffff',\n    }\n  });\n  ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femilydaykin%2Fgoals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femilydaykin%2Fgoals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femilydaykin%2Fgoals/lists"}