First community conference in Europe, focused exclusively on React Native. Community, core contributors, insights, networking and tons of knowledge - that's all waiting for you in one of the most beautiful cities in Central Europe, Wroclaw. 

React Native EU

After movie

Intro

The New React Native

Taking React Native to Consoles,  TVs, and Beyond Using the Dark Power of C++

React And React Native: Siblings, Not Twins

Cross-Platform Development With ReactXP

Successful Web & React Native Code Sharing Strategies

Security And Authentication In React Native

Forms In React Native

Is Typescript our Future?

Component First Navigation In React Native

Publishing And Maintaining A React Native Library

Continuous Integration With Microsoft App Center

Real World e2e Testing With Detox

Building Components Visually Using Draftbit

So You're Considering Brownfield

Improving React Native Performance

Navigation in Brownfield Apps

React Native CodeGen

iOS Build Infrastructure Overview

React Native @ Microsoft

Offline Strategies In React Native

Media Rich App Best Practices

Let's upgrade our React Native project

Statically Enforcing A Consistent UI Using Type Systems

I picked Up React Native As a Web Developer and Here's What I've Learned

Giving voice an action in React Native

Q&A Panel

Promo Movie

2019

The very first Expo & React Native conference in Europe.

A hands-on two-day conference with workshops and talks on React Native from Expo and Software Mansion.

App.js Conf

Opening

The State of Expo

Expo for web

Make your React Native apps accessible

Can it be done in React Native

Building Expo apps without code with Draftbit

Just use platforms

How to publish a React Native component library

Custom Build System

CSS Gradients in React Native

React Native newcomers built first app – vod.pl app case study

Automated CI/CD with Expo at Cameo

Upgrading Expo – The What, The How & The Why

React Native fundamentals for brownfield iOS apps

Some breaking news from RN world

What's new in Expo CLI

React Native Deployments with MS App Center

Using React Native to ship fast and navigate performance improvements

Reactive Data on the Full Stack

Reasonable React Native Apps

Closing Notes – Three Musketeers

Charlie Cheever interviewed @ Studio Live

Nader Dabit interviewed @Studio Live

Krzysztof Magiera interviewed @Studio Live

First community conference in Europe, focused exclusively on React Native. Community, core contributors, insights, networking and tons of knowledge - that's all waiting for you in one of the most beautiful cities in Central Europe, Wroclaw.

INTRO

Look at the Core

The "Transitioner" is the view in React Navigation responsible for animating between screens and supporting navigation gestures. We will discuss how views like "stack" work today, how they evolved, and how they fit into React Navigation and other navigation libraries. Historically, it has been quite difficult to create custom screen transitions and gestures. So the time has come to introduce a new Transitioner, and give you complete control over screen transitions in your React Native App.

Owning Transitions

Why GraphQL will become the new standard for accessing external data in your React Native app. I will show how using GraphQL instead of REST services the development process becomes even more declarative as GraphQL will take away the (imperative) hassle of tying data from multiple endpoints together. This will increase the level of complexity in React Native development, while also increasing the performance of the application.

Slides: https://www.slideshare.net/RoyDerks1/graphql-will-do-to-rest-what-json-did-to-xml-113763718

GraphQL Will Do To REST What JSON Did To XML

Let's take a look at look at what we can do with React Apollo today, how we can use it to even manage our local state and see what the future holds for us in the new releases of React Apollo.

GQL all the Things!

For the past 2.5 years I've been working on a bunch of projects, all aiming to expose some native capabilities to be controlled from JavaScript in React Native app. Most notable ones were: native driver support for Animated and two libraries: React Native Gesture Handler and Reanimated. All these projects were inspired by needs of navigation libraries and were meant to fill the gap between platform native navigation solutions and ones that are available in React Native.

Our React Native projects often starts by deciding whether to go with native navigation (react-native-navigation) or JS navigation library (react-navigation). But given all these improvements can we still call react-navigation "not native"? In this talk we will learn how Gesture Handler and Reanimated libraries came to live with navigation being the driving force. In this context I will discuss how far is react-navigation from finally proclaiming the badge of really native navigation library.

Slides: https://speakerdeck.com/kmagiera/it-all-starts-with-navigation

It all starts with navigation

