jadnco / locus Goto Github PK

As the Navigator transitions between views there is a bit of a hiccup. This is because the animations and rendering the large assets (photos) happen asynchronously.

The InteractionManager API should be used to facilitate the necessary changes. Waiting until all animations have finished to render will make the app feel a whole lot smoother.

https://facebook.github.io/react-native/docs/interactionmanager.html#content

Now that photo uploads are working we can draw geographic data onto a map.

The react-map-gl component should be used.

What needs to be done to close this issue:

• Create Photo model on the backend that will include location data (lat and long) as well as any data, I'm thinking the raw dimensions and the url. Then implement it into Spot models.
• When creating Spot records, the location data (if available) needs to be sent with the request.
• Create a MapView that implements the react-map-gl component. This view should be able to get accessed through SpotView with a button or similar.
• If a Spot does not contain any photos (just text), the map should be displayed in the SpotCard.

I ran into this issue after replacing SpotGrid with a List of Spot components in ProfileView. What happens, is essentially, an infinite loop of routes.

Eg:

• Navigate to Profile tab
• Click on an avatar icon in one of the Spot components.
• We went from ProfileView to ProfileView, this happens infinitely.

Some ideas to how this can be resolved:

• Inside the Spot component, use the Navigator to check if ProfileView is present in the route stack. If it is present, nothing should happen when the avatar is tapped on.
• If we are on ProfileView and tap on a Spot component, we're routed to SpotView and if we click on the avatar icon again, a new ProfileView is mounted. The route stack should be checked for ProfileView, and if it's present, perform a simple .pop().

When an icon in the tab bar is pressed it should animate back to the initial route.

eg.

• Start on Feed view (initial route)
• Click on a SpotCard
• Now on Spot view
• Click on Avatar
• Now on ProfileView

So the route stack should now look something like FeedView > SpotView > ProfileView. Clicking on the 'Feed' icon again in the tab bar should pop every view in the stack, except for Feed.

As the title states...

The big thing to point out is that the view that gets pushed needs to stay above the tab bar (as it already is with Modal).

https://rnplay.org/apps/5PaKQA

The app is pretty much a hack job at this state, with a bunch of View within View components. Everything should be split up into individual components.

Working ideas on what to integrate:

• Dropbox – A lot of spotters will use a DSLR or some kind of digital camera. Being able to take that photo, upload to Dropbox and then to Locus would be ideal.

https://github.com/marmelab/restful.js

In Xcode going to General > Deployment and setting Deployment Target: Universal is the starting point.

All of the full width images should resize into a grid layout. Views like profile, search, spot etc. should pop up in a modal overlay.

Parallax should be added to ProfileView and SpotView using react-native-parallax-view.

The behaviour needs to be experimented with. I'm thinking it would differ for both views;

ProfileView

• User pulls down ScrollView => header image scales.
• User scrolls downwards => header image has parallax effect.

SpotView

• User pulls down ScrollView => spot image scales.
• User scrolls downwards => natural behaviour (no parallax)

This isn't something that can be implemented right away, there is no support for release candidates. I'm expecting an update to v0.18.0 should be about a week away.

The SpotView needs to be finished up to correlate with the layout of SpotCard.

In particular the views associated to creating new Spots.

From a stationary standpoint, the app uses ~42MB of memory and ~7% CPU. Those numbers are pretty decent. As the user creates a new Spot this changes quickly.

• Loading up the NewSpotSource view (on the library tab) jumps the memory up to ~72MB, likely because a series of large images are loaded in.
• Clicking and using the Camera view bumps memory up to ~90MB.
• After a photo is taken from the camera or selected from the library, the photo gets passed through to a new view. Memory is now up to ~98MB.
• Moving into the next view, where the user can add a title and caption it's at ~105MB.

I believe the memory is constantly increasing because the large photo assets aren't being disposed of as the views get un-mounted.

This is something that needs to get looked into. Using +100MB is totally fine, it's just not ideal.

The design for ProfileView will be discussed here.

I spent some time playing around with Objective-C trying to enable things like Item background colours, however Apple does not expose those kind of features in the native UITabBarItem class.

It looks like a JavaScript implementation will need to be used.

This custom tab bar should include:

• TabBarItems need to be able to have separate background colours; I am specifically talking about the camera button.
• The whole TabBar should hide away as the user scrolls downwards.

This module should allow the user to take a photo and upload to the server.

Related: jadnco/locus-backend#4

Should've started on this one from the beginning.

Doesn't look like there is support for React Native with enzyme, will need to look into this.

When pushing new views, properties are currently sent alongside the route component. This should be changed to a passProps property.

ie.

push({ component: Profile, passProps: { data: data.spotter } });

As title reads.

This should be a utility function that can be used throughout the app.

It should follow these example cases:

12983 => 12.9K
1983479 => 1.9M
1784 => 1,784

Creating a new Spot:

• Select an image already present in the camera roll.
• OR Take a new photo
• After the photo is taken/chosen the user should be able to add filters, crop and make other edits. This new photo should automatically be saved to the camera roll, in case the app suddenly crashes. The photo should not get lost.
• Once edits have been made to the photo, the user should be able to specify what car is in the photo with a group of selection boxes. A copy of this edited photo should also get saved to the camera roll.
• Publish/Post button then sends the request and uploads to the servers.

Inside views/LocationSelector.jsx the current location is grabbed; that is a good start, but the user should be able to manually move (drag) the marker to a more specific location.

This should include pinch-to-zoom and rotate interactions.
https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageEditor.js

In SpotCard components, the images are getting cropped instead of being scaled.

The TopBar component is used in almost every single view. After looking through the Navigator docs, I realized that there is a property that can persist this component across transitions.

The TopBar should be re-implemented using that feature.

http://facebook.github.io/react-native/docs/navigator.html

Should not be using inline style objects...

Global style properties like colour, font sizes etc. should be stored in a global file.

This should handle all CRUD operations and be called in componentDidMount().

The camera feature captures image at 1920x1080 or 16:9 ratio. This isn't ideal because long vertical images don't look good on the device. Something like 4:3 or 3:2 would look a lot better.

A fix needs to be created for Spots with long titles. I was thinking either:

• Append ellipse (...) after certain amount of characters
• Or use a horizontal ScrollView if above a certain amount of characters.

Photos are currently displayed as perfect squares. They should eventually be displayed in respect to their aspect ratio.

The width of each photo should always be fixed (window.width / 4), but the height should be variable.

State as of 04ed13c:

In the Feed view, the Spots are full width (edge to edge). Right now I'm thinking of sticking them into wrappers with horizontal margins on 8pt. It would look way better transitioning from the iPhone view of a single image to an iPad view of a grid.

Should use the request-promise module.

The icon should not have so much horizontal spacing, should be aligned to the right.