Demonstrating a React Native-based designer workflow for unprecedented control over all visual design
In my last entry about React Native (RN), where I discussed using RN to build apps across 11+ platforms, I highlighted React’s limitations with designer workflows:
“However, one of the biggest and most obvious challenges from my perspective stems from the gap between UX design and software development — especially if the UX design has a lot of nuanced animations. Coming from a world where the UX workflow has designers and developers as equal partners in the app creation process, this was a step backwards from my point of view.”
As a follow-up, I want to show you how we’re utilizing the RN framework and marrying it with our own designer workflow for unprecedented control over all aspects of visual design, on any platform.
As you’ll see from the following video, our engine provides designers tooling and augments the developer-centric nature of RN by implementing extensions into JSX. The extensions we created contain reference elements with exported AE files as the source (the AE files are already written as production code thanks to You.i Engine One’s exporter tool). This means that rather than manually type out each presentation value and dictate the size, location, layout, colour and different focus states of a simple asset — like a button — we simply reference the JSX extensions that we would apply for various UI components.
This is groundbreaking for a few reasons:
- RN does not provide tooling to orchestrate a full suite of UI controls animating together.
- RN limits you to animate one or two individual elements but to have a full designer-centric workflow that lets you have complete control of every aspect of a UI visual design is just not doable.
- OS’s have very specific animations and motion designs built-in, and since RN abstracts out into JS, it relies heavily on the platform OS to do all the UI rendering.
There’s only so much anyone using RN can control.
What we’ve done on our end is essentially cut out the middleman: the OS. Our You.i Engine SDK is unique where we don’t have to rely on an OS to dictate what we render. Our platform allows us to control every pixel through an Adobe After Effects (AE) plug-in. Although this is a similar approach to what other frameworks like Lottie, Keyframes, and Squall are providing, our SDK does it on a much larger scale, and is not reliant on the platform.
Our workflow allows for developers to still work with the APIs present in RN while improving their productivity, and gives designers the ability to control the user-interface without compromise.
We presented this very demo during CES 2018 and received some great feedback from our clients and prospects who are eager to use React Native to extend their platform reach to Roku, Apple TV, game consoles, and beyond. So much so that we established a React Native Beta Program for those clients looking to bring their video streaming apps to TV-connected devices using React Native.
We’re constantly chipping away at the possibilities with React Native and we’re excited to share more of our advancements with you. Next up, we’ll show a detailed look at our Hot Reload preview tool — which was seen in the video above, display a side-by-side list comparison of our RN code vs traditional RN, and showcase our custom RN video player. Thanks for reading.
If you’d like to keep up-to-date with all the fun we’re having with React Native, make sure you follow You.i TV. Oh, and if you like what you read today, make sure to drop us a 👏