When building a website, you expose an endpoint where you control the contents that are served back to a user. What if you could do this with a mobile app? Quin will be talking about how you can host your own javascript bundles, writing your own policies so you control exactly what version of the app different users get, and pushing them over the air to users for real time updates.

Self hosting mobile applications

So you want to buy a painting, but not sure which one. Or where to place it? we have a solution. Just use your phone for this. Augmented reality becomes more popular in recent years. Companies like Apple or Google invests tons of money to develop AR support. Smartphones became powerful enough to deal with all these new features. And it'll be ridiculous not to use all this power when looking for the best place to put a piece of art. In this talk we'll be looking at ARKit from Apple and the ways how we can use it with React Native. We'll be building a simple app to hang paintings on the wall and learning how to deal with newest AR technologies.

How to hang a painting on the wall with React Native

How do you manage user data in your React Native app? A popular approach is to use Redux or MobX with a persistence adapter. This works great for small, simple apps, but it has a serious flaw: it doesn't scale very well. Introducing WatermelonDB — a next generation database for React and React Native. 

Here's why you should care: 
- Highly scalable. Works as well for 20,000 database records as it does for 100. Instant launch. No matter how much data you have, the app still launches with near-zero performance penalty 
- Lazy loaded everything. Don't load all data at launch, query only the exact records you need. That's why it's fast! 
- Fully reactive. All records and queries are observable using RxJS. A change in one place propagates to all other places automatically 
- Made for React. Comes with a HOC so you can declaratively tie together data and components 
- Relational. Document stores are simple, but relational databases are powerful. Want to find, say, all posts that have a comment by user X? Sure, that'll be about a millisecond. 
- Cross-platform. Works on iOS and Android (using SQLite), on the web (using LokiJS), and it's easy to add more 
- Performant. Uses asynchronous processing, multi-threading (also on the web), resource sharing, and caching to squeeze extra performance 
- Built for sync. Comes with syncing primitives so you can supply your own synchronization code

Next-generation React databases

react-native-paper has always tried to deliver first class components for your React Native application. Highly adaptable, accessible and theme awareness for both Android and iOS following material design guidelines in a strict way. In this lighting talk we are gonna explore what we can do with Paper and discover everything that the team has been working on the past few months.

We are going to walkthrough the present and the future of Paper. And just FYI, we have a surprise prepared for today so stay tuned till the end!

Paper: Welcome to Material Design 2.0

This talk aims to familiarize you with Native topics(of Android & iOS), essential to your React-Native development.

The topics covered in the talk are: 
- Understanding “bridge” between JS and Native 
- Understanding Push Notifications for Android & iOS 
- Android & iOS Permission model 
- Android Build system & Manifest 
- iOS Build system (XCode, Info.plist) 
- Overview of where Android and iOS is heading in the future and what it means for React-Native developers

Understanding "Native" in React Native

React Native allows you to re-use your React code to build native applications. What’s not to like? This approach is simple in theory but challenging in practice. In this talk, you’ll learn how to go truly cross-platform, how to transform web applications into native applications and vice versa. 

Which parts can be used both in web and native, and which ones can't - and why? What are the intricacies of shared code bases and how do we handle cross-team communication when building web and native apps at the same time? With real-life examples, code snippets, and memes, you will learn everything you need to know to get started on your native journey.

Going Native: Reusing Code

A case study on a React Native app that relies heavily on a bluetooth device: 
- Quick introduction to BLE devices
- How to deal with Bluetooth in React Native - available libraries, configuration
- Will Bluetooth work when my app is in the background?
- How to reuse code with different platforms (e.g. Electron on desktop)

Slides: https://app.ludus.one/03937bba-f6ad-4267-b8ce-8ba91eddfbbe

Building Bluetooth powered App

Not everyone is happy with the hardware and software offered by Apple with their MacBooks. However for iOS app developers there is no other choice but using an Apple Computer. But is that really true? No! With React Native there are ways to work around this necessity. In my talk I want to depict the possibilities of developing iOS apps on a linux machine.

Developing iOS apps on Linux

Bringing to the next billion devices

Expo SDK (part of Expo toolchain) is an open-source library built around React Native, allowing developers to access native components and APIs without too much fuss. Until recently it has been a big monolith, it was hard for developers to either remove unused APIs from their bundle or to use some Expo code in vanilla React Native applications. 

