React Native Sketch Elements

William Candillon
2 min readFeb 28, 2018

--

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.

--

--

William Candillon

Maker of the “Can it be done in React Native?” YouTube series ⚛️🎥 https://start-react-native.dev