JSFoo Pune 2019

Vector graphics is in fact the best way to provide great visualization and interaction combined. It exist on all platforms in some way or form, so it’s just natural to use it in React Native. In this talk, I’ll show you how I integrated the use of SVG with the opinionated component and state system of React, but in the same time keeping things highly performant when interacting with the UI thread - a topic a lot of developers are struggling with.

Outline

• Introduction (me, Capriza, React native @ Capriza)
  • Ori Harel - quick career recap
  • Capriza - what is it, what do we do
  • ApproveSimple - what’s the app, show it. Talk about writing an app from the ground up in React Native
• SVG - what is it and why should we care?
  • Yes, you could get a long way with just <View> and <Stylesheet> BUT -
  • The language almost all designers “talk”
  • The best way to create data visualization
  • The best way to create dynamic visualization (you’ll be amazed with what can be accomplished with SVG)
  • Many developers lack the knowledge
• SVG 101
  • Core elements (SVG, G, Rect, Circle, Line, Path)
  • Some basic examples in web
• Vector graphics in native
  • Android - the graphics package (android.graphics / VectorDrawable)
  • iOS - Core Graphics
• Vector graphics in React Native - options?
  • “Official” support - the ART library (built in on Android, need additional setup in iOS)
    • Pros/Cons
  • Great package - react-native-svg
    • Pros/Cons
• Examples
• Animation
  • This is what we’re making
  • animated example with the ART library
  • animated example with the react-native-svg package
  • useNativeDriver=true ??
• Pains? issues? future directions?

Speaker bio

An experienced full stack developer mainly focused on UI and mobile apps. I’ve been developing mobile apps for almost 10 years now working at companies like Mercury (HP), Jajah, DVTel, Check (Intuit) and Capriza. Technology evolved over time and spanned from C# / Java (server side and Android), web (HTML and CSS) and multiple JavaScript frameworks. For the last 3 years I’ve been building React apps and for the last year - React Native. You can see me talk about React Native in Chain React 2018