We’ve decided it is time for Expo to be redesigned and split into multiple, separate native + JS (+ more 🤭) libraries which developers will be able to opt-out of using in Expo standalone apps and also to use in their plain RN projects. 

This talk will describe the process of making this transition, design of the solution we’ve settled on and difficulties we had to overcome along the way (and how we’ve done it).

Chopping Expo up into universal modules to take over the world

Machine Learning is a buzzword, because big companies love it. Big companies love it, because it's insanely cool. Join me as we cover the breath-taking aspects of Machine Learning (ML) and dive deep into how it's currently showing up in mobile; especially React Native. We'll touch the tip of the iceberg and spark ML creativity for everyone!

Taming the Machine (feat. Nicolas Cage)

Over the last three years, I’ve spoken to hundreds of React Native developers, and slowly a picture emerges. It’s a picture of excitement and frustration, obsession with technology and pushing the boundaries. It’s a picture of you. This talk will blend meticulous research, subjective personal experiences and speculative fiction to discover the core of that elusive Developer Experience, and ask the inconvenient questions you’ve always been afraid to ask.

This is a Talk About You

React Native uses Metro for building the JavaScript code that runs on the devices, both during development and production.

In this talk you'll learn the main concepts about bundling JavaScript code (both for web applications and React Native) and the architecture of Metro, which is focused around build speed.

Slides: https://speakerdeck.com/rafeca/building-js-bundles-for-react-native

Building JavaScript bundles for React Native

Hot reloading—the ability to push over the air updates to published apps and the promise of having your app “just work” out of the box on Android as well as iOS—make React Native a tempting proposition for frontend developers. But what do you do when you have to integrate React Native into a large existing native code base?

This talk is from the perspective of an experienced native iOS developer who has worked with React Native to ship several cross-platform Greenfield and brownfield apps.

Things I will talk about: 
- Overview of the challenges involved in integrating React Native into an existing app
- A real life case study integrating React Native into a native app with millions of users
- Strategies for passing data and events in a brownfield app
- Strategies for deciding what’s a good candidate to port to React Native and what’s not
- Working with build systems like CocoaPods
- Dealing with an existing navigation system
- How to do CodePush in a brownfield app
- How to handle navigation in a brownfield app
- Best practices for working with Native engineers
- Example brownfield application
Extra notes: This is a new talk based on work I did for a client with a large existing native app used by millions of users.

Brownfield: Lessons from the Trenches

Most user interfaces in mobile applications are visually attractive. And it’s always a huge pleasure for developers to work together with talented designers. However an excellent UI requires even more - the art of telling a story. 

My presentation is about enhancing the UI and UX by taking advantage of animation capabilities in React Native. During the talk, you will learn in practice when and how animations should be used and how to create an alluring story for the application.

Better User Experience With Animations

While Animations can be created in React Native pretty easily, real world mobile apps require a combination of several layers of animations, gestures and micro interaction animations to make user experience stand out. In this talk we will walk through the process from defining complex animation, to implementing it by going through all stages of animation creation process.

Demystifying complex animations creation process in React Native

This presentation will focus on core projects the React Native team is working on, particularly regarding the re-architecture of the framework.

The state of React Native

A/B testing is a common practice in web world. Should that button say "click here" or "learn more"? Will the layout of your homepage materially impact app downloads? Instead of going with your gut, let data drive your product development. 

I will be talking about how to do that in the app world using React Native, both for iOS and Android and the complexities around it. Also I plan to cover these aspects:
– Why should you use A/B testing in your business?
– What all can you test using A/B testing? 
– How can you do efficient A/B testing of change in your product?

A/B testing with React Native

Developers constantly strive to make stunning apps which not only solve day to day problems but augment life of their users in a way that the app becomes an important part of their lives. The examples of such disruptive apps is endless but at the same time it’s also important that an app for many does not leave few behind. In our quest for building next great app Apple and Android both provides apis to keep accessibility integral part of application design. 

In this talk I’ll be introducing this concept to every React Native developer and give hands-on how they can make use of voiceover, accessibility properties and other accessibility elements part of their RN app to make an application inclusive for all. I am equally excited to talk and give demo on this topic since such reminders have far reaching effect on developer community when they build their next app.

