https://github.com/sonnylazuardi/react-native-nike-running

🏃 UI & UX Prototype of redesigned Nike+ Running for React Native 📱+ React Native DOM (Web) 🌏
https://github.com/sonnylazuardi/react-native-nike-running

Last synced: 26 days ago
JSON representation

🏃 UI & UX Prototype of redesigned Nike+ Running for React Native 📱+ React Native DOM (Web) 🌏

• Host: GitHub
• URL: https://github.com/sonnylazuardi/react-native-nike-running
• Owner: sonnylazuardi
• License: mit
• Created: 2016-12-30T01:04:43.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-09-16T08:33:34.000Z (about 3 years ago)
• Last Synced: 2024-08-02T20:45:43.297Z (4 months ago)
• Language: JavaScript
• Homepage: http://nikerunning.sonnylab.com/
• Size: 7.79 MB
• Stars: 684
• Watchers: 15
• Forks: 108
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-indo-projects - Nike+ Running - React Native - UI & UX prototype of redesigned Nike+ Running App. (Android)
• awesome-indonesia-repo - Nike+ Running - React Native - UI & UX prototype of redesigned Nike+ Running App. (Android)

README

        
# 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](https://github.com/vincentriemer/react-native-dom)

![proto](./assets/nikerunningwebsite.gif)

![gif](http://i.giphy.com/l3vR7vOmGZYEZwUbC.gif)

![proto](./assets/dribnike.gif)

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

## Motivation

I recently watched the [talk](https://youtu.be/aOWIJ4Mgb2k) from [@vincentriemer](https://twitter.com/vincentriemer) about [react native dom](https://github.com/vincentriemer/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