Nike+ Running - React Native & React Native DOM (Web)

UI & UX Prototype of redesigned Nike+ Running App and now support website 🎉 thanks to React Native DOM

Inspiration: https://dribbble.com/shots/2764470-Rethinking-Nike-Running

Motivation

I recently watched the talk from @vincentriemer about react native dom and I amazed that we can port directly our current react native app into website. Then, I started this experiment and see the performance and the gesture in the web.

The result is fascinating. I can reuse almost all of the components except the map and linear gradient, so I make a quick hack for the LinearGradient Component.

Demo

Website: http://nikerunning.sonnylab.com/

Expo Snack: https://snack.expo.io/@sonnylazuardi/nike-running-redesign

Installation & Running

npm i
react-native run-ios
react-native run-android

for the web:

react-native start

open http://localhost:8081/dom

Features

• FadedZoom Transition This will add forFadedZoom transition to react-navigation (you can use it on another project)

    transitionConfig: () => ({
      screenInterpolator: sceneProps => {
        return forFadedZoom(sceneProps);
      }
    })

• Swipeable Card The card can be swiped up-down to toggle hide and left-right to change current card view. Pan responder works smooth on the web 💪

• Geolocation & Animated Marker The homescreen will show your current location with animated marker. For map the web now still fallback to image, need to work on the map component for RND.

• Box Shadow & Gradient (iOS only) There will be shadow around the button and cards. I do some tricky part to achieve the linear gradient. I use gradient image and use similar LinearGradient props:

if (Platform.OS != "dom") {
  var LinearGradient = require("react-native-linear-gradient").default;
} else {
  var LinearGradient = require("../components/LinearGradient").default;
}

© 2018 Sonny Lazuardi