Building apps for everyone - Accessibility with React Native

The Native part in React Native can look very scary and intimidated but is does not have to be that way, so in this talk you will see what the most frequent challenges are when working on the native side of React Native and how to conquer them. 

If you attend this session you see and learn how to solve a lot of native issues that pop up when working with React Native native code and modules.

- The basic of the React Native native module
What Is a native module in react native, what are all the moving parts, how do the function in the total process of react native and what is the potential
- Extending native modules
Native modules are easy extendable, you can use other languages like Swift or Kotlin and even other platforms (Windows/Mac). Also you can extend existing native modules form others if you want to
- Building
Showing what happens when building, how to solve build errors, solving dependencies and to release when building succeeded
- Tips & Tricks
Some more tips and tricks when working with native code in your react native project which I encountered in my career.

Getting to the Native in React Native

React Native EU 2018 Q&A session with Quinlan Jung (Expo), Eli White (Facebook), Harry Tormey, Matt Hargett (PlayStation), Akshat Paul (McKinsey & Company).

Thank you!

Krzysztof Borowy from Callstack conducts interviews with conference speakers:
Gant Laborde - InfiniteRed
Krzysztof Magiera - Software Mansion
Quinlan Jung - EXPO
Mike Grabowski - Callstack

Interviews with Speakers

React Native EU 2018 2nd edition took place on September 5-6th in Wroclaw, Poland, as the conference focused exclusively on React Native. It was preceded by two-day workshops session.

The Movie

2018

First conference in the world to focus on anything and everything React Native. No web, backend or general purpose talks. We've seen it already. Community, core contributors, insights, networking and tons of knowledge - that's all waiting for you in one of the most beautiful cities in Central Europe - Wroclaw.

There are lots of tricky things with React Native, partially because of iOS and Android ecosystems. There are lots of unanswered questions hanging around, or just people struggling to find answers for problems that may seem trivial to us. This conference is the place they can visit, get answers to questions and go home start writing their next cool startup. And that’s the real purpose of the conference.

React Native EU 2017, organized by Callstack.io, was the first conference in Europe focused exclusively on React Native. It took place on September 6-7 in Wroclaw, Poland.

Welcome to React Native EU 2017

Building libs is fun, but building apps is REALLY fun. Let's go over some of the best practices and ways we can build apps that fit your needs and your team!

Rapid React Native

React Native is much more than javascript. Every React Native app runs at least 4 different languages for the purpose of sharing code, implementing efficient subsystems, and interacting with the host system. 

We will look at how these systems work together and among other things learn how a javascript style object in your component gets translated into efficient C code in Yoga, the underlying layout engine.

React Native, The Native Bits

The history of UI programming is littered with frameworks that failed because they compromised user experience in favour of rapid development. As a technology, React Native has what it takes to avoid this fate, but it’s up to us to prove it by building delightful experiences that feel native to the platform. 

The question “does it feel native?” encompasses a breadth of topics: predictability, performance, gestures, motion, sensors, sound, and more. For those of us coming from web development, there’s a lot to learn. 

This talk explains what users really expect from our apps, and how we can use React Native to not only meet, but exceed their expectations.

When “Good Enough” - Just Isn’t Good Enough

There’s no shortage of web apps which let you quickly write some code and preview it instantly on the web without having to setup a development environment locally. Snack is provides the same seamless experience for React Native. In this talk we will dive deeper to see how Snack works under the hood, the challenges we faced while building it and what can use you use it for.

Building of Snack  The React Native Playground

Asynchronous rendering is one of the core principles of React. On the web, the ability to batch updates and work on a virtual DOM proved to be key factors in improving rendering performance. The same architecture seems to do miracles in React Native and gives JavaScript the performance boost needed to render native views effectively. This benefit of React Native is also its greatest drawback. 

For certain types of problems in native mobile, asynchronous rendering introduces an overhead that is almost impossible to bridge. List views are a good example, as even the best implementation to date, FlatList, struggles to keep up with the fill rate of the most naive list implementation in pure native. Is it possible to introduce synchronous rendering to React Native and tackle this category of problems from a different direction?

Going Over The Speed Limit  Synchronous Rendering in React Native

