React Native Sketch Elements

Written by wcandillon | Published 2018/02/26
Tech Story Tags: react | react-native | sketch

TLDRvia the TL;DR App

After two months in the making, React Native Sketch Elements is finally here. React Native Elements covers a wide variety of use cases fully functional on iOS and Android: Social Media, Music, Blogging, Photo editing, and more.

Please checkout the project documentation. We try to answer the most frequently asked questions there.

Sketch Elements is a fascinating UI kit designed by Sketch. In React Native Sketch Elements, all symbols from Sketch Elements have been meticulously mapped to React Components. As a result, you can quickly build a prototype using Sketch. From there, the translation to React Native is trivial.

Sketch symbols are mapped into React components

React Native Elements includes 5 app templates, more than 35 screens and 75 components. Our goal is to provide to developers the highest quality codebase possible. Eslint is heavily used for static analysis, detecting potential bugs and enforcing best practises. Each component is strictly typed using Flow, thus enabling you to use these components with confidence.

To maintain a minimal amount of dependencies and enable developers to have web-like development cycles, Elements mainly relies on Expo. We also kept strict performance requirements. For instance, all the animations and complexes gestures available are strictly built using the native driver from React Native.

Finally, the most important part of this kit have been live-coded on Youtube. The video playlist is available here. This playlist include a variety of topics, most of them relating to using the Expo API.

Building an Audio Player

Instagram Filters and Image Editing

Image Caching and Progressing Loading

Using Expo Camera

Hopefully you will enjoy this React Native kit and write feedback.


Published by HackerNoon on 2018/02/26