https://github.com/emilydaykin/goals

🎯 My first ever mobile app in React Native! Use Goals to add, track and delete your goals
https://github.com/emilydaykin/goals

android ios mobile-app react-native

Last synced: 7 days ago
JSON representation

🎯 My first ever mobile app in React Native! Use Goals to add, track and delete your goals

• Host: GitHub
• URL: https://github.com/emilydaykin/goals
• Owner: emilydaykin
• Created: 2022-08-31T09:35:21.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-10T15:46:56.000Z (about 2 years ago)
• Last Synced: 2024-09-09T17:20:23.638Z (2 months ago)
• Topics: android, ios, mobile-app, react-native
• Language: JavaScript
• Homepage:
• Size: 1.91 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Goals

My 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.

## Application Walkthrough:

#### Input Goal Modal (iOS & Android)



  

   

  



#### All Goals Display (iOS & Android)

- Observe Android's `fadingEdgeLength` (list top) to indicate more scroll elements



  

   

  



#### Deleting and Adding Goals (iOS & Android)

- Observe the `android_ripple` effect upon press/delete



  

   

  



## Installation:

This app is not published to the App Store or Google Play yet. To run locally:

  - `cd` into this project repo, then run `npm start`

  - To view on your device:

      - Install "Expo Go" from the AppStore or Google Play

      - Scan the QR code shown in the terminal with Expo Go (Android) or the Camera app (iOS)

  - To view on your laptop/desktop (via a iOS Simulator or Android Emulator)

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

    - (`shift + i` or `shift + a` to toggle between different device versions/models)

## Code Snippets

#### 1. Goal Input Modal (Slide up overlay) [[code]](https://github.com/emilydaykin/Goals/commit/ce715da5e56c1ef183361a818a8b36aa6338a3b7)

  ```javascript

  return (

    

      

        

        

      

    

  );

  ```

#### 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)

  ```javascript

   pressed && styles.pressedItem}

  >

    {itemData.item.text}

  

  ```

#### 3. `FlatList` instead of a `ScrollView` to improve performance by only rendering elements as needed [[code]](https://github.com/emilydaykin/Goals/commit/39185a4cc59575c3232d7fd31651a1334210dcc9)

  ```javascript

   {

      return {itemData.item.text};

    }}

    keyExtractor={(item, index) => {

      return item.id;

    }}

    alwaysBounceVertical={false}

    fadingEdgeLength={50}

  />

  ```

#### 4. `ScrollView` instead of a plain `View` to enable scrolling [[code]](https://github.com/emilydaykin/Goals/commit/be89a7e2beba9bb7aab2d12e8ffe43507f32b88b)

  ```javascript

  

    {goals.map((goal, _id) => (

      

        {goal}

      

    ))}

  

  ```

#### 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)

  ```javascript

  

    

  

  ...

  const styles = StyleSheet.create({

    ...

    button: {

      margin: 10,

      width: '30%',

      color: '#ffffff',

    }

  });

  ```