A great strength of React Native is how easily we can interface our app with native code. While working with React Native, I created a module (react-native-image-resizer) to resize local images using native APIs, integrated a native SDK to a React Native app and we added React Native to an existing native app. Let's see how to do this and how it's working internally!

Building native modules for React Native

At Badoo we have four main mobile teams: Android, iOS, Windows Phone (yes, for real!) and Mobile Web. When Mobile Web started adopting React in their projects, it was only a matter of time for us to ask ourselves: should we try React Native? And so we did! This is a short story of our journey with React Native: discovering it, adapting it, making things work and the most important part: convincing your managers that it's worth our time!

React Native and Badoo story of a massive experiment

Every now and again we need to integrate native code into our React Native app. First we create the iOS glue, the Android one and this repeats over and over again for every plugin. Wouldn’t it be great if there was something like react-native init ... for native plugins? I created react-native-create-library a while back and would like to present how it works, what it does and hope for some feedback to improve this CLI app.

Scaffolding plugins for React Native

React Native is great product but lacks for stable, intuitive and easy navigation API during many years. Every year we see new, better API: Native Navigator, ex-Navigator, NavigationExperimental, ex-Navigation, wix native navigation, airbnb native navigation, ReactNavigation… 

Once I've started React Native development, in 2015, I created RNRF - simple API for easy navigation. It was clear that better navigation instruments will come later but I didn't want to change my code again and again to switch for better API. 

Every new major version of RNRF is based on different navigation framework and mostly preserves own API. Another goal was to represent all navigation flow within one place in clear, human-readable way - similar to iOS Storyboards concept. This way other engineers could understand your app flow faster. 

I want to talk about latest version (v4) of RNRF based on ReactNavigation and MobX and provide best practices. New version provides not only navigation solution but also proposes a way to manage your app state.

What is RNRF (react-native-router-flux)?

Bringing Designer and Developer on the same repo with React Native Builder. Don't just prototype but code as a designer. Introducing the React Native Builder.

Introducing the React Native Builder

If your app is a hybrid of native and RN, you will probably rely on a lot on bridges to expose native behaviour to your JavaScript. Like any production code and especially for infrastructure code we want to test the bridges. In this talk we will show how we covered our bridges with automated tests.

How Skyscanner Tests RN Bridges on iOS

The declarative nature of React components is what makes it composable and attractive for UI development. React Native provides a way of using React for native development, but also introduces a couple of APIs for interacting with native modules, and these are not declarative. It is not always clear where to call these APIs from, and usually they end up in lifecycle hooks or redux middlewares in an unstructured style. In this talk we will see how Cycle.js (or in general, a hexagonal architecture) can help manage both React components and Native APIs in a declarative fashion, to organize code and make it more testable.

Composable Native APIs

Developing a good design website is an important skill, but let’s not forget that our code will be deployed in production environment and thousands will consume it. That may lead to a nightmare: you get a stack trace of a bug, but wait, it is minified and packed, you have no idea what this bug is or how to reproduce it. In this talk we will take Michael's rich experience in production environment and go from case to case to learn from other people’s mistakes.

React developer? Great! How are your production skills?

An introduction to writing React Native applications using ReasonML. Find out why ReasonML is great, why writing React Native with Reason is the jam, and learn how you can get started with it today!

Reasonable React Native

It's tempting to think that smooth and delightful UIs would also have beautiful, easy to read code. In all practicality, there are a number of gross hacks that React Native developers will utilize to implement slick user experiences. We will review the implementation of a photo viewer, and discuss the dirty hacks that were necessary to deliver a delightful user experience. Then we will look forward and see how the ecosystem can evolve to avoid the hacks without compromising on the resulting experience.

Practical hacks for delightful interactions

React Native was originally built to target only iOS and Android operating systems, but as popularity of react as well as the reactive paradigm grew in popularity and opened other doors to other platforms, projects such as React Primitives and React Native Web began to take shape. We are now also seeing other paradigms in the same space such as ReactXP, Weex, and Flutter begin to take shape. 

We will dive into each of these platforms and discuss how they work, what their APIs look like, how they differ from the traditional React Native platform, and how the future of cross platform development is evolving.

Cross Platform & Beyond

