Design and implement the contact details part of the feedback form wizard.

We'll postpone any 'searching' functionality for now and perhaps circle back to that later. For now let's just concentrate on implementing the various sections of help as well as a generalized 'answers' page.

It looks like each of the icons takes you to a distinct page that has an accordion list of questions and answers. We should be able to generalize this into a single page and pass parameters into it or something like that.

• Design the screen in Sketch
• Implement the design

I made a brief attempt at accomplishing this but it appears as though Animated doesn't have an Animated.ImageBackground component.

I need to figure out a way to change the blurRadius property on the ImageBackground component based on the scroll offset.

This was the guide I was following initially for future reference.

Research the various ways to store data locally on the device. At minimum, look further into the following:

• AsyncStorage
• Redux-Persist

In the production application, tapping n the 'Chick-fil-A Intro' option list item brings up the initial introduction screen in a modal screen. I need to figure out how to structure the navigation to allow that.

This is more complicated than it looks and I might want to refactor the entire application navigation structure.

Migrate the project to use Yarn as the package manager instead of npm.

AWS Mobile initialization defaults to use Yarn as the package manager resulting in yarn.lock being created and therefore multiple package managers on one project which isn't a good thing.

There's no reason I can think of to not just use Yarn.

Design and implement the notifications screen.

For now, just stub out the functionality that the switches control. Push notifications (if implemented) will be implemented in another issue.

It turns out that when you use the StatusBar.setBarStyle(...), it's applying that style to each screen, which isn't that surprising, but it's now become a problem. I hadn't run across an issue with it yet merely by luck.

Most likely, what we'll want to do here is:

componentDidMount() { StatusBar.setBarStyle(...); }

I'll use this case to track some research needed in order to implement mapping of store locations in the application.

• How do you find locations with lat / long coordinates that are within a certain distance of a given lat / long coordinate?

Use Case: We need to be able to filter the list of locations down to only the locations that are within a certain distance from our current location and then plot those on the map.

It appears as though the Haversine Formula might be the correct approach in finding the distance between two given coordinates on a sphere.

This package warrants further investigation.

Findings: I implemented a proof of concept program in node in server\location-tester that filters down the locations from our JSON file based on the Haversine Distance to the current location.

• What are the options for mapping in Expo?
• How do you create a custom map marker?
• How do you create a custom callout for a marker?
• How do you animate between locations?

If I recall correctly, for iOS development, we had to specify qualifiers such as @1x, @2x to indicate that that specific image should be used for certain devices.

It's currently unclear to me how we're supposed to manage images in Expo as well as what image file size is expected / appropriate.

Create basic screens to allow tab navigation to function. The screens to be created are the following:

• Find
• Menu
• Home (ONE)
• My Order
• My Card

These screens will be built out in distinct issues. However, I want to create some placeholders to support the validation of tab navigation.

On the production version of the application, the textbox moves up out of the way of the keyboard and the header disappears.

Adjust the text input so that it shrinks in size to move out of the way of the keyboard like the production app. KeyboardAvoidingView doesn't move it enough.

I believe I have to approach it like I did the logo animation in the Currency Converter app.

This would be an enhancement of the initial pass on #43.

Add the search bar to the Help screen. When a search is executed, display a message that search functionality is not currently available.

Future issue will implement searching.

At some point I need to create a license file for this project.

In order to populate the map with store locations, we need location data for those stores. The address data can be found on the website. For the mapping software, we need latitude an longitude coordinates though.

The color of the main background doesn't match the color of the images on the second and third pages of the intro scroll view.

I've been tweaking this for a while, but can't quite get it to work. The color picker on my Mac is yielding unpredictable results.

I believe this might be related to this article and my use of Sketch to export these images: StackExchange.

Tasks to address:

• Figure out why the colors are different.
• Create new images for the intro screen that aren't exported via Sketch to remain consistent.
• Recalculate the color values on a new sRGB document and adjust them in the application.

I mistakenly didn't include Screen as part of the following screen components:

• GiveFeedbackContactForm.js
• GiveFeedbackForm.js
• GiveFeedbackList.js

I should re-name these and their references to Screen.js to follow the established pattern for screen components.

Implement the options screen from the base design in #4.

Design and create a license page. I'm choosing to do this page differently than the Production application because I'll have different dependencies and I want to use this cool approach here

For this project we need to be able to do the following at minimum:

• Authenticate a user
• Store information about products / orders / users externally

