DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > Livecoding: Building a Real Life Color Picker [Video]

Livecoding: Building a Real Life Color Picker [Video]

Tag along as this creator makes a real life color picker mobile app with React Native, walking you through his process and coding.

Swizec Teller user avatar by
Swizec Teller
·
Apr. 16, 17 · Mobile Zone · Tutorial
Like (0)
Save
Tweet
3.82K Views

Join the DZone community and get the full member experience.

Join For Free


this weekend we set out to build a color picker for real life. grab your phone, point it at a thing, find that thing’s rgb color.

not sure why , but it’s a fun little way to play with react native and device cameras. we found a package called react-native-camera that makes camera integration easy.

import the project, and use it to render a live view of the camera in your app. that was easier than i thought it would be. guess that’s the benefit of being late to the game: others have already built the things that are hard. now you just have to put them together like lego pieces in novel ways.

that’s the main benefit of react native, isn’t it? components that do stuff and fit together. just write a little glue code, and everything fits.

my favorite discovery was quicktime’s movie recording mode. you can show your phone screen on your main screen.

no more this:

image title

this:

image title

isn’t that better? i think it is. it’s going to improve future my livecoding sessions and react native school videos.

hm, this isn’t a very long livecoding recap. could we really have done so little? was i that wasted from running a lot on sunday morning?

i mean, we found three javascript image manipulation libraries that are going to help us find color codes, but we didn’t get to use them before our time was up.

  • jimp
  • grafi.js
  • camanjs

and we discovered that even if you’re saving photos temporarily, you still need photo library permissions. forget to ask, and your app will crash. that part was confusing.

but that’s basically it, darn. next time i should drink more caffeine.

here is next day’s follow-up session. that was fun too, we learned that my computer is crazy slow.


React Native app React (JavaScript library) Session (web analytics) IT Library QuickTime GLUE (uncertainty assessment) Crash (computing)

Published at DZone with permission of Swizec Teller, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Develop With Oracle Transactional Event Queues
  • Machine Learning in Cybersecurity
  • Understand Source Code — Deep Into the Codebase, Locally and in Production
  • Data Science Project Folder Structure

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo