mozilla-magnet/journey

Code name Journey

Project Magnet

Code name Journey

Setup

1. Install react-native on your machine: yarn global add react-native-cli
2. Clone this project: git clone [email protected]:mozilla-magnet/journey.git && cd journey
3. Install dependencies: yarn
4. Start the development server: yarn start

Running

Android

With a virtual or real device running:

$ react-native run-android

Using Android Studio (OSX)

On OSX Android Studio must be launched from the command line in order to inherit $PATH so that a specific Gradle script inside Realm can run npm --version.

Attempting to build using Android Studio that has been launched via the normal OSX icon will fail to build. We've included a shortcut script to help.

$ npm run open-android-studio

iOS

$ react-native run-ios

Solving the headers problem

We have found some problems in the workspace after introducing cocoapods. If your project fails to compile because the react native components are not able to compile, probably you will need to add manually the Header search path.

In order to do so follow this instructions:

• Go to the Libraries folder and for each dependant project
• Click on the target <project_name> > Build Settings > find Header search path
• For each project you need to enter a specific value (click once on the value):
  • For ReactNativeHeading: $(SRCROOT)/../../ios/Pods/Headers/Public/React/**
  • For RNShare: $(SRCROOT)/../../../ios/Pods/Headers/Public/React/**
  • For RealmReact: $(SRCROOT)/../../../../ios/Pods/Headers/Public/React/** $(SRCROOT)/../../../../node_modules/realm/src/** $(SRCROOT)/../../../../node_modules/realm/vendor/core-2.2.0/include/** $(SRCROOT)/../../../../node_modules/realm/vendor/**

How to contribute?

Install the pre-commit hook by running this command:

$ ln -s ./hooks/pre-commit.sh .git/hooks/pre-commit

This will ensure that no major issues on the JavaScript syntax will be committed.

Coding styles

The coding styles are defined in the ESLint configuration file. Make sure to run the following command to fix your code style before committing:

$ yarn run fix

Not what you're looking for?

If you're looking for a physical web beacon browsing app, go to magnet-client.

journey's Issues

Share component

Add map to POI view

Generate PNG icons from SVG

We need a tool that generate PNG for all resolutions (1x, 1.5x, 2x, 3x and 4x) from SVG images. That will allow us to iterate faster on UI implementation.

I found rebar but it seems to be a big chunk of tools, so maybe we can just build our own script using Inkscape via the command line.

Also final PNG files must be optimised, ideally with ImageOptim. So it would be nice to add this as a step in the script.

Geo component

We need a unique source of location truth for the app linked to the redux store

Render a basic home view with dummy API data

Fav component

Profile thumbnail component

Show content under status bar

Follow-up from #39

Currently the status-bar is dark grey and never shows any content underneath. When the content is scrolling it should scroll under the status bar to give a more 'full-screen' experience.

@gmarty is that correct or were you expecting the content should be under the status bar when scrollTop === 0?

Create a reusable primary button component (<ButtonPrimary>)

Needs to be able to accept text and an optional icon.

Home: tap on an item close the header

On the Home scene, when the header is visible, 2 taps on an item are needed to open the POI scene:

• the 1st tap dismiss the header
• the 2nd tap actually open the POI view

@wilsonpage: is it a bug or an intended behaviour?

Show user's location on maps

Carousel component

Investigate current react-native components or create a new one for having the carousel.

Add the 'Take me there' button to POI view

The take me there button should open up the devices default mapping/navigation application with directions on how to get from the user's current location to the POI's location.

Render POI view with dummy data

Investigate if we could use OpenStreetMaps instead of Google maps

Legal team has told us that Google Maps uses closed/proprietary data and OpenStreetMaps is an open data alternative.
Mozilla has a general policy preference for using open data projects, so unless there is a compelling business reason why OSM will not work for our project, we should go with that.

Legal team asks if we can take a look at OSM and let them know our thoughts...

First testing round

It would be good if we can start testing what is implemented by sprint 11. Tests will happen at the end of the sprint to have enough time for development.

Audio component

Create client api library with offline support

Add HomeView header

Create cron to kick off nightly builds

Postpone first render of MagnetMap until any transitions have completed

The initial render of MagnetMap is quite resource intensive. If it is done when animations/transitions are in progress we can drop frames.

The react-native docs shows how this can be done.

Home map view

The contents of the home view should viewable in list or map views. Currently we only have list view.

Create a MediaPlayer element for iOS and Android supporting the Opus codec