Each of the icons on the Get Help screen open a page that has an image at the top along with article titles and paragraphs for each article.

Instead of implementing 6 different pages, we should generalize this out to a screen component that can accept an image and article objects.

In addition to this, I need to research how to render expandable views (think accordion-like) when the article title is pressed.

• Design screen in Sketch
• Research how to do expandable views
• Implement generalized screen

Design and implement the Give Feedback form screen.

I've spent a while investigating this and I'd like to move on to other things. Come back to this later specifically to address the tab bar hiding on the Feedback Form

These links will likely be helpful:

• Official Docs
• Github Issue

Design and implement the Privacy screen to match the production implementation.

Research how to test components and functions in React Native.

Create a loading indicator to replace the default loading indicator on pages like the Legal Information screen.

Design a basic tab navigator with the following characteristics from left to right:

• Find (Ionicons ios-pin)
• Menu (Ionicons ios-restaurant-outline)
• ONE (main logo icon)
• My Order (SimpleLineIcons bag)
• My Card (SimpleLineIcons credit-card)

Note: The existing application customizes the bottom navigation bar such that it bubbles up in the middle and the middle icon / text is larger. It's unclear how difficult this will be to accomplish with React Navigation and is out of scope of this issue. I will create a follow-on issue later to iterate on the design in the implementation phase.

This application will require that we be able to display a map with a varying number of pinned locations. initially I was just going to use the built in mapping that Expo provides: Expo MapView

That's simply a wrapper to react-native-maps.

According to an article I was reading about an app made with React Native here, they were having problems with react-native-maps and switched to MapBox.

Optimizing the map to display a certain number of pins for stations was a massive challenge, and in the first weeks of the project, using react-native-maps was not successful.
To solve for this, we switched to using Mapbox and their react-native-mapbox-gl.

From very brief research, MapBox is worth checking into.

The way the scrollview is currently implemented, it covers up the 'Options' icon. Redesign it so it doesn't cover up the options screen but maintains the positioning of the login card.

Design and implement the initial Give Feedback screen.

It's clear that I don't want to check in secret API keys into the public repository. I need to figure out the best way to store those but at the same time make it easy to know where keys should be placed should someone want to spin up a new instance of this.

Also, might want to consider how to properly store secret keys on the device in a separate issue.

Design the Legal Information screen in Sketch. This should render a web-view of the following address: https://www.chick-fil-a.com/Legal

It's not the greatest user experience, but it's how the original app is implemented, which I'm trying to replicate, so we'll do it that way.

Design the options screen that satisfies the following criteria:

• Navigation title is 'Chick-fil-A One'
• List items should have a label and a right-arrow unless otherwise indicated and should be listed in the following order:

1. Get Help
2. Give Feedback
3. Chick-fil-A One Intro (opens intro screen from #2 as modal nav instead of pushes to stack)
4. Privacy
5. Legal Information
6. Notifications
7. Licenses
8. Enable Tips (no arrow, replace with an iOS switch)

I believe it's possible to customize the look of the tab bar. Currently I'm using the default and poorly styled tab bar. This should be replaced with a custom tab bar to match the production application.

• Design sign up / sign-in screen in Sketch
• Implement screen mocks.
• Set up AWS Mobile Hub / Cognito
• Authenticate users with email

Create a Sketch design file for the three-page horizontal scroll view screen.

Each page should have an image and a distinct color. The pages should say the following at the bottom of each page

• Quickly order and pay for your meal, just the way you like it.
• Scan your card at the register to earn treats or pay using Chick-fil-A One.
• Earn treats by placing mobile orders or scanning at the register.
  -- Get Started! button at the bottom.

Use React Navigation to implement the tab navigation between the currently mocked screens.

Eventually this will change, but I'd like to make the 'Get Started' button on the Intro screen open the main tab navigator.

I believe what we want to do here is create a switch navigator in react navigation and simply switch between the two.

Follow the design from #1 and implement the 3 page introduction. Stub out the button action for now. It would be wise to implement this as a screen that we can navigate to in react navigation.

Design and create the home screen. There are a few things to consider here:

• The render of the home screen changes if you are logged in or not. For this issue, implement just the logged out view.
• The background image and text changes based on day of the week (they're closed on Sunday) and time of day.
• The background image blurs on scroll position.
• The scrolling content moves 'over' the header text.
• The 'gear' icon fades based on scroll position too I believe.