You’ve got an existing application and have come to the exciting conclusion that you want to adopt React Native. Rather than rewriting your full application at once, you may want to introduce it in an iterative fashion and without impeding progress for developers that are continuing to work on the existing codebase in the interim. But where and how to start? 

This talk will focus on _why_ at Artsy we came to the conclusion to use React Native and provide practical examples on _how_ we integrated it into our existing Objective-C/Swift codebase.

Integrating React Native into an existing native codebase

How do engineers at Facebook build products with React Native? We'll walk you through building a simple screen in the Facebook app with React Native on both platforms, covering some GraphQL in the process. 

We'll discuss the collaboration between engineers and designers. We'll also cover A/B testing which is a crucial part of shipping most code at Facebook. The talk has practical examples taken from a project Martin worked on.

Building a Product with React Native

React Native provides us with a set of primitives for building mobile applications. A few of these can be aggregated into a "networking" layer that manages the transfer of data. This layer was designed to mimic an API we have in the Web, but despite all the similarities, it has its own *qualities* and caveats every good React Native developer should know about. 

In this talk I'll try to guide you through the networking layer in React Native and share some tips and tricks I've learned along the way.

Network layer in React Native

Physical Web taking the world by a storm. More and more applications interact with physical devices using Beacons and low energy bluetooth. In this talk I will cover how to interact with physical world from inside React Native application.

Getting into Physical web with React of Things

React Native is great for developing large applications across multiple teams, but only if you architect your app well. See the code and architecture that allows us to have disconnected teams working on separate modules but delivering a cohesive product that users feel is just one unified app. How many developers do you have working on your React Native app? One? Less than five? 15? What if you had over 40? 

React Native is a good fit for developing large applications across multiple teams in a company, but only if you architect your app correctly. Less than two years ago, I could count all of the developers working on our app on one hand. Now, I don’t even know everyone’s names. Learn how we architected the Wix app in a way that allows us to have multiple teams on multiple continents working on separate modules but delivering a cohesive product that users feel is just one unified app.

Scaling Mobile Development with React Native

This talk will present the concepts of Offline first applications, Optimistic UI Updates, “Transaction management” in redux. Humanly speaking, I will explain how your app should behave in our always kinda connected world (kinda, because you loose the network in the Subway, in your bathroom or in the elevator) to avoid frustrating your users, let them use your application even when they don’t have network and access data loaded in a previous session when they need it most (you know, when you have 1% battery left and turned on Airplane mode to keep your phone going just for the time to come home or find a plug somewhere). I will present some code examples of using awesome libraries to do that easily and talk about the local storage alternatives (AsyncStorage, SQLite and Realm) available to React Native.

Offline first applications in React Native done well

What if I told you that accepting payments in mobile apps could be easy and that you could use a single API to accept payments across three different platforms? In this talk, we’ll learn about the Payment Request API, a new W3C standard that dramatically simplifies accepting payments on the web, and how we can use React Native Payments to leverage it in our mobile apps.

React Native Payments  Bringing the Payment Request API to React Native

Coming from the web world, building iOS and Android apps are a pain.It takes time, there are a ton of different tools or services to use and jump between to get to the end point and it is just a loss of time that could be used to fix that weird UI element you did not have the time to finish, or that code that hasn’t been tested but really should be. 

Thankfully, fastlane is here to help us and makes it incredibly easy to automate Android and iOS builds, deployment, screenshots and far more. This talk will present how to get started and build and deploy a React-native project to Testflight (iOS) and the Android Play store beta track and will present in more details a subset of the tools provided by fastlane.

Automate your React Native world with fastlane

React Native EU 2017 Q&A session with Tal Kol (Wix), Eric Vicenti (Facebook), Andre Staltz and Ville Immonen (Reindex).

Q&A Session

React Native EU 2017 - Thank you!

React Native EU backstage interviews with Eloy Durán (Artsy), Ken Wheeler (Formidable Labs), Martin Konicek, Tal Kol (Wix), Naoufal Kadhom (Netflix) & Mike Grabowski (Callstack).

Backstage Interviews

React Native EU 2017 conference took place on September 6-7th in Wroclaw, Poland, as the first conference in Europe focused exclusively on React Native. It was preceded by two-day workshops session.

The conference has gathered numerous highly acclaimed speakers & React Native community leaders from all over the world and was very well received by the attendees as well as the community.