Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implementing a Drag-n-Release UI

Avatar for Patrick Perey Patrick Perey
June 01, 2016
Programming
0
73

Implementing a Drag-n-Release UI

Implementing a Drag-n-Release UI with React Native's PanResponder API.

Talk given at React Native SF Meetup 01/01/2016

Demo - http://tinyurl.com/dragnrelease
Live iOS app - http://tinyurl.com/macrostracker

Twitter: @patrickperey
Github: github.com/the4dpatrick

Avatar for Patrick Perey

Patrick Perey

June 01, 2016
Tweet

Other Decks in Programming

See All in Programming
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
180
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
460
GISエンジニアから見たLINKSデータ
Avatar for nokonoko1203 nokonoko1203
0
190
AI時代を生き抜く 新卒エンジニアの生きる道
Avatar for coconala_engineer coconala_engineer
1
520
re:Invent 2025 のイケてるサービスを紹介する
Avatar for maroon1st maroon1st
0
160
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
330
Navigation 3: 적응형 UI를 위한 앱 탐색
Avatar for Sungyong An fornewid
1
530
PC-6001でPSG曲を鳴らすまでを全部NetBSD上の Makefile に押し込んでみた / osc2025hiroshima
Avatar for Izumi Tsutsui tsutsui
0
200
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
160
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
Avatar for Philip Schwarz philipschwarz
PRO
0
140
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
350
Vibe codingでおすすめの言語と開発手法
Avatar for uyuki uyuki234
0
170

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
140
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
74
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
KATA
Avatar for Megan Lloyd mclloyd
PRO
33
15k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
200
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
77
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
840
Abbi's Birthday
Avatar for Violet Bock coloredviolet
0
4.2k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k

Transcript

  1. IMPLEMENTING A DRAG-N-RELEASE UI @patrickperey the4dpatrick

  2. REACT NATIVE PLAYGROUND EXAMPLE http://tinyurl.com/dragnrelease or Search “Drag-n-Release” in the

    ReactNative Playground mobile app

  3. PANRESPONDER API https://facebook.github.io/react-native/docs/panresponder.html

  4. GESTURESTATE Example: onPanResponderTerminate: (evt, gestureState) => {},

  5. DRAG-N-RELEASE CODE

  6. FINE TUNING ➤ Circle Offset ➤ Offset Multiplier ➤ Differentiate

    between sections ➤ Multiple PanResponders

  7. MACROSTRACKER http://tinyurl.com/macrostracker

  8. IMPLEMENTING A DRAG-N-RELEASE UI @patrickperey the4dpatrick http://tinyurl.com/dragnrelease http://tinyurl.com/macrostracker https://facebook.github.io/react-native/docs/panresponder.html