React Native EU 2021 - Virtual Conference: Day II

[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Applause] [Music] [Applause] [Music] [Music] [Music] [Applause] [Music] [Music] [Applause] [Music] [Applause] [Music] [Music] [Music] [Applause] [Music] [Music] [Music] [Applause] [Music] my [Applause] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] done [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] hello everybody and welcome back to react native eu fifth edition we are once again streaming remotely from coldstack office in wordsworth poland and i will really welcome you all in a second day of our conference that is going to be equally exciting as the previous one full of technical talks before we start once again let me remind you that there is a discord channel where you can discuss all the crazy ideas share your experience and knowledge as well as ask questions about the talks that we will answer on our react native show podcast you can also tweet with reacnativeeu you can do it right now as we speak so that your friends can know that you are joining our stream and they can join as well and they will not miss what we are about to explore i guess that's a good moment to start so the first panel is all about developer experience and tooling yesterday we have talked about building apps uh smaller at a scale using several different libraries so that's all been focusing on building applications in general today we're gonna talk about developer experience and tooling in other words how we can make sure that we can work with react native in a easier faster way and how we can support and address some of a more advanced use cases our first talk from this panel is going to be a by done by two speakers from microsoft tomi and lorenzo and they are going to tell us how they are handling microsoft's code base quoting their uh brief microsoft is big like really big and i guess they're right uh their repos are huge and you know historically we've been all discussing how facebook is working at a scale i guess you have all heard that mike that facebook has a mirror of react native how they are syncing back changes to the app stream of on github how the pull request process works how facebook github bot is working but we've been all discussing facebook code base today uh it's it's great because we can compare that to microsoft how they are using react native at a scale how they are managing the complexity of their applications and all the best practices that they are adopting and i guess that will be different from facebook because every business has their own challenges and solutions so tommy and lorenzo we are really excited about your experience and handling large code bases such as the one you have so show us what you have prepared for us today hello everyone and welcome to our talk i'm super happy to be here it's actually my first time speaking and speaking for microsoft is really exciting for me so today i'm going to talk with you about in improving all the repositories and by that i mean improving the rns ms dx which probably for most of you doesn't mean anything and that's you know it's on purpose it's a joke because you see at microsoft we like a lot uh to use acronyms so in this case uh what i'm talking about is actually the developer experience when it comes to react native at microsoft you see at microsoft many things are kind of complicated or like super big and super you know weird sometimes to interact with so we decided to come here and talk to you about some of the challenges that we're facing and also present to you some of the solutions that we come up with because we think that some of them you can probably take with you both metaphysically and maybe technically let's start with like one major concept so as i'm saying currently microsoft is really big and as a cooperation with many many companies and many products we have a ton of different code bases and many of them are mono repositories and a mono repository is basically a big repo in which each folder is its own package its own library and it's aware of the other folder next to it so it doesn't need to install through npm package.json you can only you can refer directly between of them between the different folders and we have many of those things and sometimes we need them to even communicate among each other so in a way to describe this complexity we decided to go for something really big and complicated like the galaxy and as you can see in this picture we have decided to show the different monorepos as solar systems because again it's not just a planet it's literally like its own living system where things work but also sometimes you have relationship between those so this is kind of like our starting point this is where we want to you know set the stage so to introduce you to our cosmos uh i'm we i'm going to be one of your astronauts i'm lorenzo chandra you may know me as kelsett i'm a senior software engineer at microsoft and i'm also a academic container and with me is hi i'm tom ingram i'm you may know me as tdo64 on github i'm a principal software engineer at microsoft long time open source contributor but first time speaker and we're really excited to be both here as you can see we come from two different solar systems which is like one of the cool things about being in this kind of big company and also as is one of the reasons why we decided to work on these problems because we're from different parts so that we can collaborate but before we do that tommy how about you tell us a bit about you know how react native came to be at microsoft let's start from there sure so you know as in most companies whenever new tech comes out like react native someone needs to go and do the exploration work and that someone you know at microsoft was basically the skype folks what they did a few years back when they rewrote their mobile app as a greenfield react native app you know and thereby demonstrating that you can use javascript to create delightful experiences and still achieve native performance and i think what naturally followed that was that other teams started looking into ways to leverage this new technology to bring existing features that were written for web at the time and then bring them to our users on mobile devices on their you know pcs or laptops and then so on and that's essentially how the the the brownfield approach started at microsoft today we have uh recognitive experiences in many office apps including outlook um and teams but you know we started out with one team making a proof concept that got copied by other teams that again got copied by other teams and so on and that way the approach organically grew within microsoft and that's also how this concept of experiences came to be you know previously one would have to go directly into an app like for instance outlook in order to write the the feature that you would want inside of that app but with the brownfield approach you can now stay in your own repo say repo a here write your experience and then when you're happy with it you can integrate it into a repository b here and that will eventually be shipped into a product like outlook or teams or some other app and that's basically how we kind of abstract away the complexities uh you know of being writing one experience but integrating it into many many apps within microsoft and that's pretty interesting but also comes with a series of challenges right so let me kind of like throw you some of the challenges that we're facing as i was mentioning earlier we have the system of monorepos and sometimes we need to send code between them as also tommy was was showing earlier so for example one problem when when we try to do this and it comes to react native experiences is like who keeps recognitive up to date in each code base does it mean that every monorepo needs a team that knows how to do a rack native upgrade or like even when when you do the bump like if i'm on 61 and euro 62 it doesn't mean that i need to rush to 62 doesn't mean that we go together to 63 or like what if our configurations are even more different what if i'm using hole and you're using metro uh or i'm on 62 euro 64 and we use different libraries what if my code that i'm writing inside my code base needs to go on two different more repos and they have different configurations how can i make sure that it works for both of them more in general like how do we handle open source libraries like what if i want to use recognitive svg how do i make sure that everyone is using the same version so that my the same code doesn't create problems some of these challenges are really really complicated and today what we're going to try to do is dive on two of those we have picked these two because they're kind of the ones where we know the answers and we think that the answers can be of use to you too so let's start with the first one how can we separate the developer experience from the complexity of the tooling this is this is something that tommy kind of briefly touched on but i'll dive into it a bit more and the second problem is how can we reduce the burden of alignment across different monorepos this is what i was just mentioning and by saying burning of alignment what i mean is that we want something that is automated we want something that doesn't need to rely on some human necessarily to do the entire alignment process every single time but let's start with the problem number one separating the developer from the tool chain so bringing back up the graphic that tommy was showing what we can see here is that we have code base a we have the developer working on the experience and then this goes into codebase b and then gets deployed into the off stop in this scenario outlook mobile how can we make sure the developer is capable of creating the experience tested and then it will go through correctly some of you may think well you know you can just give the ostop and the code base b to the developer so that they can build the app and then they can see the feature working within that app but when you're a company of size of microsoft this is not viable there are many different reasons there are security concerns there are authorizations problem and there's also like a more practical reason which is if you were to keep two massive code bases on your machine like and every time you need to build uh the final host app it takes 30 minutes it will be a lot of time wasted and a lot of you know processing power that needs to go to for maybe you're just developing a small sub page with a button you don't really need the entire app to work so what we decided to go for and like what we want to achieve is basically the idea of a sandbox something that you have locally in your code base that replicates well enough the environment that you will have in the final host up so that you can develop in isolation we call this sandbox the rac native desktop and the way you can think about it is basically a kind of like a rack native init app with the difference that it's way less complicated because we squashed most of the complexity below the surface and by doing so it means that the developer only needs to have it set it up and they can just put their javascript code in there they don't need necessarily to worry about the native side and they just can keep iterating on it in that sense it's kind of similar to the expo client like where the developer only needs to worry about the javascript code and not necessarily about the native uh but when it comes to it and this is probably the difference with the explorer is that our recognitive desktop allows you to modify whenever in whichever way you want the native code and also thanks to hiding the complexity of the native side we are also able to support many different versions of rack native all at once and you will see soon what i mean by that because you know it's fine and dandy to say that our solution is perfect and it's really really good but a completely different thing is to show it to you so tommy how about you do as suzu says here and show us how ragnated the stop works sure now let's let's start with integrating react new to test that into react native webview so here you see that i have a clean checkout of react native webview just to show you there's nothing i have done in here so the the first thing we'll do here is to move the existing example app out of the way right and then we will install react new test app and then we will initialize a new test app we will call it webview example for now and then we'll select the platforms that we will support i know that webview supports both mac os and windows so i'm going to keep those now let's have a look inside this newly generated app you can see that's very bare bones there's a few configuration files inside the ios folder there's only a pod file the xcode project will be generated much later for now let's copy copy over some of the code from the previous example app and that's it now before we build let's take a look inside package.json you can see here that when we generated the new app recognition test app will try to match the react native version that the library is using i'm going to bump this to 62.3 because i'm using xcode 12.5 and i want to avoid build issues next i'm going to add react native web view right and then you will run we will run yarn and pot install as we normally would and then we'll start the build so in a moment we should see the webview test app launching and uh just to show you that it works as normally i'm gonna click around this button here and if we go back now we see that uh we are running react native 62.3 but setting up the new app that's the easy part let's have a look at how you would bump react native if you've done this before you know it's not a very easy process especially if you're unfamiliar with gradle xcode or visual studio so now we need to bump a few packages inside of a package.json just to make sure that we don't hit any issues we're gonna bump these as well all right now we're gonna run yarn and pod installed just like before but we need to remember to clear out the pods files just to make sure there are no old files lying around causing trouble all right now we can run pod install again and we'll start the app just like before and there we go that's it and see it works just as normally i can click on this thing here and if we go back it says that it's running 63.4 and that's how easy it is to bump react negative using react native test that that's pretty dope so you know as you see uh you know previously when we had the uh you know i briefly mentioned that we copied the patterns from other teams and you know like sometimes we would verbatim copy you know the test app code as well and so many teams had their own test app and so they had to maintain their own test apps and whenever we did a bump to react native they would all have to go and upgrade their test apps as well and so you know it's time consuming for everyone uh but with reactionary test app you have a single test app where we do the bump and then the teams using it just need to do a bump inside a package json and then they don't have to worry about you know tweaking the project files in order to make it work and other you know like you know not a lot not all people have uh domain knowledge within uh you know xcode or visual studio in order to to do this now we're constantly basically hidden all away all of the complexities inside the react native test step so you don't have to worry about it and the nice part about it is that you know when you're when you there's a fix or a bug you can apply them once instead of reactive test app and then have them propagated across all of the teams and they will all benefit from it uh if you have a new feature implement them inside regna test app everyone will benefit from it not just your own team and also because it's it works on so many platforms it means we can help a lot of people at the same time so it's either ios android mac os or windows it works with all of them so that's pretty pretty interesting too but let's stop this hype train about react native desktop and let's go back to talking about problems that's what i like to do talk about problems and complain so let's talk about aligning the monorepos the second problem i was mentioning so as i was saying earlier it could be that you know you have your monorepo and you're using arachnid version x but there maybe there's another one and apparently yeah they're using ragnay version x but then you realize oh i'm using package b version two but they're using version one or what if they're using react native version z or ragna version y and what if they're using hermes but i'm not like there's a lot of you know independency between these different monorepos but this can lead to problems when it comes to sharing code so basically what we need to ensure that these kind of problems don't arise is some sort of like antenna that propagates a signal to all these different configurations and kind of aligns them we have decided to call this tool this antenna uh dab check basically this tool uh understands the structure and the dependencies within a package.json and can modify it based on a series of curated profiles what happens is that dub check can read through all the different dependencies and let's say you told the tool hey i want this package to be ready for 64. then that check has a profile that tells it okay if your euro 64 you need to be using a recognitive svg this version you need to be using react this version and it will modify the package.json accordingly and not only that but it can even fix misconfigured packages of json like if you're using a library or like you're working on an experience which is a library that then you send to a different app you need to configure for example the peer dependencies so that whenever another packages consumes you they know which version of things they need to use so sometimes that can kind of fall off because it's not strictly mandatory so this tool can also fix the misconfigurations and you'll see that in a few minutes also another really interesting part about dab check is that since it's a cli it can be mostly automated but let's stop talking about it tommy how about you tell us a bit more about deb check sure so in this monorepo we have hundreds and hundreds of packages let's imagine that so in this repo there's a nice library that we'd like to consume this library is already configured to use rnx kit you see that it has support for 63 and 64. this is also reflected at the bottom in the configuration here but it has a direct dependency on react 17 which is troublesome because react number 63 will install react 16 and if you're consuming this package you will get both 16 and 17 installed and that will cause issues our next step check will fix this you can see here that it tells you to remove react from dependencies and move it down to depth dependencies and then under peer dependencies it tells you to add 16 and 17. and this is all according to the configuration that you put at the bottom here let's have a look at another library so this one is actually perfectly fine everything is correctly configured but you know i want to add web view but uh i don't know which package to use so i'm going to open this up and in the configuration section down below here i'm going to say i need webview capability as well so one of the things that rnx step check does is that it will suggest which package to use and in this case it will be react native webview at 11.4.2 that's pretty neat now uh let's have a look at a library no an app that consumes both of these libraries so here's one app that consumes another library and nice library it also has a slightly older version of react native but that's okay we'll fix that in a bit so we run rna step check and you'll see that it tells us to bump to 64.2 and also by the way it picked up that another library has a dependency on webview and tells you to add it as well but all of these so far depend on a configuration what if you have a package that don't have a configuration what do you do then well our next step check hopefully will be useful in that test in that case as well so here we have a test app that doesn't have a configuration it also has the same problem as the previous app but it's using a slightly older version of react native we're going to add a flag here called vigilant and tell it to use the 0.64 profile basically that will tell us that we want to use react number 64 and it will tell us that we should probably bump it to 64.2 you can also use this tool at the top level of your repository so you can get an overview of all the problems that we've seen so far you can see here it just dumps the uh all the problems that we saw earlier and then to fix this just add dash right and it should fix it up we'll see that in the git div here all the changes that it suggested earlier has now been applied and you need only commit this and you're done so this is uh how we use this internally is that we integrate it directly into our ci we run it every time a prc is submitted a build is started and so on the our next step check runs and then it will tell the user if they need to make any changes to their package package.jsons and the way we've also integrated so that it will actually post a comment on the pr with suggestions so that you just click a button and the suggestion gets applied directly onto your branch so this ensures that everyone inside of your monorepo are using the exact same version of react native of react native webview and what have you but also since many monorepos are using the same tool we ensure that they are aligned all aligned additionally uh if your monorepo publishes a lot of packages what you can do is to export a custom profile and say that you know for react nato 64 you should be using these versions of my packages and then you export that profile to other monorepos they can use apply that to our next step check and thereby making sure that they also stay aligned on the correct versions of the packages for the respective react native version and that's super powerful in particular for what we were saying earlier about removing the burden you know it's it's awesome so now trying to recap a bit so recognize the stop we introduced that to separate the developer experience from the complexity of the tooling and that check as we were just saying to reduce the burden of alignment across different monorepos by relying on the automation now um so we are kind of like concluding here so as we were mentioning at the start i wanted to go back to the fact that uh these are basically by products of the lessons we learned the hard way the challenges that we were facing and while we realized that microsoft is a really big company and not many of you may have the precise experience that we were having you may still find some challenges that are kind of similar like what if you have a arachnid library and you want to make sure that it's configured correctly what if your library doesn't have a test tab or like you didn't you added it but it's always out to date because you don't have time to upgrade it these tools could be useful for you too so how about we make this tool open source so that you can use them i mean this is the oldest trick in the book but hey we're introducing you all the different tools that we were just discussing so recognitive desktop and dab track are both available through the repos you're seeing right now on screen recognitive desktop is in song repo and then dab check is in the rnx kit repo it's one of the packages in that monorepo also you can find in our next kit quite a few interesting small little tools that may be interesting so check out the repo and look at the other elements that you may find there anyway thank you for listening we hope that you will you know find a little bit of happiness in using these tools for yourselves and we hope you are enjoying the conversation i was lorenzo with me was tommy we're really really happy to be here and feel free to shoot messages our way and ask us questions all right goodbye goodbye thank you again thank you you tommy lorenzo for this talk and i guess i wish all of you that our code base has reached that size so that it's going to be a measure of the scale that we have reached and i guess some sort of a success for our products now moving to our next speaker we have our very own power from call stack and he's going to talk about code splitting with react native now code splitting is a concept that is probably more popular within web development where you can actually split your javascript bundle into smaller chunks so that if you have a large code base you don't have to load everything at the same time but you can actually load chunks so that your users get your code faster the critical business logic is loaded faster and it's just that if your application is large you can optimize some of the issues that arise as a result of the large size of the application now with react native this this sounds rather crazy because most of the time there is only a single javascript bundle we load everything from the disk so why we should even code split our javascript bundles with react native i guess pavo has prepared some of the some of the some of the most unique and crazy use cases for us today as an example that repack the library that he has created is just something that you should be using as of today so pavo uh the stage is yours and uh show us what you have created with repack and why we should all be using it when our applications grow hello everyone i'm pavotrisva also known as zamotan on the internet and i'm a software developer at call stack today i'm going to talk about code splitting in react native so let's start by answering the question what code splitting actually is code splitting is a technique to split the code of your product into multiple bundles those bundles can be loaded on demand or in parallel instead of shipping the whole application's code to the user you only deliver the bare minimum of the code and load the list later once needed now before we move forward let's establish what a bundle is in a nutshell a bundle is a single file container for your code it includes compiled source code all necessary dependencies and in some cases static files you might be wondering why we need a bundle for react native applications well your project in order to be executable by react native needs to be processed and converted to a format which javascript virtual machine inside react native understands we call this format a bundle and usually in react native applications your project is contained inside single bundle but doesn't have to be that way let's talk about code splitting with code splitting the project's compiled source code dependencies and static assets are part of multiple files instead of a single one the entry point to the application is included in the main bundle sometimes referred to as an entry chunk and it includes all necessary code for the application to work and minimal code to present something to the user all additional features and logic are contained in the additional files called chunks those chunks can contain features needed later in specific situations or for specific group of users there are two main usages of code splitting in context of react native dynamic content and feature delivery which allows to provide certain features on demand or for a specific user or group of users secondly there is an optimization use case because code splitting allows to load the code later on demand it can be used to defer code loading until it's needed this can improve time to render and time to interactive since react native has to load and execute less code initially at the startup let's look at some of the examples of code splitting in mobile applications first example are so called super apps or mini app stores those applications consist of multiple small dedicated services sometimes referred to as a mini apps it's a closed ecosystem where service or a mini app is tightly integrated to provide a great and efficient experience for the user because a super app or a mini app store can contain tens of hundreds of mini apps not every user will use all of them based on that it would make sense to download and execute the code only for the ones that the user intends to actually use and then the host application would initially only ship the core apis and functionalities to the user as for the example of super apps that exist on the market today we have couple of them but the ones worth mentioning are alipay and wechat wechat for its sheer size of 1 million mini apps and alipay for a tightly integrated ecosystem of services that work together to provide great experience for the customer so on one hand we have super apps and mini app stores but code splitting has use cases in other group of applications as well i call them modular applications it's an umbrella term of applications that could extract part of the functionality into modules loaded on demand or based on random factors like user role or group role subscription plan or preferences modular application description is especially fitting for applications heavily based on reserve roles for example e-learning applications or school related applications where we have vastly different functionalities for student and for teacher so based on the user role the application could only load student functionalities or teacher functionalities this would improve initial download size and startup performance another example would be companion applications for hardware and physical devices we could put here most of the automotive applications where functionalities could be splitted into on-demand loaded chunks based on the vehicle parameters now that we know what types of applications can benefit from code splitting let's see how code splitting can be implemented inside mobile applications let's start with android natively on android we can use feature called play feature delivery it allows to split native code into multiple bundles it is even possible to embed react native inside such bundle in context of react native play feature delivery can be an option for brownfield applications but play feature delivery has some drawbacks the biggest one is that play feature delivery is a native functionality so it will be difficult to create architecture where javascript code uses the same javascript virtual machine it would be much easier to create application with multiple react native instances each one in its own play feature delivery bundle this means that native coding skills and knowledge is required to pull off such architecture and it will be mainly used for form branching applications for greenfield applications though the challenge to share single javascript virtual machine will be a major blocker on ios there is on-demand resources functionality that could be used to split some of the content like data images shaders particles and similar however native code cannot be an on-demand resource which is a real blocker since we are looking for splitting logic by splitting the code even if we still want to split the native code without using on-demand resources it would be extremely challenging due to the static nature of binary code and more importantly there is a high chance that it would be rejected by upper app store review process as it would violate the app store guidelines okay so it will be problematic to achieve code and content splitting natively on both platforms are there other options yes they are and web views are one of them they are extremely easy to work with and introducing them wouldn't be a difficult task they can be used both in native applications and in react native however they provide sub-optimal experience for the user webviews are likely to have performance issues and they don't provide the native look and feel that you strive for luckily there's react native with reagnative using default javascript bundler called metro it is possible to create a class platform solution for splitting the code without sacrificing user experience and the apis to make it happen are already part of the react native you could use execute application script method on ios and load script from file or load script from assets or android but you will likely run into troubles with dependencies dead application and in general code sharing between chunks the metro bundler is not well suited for this or at least it's not well documented splitting the code using metro would also means that for each additional chunk you would need to spawn a new development server and fast refresh would only work for the main bundle out of the box it might be possible to overcome all of these problems but it would require a lot of effort knowledge and skill so what else can we use them if you're coming from web or have background from web development you might be wondering why couldn't we use the same solution for code splitting in mobile applications us on the web that's the same question i've been asking myself and for react native i think we could by using webpack it's a commonly used bundler on the web it has huge ecosystem lots of configurations options and most importantly for us well established code splitting functionalities however if you tried using webpack to bundle your react native application you would ultimately hit a major blocker webpack is not compatible with react native at least not by default in fact the plugin echo system in webpack is so flexible that we could breach this gap and make webpack compatible with react native and that's exactly what we did we named this project repack repack is a toolkit that makes webpack compatible with react native it enhances and changes the bundle that webpack produces so it can be executed by the javascript virtual machine inside react native it takes into the account that the code in react native runs in different environment with different apis needs different setup code and so on repack itself was created as a successor to another open source project called hull but compared to hull it takes different approach with repack you still have access to webpack configuration and repack gives you only the plugins and helpers to allow you to use webpack in react native applications it doesn't hide anything from you it gives you a fully featured development server support for react refresh and compatibility with flipper except for ram bundles repack has a feature parity with metro as of today so if you want to use webpack with react native the easiest way to do so is with repack now let's evaluate react native with repack and webpack as a code splitting option the first advantage is that this the solution is based on webpack itself which has wide variety of configuration options and we can adjust it well to our needs additionally it has huge ecosystem community and it's widely used meaning it's a stable and an established software together with repack it's a class platform solution focused on code splitting but everything has its drawbacks because it's webpack it has a high entry barrier especially for less experienced developer it will be challenging to configure webpack if you don't have previous experience with it so it can take up some time to get familiar with the biggest point of webpack which is its configurations options is a double-edged sword it's powerful but it can be overwhelming nevertheless based on other options it seems to be the best one at least for the time being competition and alternatives are always a good thing so let's explore code splitting with webpack and repack essentially there are three approaches to code splitting with webpack and repack for react native async chunks dynamic scripts and module federation let's start with asking chunks the easiest approach the additional chunks are created from a single code base as part of a single copy compilation also known as bundling process new chunks can be created by using dynamic import function and the first argument for this import function is a path to a module which will become an entry point to a new chunk chunks created by this approach are easy to work with since this approach only requires you to configure chunk manager to resolve urls to remote chunks and the import functions returns a simple promise with chang's exported values you can specify whether the chunks created by this approach should be a remote once hosted on the server on the internet or remote ones shipped together with main bundle inside the application all of that makes async chunks an ideal approach for module applications where the project consists of a single code base this code smit snippet is a simplified version of a e-learning application a module application we use dynamic import function together with react lazy to create additional chunks and only load either of them based on the user role the only thing necessary to use this approach is to configure chunk manager so that it knows where the chunks for the student and teacher will be later in production now with dynamic scripts the second approach we are going onto a deeper water dynamic scripts are chunks with arbitrary code the code that was created by the same or different bundler by the same or different team in-house or externally with dependencies and coach sharing or without any sharing at all is a powerful option but with great power comes great responsibility and you are responsible for putting it all together so that it works if you want to share dependencies you have to figure out exactly how you want to do it based on your project's needs and requirements in this scenario ripa gives you only low level apis to implement user facing farcade on top this makes dynamic scripts approach more challenging and it's recommended for more advanced users who already have experience with webpack this is the minimal example of how you could use dynamic scripts it's a powerful tools since you can load arbitrary code similarly to async chunks you need to configure chunk manager to specify where chunks are hosted but you also need to manually trigger loading of the chunks using load chunk method compared to async chunks the load chunk method is called manually here but with async chunks it's being called under the hood automatically for you and finally we have module federation the cherry on top and webpack's five new feature what makes the module federation unique and exciting is the fact that it allows to create micro frontends which can be developed in isolation by separate teams but ultimately create one big application module federation similarly to dynamic scripts allow you to create chunks also referred to as containers in separate dedicated compilations this makes it great at scaling and give each team's ability to configure webpack the way their chunk or container needs however there are the hardest to use and manage moreover they require more elaborate quality assurance process to make sure that everything together works as expected module federation is a great fit for super apps and mini app stores due due to the isolation and scalability each mini app can live in a dedicated code base and can have dedicated weapon configuration but when putting everything together the main bundle in the host application can share and reuse dependencies with each mini app this means that as long as the dependencies in host application and all of the mini apps are compatible based on somewhere each dependency will be shared and no dependency will be duplicated so module federation is rather new concept and so the question arises is module federation available in repack today and the answer is not yet but it will from the moment repack was created we had module federation support in mind and since module federation and both async chunks and dynamic scripts share internal logic we are first focusing on delivering outstanding support for passing chunks and dynamic scripts and then tackling the big fish module federation so let's summarize the state of code splitting in reback the base implementation with basic feature is already implemented you can download and execute remote and local chunks you can leverage basic caching and invalidation mechanism you can provide custom urls resolution logic for each remote chunk and you can do all of that today and there are more things to come from the upcoming bits there are chunk signing and verification to tighten up the security even better and ensure the chunks the application is going to execute it's what it's supposed to be additionally we have advanced caching and advanced fetching options to support more variety of scenarios and infrastructures local assets support to allow to use static assets like images inside a remote chunk using a relative path and of course more documentation than examples this brings us to a conclusion you can start investigating and playing around with code splitting in web webpack and repack you can use repack apis to build great experiences on top of you can start migrating your project and investing into code splitting to later migrate to module federation when it's available however keep in mind that code splitting support in repack is actively being worked on so the final shape and api might change and there are more features to come so thank you for your time i hope you enjoyed this introduction and i hope i was able to shed some light on code splitting landscape in reagnative ecosystem and lastly spark a light of curiosity so stay tuned there are more exciting things to come and thank you again thank you pavel for this talk and uh from myself all i can say is you know congratulations on making this library happen i know that webpack and its ecosystem can be quite hard to dive deep at first and uh i guess what you have created and presented to us so far is just a great example of you know what you can do uh once you dive deep enough and i'm really excited to see uh what is what are we going to all build with repack in the future now moving on to our next speaker from this uh series of talks we have monica from equinox media and she's going to tell us about debugging react native applications so trying to answer the question what went wrong now i guess this is a very important talk because every once in a while at call stack we are doing performance optimizations for our clients and usually uh the question that we are trying to answer at a first goal of our clients is how do we actually debug what went wrong now react native can be quite complex because you not only have javascript layer to handle but also native layers so there is quite a few different entry points that you need to check and quite a few different tools that you need to take into consideration while debugging the performance or any other issues that you have with your application so monica today is going to tell us how to actually do it what are different tools how you can utilize them and essentially i guess after this talk we are all going to be performance optimization experts so monica show us how to actually debug our native applications in a proper way hi everyone i am glad to have the opportunity to be participating again in react native view especially in this virtual edition where more of us can get a pretty good idea of what has been happening in the react native community for the past year as well as with the library itself from wherever in the world we are located i am marika restrepo a software engineer currently helping build one of the most innovative mobile applications dedicated to fitness and the well-being of our users at the equinox media today i would like to share with you some general findings about the most popular debugging tools for react native applications a topic that caught my attention recently while we were having a debate whether to switch fully to use flipper or continuing using react native debugger for our debugging purposes to be honest the majority of my time working with react native applications i have been using the react native debugger as my main debugging tool but seeing some of the positive arguments improv using flipper and even react to trend left me with the curiosity of exploring these other tools i knew very little about to see what were the pros and cons of each so i could take informed decisions when it comes to picking my main debugging tool spoiler alert flipper react native debugger ended up being similar in what they can accomplish reactotron ended up being a little bit of an outcast in this comparison yet still offer some great functionality but before we jump into talking about these debugging frameworks i think it is very important for us or at least it was very important for me to talk about bugs what are the most common bugs we often found within our applications multiple resources online point to many types of bugs that can really appear when developing mobile applications majority of these bugs are concentrated in these three different areas we have app specific bugs platform bugs and those related to your app's architecture app specific bugs are the type of bugs we found more often within our apps they are mostly usability and ui bugs network request issues are part of them css issues and broken buttons for instance then we have the out the platform a specific box when you have made your way into mobile development mostly to react native in the front it's front-end side of things like i did you love this type of bugs these are the type of bugs related exclusively to the platform the app is being run from andre in ios for instance most of the time these blocks are related to the way both operating systems work within the device and their native capabilities it is very common for them to imply patchy solutions on the engineering side because both platforms could react differently to changes some of the most common things to causes problems in our react native applications related to platforms are scroll views overlays view animations transitions and interpolations deep linking display properties keyboard upset and so on and finally we have box related to the elements of the app architecture these blocks are related also to the business logic of the app they are usually hard to detect by the programming eyes because they implied you have a very deep understanding of the business model and the app as a whole bugs in the air in this area include things related to incorrect data flow or bubble in side effects for features so for instance a user that wants to join any specific group within the app and the changes and then changes to this user happen in other unrelated section event so what option does react native offer for debugging besides our beloved and often very useful console vlog let's start with flipper flipper is a platform for debugging ios android and react native apps as i had mentioned before support for it has added uh was added to react native since the version 0.62 this is the interface for flipper it is it obviously doesn't include the slides the car in the background by the way i personally find it to be really really clean and easy to navigate this is very important because debugging itself can be really overwhelming sometimes let alone if you have to also untangle a complex ui flipper runs detached from the react native debugger it is thought it is a totally independent um desktop application to which you can connect your mobile app given the right setup this can be considered a pro for some of us since we can kill some of the overload that the native debugger brings when running on some of our application threads some others might consider this a negative point so it really is up to you to your workflow to determine that flipper mains functionality lives in the app inspect section from here we don't only get to access our app but we can also connect to more than one application the section below where you see those four icons allows us to bring the debugging menu out and even record and take screenshots of what is happening with with the app at a specific time then we have the device section from which we can access the crash reporter and device logs we have the react native section as well with access to react native specific logs and access to hermes when we are using either android studio or an android device lastly we have what i think is one of the most sorry i was a little off with that lastly we have what i think is one of the most important parts of this debugger this enables section here displays the plugins we have enabled for using during a session majority of our ui bugs can be found hidden behind failing props failing css rules and platform-specific things this is where this section becomes really valuable the layout plugin allows us to inspect the layout of our application we can see here our views listed in their nested order and in and then also a layout of the css styling those views every every property with every property of the them we can also see the accessibility properties available to each component which is also very useful then we also have the share preferences which allows us to easily inspect and modify the data contained within your app's shared preferences things like the available keyboards on either the emulators or the connected device emoji configuration privacy settings and such are included in this section when it comes to usability bugs the ones that affect how your app works rather than how it looks investigating label requests is perhaps the main step towards understanding what is going on when something is broken or not functioning as planned flippers network plugin is very useful and complete to my point of view because it allows you to check requests and request varies headers and responses and it allows you to also change in change the formatting of the responses which i find really useful as well when you want to see everything in a more like clear way like in adjacent sort of way if you work with apollo this is a there is a flipper plugin available that is fairly easy to install and use except investigating caching issues might still be an issue so this is where you get the uh the plugins if you use libraries like react native reanimated for your animations remote debugging is not possible since the library uses gsi for synchronous native methods access so this is a negative point for flipper in this case but flipper becomes your best option so far for debugging code that uses react reanimated with the only caveat of flipper now yet being able to connect the debugger to the javascript context finish with flipper i think it is worth mentioning that one of the things that i found flipper is um is lacking right now is the fact that it doesn't allow you to uh to set breakpoints which to me it is an important step on debugging data flows within an app other than that flipper is definitely a solid alternative to debugging your react native applications let's move on to react native debugger react native debugger helps you debugging pretty much everything flipper does layout props metro logs network requests and so on with the difference of allowing to use breakpoints among some of the good things of the debugger is clearly the fact that it is a functionality that is out of the box you don't need to insulate this desktop application like in flipper if there is something that concerns you i also found that to be used i also want to be easy to debug apollo and graphql issues especially when it comes to cache and exploration but that's that is just a preference flipper also allows you to do this logs are displayed in similar ways at least in flipper as you can see here so there isn't much to elaborate here the source tab is perhaps one of the most useful uh ones and knowing how to work with breakpoints in this one is definitely a booster when it comes to debugging data and components properties flows from the source tab uh we can see our file structure set up breakpoints at pretty much any place within your file check for the scope of our code is being in which our code is being run within and the call stack for function calls it offers also the option to check uh for your event listeners and such when it comes to debugging network requests i definitely found flippers interface to be a little bit more intuitive and easy to use i don't consider this to be the strongest feature of the native debugger yet you still can get a lot done with it in the network tab um you will be able to check for the type of network requests being performed and response times if your application uses graphql you can mix and match with the apollo client extension for chrome and get a pretty good understanding of your data flows and um in the cache as i was mentioning before the native debugger also gives you the opportunity to to do some memory profiling and and analyze performance issues feature is really valuable when it comes to upgrade your apps performance and identify what resources are consuming the most memory and taking the majority of a device cpu in terms in terms of some of the cons of um i have found with the reagnated debugger in comparison with flipper i would say that one of them is then not being able to instant different plugins though so far it have i haven't found anything that i'm actually missing but that point definitely goes to flipper the fact the fact that the debugger runs with the the vlog mode turn on can also make your application a bit slower it also depends on your machine but it's also something you have to take into consideration and as i have previously mentioned inspecting nervous request isn't the react native debugger's best feature either it has some known limitation but you can always enhance your debugger for this particular task by categorizing some of your apps events by network event with some specific params according to what you consider it is worth logging about luckily for us if user rag native debugger for deep network analysis isn't enough that is always charles all right um i think it is time for us to move into reacted run let's take a look to what it can offer in terms of debugging our apps reacted run is sort of an old-school debugger similar to the two previous ones actually it is also a debugger but besides aiming to debug only react native applications it is also useful for debugging mac and mac os applications windows and linux applications together we have to turn app and running with your application you need to also download the desktop app and make sure you configure it within your app it is very similar to flipper in this sense with reactron you can do pretty much the same things you do with other with the other two debuggers inspect network requests dispatch actions using the gui to see how the app responds to it i think this is exclusively to react to turn actually um and i really considered a valuable feature when it comes to aiming to understand the reasons for some usability bugs you can also run quick performance benchmarks and subscribe to parts of your application state use logs track global errors and try to use high gas for those of you using redux and but i'll show image overlay in react native track your sync asynchronous storage in react native as well reactors ui is more or less similar to flippers with a few less features such as installing plugins and as well as flipper it doesn't allow you to use breakpoints we can see here how we can also debug uh you know network holds and this is the dispatch action where you can modify what you dispatch into the actions to also see how your app will react to it my conclusion after using these three debugging tools is that at their current state you can really accomplish pretty much everything and the same things using any of them as a matter of fact i think i will personally keep at least two of them available for me when one or the other is either causing a lot of overhead in my app like if i'm using the react native debugger and things that really really get a new slide or if i just want a more familiar user interface then i'll go to flipper in my case in particular obviously using react to trump versus flipper becomes kind of a business decision since there is some setup that you have to do for them within the app but once that is not an issue anymore they both offer similar things to facilitate our debugging i am going to leave it here with the hopes that you at least got more exposure to using other alternatives when it comes to debugging your react native applications thank you so so much you monica very much for this talk um i'm happy that we now all have better understanding of the different tools that we have as you can see this area is something that is developing quite rapidly some of the tools that we have just seen uh are something that were that was created quite recently so it's good to see that we are investing our time and resources into making our developer experience better now i guess after these three really exciting talks is the right time to make a short break for coffee and also for you to maybe ask some questions about the talks that we just had on our discord channel so make sure to do it while we enjoy our 15 minutes break and see you like i said in 15 minutes this conference is brought to you by codestack react and react native development experts [Music] [Music] [Music] [Applause] [Music] i am [Music] [Music] [Applause] [Music] hello [Music] hello i'm mike serio and co-founder at call stack and today i'm looking for the best react native developers to join my team besides working on high-end software used by millions we also contribute to many open source projects such as react native paper react native testing library or repack and so you will have an opportunity to develop your skills and knowledge within these projects as well as move your own ideas into life by taking part in our r d program we are a great team full of people crazy about react native technology and we can't wait to share our knowledge and description with you trust me it's great to be part of such a team so don't wait anymore join us check out the job description and in the link below and apply and i'm hoping to see you soon in our call stack office or maybe remotely depending on your location bye bye do [Music] [Music] [Music] wake up in frostwolf get up and get at him react native eu is on and it's happening check in to check up on all of the latest news and strategy man it's kind of the greatest and welcome to reacquainting view 2019 [Applause] keynotes that unlock a new world of insight lightning talks this cutting edge it really seems so right networking with everyone in the react native community from the thinkers to the linkers we're all here in unity q and a's that dive deep into cold dna and it's all covered here in only two days especially when it comes to trouble after the last session we're gonna party okay [Music] food drinks with good vibes and dope karaoke [Music] high fives all around it was good to be here [Music] can't wait to the next one we'll see you next year [Music] [Music] [Music] [Music] uh [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] so [Music] [Music] [Music] this conference is brought to you by codestack react and react native development experts [Music] welcome back after break i hope that you enjoyed it and now it's time for a series of two talks two for two about animations and another two about security so sounds like something that everybody should enjoy if you are into animations or security uh this is the right time to listen to our react native conference so the first talk is going to be about grant from formidable and it's going to be about modern animations with react native uh and an example of reanimated version two now if you've been into react native community for a while you remember all the different libraries that we had for animations starting with interactions manager through the first iteration of reanimated up until to the second iteration of reanimated which has a totally different api and approach that is much faster better and just easier to do so today grant from formidable will show us how you can benefit from reanimated2 what are the uh animations that you can create some of them on a more advanced site so i guess it's a great moment um to see how react native apps can be fluid fresh and just smooth which is something that we are all as end users are expecting from the applications so grant the stage is yours and show us what you have prepared as far as the animation site hi there thank you for joining me today we're going to talk about modern animating in react native this is going to be an introduction to react native reanimated version 2. so my name is grant sander i'm a software engineer at formidable formidable is a javascript consultancy um we use javascript tools to solve business problems for our clients and so as you can imagine we're pretty big fans of react native it's great for building cross platform mobile apps so i want to start this talk with two pretty general and somewhat obvious claims first of all performance is important so i'm not going to say much more about that and also animation is important i'm not talking like super flashy crazy animations i'm talking about like enough motion to show users when maybe app state has changed or that like our app is responding to their gestures in a way that they would expect so when it comes to mobile apps performance being important is especially true for lower end devices we often need to support android devices and usually like budget friendly android devices which don't always have the strongest processors on board also animation is very important for mobile apps given that they're very gesture driven users you know interact with their apps their mobile apps with their fingers they're doing finger gestures and so it's important for us to give enough animation to give them feedback that we're responding to their gestures in a way that they would expect so let's uh let's get a little more specific let's talk react native so first of all react native is a great abstraction i'm a pretty big fan i'm guessing most of you are as well um one of the things that makes react native so great is this magical bridge which allows us to basically write javascript code it gets executed on a javascript thread and then it crosses over this magical bread and get bridge and gets executed on the native ui thread so the fact that this code is being executed natively makes it fast and performant makes it feel like a native app but we get to use our favorite js tooling like react so that's pretty great but one thing to point out is this these bridge thing it's very magical and it's very useful but trips over this bridge are not free so we have to be somewhat mindful of how many times we cross over this fridge if you're trying to do this every two milliseconds you might you might notice some uh ui lag so let's get even more specific let's talk animation and react native since this is what this talk is basically all about so first of all animation is important we already kind of decided that it's true in react native as well and when we're when we're building animations in react native we want to declare them in javascript with nice apis we don't want to be like writing native code to create animations one of the beauties of using react native is most of our app logic lives in javascript and we use reacts apis and the you know the broad javascript ecosystem and we also want our animations to execute natively with minimal bridge strips we want our animations to be buttery smooth as i like to call it but they need to be performing we want our animations to be at least 60 frames per second we don't want a bunch of ui lag with our animations so this means we want these things to execute natively and we don't want to make too many bridge trips because that you know might slow our animations down so react native actually provides an animated api for this so this is sort of like the maybe standard way to create animations in react native but ragnam's animated api actually leaves a little bit to be desired it could be more performant it could be more friendly to use it could be easier to integrate with you know gesture handlers and so you know you might be thinking well maybe there's a better way so this kind of leads us um into talking about react native reanimated i'm just going to call this reanimated um as an abbreviated version and reanimate it's been around for a while it's on version two right now they released version two just a few months ago but version two is a huge huge change from version one and it's very powerful it's very friendly to use and that's gonna be pretty much the center of this talk so first of all like why are we talking about a reanimated why aren't we just using react native's animated api well basically because it can offer better performance and easier to harness so that's great for power users and for like people who are maybe not power users when it comes to animation so it offers a simplified javascript api and mental model for performant native animations so it's similar to reacting to say animated api in the sense that you're writing javascript code that gets executed natively but it's got a different api and a slightly different mental model for these apis and it also also offers additional control over animations via these things called worklets which we're going to talk about but this allows us to have even more control over our native animations and it also offers powerful integration with gesture handlers and this is like also very important because we we need to use animation when we're you know creating gesture handlers that's kind of they sort of go hand in hand and all these things together basically means reanimate offers uh some more power when it comes to animating in react native so let's do a quick conceptual overview of reanimated this is like just barely scratching the surface but i just want to get enough on the table here so that we know what we're talking about so reanimate it executes js on a main thread via these things called worklets and it minimizes bridge trips while writing js so you're basically writing javascript functions they get executed on the main thread and that's pretty awesome because you can write like native logic well logic that's executed natively while writing it in javascript and then you connect to view props and styles via hooks based api so it's got a nice hook space to hpi that allows you to basically connect to you know views and other components and then you can react to events on the main thread via hooks-based api so you can kind of interact with native gestures and we can actually pass messages over the bridge if we need to so if we have some you know logic executing on the native thread and we need to call back into the javascript thread to maybe call react method or something like that we can do that we can kind of pass messages back and forth if we need to even though that involves you know crossing over the bridge which we we try to minimize but sometimes you can't avoid it and it offers tools to easily do that so on to random made its apis just again a very high level overview first of all worklets kind of power this whole thing and a workload is basically just a javascript function that gets executed on the native ui thread so i have a worklet written here it's just a normal javascript function clamp which is a pretty common you know animation function where you're clamping a value between a minimum and a maximum so your value's not going out of those bounds and the thing that makes this a worklet is like literally just this directive up here you just write this worklet directive and when you're using reanimated2 there's a babel plugin that basically finds these directives and does some transformation on that and makes it a worklet so writing like javascript functions that can be executed on the native side um it's as easy as just throwing this directive at the top so pretty magical so moving on workloads are very powerful but they're not really the main drivers of this at least not at first so one of the beautiful things of this is you can connect to props using this hooks based api so we have a used animated style hook that creates a style that's evaluated on the main thread and then updates a view on the native side so basically you just use this hook you return a style object and it can be animated you can do all the animation stuff inside of this style and then we have an analog called use animated props it's like using them in the style but for arbitrary view props all right so we also often want to animate values and create animated values and so renovated offers a use shared value hook that creates a shared value and a shared value is basically it's sort of like a data structure that can be updated and read from like on the native side as well as the javascript side and updating the value on the native side doesn't require a trip over the bridge so this offers some really nice performance benefits while still reasoning mostly on the javascript side of things and then there's utility functions like with timing and with spring that allow you to animate a shared value so this allows you to like apply some easing functions to a shared value and animate things that's really nice api there's an interpolate method because you know an animation library isn't going to be complete unless there's a way to map a shared value and do some linear interpolation and there's also a use derived value which allows you to basically create computed values that are derived from other shared values so um there's also some other methods that are similar to these but this is some some core methods here now there are also some nice hooks for responding to gestures so there's a use animated scroll handler hook which creates a scroll handler for scrollables like scroll views flat lists section lists things of that sort so this basically just offers a way to create a scroll handler and there's a more general use animated gesture handler hook which creates a generic gesture handler which you would probably use with react native gesture handler so those two react native gesture handler and reanimated offer a really nice pair for creating gesture driven animations all right so that's sort of like a high level overview of reanimated but we haven't really looked at any code yet and i actually want to get into some like real world examples of like how you're going to integrate this in and some some techniques for doing some animating with reanimated so like day-to-day development some scenarios might be you have a piece of state that changes and you want to notify the user with an animation so you don't want you know things just to abruptly show up maybe you want to add some sort of animation another scenario maybe you have an event occurs and you'd like to notify the user so like maybe the user taps on something and you want to give the user some visual feedback that you're registering their their touch another scenario would be you're customizing gestures and animations of core react native components this is actually really powerful so you could tap into like a scroll view or a flat list and tweak animations they already have great gestures and animations built in like you can scroll that's sort of like a gesture animation combo there but you could actually tap into that and create your own logic like on top of it which is really pretty amazing and then sometimes you like just want to take full control over gestures and animations you want to like just really write it all from scratch handle all the gestures and you want to add animations accordingly so we are going to look at some examples so let's dig into some code first example i have here is basically just a two column list of images and what i've done here is i've added this little activity indicator as the image loads in these images are coming over the network and so you can tell they take a little while to load in so i'll show that one more time so one of the things i like to do is just throw an activity indicator in while the image is loading and then you see that the image just shows up it just like pops into view so one nice effect or one one nice place to maybe add an animation is so that this image doesn't just like abruptly show like show up it maybe fades in and animates in we can add a nice little transition there so i have an image fade in component the baseline of this is somewhat straightforward we have an is loaded piece of state and then i have an image component and when it loads i basically set is loaded to true and then i have a little piece of ui here that says if we're not loaded show the activity indicator there's nothing too crazy here but what i want to do is actually add some animation to the image loading in so to do that i might use the use animated style hook so we might just call this animated style we're going to use an animated style using animated style hook um you pass it a function that returns a style object so one of the things we might do is like to start we might just set opacity to 0.5 and pass this through just to see kind of what it does probably not going to do much one of the things we also need to do if we want to pass an animated style to a component is using an animated component so right now i'm trying to pass an animated style to a regular image component but i actually need to create an animated image so i'm going to say animated image reanimated offers a create animated component similar to how react native's animated api offers a similar method that allows you to basically pass in a component and then create an animated version of that so we're actually going to use an animated image here and so now you can see that my animated style comes in and applies some styles here although it's like not very interesting because all i did was set the opacity to 0.5 but what we really want to do is animate this opacity in so one thing we might do is set the opacity to a width timing now this width timing method will create a timing animation what we're going to do is if we're loaded we're going to set the opacity to one otherwise we're going to set opacity to zero and we're going to have a duration of let's just say 400. so what this does under this like under the hood which is sort of magical is if is loaded is true we have an opacity of one else it's zero and when this is loaded flag switches um reanimated goes ahead and just animates that value for us we don't have to create any animated values or shared values or anything like this reanimated kind of just handles that under the hood which is um it's a pretty nice thing so let's see if that works you can start to see these images start to animate in with opacity and so another thing we might actually do with that is maybe we'll add like a scaling effect to this as well so we could say let's add a scale and we'll do a similar thing of with timing if we're loaded let's have a scale of one otherwise like let's start at maybe 0.7 and we'll do a duration of i don't know let's say 300 milliseconds we'll go ahead and refresh this now we should see as the images load you can see that they actually fade in and they scale up which is actually a really nice effect so to add like a opacity and scale animation to these images we just created an animated style we use a couple of these easing functions and reanimated makes that pretty easy for us we don't have to do a whole lot of boilerplate all right so that's a nice um you know basic example of animating some styles which is really powerful so next let's look at another example so we're going to look at a custom pressable so pressable is a relatively new api to react native that sort of you can use it to create your own touchables and so what i did here was actually sort of just replicated the touchable opacity component using the pressable component api so as i press in on this component you can see that the opacity drops to 0.5 and as i let out it changes up but using the pressable api you can see that when when the pressable is pressed we immediately apply an opacity to 0.5 so there's no animation here it just immediately changes the opacity which is fine that's sort of like the standard behavior but we might be thinking well maybe we want to animate that opacity to add a nice little effect so let's go ahead and try that out let's start by creating a let's call this press in progress and we're going to create a shared value that starts at 0 and then animates to 1 as we press in so on press in what we're going to do is actually set the press in progress to a value of 1 and let's do a duration of 200 we're going to make this pretty quick so whenever we press in on this pressable we're going to basically animate the press in progress value up to one and then when we let go or when we like the press is let up we're going to animate back down to zero so as you press in this share value animates up to one and then you let go it animates back to zero and then we can kind of use that to make some animated style so let's go ahead and actually add an animated style to our pressable one of the things we're going to need again is an animated pressable if we want to apply an animated style we need to use an animated component so let's do reanimate.create animatedcomponent we'll pass in pressable so we're going to use an animated pressable and we're going to create an animated style so let's call this animated style again and let's use the animated style hook and we're going to return a a function here so the thing that we actually want to animate is the opacity and we want to use the press in progress shared value to determine what our opacity is going to be so we're actually going to interpolate on the press in progress value as press and progress value varies from zero to one what we want to do is vary the opacity from let's see a starting value of one down to an ending value of 0.5 and then we can add an extrapolation value so we're going to do extrapolate.clamp so that we're not extending beyond this output range here and so what we want to do is just apply we're going to need to change this a little bit let's get rid of our old pressable style here let's just add in our animated style that we just created all right so now we have this thing animating and let me slow this down a little bit let me create like make the animation let's say 700 milliseconds just to make it really drastic just that everybody can see so i press in we animate the opacity down and i let out and the opacity animates back up we can even probably make this a little more drastic and let's animate the opacity down to 0.2 so that's like really slow that's probably too slow to be usable but just wanted to show everybody what that looks like so maybe we stick to a duration of 200. so now we have a sort of touchable opacity like touchable but we're actually animating the opacity instead of just setting it right away all right on to another example let's look at a on scroll example let's look at an example of tapping in to a scroll view so this is where things gets pretty cool there's a lot of really amazing things you can do with this i have this you know sort of silly example content here where i have this neat horse image and i have a scroll view with just some filler content nothing useful here but i just wanted to add some buffer content there now i have this like sticky in quotes header that sticks at the top of the scroll view but what i want to do is actually only show that if this big neat horse title has scrolled out of the view so to do that basically we need to figure out where this neat horse text lives and then we need to track the scroll position and once we've scrolled past it that's when we show the header so a couple of things we need to do is we need to create a couple um shared values so let's go ahead we want to track the scroll position so let's do scroll y is a use shared value we'll start at zero and then we also want to know like where our break point is or like where that title is i'm going to call it breakpoint let's do a shared value i'm just going to set this to 1 000 a pretty big value but that's going to get updated so first of all what we're going to do is basically on this text component that has this neat horse we can use the on layout prop to figure out like how far down the bottom of that text is within the scroll view so the break point value is actually going to be the y value of the that text layout plus the height so that allows us to figure out where basically the bottom of this neat horse title is and the next thing we want to do is actually create a scroll handler for us to update this scroll y value so we're going to do is create an on scroll method and we're going to use animated scroll handler so animated scroll handler gives us a function all right we pass it a function with an event payload and the event payload has basically like how far down we've scrolled so the scroll y value is going to be the events dot content offset dot y so that gives us access to how far down the user has scrolled in this scroll view and then what we're going to do is actually just attach that scroll handler to the scroll view so what we're going to do is on scroll we're going to pass it this on scroll function that we created so we haven't really done anything yet all we're really well we've done some things but we're not seeing anything show up what we've done is tracked the scroll progress and we figured out how far down this neat horse thing is so we're going to do is actually add an animated style to this header up here so let's create an animated header style we're going to use the animated style hook again and we're going to return what we're going to do is just basically change the opacity and again we're going to interpolate based on the scroll y value now there's some it's not magic but there's some math that's going on here basically what we're going to do is we're going to look at the breakpoint value and we're going to back off a little bit i have a fade offset constant that is something like 50. it's basically like what's the threshold for making this thing show up and so as the scroll view let me format that a little bit there we go so what we're looking at here is we're looking at the scroll i value and then once the scroll y value gets inside of this range and so like once we get close enough to the breakpoint value what we want to do is actually animate the opacity of this thing from zero to one and we actually want to just clamp this value outside of that range so let's go ahead and apply that to our header we have this header thing here animated header style let's attach that on there so if we reload this thing now we see that the header is not showing up which is great as we scroll down let's do it kind of slowly you can start to see this header starts to fade into the view so that's pretty neat the opacity changes once this neat horse title gets close enough to the top it starts to fade in and once it's all the way off we're at an opacity of one so that's a neat little effect for actually tapping into a scrollable component which already has its own gestures and animations but sort of tapping into it to extend it to do other cool things all right we're going to look at one last example this one we'll just kind of take a quick look at the code we won't actually write any so another thing that we mentioned we might do is actually like take full control over gestures and animations so a a pretty common example of this is like creating a pinch to zoom component so i have my cute little horse here and i might go zoom in on its nose by doing a pinch gesture and then when i let go we animate it back out to the original zoom so to do something like this which seems like it would be sort of complicated and it's not it's not trivial by any means but reanimated makes this pretty approachable so one of the things we can do is actually wrap our image in a pinch gesture handler which comes from the react native gesture handler library and we can attach a gesture event to that which we'll look at and then inside of there we just create an animated view with an animated style attached to it so basically what we're going to do is like create an animated style that scales up and maybe shifts around a little bit and then we've just got our image sitting inside of there so a couple things that we should look at is the pinch style itself the actual like animated style for zooming the image up really just has a translate x a translate y and the reason those are there is so that we can maintain the focal point one of the things you'll notice is like if i pinch in on the horse's eye the horse's eye stays as the focal point of this gesture so to do that we actually have to do some math and we we do some translate x and translate y and then we're also scaling up by the scale value that we get from pinching so creating this gesture handler is pretty nice reanimated offers a use animated gesture handler hook that gives us information about the gives us some type information about the gesture we're looking at and then it allows us to create this context object that allows us to basically persist data between gesture events and so a common use for this is i have a cx and a cy a common use for this is when we start our gesture this onstart method is called we get access to event information and we get access to the context and so it's common to do things like tack some information to the context object based on event information so in this case we look at the events focal x there's actually some math going on here but we can we can attach some information to this context object and then we can use that context object anywhere else within the life cycle of this gesture which is really nice if you've done any animating with react native's animated api sharing like these um like sharing values between life cycles of a gesture becomes really hairy and you have to create extra values things like this so this this method of creating a context object is really a nice improvement that comes with reanimated so then we have an onactive method that is being called as your pinch gesture is active we have a little math here so this is you could do some matrix multiplication and some transformation logic and stuff like that and then what we do is basically just update our shared values so we've got we've got some logic going on there so as we're pinching the translate x translate y and scale values are being continuously updated and then we have an on end method which when the pinch gesture is done all we're really doing is animating the translate values and the scalar values back to their initial value so we we set our translate x and y back to zero and our scale value back to one so then all we have to do is attach that gesture handler to our pinch gesture handler and that makes some magic so that's sort of like the story of creating these custom gestures if you're using rack native gesture handler um you can create nice gesture handler functions and attach it right to your gesture handlers and it offers a really really improved experience over react natives animated api all right so that's actually all i have for you today just some examples of using reanimated api in some like real-ish world situations so i appreciate you checking out this talk if you want to find me on the internet you can find me on github or linkedin or even email if you're into that thank you grant for this talk uh it's been great to see some of the use cases that you have presented and uh it's always great to see somebody explaining the advanced features of a animations library now moving on to another speaker alexander from horizon alpha he's actually going to talk about something that i have mentioned before uh once once once i was introducing grant at the stage um so so alexander is also going to talk about animating everything with 60 frames per second but he's not only going to talk about reanimated 2.2 uh to point x sorry but also about other animation libraries that i have mentioned before so uh for example lottie or animated and other solutions on the market so you will be able to see how you can utilize different libraries for different use cases to achieve something that is called like i said a smooth interface so our applications feel like they are polished high quality and that were made just like native applications uh that you may see in the app store so alexander we just can't wait to see uh your examples and use cases for all the different animations libraries hi welcome or servos as we say in bavaria here at react native eu 201 virtual conference um thanks for having me again my name is alexander and i'm talking about animations today and how to use animations in react native that they look beautiful that they run smooth at 60 frames per second even on low end devices so when we are talking about animations in react native we have to keep in mind that the general architecture of react native can be quite challenging for running smooth animations there are pretty good solutions out there i want to talk about three of them today and yeah basically it's the three solutions we use regularly in our company when we are working with react native applications and i will give a short overview of all these three solutions and i hope every one of you can take something out of this talk so let's start right away when we are talking about animations um the first question we have to answer is why are we using animations well first of all they make our apps look nice but that's not the main reason at least it shouldn't be an animation should always serve any purpose so at least they should increase the user experience so for example we could use an animation to give an advanced feedback for a touch interaction of the user so when the user for example presses a button which he has to press for at least three seconds to trigger any action we could for example fill any bar that the user sees okay i have to press press press press press and now the action is triggered um so this is an example um which for for what i mean when i say any animation should serve any purpose another thing is progress and loading indication so it's always good to give the user anything he can look at while he's waiting for the content so progress and loading indication is a good example for an animation or where animations should be used also a lot of apps do use scroll animations at the moment um especially in the header area so when we scroll um a larger header is scrolled out of sight and a smaller header occurs and last but not least um animations are a great tool to grab and direct the user's attention to any part of the screen so um when something moves on the screen and the user looks at it so animations are great for grabbing the user's attention so basically you could say animations are an important part of any high quality app and since we all want to write high quality apps in react native we should have a look how to make great animations and to understand how to make great animations we have to understand understand the the challenge with animations in react native first so what's the problem with animation in react native um i think the part in the middle of the screen is something you all know it's the general architecture of reac native so we have this js thread where we execute our written js code and then we have the native thread which render which does all the rendering and gets the user um interaction and these threads communicate via this thing called the bridge and this is this architecture is fine um but it can become quite a problem when dealing with animations because when you look at the example on the left hand side this is basically an example like i described before we have a image as a header and when we scroll we slightly move the image and the title out of the scroll view and a small header occurs which stays atop of the image and when we over scroll um the image gets scaled it's just normal um behavior in an application or in a mobile app so a lot of app do this so it's basically a pretty simple animation and what's the problem with the simple animation um when you look on the right hand side here is described what happens under the hood when we work with the general react native architecture we get the on-scroll event and the value of the scroll view every 60 milliseconds at least if we don't throttle it and we shouldn't do so because then the animation would look quite laggy and every 16 milliseconds we send the scroll view over the bridge calculate the new values for our animated components send these animated values or this these values back to the native thread where the native thread renders the the view so this can become quite a problem because um not every um animation is that simple so there could be some some more calculation involved and when we have a lot of calculation on the js thread um in the worst case our jf thread becomes blocked due to all this calculation and this would mean on the one hand we are not able to have to directly handle any more user input and on the other hand um it would possibly delay our animation and we would drop some frames which then would make the animation look very messy and not that smooth so there are some solutions to this general problem um and as i said i will show three of them today but before we dive into the solutions let me just introduce myself very briefly my name is alexander kotik i founded my own software company here in munich in 2012 i work with react native since 2016 i also made some small contributions on community projects like asung storage by the way it was a great experience the guys there were very helpful so if you never contributed to open source i can definitely recommend it so just give it a try even if it's just a very small contribution and it could help us all so yeah back to me i'm also an aws solution architect professional um because i needed some knowledge uh for writing the backends for my app and aws is a great solution for death for that and i'm also trying to write from time to time on my medium blog so if you'd like to you can you can follow me there i'm working at my my own company it's called horizon iphone we are based in munich and we are 32 people at the moment and we focus on react and react native development and we build cloud-based backends for our react and react native applications we are working with aws google cloud and azure so we're working with all three big cloud providers um yeah it's very very good to work with the cloud providers for back-ends for our apps because it makes it very easy back to the topic when working with animations at least when we work with animations in our company for us there are three ways to deal with animations first one is the internal react native animated api which does a good job for for simple animations and we like to to work with it a lot second one is the great lotte framework um there is there are sdks for native integration but also rig native lottie sdk so you can it's very simple to use and i like it a lot so if you have never heard of it um you will be really surprised how easy it is to integrate animations um smooth animations running at 60 fps in react native and third of all um it's the awesome reanimated framework which recently was released in a second version i love to work with it if you have never worked with it you should definitely have a look at it i think i read in a blog post lately it's the gold standard of animation and i couldn't agree more it's really awesome but let's start with the internal animated api here we see a very simple example but it's good to explain how it works um i've taken this from the from the official react native documentation and as i say it's very easy so um we have this view which is declarated as animated view this basically means that we can use animated values by in the styles of the view so as you can see here we have a general style and then we have this additional style which gives opacity value and this opacity value is one animated value it's called fade anim um it's just a variable which we define um we can name it like we want and uh yeah we give this value to the opacity and then to complete what you see on the left side we have these two buttons it's the fade in and the fade out button which caused the fade in and the fade out function and this is how the declarations look like so we have this fade anim variable um which basically we we work with uh functional components here so um we store it as a reference and basically it's an animated value um which got gets initialized with a zero and then we have to fade in and fade out function which uses the animated dot timing um to change this animated value so we give the animated dot timing the fade and animated value and say okay please take this value and change it to 1 over the duration of 5 seconds and what animated timing does is it calculates um how the value should be in any frame in this five seconds and then it renders the value or it it passes the value for every frame um to native so basically it's the same for a fade out function um except that we change the value to zero and that the duration is only three seconds so the fade out is faster than the fade in um yeah it's it's a very basic example but uh i think it shows clearly how it's to la it how animation works and how is it it is like to work with animated values because basically all animation um works with this animated values so let's come back to our scroll example from the beginning um basically it's the same concept we have this scrolling value here and this scrolling value is changed but it's not changed via an animated timing function but it's changed due to the animated event function where which we use to kind of couple this scrolling value to the on scroll event to the native onscroll event of the scroll view so what we are doing is we look at the native event which we get on scroll and then we extract this y value and couple it to the scrolling animated value what you can see here in the top is basically the image and the view which is the small header which occurs and basically you can see here the opacity it takes an interpolat interpolated small header opacity variable and we'll have a look at this later and here we transform the image right so we translate it with an interpolated translate value and we also have an interpolated scale value where we scale the x and y dimensions of the image so where does these values come from basically it's simple interpolation um we have the scrolling value which is our animated value like in the example before but now since we don't only want to use the scrolling value directly because it goes from 0 to infinity and we don't want to want to change any opacity to infinity we do a simple interpolation and this interpolate function works very well because we just say okay take the scrolling value and we define an input range and we define an output range for this input range so basically um when working with this interpolated small header opacity or calculating this interpolated small header opacity we say okay from 0 to 200 please do nothing um stay at zero and then when changing from 200 200 to 220 um please change from zero to one and what this interpolation does is it calculates the values for yeah the different scroll positions and passes this to native same for scale and translate so when we come back here um you can see this use native driver true and this really is a very very important thing because what this use native driver does is it says please take all this logic and pass it down to native in one call so when we are working with usenativedriver we change the behavior of the animation from the one we've seen at the beginning to this one we create the animation rules in our js thread we we then send this animation rules to native and the native thread then knows the animation rules and all calculation and all rendering is done on the native thread so we don't have this round trip every time on every frame or on every scroll event we are processing our animation completely into native and this is really awesome because um then we never block our js thread we can respond to user interaction we can use our js thread as we like and yeah that's why you definitely should use use native driver when working with the animated api well here we have a little more advanced example um this is taken from an awesome youtube tutorial from catalin miron i think he spoke here two years ago and as you can see basically it's also a flat a scroll view or a flat list in this example and basically it works the same right um we have this animated event where we have the scroll value in this case is it's the x value because it's a horizontal scroll view we also use the native driver and what's the difference to the example before is that we have the interpolation not on um one time in general but we have the interpolation in every item so for every item we have an animated view which has is its own interpolated value and it's very cool because it shows that um this this use native driver can create very performant um very performant animations um even if we have a lot of interpolation in play um and that's only uh the the lower part of the screen here right there is some more code um for the the image in the background and the changing of the images in the background but um just have a look um i've put the expo snack of catalina ron here also he has a lot more youtube videos on his channel where he talks about using animation with the animated api so would definitely recommend it if you'd like to see some more complex examples please have a look at this youtube channel so summary for animated basically my tips are use use native driver i would recommend not to use animated api without using use native driver basically it's just interpolating animated values it works great with scroll view and flat list because then it's easy just to to couple the scroll value to some animated value and then interpolate it and it's best for simple and easy animations so now we're coming straight to the limitations because complex animations can become quite confusing they can become a lot of code and you are able to kind of combine animations um you can run animations in parallel you can run animations one after another and so on but they become quite complex and quite confusing very fast so we in our company use the animated api for simple use cases and in applications where we only have these simple use cases another thing which you have to keep in mind that use native driver is limited to non-layout properties and this is a very very large limitation so things like transform and opacity will work but all flexbox and position properties will not so you can not just say okay please change the height with a with an animated value while using native driver so this won't work so after the internal react native animated solution um i want to show you a framework which i really like and which is the basis of this animation you see on the right um and this framework is called lottie so when you look at the animation on the right side um this animation would be quite a lot of code when we would have to script it with animated or even reanimated so all the these lines which occur one after another it would be a lot of work so that's where lottie is the ideal library for basically when you look at all these animations or what they have in common is that they aren't that easy to script but with lottie the code for them basically is all the same it looks like this you have a lot of view and you have a json file which is the resource for your animation and this really is cool when you have the json files i will show you now later where these json files come from but basically it's that easy right this is the code for all three of the applications just with different json files we have a container which we center our animation in then we have the lottie view and we say we say to the lottie view please autoplay and then it just works one thing which is which makes lottie a lot cooler is that we do have programmatic control over the animation which is defined in the json file so basically as you can see here we are we again have a scroll view where we couple the y value of the on scroll event to our scrolling animated value which is defined here and then we have an interpolated progress um which we couple which we which we interpolate the scrolling to and we just say okay please um for minus one thousand to zero go from one to zero and from zero to one thousand go from zero to one basically what we are doing is um we use this interpolated progress to say the lotti view it should play on a scroll so when we scroll fast the animation will play fast and when we scroll slow the animation will scroll slow and as you again see we are using native driver here so all this takes place in the native or ui thread and we don't block our js thread when you look at the animation here on the left side you can see it does do nothing when it stays where it is and when we use the scroll view um it starts animating and this is really cool because we can have very complex animations in this json files and we can control when it should play where the progress should be and how fast it should play and so on so we have a lot of control over the animation and where does these animation jsons come from well basically they are after effects animation files so adobe after effects is a program which is used to create animations for videos and for other things and then there is something called the body movement plugin which creates these json files out of the after effects animations and this is really cool because um when we come to the summary um there is quite a large market um for these lottie files so there is this lottifies.com website and it has a lot of animations free animations paid animations and you can find animators there which create custom and cool animations in simply no time for your project and you as a developer don't have to script your animations in your code you can just work with them with a professional animator who creates the animation and then you can use this animation via the lottie react native plugin i put a link in here and you have at least some control over the animation programmatically and we use it for avatar animation we use it for animations which have a lot of components and we use it for animation where we don't have to have to be able to change all of the animation in our code because that's one of the limitation we don't have full control via code right we can say okay please play please uh play from from frame 60 to frame 120 but we can't say okay this part of the animation is too too um too large please make it smaller that that has to be done in after effects so one of the limitation is you have no full control via code the other limitation would be you need to create the animation files either by hiring a designer or animator or do it yourself with after effects after this short introduction to lottie i want to talk about the awesome reanimated two framework it's the third um framework we use when we are working with animations and i think it's the most complete of all so to understand what happens with reanimated 2 i took some code from the documentation of the software mention page it's basically the idea behind reanimated basically is kind of the same like use native driver but it's a lot more complete so what they did while creating react native animation they introduced something called worklets and worklets basically are parts of code which don't run on the js thread but it runs on the ui thread it runs directly on the ui thread so basically you can simply simply put the worklet string in your function and then when you work with react and native reanimated um the re reanimated barbell plugin sees okay this is code which should be executed on the ui thread and the barbell plugin transforms the code that is executed on the ui thread so basically this is what i just said right when we have this the scroll view example from before we have the js thread where we create the animation rules or we create the worklets and then we have the native ui animation thread um where we have the worklet context it's as it it has its own context on the on the ui thread and basically in this context the calculation of the animation is done but again it's on the ui thread and it gets it gets even better so we don't have to write our own worklets so react native reanimated provides us a lot of custom hooks which we can use to um yeah to to to have it a lot simpler to work with uh reanimated or with with uh animated values um or with code running on the ui thread so we don't have to to define by ourself what is a worklet and what is not so we can just we can just have a style variable or a style constant um which we say okay use animated style so make it an animated style and then we can yeah it runs on the ui thread another cool thing is that we can have shared values between our js context and our js thread and the the native context or the worklet context i would say so what that means is when we are in the worklet context we can synchronously change these shared values and we are also able from the js context to to asynchronously change these values this is due to the architecture but it's really cool to be able to communicate from the js context or js thread to this native thread and also be able to synchronously change the shared values inside our worklets so let's get this let's get the pieces together here so again we have the scroll view example and as you can see here we have a scroll value which is defined as use shared value and which is initialized with zero and then we have the on scroll which basically is a function which uses animated scroll handler which is a part with which react native reanimated provides us and again here we look at the on scroll event and we couple the the y scroll value to our scroll value when we are looking at um now i have have to go back once um another cool thing you can see here is um that we pass this animated scroll value down to our item component so we have a lot of items in this scroll view um you can see it's um the the single items here and basically with the scroll value passed down to the item we can work with this shared value in the item and that's basically what we're doing here so this is how the code of the item looks like and you can see here we have a style here and we have a title style here and basically the title style is the style of this text here and the style is the style of the whole container and when we go one slide further here you can see how style and title style are calculated and basically it's look it looks very similar to how the animated api works like um we use this use animated style um hook and then we return uh an object um which includes a style and basically we're using again simple interpolation here so we are using the animated value which we got passed down to our component and we say okay for this input we're using the index here which we also got passed down to our component for this index um to this index um or this this this value to this value please change the size the height of from minimal height to maximal height i think it's 200 to 400 pixels here and when you remember what i said about animated was that animated um in a native context was limited um to transforms and opacity and we could not work with things like height well the cool thing on reanimated is here we can so um we are able to transform our flexbox values [Music] when we're coming to the title style here it's also a user animated style only thing is that we only change the opacity here so as you can see when we scroll up and down um the opacity of the text below the title here changes and so yeah basically it's the same what we did in animated but in the reanimated syntax so this was a kind of a simple example there are a lot more complex animation possible with reanimated there is this very very cool youtube channel channel of william candylan he is a magician when it comes to reanimated and making animations and on his youtube channel he has a series it's called can it be done in react native where he looks at the best animations from any app and builds them in react native and most of the time he's using reanimated and reanimated too now so the animation you you see on the left side here basically is a swiper where you can change the screen by swiping um but it tracks where you swipe and how fast you scribe and things like that and i i included it here just to give you an idea how complex this calculations of such an animation can be and this part i i i pasted here on the slide is just a calculation for the wave animation here so um it's just a part of this liquid swipe um example i pasted the link to the full example here so if you're interested in really cool reanimated stuff please check out the youtube channel check out the github which i pasted here there are a lot of different examples and you get a very good idea how powerful this reanimated tool is so to wrap reanimated up we in our company use it for complex animations we use it even we also use it for easy animations when we use it anywhere in our project because um we don't like to use animated and reanimated in the same project because it can get quite confusing so when we have a more complex animation and we integrate reanimated into the project we use it for all animations and my tip definitely is watch the can it be done in react native series on youtube um it's it's awesome limitations of reanimated um well basically there are no real anime real animation real limitations except that it can take some time if we want to build really complex animations so when we compare it to lottie where you can use after effects to create your animations this can be much faster than to write your animations in code um well the advantage in reanimated is you have full control but ins sometimes it's easier to just um create the animation and after effects and you don't need that much control um then lottie is the better framework for me and yeah that's basically what i said the last point animations have to be implemented by the developer um when you have a larger team where you have someone who really has a talent for cool animations um but he's not a developer then lottie is the better framework because he or she can can can just build the animation in after effects and then give it handed over to the developer yeah to wrap this up um i made this slide with useful links i think i mentioned most of them um animated has a very good documentation on the rig native page um i really like the youtube channel from of catalin miron the lottie library is available on github um or the the lodi react native plugin is available at github on github and on lottifies.com there are a lot of files and animations um for free and there are also page animations so just have a look maybe you can find something cool there reanimated there are very good documentation files on the software mention page they also have some good webinars available there so you should definitely check it out if you haven't done it already and again i can definitely recommend the youtube channel of william candyland it's it's awesome in the series can it be done in react native it's it's really awesome so i want to close my talk with a little quote um it's basically the same which i said i said at the beginning um use animations way where they improve the user experience of your app never use animations just because you think they are cool so if you're that pumped after this talk now and say i want to you start using animations now and go to lodifies.com take the best animations please keep in mind don't use animations just because they are cool or if they make your app look great they always should serve a purpose so that's from my side thanks for listening if you have any questions about the talk or any questions about react native stuff in general you can contact me via email or via my linkedin account thanks again for having me and have a nice conference thank you alexander for this talk i guess after these two talks there are no excuses stopping us from building applications that look good and are just beautiful so the next natural thing is to make our applications secure and this is what next two speakers are going to be talking about today the first one mateo from ang has rather interesting stock title called hack yourself and in his talk he's going to show us tools and some techniques to test our applications for different security issues as well as how we can make sure that we don't repeat some of the common mistakes while building react native applications so that nobody hacks our application in the future so mateo show us how to make it happen and what are the techniques and tools to prevent the issues from happening hello to everyone on the other side of the screen and thanks to the staff for having me on this new conference edition my name is matthias ingiro i'm 25 years old and i'm from buenos aires argentina i work as the leader of the front-end chapter at anke a fan vintage company based on argentina too i am a mobile security enthusiast and i've organized a javascript meetup called meetup chase before we start i should read some disclaimers the first the first one is don't get the title of the stock wrongly is just applying words the second is donedrawingthis.com if you perform some of the following tools or techniques on a third-party application it could be considered illegal depending on what you depending on what you do and the country where you live but i will not be responsible for your actions and the third the first one is this stock is focused on understand then why should i hack myself plugging yourself allows you to explore and detect vulnerabilities on your application before someone else does when we deploy our app to the stores it's a binary for the whole world and maybe we are exposing api keys sensitive info or business logic in the go where to start the first step is to get the artifact we want to hack it will be an apk for android or an ipa for ios we could generate the artifact from the sorts for example running the gradle assemblies command on the terminal or whatever command you have configured on your project or you can even use a web like apk combo to download it if the app was already deployed this is a apk combo it's a website where you can search for any app on the stores and download its apk in this case our research for the twitter app this is not only for hacking some people prefer to use a website like this instead of the official store the first part of this talk is about secrets uh now that we have our target apk we can use apk tool for the combine the artifact into the for example running the d command with the path of the apk we want to decompile we can see this output on a new folder and usually on a reality application the javascript bundle is inside the assets folders like this java code is translated to a smaller code and it is inside the small folder and native i need the libraries are under the lib folder finally up images and resources are in the res folder like this now we can explore the android manifest xml and the javascript bundle to see if we are linking any api keys or another sensitivity for example in this under manifest we are linking the api key and someone else can retrieve this information and use it for their own purpose you can see the api the value of api key is super strong password and it is hardcoded into the other minecraft and the another key is refer to a other file the value of my secret is in the strings dot xml file and there's another xml files that could contain another secrets you you can also read the smaller code looking for constants like this we have the debug constant and the version called we could also find her coded info on the shades bundle if the app uses shade score instead of hermits we are gonna see a minified shayers fly like this yeah we can use cherish beautify or any any other tool to see the bundle in a better way then we can inspect the file looking for secrets in this case we found a super secret apa api key variable with the value admin 1234 but if harvest is enabled the javascript code is compiled to buy code i mean a binary file so if we look for our bundle it would look like something like this you can see that that you can see that this is very different from the previous one all the js code has disappeared but an attacker can still retrieve information disassembling the bundle back to hermes extraction set we can use a hgvs hvc tool which is which can help us to disassemble the vendor to hermes hermes instruction a this is how the instruction file looks like now we can look for in this file looking for secrets and also we can modify this file and assemble again to the bandwidth currently hvc tool doesn't work on real native 64 but i think it will be with the it will do in the future feature and there are a few tools that can automatically analyze the app looking for secrets urls and keys like apk now and apkx this is the an example of the output of apk num in the terminal it founds some urls but it can also find api keys or secrets where but also exist a mob sf which is a more complete tool and it works both with apks and ipas after analysis it throws a word report in the interface of mob sf you love it an apk and this is the result it's telling me a lot of of the apk information like the name decides uh how many activities it has and it's it's a this is modest f2 this is a list of the urs uh it found on the on the go and it can also find a firebase urls emails strings or hardcoded secrets then how do i protect my secrets and go for shaysco i highly recommend to use hermes plus a hostgator io which is a metroplugin so the strings will be really hard to read and duplicate and our secrets should be protected be careful with the rules you enable on a hostgator i o because it increases the band size and on the name this side we could use program which came with literary native and android and there are also some paid sdks anyway as far as you can avoid managing secrets in your apps or send them via network they are not completely safe on the client side the second part of this talk is about user dots sometimes we have to persist data on the app like user info indirection records and app states async storage is the most common library to do this because it was part of the regulative core but it has one problem all that you save is persist on an sqla database file as plain text an attacker could retrieve those files and create the save data we could simulate this scenario using adb adb stands for android debug reach and it comes as part of android sdk tools so you probably will have already installed it adb help us to manage both emulator and physical devices and upload and download files and apps from those devices we will need a root device or an emulator without a play services to get access to apps private bytes for example we can we could run the devices uh command to list all the emulator and devices connected to our computer then we can run the road command to set a device as root mode and then we could run the shell command to get access to that device shape into the shell we could run the ls command for example to list the files inside that device and now we can browse to our app scope for example cd data slash data slash and the app name in this example we have an app called com.rela and under the databases what they're inside condatrilla we could find the arcade store storage file this is the default name for async storage library then we sort we can exit we could exit from adv set and run the pull command to download those files into your computer using this command and now you could open the rk storage database file into any sqla browser for example sqlite browser and now we can see that we have the super secret key with don't sell any one value sorry into the database file to prevent this there are some alternatives like react native encrypt storage or my favorites mmkv mmkv is a c plus plus library developed by tencent transcend is the company behind a widget and another apps it is optimized for mobile applications and there are some grapplers for reality for example regulative mmkvs storage and mmkv sorry regulative mmkv this library has some advantages like it is even faster than a single storage it is 300 times faster than android and about a thousand times faster on ios uh also we could store every type of data not only extremes and it has an option for that encryption so we can protect what we are storing mmkv saves the data into a file tool but if it's encrypted it cannot be read without the encryption key this is the path to the default uh by mmkvs file and this is how it looks without encryption and this is how it looks with encryption and the first the third part of the stock is about apps behavior and we must talk about frida rita is an amazing reverse engineer in zul which allows us to cook the code execution from an app we can define some scripts that could change the apps behavior without modifying the original code for example in this news case we could intercept the location module and always return the same coordinates use the use cases for this tool are almost unlimited for example in this script we are cooking the location model and changing the implementation of the gas lateral and get longitude methods and always return the same latitude on the same knowledge frida has also a module called free address that locks any function call on the negative side for example we could run this command with a trace is a regular expression of what we want to log and this is the package name this is an example of the water we login for example multiset and multi get methods of the async storage module are loaded to the terminal to use priya we will need our root device or to patch the target artifact and the best way to do it is using object this is a tutorial on how to do this uh tre fria and see what happens on europe by doing this you could identify identify some vectors and prevent someone else from bypassing any validation in your workflow inside the application you could try to prevent someone else from using frida in your app by blocking root devices and making an integrity check the monkey is an option for react native for ejecting cloud devices and integrity check help us to know if the original artifact was modified for example if we batched the other also obvious creators made the call harder to read and harder to use freedom er gene monkey can detect freedom but frida could bypass shaman for example using this script we could hook the chain monkey module and return a false for every validation on the library for example if you broke in false code detected false and so on this is a guide from i took this this script okay and now we have a short demo uh on how to you know how to use hyperid i will this is a reality project i will go to employee folder run the band the build command like roughly assemble release this will take overhead while this is combining a i grow this as a 3d screen in python this is the js code we want to run which hook the chairmonk implementation and we can run it using the points 3 channel monkey.p okay now we have our apk i will move it to the root folder next cpa up build outputs apk release up release apk to the uh now we can use this is the original apk now we can use objection to patch the apk and enable free download apk from our architecture x xp86 this is the same on of this emulator and s love to the path in this case i release apk sorry objection will turn now the the friday gatchet and install it to the apk it's called take away okay okay now we have a new apk called a police dot objection dot apk we can install the original apk to make a test like adb s emulator level five four this is the id of this emulator and install uh release dot apk and now we have the readlab installed here it says true for root device because every emulators are taken by root device and now we can do the inverse operation like uninstall on com reader and now we can install the budget apk okay we can open it and this is white because it's uh waiting for a new frida connection now we can run this script with python and now it says false and since legit now we can do a login or wherever this console log is from here we are cooking the implementation and put all the variables into false this is the original code i will commit this to my github account so you can review review it later and that's the demo final thoughts from regulative dots there's not a valuable bulletproof way to handle security but you can do your best effort to to reduce the possibility of someone else hug you hugs sorry next steps you can keep learning about ethical hacking practicing on the app of the company you vote for and there are also there are also some hacking labs which give us testing apps to try and learn new tools for example these two and there are other topics to investigate like network traffic proxy public debates and activities etc this is a complete list of useful links and resources where you can keep learning about the previous topics and that's all if you have any question please contact me on twitter and that's all much as glasses thank you mata for this talk i guess that was a very important and insultful discussion about security with react native applications and now to make that even more concrete uh there is another speaker thor from stripe and he's going to talk about some of their real live use cases with security and react native now if you don't know stripe is one of the largest i guess these days uh payment providers and they are actually using react native for accepting these payments actually they have react native sdk that you can use if you are building react native application to accept that kind of data so that your users can pay for certain things through your app so they must have solved the security uh in the best way on the market i guess because in banking this is extremely important so i'm just really excited to listen about their experiences what they were looking after and how did they uh make sure that there is no issues whatsoever within their sdk so tar uh i just can't wait and uh we are all looking to listen about your real life experience as far as security with react native hello everyone my name is thor i'm a developer advocate at stripe and today i'm going to show you the money or at least how to securely accept payments in your react native apps now if you want to follow along in the slides you can find them at thor dot news slash react native eu 21. the great thing is when you have the slides all the visuals you can click on them and find the relevant docs or code snippets now we recently shipped our official stripe react native sdk and before we take a look behind the scenes let's kick things off with a demo of our new mobile payment sheet implementing it into an expo app now the payment sheet is this overlay that comes up and takes care of everything related to payments for you so it securely collects card details it has support for apple pay and google pay and you can also add saving card details for future use so your customers can check out even faster now in order to enable this functionality we need a server-side component i've drawn that up here so if we want to store the details on our customer we need to retrieve our customer here in the demo we're just getting the latest customer from our list of course in your application do make sure that you retrieve the authenticated customer and store the details there next we will need to create a short lived informal key so this key is what we provide to our payment sheet so it can load the payment methods from our customer object as well as add new payment methods to it and then lastly we need a payment intent so this is our actual payment object that tracks things like the amount the currency and all those details and so this endpoint we have here on our server just returns our payment intent client secret to our expo app as well as our thermal key secret and then lastly the customer id for our authenticated customer so now i have this server running here locally on localhost and then i have an expo app just running here on the iphone 12 simulator now my expo app is just um a simple uh typescript expo uh template here with some react navigation and so here what we can see is um our single step and so i've just added some text here for some test cards that we can use in our example i have some styles here and then i have a little fetch helper to fetch the details from our server that i just mentioned so the client secret the thermal key and our customer id okay so to get things started let's actually install our stripe react native library and so to do that let's use expo install please make sure to use expo install because that actually installs the corresponding version of the sdk that works with your expo sdk so we say expo install stripe stripe react native and then as you can see here uh it now finds the version that is supported for our expo sdk version so in sdk 42 we use the react stripe reg native library 0 1 4 and so now that is installed so let's import this and we can import from our ad stripe stripe react native and so we have a convenient hook here called use stripe that exports all our methods that we need and so let's go ahead and get our methods from use stripe and we can since we're using typescript here we can get all the type definitions and all the functions so we need the the payment sheet related ones so that's in a payment sheet and then present payment sheet so these are the two that we need and then we also have um a state variable here for our loading state okay so now let's go ahead and initialize our payment sheet and we're just going to do this on page load in your app uh basically you want to create your uh payment intent when uh kind of the last step of the checkout when you know the total amount and all um those details uh so here for convenience we're just going to do that in our use effect so when our single step view here is loaded and then we're just going to uh create an async so because it's an async method we need to create a new one here so we'll just create an init function first of all we'll set our loading to true so we can disable our button while we're loading our um detects here and then we're getting our um details from our fetch payment sheet fetch payment sheet params and so this is our um our payment and client secret our customer uh thermal key secret as well as our customer id um here we are so we're fetching those from from the back end and then we are initializing our payment sheet so let's do that and we can say so init payment sheet and there's a couple things we need to provide so first of all is the customer id and so that's our customer from above then we will need the customer thermal key secret uh so we have that above we need our payment intent client secret and then we can specify if we want a custom flow a custom flow allows us to separate out the selection of the payment method and the confirmation of the payment uh so let's just here say we'll want to do that all in one step so we'll say custom flow faults we provide a merchant display name so let's just say react native eu 2021 and then we're also we want apple pay enabled so we'll say apple pay true here and if we say apple pay true we need to provide a couple more things we need to provide our merchant country code let's just set that to us for this example and then that should be it so with this we can now uh in it our payment sheet and in it uh the payment sheet we have um an error in case there is an error we can say first of all once that resolves we say set loading is false and then we just check if we have an arrow we say if error we will just for now um console lock the error see what's going on okay so now we have our init method set up to init our payment sheet and so lastly we'll just need to call this in it uh fabulous so now we've um got that set up and then in the next step we'll um want a start checkout method so we'll say start checkout so that's when our customer hits the checkout button so it's an async method that we need again and we'll just uh we'll just say again set loading to true and now we can start our so the second step is to present our payment sheet and here we don't need to provide because we provided all the necessary parameters in our initialization above and again here we can get an error and let's say if we have an error then we want to alert with an error method a message so let's say first thing is our error code we'll just put in um the error dot code and we can see that there is um a bunch of things that might be available on the error to inspect uh so we'll say the code and then we'll just output the error message but uh otherwise if we don't have an error we can say alert success and we can say the payment was confirmed successfully okay and so lastly we'll just need a button to start our checkout so let's add a simple button here maybe we'll want to want to disable the button if um we're loading so when we're loading the button is disabled and then we want to also give it a title and we'll just set the title to um well actually we can say um while we're loading we'll just set the text to loading and otherwise we'll say checkout great and so now we're loading and um now it says checkout and then we'll need an on press and that is just our start checkout okay so now that we've got our parameters loaded we can hit the checkout button and we can see here uh we can use apple pay which then brings up um the apple pay sheet and then the billing details are collected via apple pay but now let's actually use our trusty 4242 card number here and we'll provide our billing details and then here is the checkbox because we've provided the customer id and the thermal key so we can save this card for future payments with um native eu uh let's do that let's save that card and we're processing and yay the payment was confirmed successfully great so now let's actually go ahead and have a look at this on an android device so we're opening the android simulator here there we are let's go to our single step let's wait for the parameters to be loaded and we check out and now we can see that because we're using the same customer id we can see the payment method has been stored on the customer and now they just have to hit pay and they can also pay on android fabulous so now that we know how to um process payments in our apps with stripe let's understand when we can use stripe because if you're selling digital products or services within your app so for example subscriptions or in-game currencies game levels access to premium content or unlocking a full version of the app then you must use the app store's in-app purchase apis uh please make sure that you understand for your use case so do check out i've linked the apple and google guidelines for you with more information but for other scenarios so for example if you're selling physical goods or physical services you can use this sdk to process payments via stripe great so now we know how and when we can use stripe so let's have a quick look behind the scenes and so here we have what i like to call uh the layer cake the layer cake that is the stripe react native sdk and now i'm not the artist behind this great visual you will see actually the original i made but my fabulous colleague chris draganus has made this great visual for for us so you can see the foundation the bottom layer of the cake are our stripe android and ios native sdks then on top of that we have what i call uh the native unification code or glue coach that is entailed within our stripe native library and then we have the react native bridge and on top of that we have our native stripe sdk typescript module so that is what facilitates the community communication between the native code and the javascript bridge so all of that happens in there and then our top layer we have our native ui component so our card field our cart form our apple and google pay buttons all of those components and then the icing on the cake we have our hooks for convenience and so now let's have a quick look at what i had drawn up um definitely not as tasty but yeah here to recap so the foundation layer are our native mobile sdks then we have our native unification code uh and our um native stripe sdk typescript module that facilitates the communication over the native bridge so all of that uh put together is what we consider the native module and then on top of that we have some native ui components and our developer experience sugar the hooks the icing on the cake great so now let's actually dig into these layers uh so first of all why are we using stripes native mobile sdks you know you could say hey we're just collecting some data in our app and then sending that to an api what's the big fuzz but uh especially when you're dealing with credit card data there is a thing called pci compliance and uh in europe as well there's strong customer authentication and so with these native uh stripe sdks so stripes native mobile sdks the android and ios sdks are developed with all these considerations in mind and so by utilizing these as the foundation for our react native library we can make sure we give you the easiest way to pci compliance and strong customer authentication because the native mobile sdks implement everything in a secure manner and with the new 3d secure version 2 authentication standard which is actually very difficult to achieve in a non-native environment so that's why we're using our native mobile sdks as the foundation for our cake now let's dig into the native module so we're using our react natives native modules so um on ios we've written this in swift so here with the gray background and again as mentioned all these visuals are links so uh when you have the slides open you can click on it and you can get to the actual open source code for it and so we've implemented it in uh swift you can see here we have our at objective-c identifiers to make sure everything is exposed to the objective-c runtime and then we have our stripe sdk.m so our implementation which actually then exports the module the stripe sdk module very similar on android we are implementing our react module with implementing the react context-based java module and it's called stripe sdk and then our uh stripe native sdk typescript module so we have all our types defined in there and then what we're doing is we're um getting our stripe sdk module via the react native native modules and then we're just exporting it with typecasting so we can make sure we have the types available when you're developing in typescript and javascript for your code completion and all that convenience then next our native ui components so as i mentioned when you're collecting card details you really want to make sure you're doing that securely and you get the easiest way to prove your pci compliance and so that's why we're exposing these native ui components uh again on ios we are um written it in swift and then we have the implementation now uh the interesting thing with this is actually the native components handle all the card information and we don't actually expose the card information to the javascript bridge so all of that is handled on the native site we're really just storing a reference to our native ui components and then we are extracting the card information at that point and it goes directly from native component to the stripe api so that's really how we can ensure uh the security of this and then here you can see this is our cut field component so we're utilizing require native component in our react native component implementation and lastly we have our developer experience sugar the icing s the k uh the icing on the cake as i mentioned so um hooks for convenience really uh they are just there for convenience so if you have an older react application that you are maybe migrating to migrating over you can import all of the methods that you need as top level imports so we're exporting all functions that that you need as top level exports as well and so the hooks really give you a little bit more convenience so you can see here for example the use confirm payment hook also exposes a loading state variable and so you don't have to um do that yourself you can just use that loading variable to for example disable your button while the payment is being confirmed and so that's really just to give you a nicer developer experience now next you saw in the demo that their stripe direct native sdk works with expo and this was really important for us because expo is the easiest way to get started with react native and especially with the expo go client it's such a delightful experience and so we actually partnered up with the expo team to make this experience work with the stripe react native um sdk and so we're happy to say that since expo sdk 42 and you know what a fantastic coincidence 42 great number so the stripedrag native sdk is available with expo and the expogo client and as mentioned it's important that you use expo install so that you install the corresponding version for your expo sdk and then even another icing on the cake we have is the config plug-in with expo so that gives you an a simplified setup especially for apple pay and google pay where you have to add permissions and configure things and so by utilizing the config plugin um we take care of that in the background and if you click on the big 42 here you can get to the expo blog post about the sdk 42 release and find some more information there and now i just want to take some time and really say a big thank you it takes a village and so a big thank you to the whole react native community and especially to call stack and expo for their major contributions to this sdk we had the sdk in a private beta for a while and we really had some members from the community provide feedback and and write up issues and that really helped us to make sure we providing a good developer experience so big big thank you to all of you we really appreciate it and we're super happy that we're able to develop this as an open source project okay now um that's it from me thanks so much for tuning in uh if you have any questions any feedback issues on the library please to go to our open source project on github and file the relevant issue there you can also reach us on twitter stripedf you will always find someone to answer your questions or you can also find me at thor web dev thanks so much for tuning in and see you on the interwebs thank you very much for this talk it always makes me happy to see companies like stripe bigger enterprises showing that you can do secure applications of react native and i guess after your talk and after matteo's talk nobody ever in the world can say that react native is just not secure enough for any kind of application whether it's banking or any other industry now i guess this is a good moment to wrap it up and move on to a second break today this time slightly longer so we can all have some meal maybe lunch and prepare for another series of talks that we have for you today so before you um before you uh go to enjoy your break just make sure to join our discord channel if you haven't done it yet and ask some questions around we will be answering them on our podcast you can also ask some of the questions directly to the speakers and just have fun together with other people so that it doesn't feel like you're just watching it all alone uh so i guess that's it for me and see you once again in half an hour this conference is brought to you by codestag react and react native development experts [Music] [Music] [Applause] [Music] perfect [Music] [Music] so [Applause] [Music] hello [Music] hello i'm mike cyrio and co-founder of kosta and today i'm looking for the best react native developers to join my team besides working on high and software use by millions we also contribute to many open source projects such as react native paper react native testing library or repack and so you will have an opportunity to develop your skills and knowledge within these projects as well as move your own ideas into life by taking part in our r d program we are a great team full of people crazy about react native technology and we can't wait to share our knowledge and description with you trust me it's great to be part of such a team so don't wait anymore join us check out the job description and in the link below and apply and i'm hoping to see you soon in our call stack office or maybe remotely depending on your location bye bye [Music] [Music] [Music] wake up in front of get up and get at him react native eu is on and it's happening check in to check up on all of the latest news and strategy man it's kind of the greatest and welcome to reacquaint view [Applause] 2019 keynotes that unlock a new world of insight lightning talks this cutting edge it really seems so right networking with everyone in the react native community from the thinkers to the linkers we're all here in unity q and a's that dive deep into cold dna and it's all covered here in only two days especially when it comes to trouble after the last session we're gonna party food okay with good vibes and dope karaoke [Music] high fives all around it was good to be here can't wait to the next one we'll see you next year [Music] [Music] [Music] [Music] uh [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] this conference is brought to you by codestack react and react native development experts [Music] [Music] [Applause] [Music] me perfect [Music] [Music] so [Applause] [Music] hello [Music] do hello i'm mike cyrio and co-founder at costa and today i'm looking for the best react native developers to join my team besides working on high and software use by millions we also contribute to many opus's projects such as react native paper react native testing library or repack and so you will have an opportunity to develop your skills and knowledge within these projects as well as move your own ideas into life by taking part in our r d program we are a great team full of people crazy about react native technology and we can't wait to share our knowledge and description with you trust me it's great to be part of such a team so don't wait anymore join us check out the job description and in the link below and apply and i'm hoping to see you soon in our call stack office or maybe remotely depending on your location bye bye so [Music] [Music] [Music] this wake up in frostwolf get up and get at him react native eu is on and it's happening check in to check up on all of the latest news and strategy man it's kind of the greatest and welcome to reacquaint view 2019 [Applause] keynotes that unlock a new world of insight lightning talks this cutting edge it really seems so right networking with everyone in the react native community from the thinkers to the linkers we're all here in unity q and a's that dive deep into cold dna and it's all covered here in only two days especially when it comes to trouble after the last session we're gonna party okay [Music] food drinks with good vibes and dope karaoke [Music] high fives all around it was good to be here [Music] can't wait to the next one we'll see you next year [Music] [Music] [Music] [Music] uh [Music] [Music] [Music] [Music] [Music] do [Music] [Music] [Music] this conference is brought to you by codestack react and react native development experts welcome back after a break and um we are here for another four talks two of them will be about testing so something very important when it comes to building react native applications and i guess no conference in the world can be done without talks about testing as well as two other talks about communications or something real time or voice related we will all hear about that just in a second but starting with the first song we have lewis from bam and he's going to talk about test driven development with react native using react native testing library so i guess one of the most popular testing libraries out there now test driven development is one of these concepts that are sometimes very very useful but you need to understand them right and you need to know how to utilize them in real life so i'm really excited for luis to show us how to do it the right way and how to do it in a way that we can test the application make our developer experience faster release without issues as opposed to making our life harder so louis we are here waiting for for you to show us how to test react native applications the right way my name is rusevsky and i hope my pronunciation is correct as i'm actually french and work for bam which is a paris-based mobile development agency today i'm going to talk about tdd and recognitive so you might be thinking different things about this topic already you might be thinking well i don't know what tdd is or i hate ud which is a fairly common thought actually or i don't know how to apply it to rec native so if you're thinking one of these i hope there will be something for you in this talk but first i want to tell you another story a story about something called dr shotgun a few months ago the covet vaccination was made available to anyone above 18 in france to book a slot you had to check regularly on some websites then when one slot was available you had to click through the interface and pray that you were the fastest to get it so what did french developers do they created a script so that they didn't have to check the website and they were going to be fastest anyway one of the script was called doctor shotgun so when that happened i thought well as developers maybe we have some kinds of superpowers you know well let's see how it does how we do every day at work let's take for example a specimen of the react native developers let's see what they do in their everyday work first we see them coding on their laptop they look happy and very focused then they open their simulator or install the app the app on their phone and they try the feature and most of the time it just does not work as expected so our developer who has tremendous determination is now going to make use of logs and break points to try to understand what the heck is going on here then they rebuild they rerun several times before everything works fine each of these iterations can cost two minutes or even more so it's a rather painful process and it's not the end of the story for a developer as they have to write a non-regression test to grant other developers including themselves from breaking the app in the in the future so it looks like we don't have much superpowers and we spend a lot of time clicking in real life okay so i think now it's a good time to introduce my topic i'm going to briefly explain what tdd is before going further so we make sure we are all on the same page tdd stands for test driven development it's a development technique from extreme programming that can be described as three phases first when you want to add a feature you have to you have to write a failing test it's going to be printed in red so that's why we call it the red face then you you write the code needed to make the test pass that's the green phase but you're doing it as quick as possible and that's why you need a third phase which is called the refactoring phase where we clean the code before going on to the next feature okay let's go back to our developer story and see what changes when they use tdd so now instead of writing the test at the end when they've already been through a lot of pain they write it first and then they can iterate until the test works which is usually much much faster than using a device because you get a much faster feedback and finally they check on the device and this time it works most of the times so ted sounds like a good idea and you're probably thinking well that's in theory right otherwise everybody would be doing it two years ago i thought the same and i wanted to be sure so i challenged myself to do 100 td for two weeks but i struggled at first a lot because i didn't know which tests to write before starting my future and to earn you some time i'm going to show you how to do it first let me introduce the approval keynote it's a hacker news clone hacker news is a website that shows links of tech articles or interests i'm going to show you how to develop utility to features that are i believe quite representative of any react native application so first we can see our application here that i already have a list of top stories which are ranked by a mysterious algorithm and on top i have a button that enables me to change between top and new stories which are the newer stories so right now when i click on the button its title changes but that's all and what we're gonna do here is gonna we're gonna fetch the new stories when we click on the button and display them so let's have a look at the code before starting what we have is a page component which contains two states one with the list of items and the other one with the list with the type of stories which is either top or new then we have a toggle stories type function that toggles between top and new the state of the stories type and right now it's just used to get the title of the button which is computed in a little function here then we have a use effect uh that's called at the beginning of the first render of our component and that gets the list of the news items actually only gets the top stories so what it does it's like here it fetches the top stories and it gets all the ideas of the top stories and we set the news items to the first 20 ideas and then we use a flat list in which we render our newslist item which is a component that we're gonna see in a few seconds and we just passed to to this component the id of the item now in this component what do we have we have a state that we initialize to null that contains the item and in a use effect similarly to what we've done before we get the item so what this function does is that it fetches the item on the hacking news api it returns this as a it passes the json and sets the item so this is the interface of the item and you can see here we display some information you can see here for example the title the the host name a number of points the author and the number of comments and we have a test file and in this test file what we have is one test in which we mock the top stories api and the items so these functions um i made them myself and what what they do that they actually use nok which is a handy package for mocking api calls so here we mock the top stories api and we return the list and here for one item we mock the api for the id and we return a fake item in which we only change the title here so in our test we render the page and then we check that the titles that we have passed as arguments to the mocks are displayed then we have a small test on the type switch that checks that the title changes and finally we have a snapshot to cover our back whenever we change some components but we're going to go back to that later okay so now what i want to do is to fetch new stories when i click on the button and the new stories and not the top stories so what i'm gonna do before pressing the button i'm gonna do a bit of setup here i'm gonna mock uh new stories and to create that function later and what i'm going to do is that similarly to this one i'll pass two let's say two different ids and then i'm gonna mock these two items differently so with a different title up so here i say some new story and then another story called tdd is my best friend okay so now when i click on the button so it's like it's going to be asynchronous so i'm going to need a wait for from rec native testing library and then i'm just going to check that those two titles are displayed on my application now for the market news stories list i'm gonna copy and change slightly the mock top stories list with the new stories api which is this one okay so now i'm going to show here my tester running actually running and we can see that it's hanging probably because it can't find the components we're looking for if we see it was expected to see some new story but it didn't receive anything and that's what we expected so we're done with the red face and now we're gonna do the green phase so let's go back to our component and here what i want to do is to change to call a new route and to set the items whenever the stories type changes so what i'm going to do here is i'm going to simply pass the stories type to the use effect pass it as an argument here to get news items okay here i add it and i'm gonna already say that it's either top on you okay and now i'm gonna change here my url so in the green face i have to go as quick as quick as possible so i'm just gonna here say end of url and if stories type equal stop then it's going to be top stories otherwise it's going to be otherwise new stories okay and now here i just change this so i can simply put here my end of your arm okay so i think that should do it here it's complaining because i don't know maybe it's a bit slow i know here just made a mistake up should be better okay that should be compiling so check our tests so as i'm recording my tests are a bit slow and now i see that i have a change in my snapshot which is a good sign and now it displays some new story and td is my best friend in my final snapshot that's actually what i expected so i'm good i'm gonna update the snapshot and now i'm gonna check on the real app whether it's working or not so i'm just going to refresh and see so here i see my top stories and if i click on show new stories ha there's a bug that's interesting because i didn't foresee that that actually it says here undefined is not an object and get host from url so that's one of the cases where you can see that something something is not working but now i know that it's not my code that's supposed to fetch the items that's faulty but rather it's something that i didn't see that here i have a function of passes the host to display it and sometimes the url is not defined so here what i'm gonna do is i'm gonna say this url can be undefined in the my interface and then i'm going to say okay if my url is defined i return this otherwise i return an empty string and now i refresh let's see what happens i show my new stories i see here this one the third one didn't have a url and that's why it was paid so at this point i'm gonna be honest i should have written a test for that uh i could have actually written a test for this little function here but as we have a little bit time i didn't do that i'll skip refactoring so we can focus on another example now that we've seen how to write tests for an api call i'd like to show you how to do tdd when you want to add some design to your app so let's say that when i click on one of the articles i like it to open on safari and if i've clicked on it and i go back to my app i'd like to see the title the grayed out so i know which one i've already read so design stuff and it's usually something that we think it's impossible to do in tdd well of course you could use visual regression tools maybe someone has presented some of them at the conference but personally i don't use them because it takes takes some times for this test to run and there needs to be a lot of conditions for it to work first you have to have pixel perfect mock-ups then you have to be aiming at pixel perfect and the data on your design has to make sense so if you want to make td use tdd with visual regression tools then you need to have a lot of conditions okay but our goal is to be test driven here so here's how i apply a tdd mindset when designing components the only tests i write that can catch a design bug are snapshot tests i tend to use them very sparingly compared to a few years ago as they are not very easy to debug or understand and they can break easily personally i like to do one per page as you can see here i have a final snapshot at the end so i know which place to check on my simulator when i change a component and i see the snapshot is broken now i can't really write the snapshot before coding right but i can do two things to make the snapshot update actually much faster first i can check if there's already a snapshot in place so i don't have to find out later how to mark my data and to update my test so that it is covered by the snapshot two i can find out which existing snapshots are supposed to break so that when i'm happy with my design i can quickly update my snapshots and i know exactly which changes i am expecting if there is a change in one of the snapshot methods is not that i did not anticipate and right away i have to check the if this page is still okay so here it is not so much test driven development in the sense of writing the test first but tdd in the sense that you know exactly which output you're expecting from your tests and you don't have much thinking to do after the feature is done so how are you gonna do it so i'm gonna simulate that i'm clicking on my tdd is my best friend item so i'm just gonna add some context here so say link press okay so i'm gonna rename this story and i'm gonna simply get by text till it is my best friend now when i save this i expect my test to still pass so i'm just gonna open up the a second um and now what i'm gonna do while my tests are running i'm gonna simply change here i'm gonna add his red boolean let's do a flag is red set is red she's going to be a used state of boolean initialized to false okay and now what i'm going to do is that on the on press here i'm going to set his red to true and then i'll change the style here of my component of my title so it's this one so i'm going to change it here so what i'm going to say is that if red is true i'm gonna add to this component color so let's say blue so that it's gonna be more visible to you okay sorry so it's not red it's is red so i'm gonna run my tests and now what i expect are two things so now i'm expecting that my snapshot for the first of the components that i've rendered uh displays an error here of the style the previous style and then fault and for the second one it displays the previous style and the color blue so let's have a look at how the snapshot is failing and what it's saying is that okay i have one that turns from an object one style turned from an object to an array to which which i did the color blue and the other one turned from an object to an array with false which is what i expected so now i can update the snapshot i can refresh my app and check if everything works for real so here's my app and when i click on one of the links title turns blue so i'd also like to show you how we can open the link in the browser because i think it's interesting interesting as well so here after i press the button i'm gonna expect linking which is the wreck native library that opens link that open url to have been called with and now i'm gonna pass it the url of my item which is actually the same for every item but it's not really a problem okay so now i save my tests and now my tests are expected to fail and here what i can do is i can in my component do linking dot open url with the item dot url okay so now typescript is complaining that it can be undefined so here i'm gonna just add wrap it into an if condition so obviously i should be writing a test for that but unfortunately i didn't have very much time for this demo okay so let's just check if our tests have failed so yeah they failed because linking that open url hasn't been called and i'm gonna save this change and now i expect my test to pass okay on another note waiting while i'm waiting for my tests maybe you should add some accessibility hint to see that your title has been read because it's going to be nicer to your users and actually it wouldn't we wouldn't depend on snapshots but for the example of adding some design i thought it was kind of easy if you like the demo and want to know more about it i have written an article covering more cases and i should be doping the link in the youtube chat section or on twitter after the conference i told you i started a two weeks tdd challenge but i did not manage to do 100 tdd on the first day so this is how i did it and how you can do it too first before going to tdd you have to train at two things the first one is to train at refactoring it's a major part of tid that's easy to overlook and it's easy to mess it up too there are tons of books and websites about refactoring my favorite ones are refactoring.guru and the can the martin follow book so check them out if you want to know more about it then you should also know how to use jest and work native testing library before starting tdd otherwise it's going to be a lot to learn at once then when you want to apply tdd you should start by doing it while you have confidence in your test where you already know how to test the feature that's why in the wind face if your test is still not passing you're sure that it's not because of your test and it's a real bug otherwise it's going to cost you a lot of time then for every case where you don't feel confident about your testing learn how to write the test afterwards so you'll feel confident next time and you know how to write the test and if you apply this you get closer and closer to 100 td and as i personally started to apply tdd more and more i discovered it was bringing me more and a lot more than just faster delivery the first thing i gained was a better knowledge of my testing tools just android native testing library in particular and as my tests were becoming more important my tests files became first-class code to me that means i was paying more attention attention on how i split them and i started to write custom functions and extract some of them just for my tests and as a consequence they became easier to maintain and a lot simpler to write and i also increased my test coverage and by that i mean i really increased the number of features that were covered by my tests and finally in many cases i figured out that my initial architecture or technical solution was not good enough to write simple tests and usually by making more testable it was actually easier to understand and change later the code and that's what makes me think that ted makes me have a better architecture so i hope i've changed a bit of your opinions if you didn't know what tdd was when you when you started this talk hope now you know what it is and you know how to get started if you were a bit skeptical about tdd i hope you want may want to give it a try or at least to discuss it with some colleagues or you can discuss with me on twitter if you like and if you didn't know how to do it i hope i've given you all the keys or at least some of the keys to get started thank you very much thank you very much for this talk i guess now we have no excuses to not test our applications with react native testing library we all know what td is and how to do it the right way so i guess we just all need to start doing it if we haven't done it yet now moving on to another speaker lars who is a freelancer he's going to talk about testing your applications when it comes down to a bluetooth device now as you know uh the world is changing and there is more and more third-party devices that your applications need to integrate to and bluetooth devices are i guess the most popular ones now testing bluetooth devices can be rather hard and as you know end-to-end tests tend to be often quite flaky so lars today is going to tell us about the library he created for something called mock testing which lets you mock the whole traffic uh with your bluetooth device and actually test it with chest which i guess saves you minutes to even hours depending on the number of test cases that you have so this all sounds super exciting i guess even more for those of you that are working with third party devices so lars just show us what you've been working on and how we can make sure that we test it all when it comes to bluetooth communication hello my name is larsthorpe i will talk with you about how i have done integration testing and really fast integration testing for react native apps specifically when you are testing against a bluetooth device that you're controlling with your app i am a software engineer from denmark working as of working freelance and doing open source development um for the agenda i will you need to start start by talking about sound box where i did this work i did this work in collaboration with soundbox and talk about how how we came to to the tool that we have developed here go into more details about when you want to test against the bluetooth device how do you how what is a good way to do that or you can do end-to-end testing which covers a lot of good things but they are also quite slow and fragile and you can also do classic unit testing where you write mocks or for your bluetooth messages you write those by hand but that's not good either and this talk will focus on how you can do mock recording which will give us really fast and really robust but true integration testing and you will see some demos along the way but as you can see here you can do full integration testing in a few hundred milliseconds which is really nice so i started last year working with sound box er with and soundbox is a danish company producing really awesome bluetooth speakers that you can carry around with you they are they're able to play really loud you can have a small party going on or or maybe even a small festival using these sound boxes and they come with a number of in addition to the very good sound they have they come with a number of um of interesting features from an app perspective so so you control the speaker with an app on your phone and you can control things like equalizer settings and you can lock your speaker if you don't want anybody else to play on your speaker and one of the interesting features also is that you if you have more than one sound box you can connect them together join them together and and play simultaneously and thereby creating um a larger earth mini festival you can say so we wanted to we initially we started out doing end-to-end testing of the app and the speaker and that's what you can see on the photo on the on the right you can see um two phones or in this case it's a samsung phone and an iphone and they're uh uh part of the test testing station uh you can see the control panel of sound box and you can see a lot of cables and various other things what is not on this picture is also a macbook that's that's having the role as as controlling everything and running the scripts and we were we were running end-to-end testing using a very common tool called appium for testing uh mobile apps including react native apps and and that works pretty well so we have been quite happy with that are running jenkins on the macbook and and then a number of phones or to test on so that was the setup and i was hired to write some of these end-to-end tests and let me just tell you a little bit about what that experience gave us so we in we ended up having around 15 different scenarios which are like full use cases that a user can go through on their phone um and when automating these scenarios we find that that it takes a while to to use appium to do this so so we generally see one to five minutes per per scenario so the total time to run all the tests all the scenarios on on all the actual phones is now two and a half hours and getting feedback two and a half hours on your pull requests is is really too much so um so so this was we wasn't completely satisfied uh with this um it wasn't a real improvement on manual testing because you still get feedback quite a lot faster but you also don't it's not very robust either so we we did see quite a lot of false negatives where you have to basically run it again and see that it was failing with the exact same setup but but the second time it's passing so so it was really a false negative um so so we were also looking into how can we maybe do uh better testing than these end-to-end tests so to compare those two um if you if you look at end-to-end testing they are that's a it's much faster and cheaper than doing manual testing um and one of the nice thing about internet testing is also that it does cover your entire system so you will er test not your only your device but also the interaction with the phone and the interaction with the server and you are exposed to real world timing and wireless noise which is good from a testing perspective it might be bad from a robustness perspective but it's still a good thing uh so it is end-to-end testing can help you uncover really hard to reproduce issues by just uh relentlessly testing the same scenario over and over and you can look at the bluetooth logs and see what's going on when when things eventually occasionally fail on the other hand we have unit testing where there are a number of benefits like there is no physical setup so you can basically run unit tests just on your laptop or you get much faster feedback you can get feedback from a large test suite in in maybe if a minute or instead of having to wait hours and unit testing is usually us also much more robust you get basically hundred percent almost 100 trustworthy feedback so it's good to have a few of those end-to-end tests but you should really use unit testing for for most of your of your automated testing uh if we look at how to do unit testing with react native and bluetooth uh what we are doing at soundbox is we are using the quite popular library called react native ble plx and and we are going to mock that so that we can write unit tests with uh with jest which is the normal common testing tool for react native developers so the simplest thing and what we did initially was to to just write er like you normally do with unit testing you write your mocks manually by hand so you write some code to simulate the behavior of of of a bluetooth device and you will eventually hard code your your bluetooth messages and some device did some traffic patterns and and these manual marks are not really very reusable so you have end up having a lot of code to maintain with the manual mocks um but that's not really their biggest problem um the bigger problem is that manual mocks really lie to us because when we test our app code in isolation we with with these unit tests and manual marks then what happens when when something changes in the protocol or with maybe you you get new firmware on the device so so the protocol changes uh and if you then don't change the app code then probably the app will break because the protocol is now different but with manual marks the unit tests will still pass and that's not really good from a testing perspective so you have an app that breaks because somebody something changed but your tests still pass so so really manual mocks they lie to us and we would like to get the best of both worlds so end-to-end testing provides us with with true integration testing and we would like the speed and robustness of unit testing and that's what we can do if you do if we use mock recording and that's what this talk is about and i've been doing mark recording for many years uh not specifically for bluetooth but for normal web traffic for http for web services so testing front-end web front-ends by recording http traffic and i would i what i did here was to to leverage leather learning and apply it specifically for react native ble plx library so let's take a look at how that works so the the core of this method is to have a recording so or occasionally maybe once a week or something we will run on the phone against the actual physical device so we will use an actual device like like this control unit from the sound box and then we run an app and an app recorder on the phone uh and and we and and record traffic uh with the device and we store those recordings in a json file that we keep in our git repository and and those recordings are then like reusable marks so when we run just on our computer we want to test various components and various pages are in our app so we write just tests that will use these recordings and we can run these tests really fast and we can run them all the time but because the recordings really come from an actual recording of the traffic with the device this is true integration testing because the the messages that we recorded are actual messages that have been been been transferred when we communicate with the device so let's look at how how it looks so you record traffic occasionally maybe weekly or maybe whenever you make a protocol change on a pr where you change both the firmware code and and the app you will you will run this again to record the the changes in the traffic um and you can also in this in this recorder you can verify specific expectations about values that might change every time you run a test or something and i'll get back to that so so we run this on the phone and you can see on the on the on the video here how um the phone will run through various steps uh connect to the device verify power state scan for device connect discover read device stuff monitor stuff etc etc so with this recording we can now write tests for the app and those tests are like normal tests except that they're really fast and they are using real traffic so in this particular case i'm showing you a subset of a test that just demonstrates how to connect to to to the device and we exchange about around 50 ble messages in this case and as you can see the the test runs in about 200 milliseconds so you can run these tests you can run quite a lot of these tests as often as you really like so how does these recordings look like they're they're quite simple they basically mirror the api of react native ble plx so it's just a long list of of records and each record is either a command or an event or a few other things that we can in that that can be done with the ble plx library and we just record all the requests and all the responses um in this recording file so when we want to use such a recording we have to mock react native ble plx and using the tool that that this talk is about which is called react native ble plx mock recorder then we can just use that tool to automatically mock um react native ble plx like this so the the usual jest mock file will just be these uh five lines uh and then you write your app tests using jest just as you would like to write it basically so in in this case here we are the first few lines we are reading the json file with the recording and we are configuring the the ble manager to to use this recording uh as as a mock and then we can just use react testing library uh to render whatever component in this case it's a device list screen it's actually from a different app it's not not the sound box app in this case uh so we render a device list screen and then we can control the recording how do what is it what timing do we want to do so we can play back and forth or sorry we can play forward in the recording onto specific labels that we have put into the recording um and here we can also just continue with the testing click on things in the ui and then we can verify that that things are showing data that's coming from the recording so so we run through normal app testing without having a physical speaker and the timing of that so we get really fast and robust tests uh the recorder app needs to be as a dedicated uh app that's dedicated to recording this traffic it's it's basically a light very lightweight react native app and you can initialize it you can see the command at the bottom so that's how you how you initialize a new recorder app using the the the provided tool it also has a template so you can just get started um by using that template and then you have a recorder i mean it's basically just a small test runner that you can write tests for that will let you in or generate traffic and the reason we do it in this way instead of of reusing the app tests for having those in both playback and recording mode that's not really possible you cannot really run just on the phone unfortunately and also you cannot really run react native ble plx on on a laptop so so we need to do it this way and it also has a number of benefits um that that we'll get back to so how do you write such an a recorder app you basically write a number of small tests where you simulate or generate the actual traffic that you're interested in having in your recording so before the test start you have to start the recorder then you do the things with ble manager like you would normally do like listen for state change events or starting a device scan and looking for for scan events and putting in labels in the recording you you control exactly how you do that and then when you're done you save the recording which you can then use so uh architecturally it looks like this and if we go through it in in steps we can see that when when we're running the app in production and we're not testing with this is real a user will use the app then the app just uses ble plx to talk to the firmware running on the device over over ble and when we're running the recorder we will instrument ble plx with this recorder module so that every command and event we send back and forth to bleplx and and the firmware will be recorded into this recording file and then finally when you want to run your your app tests we are completely not having uh the phone or the or the device in the picture at all we're just running on the computer running really fast just running the app test no build step included either because this is just javascript so you can just run your app tests against the app and the app is using the mocked ble for for all the responses so it looks like this so now we have time for questions except that i did this recording a month ago so i can't really wait for you for your actual question so i just try to imagine what questions would you like to ask so i have answered a few of those so so let's see so if we are more than one developer on this team and every developer have their own device and you know with ble every device has their own device id and stuff like that how do you how do you handle that do we put the device ids directly in the recordings and we do put device id in recordings but you can specify a canonical device id so so that every uh developer can have their own own local device and we will only connect to those recognized devices but what is being put into the recording file is the canonical id so that you don't get diffs in the recording file every every time somebody some someone else does a recording because it's only the canonical id that's being used another question is what about values that that by their very nature just changes all the time or there are a number of characteristics that have this uh um that are like that and and for instance our ssi or a battery level or maybe even the volume control might be set at different values between different recordings and again we would like the recording to use a canonical value so as you can see here you can specify the recorded value uh so if you follow the test there we say ble recorder q recorded value so we will say that we will record a value of 42 or specifically for this battery level thing and then we read the characteristic from the device and it will probably return a different value uh but what we record put into recording file will always be 42 so again we don't have a number a lot of changes around every time somebody makes it makes a recording but read characteristic for device will still return the actual value when you're running the actual recording and we can leverage that in the test as you can see here to verify that that battery level for example should always be a number between 0 and 100 so so we verify that in the test so that becomes part of the test so the recording app is also doing a little bit of the actual or integration testing against the device and what about still doing manual marking because if we have at least one integration test per ble message or message type then then we are really having a good enough integration test and and you sometimes might want to do additional testing uh where you for instance do a large number of tests where you put in some parameters you do boundary testing or combinatorial testing uh maybe you want to test corner cases with battery level what if it's zero of what if it's 100 and you can easily use manually mocked ple traffic with this library so as you can see here you just basically pass in another list of records that you write by hand so that's a good way of combining your integration testing with with combinatorial testing uh the last thing here is is a developer improvement because one of the nasty things about the elite traffic is that it is quite low level and usually or always refers to services and characteristics by uuid for example and maybe eventually you will know all these uu ids of automatically but but also values are based 64 encoding and and and it's it's sometimes really hard to read all these long numbers and these encoded values so so what we do in the tool here is that we add to the recording also a debug section where we translate we are basically able to translate the service and characteristic uids using a translation that you provide in the recorder app and also the values will automatically be translated if this is if it's possible so at least to to hex in as a buffer and if all the characters all the bytes are are ascii then we also show the ask string so that makes it easier to read as well and that's what i had to talk about today so you can read more on the blog post that i wrote about this you can scan the qr code to go to this url um the tool itself is on github on react native ble plx mock recorder and there is a package on npm that you can install there is plenty of guides in the repo already so it should be quite easy to follow but otherwise you're also very welcome to reach out to me i am available on twitter and of course there are still improvements that can be made to this tool so i'm also very interested if someone starts using this and to to to get contributions from maybe from you thank you for listening thank you very much lars for this talk all i can say is that i wish your library was out there when i was working on the on a bluetooth application myself because tested right it was kind of hard now moving on to another speaker the first one from the real-time communication block action he's going to talk about real-time video communication with webrtc now webrtc is you know a protocol a concept of adding video streaming capabilities to your applications and action is going to show us how to do it uh following with followed with some examples as well as breakdown the the architecture and some of the webrtc concepts in general so that we all have better understanding at a conceptual level of how to do it with react native so akshat i just can't wait to see uh what kind of experiences real time streaming experiences you've done with react native and how we can make sure that we know how to do it right in our applications as well uh hey everyone uh so the topic for next uh 20 30 minutes so for next presentation is a real-time video communication with react native and web rtc so before we get started on the topic some quick introduction uh i am akshat paul i'm an author and a developer in this field of software development for almost 12 years now building building have built all kind of applications mobile apps web apps devops these days i'm also co-founder of company 360 which is trying to change the way a legal works in india uh from your incorporation to your agreements your esop agreements to your intellectual property needs like trademark copyright patents all with just few clicks backed up with solid technology you can find me on twitter at paul akshat and to know more about my technology adventures you can have a look at actionbald.com i keep keep it up to date uh i'm always available on all these the social media mediums my dms are open so if you want to discuss about your next mobile app or if you're stuck uh on react native a bug or an issue just just buzz me and i'm happy to help um as i mentioned i'm author of few books and also technical reviewer and editor for few more uh most recently on react native for mobile development with a press and ruby workshop so do have a look these books are available wherever books are sold on amazon and everywhere else and if you have any doubt any queries on these topics and subjects do happy to connect and get back to you on it uh these are few of uh previous events in the last few years where i've given a talk of course react native eu this is my third time and also attended it uh way back uh uh in live session pre pandemic era some other conferences like uh devops days react global summit rubyconf india and you can find most of these talks on youtube so do have a look and uh learn or share uh with like-minded people and if you have any inputs for me uh do uh do a busby and and we can connect so let's get started with the agenda for this uh presentation of this talk very simple three points uh agenda we have for this talk what is webrtc what is the buzz about quick introduction about this project how does it work now what are the various uh components of this architecture and then how can we implement it with react native with react native we'll try to keep it simple that everything runs on your local very easily uh and and my ultimate agenda uh for this talk is that by end of of my presentation you are comfortable with the webrtc and uh can play around with it and maybe include it in your next application uh you know some video calling or a group calling uh feature so let's uh get started with point one of our edges so what is a web rtc uh web rtc is web real time communication it does have a full form and it's a free and open source project providing browsers mobile applications with real-time communication via simple apis that enable building rich high quality real-time communication application uh which can be developed in the browser in with the help of mobile platforms iot devices and allow them to communicate via common set of protocols in uh layman language webrtc helps building peer-to-peer real time audio video streams between two or more parties and this can be achieved purely on browser and of course using we can then use it in our mobile applications also and other types of form factors it's it's really a simple way to build these very complex group call video calling applications and in last few years you might have must have observed that lot of applications in the browser uh are now available uh for video calling group calling uh because of the whole pandemic thing it's pretty much now it has become it become mandatory to to have these features uh and we can see a very popular example uh here in this image where during a legal hearing and a lawyer was not able to switch off the filters and continued to do the group call in the filter and did mention that he was not a cat so this is how ubiquitous uh the feature of group call and video calling has become and it has become easy for developers like us to implement this feature using uh webrtc in our application so if you are one of those who want to capitalize this work from home boom uh happening webrtc is the is the api you are looking for um because because this feature is as i mentioned has become very common in most of the applications these days and webrtc helps in building a peer-to-peer connection very easily between two or more parties however this peer-to-peer connection uh architecture is a kind of debatable but there are ways uh to solve it uh because in real world peer-to-peer connection is sometime uh not possible but of course there are ways to uh to work around it uh and we'll discuss them later in the presentation uh however in our demo purpose because we will be building everything uh on local and we will be uh having our peer-to-peer connection only so how does a web uh rtc application work so at a at a very high level we all know it it establishes a peer-to-peer connection and the two parties uh two devices or browser they they communicate and transfer video audio data with each other directly so this is a very simplistic view of uh of a of a of a webrtc application but this is not a totally correct and not realistic because how will two parties know about each other uh till the time they they know what is their exactly location and how will they find each other in order to start establishing this connection so if if you hear or see at a lot of places that webrtc requires no servers and it's absolutely direct peer-to-peer connection that is not the case even in our example we will be setting up a quick server in order to uh to establish uh connection further so what is that server the most minimalistically we require something called a signaling server and what a signaling server allows is that it allows two parties to securely exchange connection data but once the connection is established the media or the data between the two parties is not touched by the signaling server basically then this system becomes a peer-to-peer connection and also very secure because now the interaction is only between the two parties and how does a signaling server achieves this it does this with first uh creating an offer which is shared by the other uh by the by the second party or the other party it receives an answer and then the connection is established this offer contains uh information like codex bandwidth ip address but nothing related to media the media as you can see uh number five which is the media that is always interacted between the browser or the devices themselves only hence it's it's very uh secure so that is how a signaling server which is the first part of webrtc works but is this also a very realistic uh or is it possible in the real world uh let's uh explore that so there is one issue with this system which we see in front of us uh there is a problem right here that in the real world uh unless the unlike the ideal ideal world when two parties are at distance or especially in a corporate environment they usually sit behind a firewall with their eyepiece consistently changing now this becomes uh this becomes very tough and and uh to establish connection from networking point of view it becomes close to impossible but here comes a standard framework which is called ice that comes to our rescue which is called interactive connectivity establishment this helps clients or peers to coordinate the discovery of their public-facing ip addresses both the peers here generate list of ice candidates these ice candidates contains ip addresses and ports eyes then tries best to find the path to connect with the other peers how does it do that using the host address which is obtained from the respective fear respective peer or device operating system webrtc achieves this in the background how it makes use of isis in the background with the help of a stun server and that is what we will know next so essentially there are so far there are two servers involved in a web rtc system which is a signaling server and then a stun server so let's look at uh what what is a stun server and how does it operate so a stun server is uh basically it has a full form uh two which is uh session traversal utilities for nat but in short as 10 stun server is something which you are going to use most of the time while building a webrtc application it is a it is a preferred choice for your signaling server also how it works uh in a webrtc connection is that it asks and also answers one question what is the ip address and this is essential because if we are going to have a peer to peer connection directly between the two parties or more then we must have a unique identifier for each of them and this unique identifier is the ip address for the fast majority of web rtc calls a stun server is going to make this identification easily for each member and will be able to establish peer-to-peer connection and once this connection is made the media can begin flowing between these peers it is simple it is quick and it does much of the work in most of the cases however there are times when stun server cannot get the job done in that case we do have a backup and that backup is called turn server so there will be uh are times when you cannot get a unique ip address of of one or both or all the peers especially in a very secure environment where often information is restricted maybe a government organization or some highly secure corporates uh due to the firewalls etc and you cannot get direct ip for the peers and it becomes impossible to communicate with one of one communication between one peer to another and that is a time we turn to our backup option which is called a turn server a turn server is it also has a full form which is traversal using relays around nat what it does is that the server goes around the network address uh essentially traversing the connection using relays so when a stun server cannot establish a connection between two peers a turn server steps in as an intermediary it is of course uh very counter-intuitive in a web rtc connection and not ideal since it will definitely add some latency to the call but in case you are not able to receive a direct ip with the stun server the only option left is no connection at all so in that case turn server is a good backup option uh of course there are some points to be taken in mind using a turn server of course adds to the cost of your infrastructure as the railing adds more load it's not straightforward and simple like a stun server and the more often you use a turn server the more traffic is directed through it and eventually the turn server become a form of turn servers so using it um as little as possible is a good idea and using it like a backup is the is the is a good approach so next is our react native webrtc or demo application time uh the source code for this application you can find it on github.com slash paul slash rneu21 uh and you can this is a final code and you can check it out and maybe set it up on your local play around there are two parts to this application one is the server side other is the is the application which is our client application uh which will use react native that is our client app for our peers which is basically in my case uh the emulator and our uh my android device which will connect to our server which is a node server few uh key packages of during our installation uh for server side and applications the end client side are uh express pr socket id uuid which we are going to use so the setup install on our server side along with morgan as our dev deficiency for our application client application of course react native is there beside redux socket io uh we will be also using a package called react native web uh rtc the purpose of this uh this this module is that it it really allows us to use webrtc just how we can use it in a browser so it really does the heavy loading for us you can check out its github repo there's a lot of sample code available there even i have made a use of that sample code and it's very helpful cool let's now check out uh the code on our server side so on server side what we are doing here is that uh one of course we are initializing express we are all then in the first part you see that we are generating client id which will be assigned to our peers these peers will interact with uh my peer in order to get this client id at this randomly generated id we are hosting this server on port 5000 and that's all and we can run this code to see if our server is running properly and that's all so our server side of things is running fine so let's now look at the code keep a part of the code on the client side so here on the client uh side of the application uh the one of the most important part is using the react native webrtc module uh you can actually refer is github repo and there is some sample code uh and you can simply use the code on the right side you see is from the github repo and you can simply use it and load it in your component did mount uh the purpose here is that what what reacted web rtc is doing that it is accessing our media device so that it can get the video and which we can then use it through the stream in any of the boxes we can create for the group call so simply use this uh code as it is and it works fine next uh next part of the client side the key part to the uh on the client side application is the socket io and prgs setup here what we are doing is that on the left side you can see we are using the uri which is of our server which is basically of our local machine of our node server which is running on port 5000 and we are using the same name as my peer which is in our server side and we are we are connecting to our server and if the connection is of course successful we will get to know that the client is connected we are also creating a common room id as you can see on the right it has to be common because you want to create a group call and we want multiple peers to join the same room with my stream we can dispatch our video stream and with ad stream we dispatch basically the stream of the peer and then we load it on our application so let's now run uh our client side application to see if it is it works fine so this will take a bit of time so let me just fast forward this so and now we can see uh our build is successful our server is also working fine it's connected our application is loaded and on our simulator we see two streams the top one is from my local uh machine my mac machine and the bottom one is coming from my android device uh due to some permission issue you can't see the videos but the but the streams are coming successfully also we can see on our terminal we had console logged and we can see data from uh from two streams printed here uh so that is successful uh coming back to our presentation beside creating your own uh server in order to implement a web rtc react native application you can actually use uh third-party servers so like fear firebase twilio which are highly scalable and uh are absolutely ready for uh for for your existing applications on any production uh grade applications we are now drawing close uh towards end of this presentation um and i'm not sure if you are if you are still thinking that should i try webrtc or is it worthy of my time but webrtc is really spreading uh like wildfire especially in this era of work from home and in this post pandemic world where most of us are working remotely it's it's getting used in very places where we never think of course video calls is something we always think and we can associate with webrtc but but it's also getting used in places uh like tele medicines where uh where doctor and uh patient can get connected using um using a robot or in drones where the video streaming becomes way easier between the hardware and uh and the and the smartphone and of course with video calls video also now becoming slowly uh and slowly key feature for any application and implementing with web rtc is way easier and and there are there are a lot of benefits it you can use it and make it part of your existing application um easily embedding with your existing application it is secure and its implementation is is is really easy uh video streaming used to be a very uh complex feature uh years ago but now it has become really easy and especially with this combination of webrtc and react native makes it makes it really easy for us developers so guys that's a wrap uh thank you so much for uh attending my talk and joining react native eu remotely hope uh next year we all meet at uh react native eu conference and uh and maybe uh hang out and jam a bit uh code together uh at the conference uh once again thank you so much stay connected and stay safe thanks thank you actually for this talk and uh i guess you know kudos on doing live coding sessions with something such as advanced at webrtc because it's something that can go wrong i guess and this is a sort of environment where things like to go wrong so i'm happy that everything worked out well and i'm hoping that you all and i'm talking now to the people listening us to to the on a live stream are just as excited as i am myself about webrtc and will be implementing that in the nearest future now uh moving on to the last speaker that we have today uh wojtek uh working at channels he's going to talk about something similar but related to voice so making a voice calling application like another skype also discussing a bit of webrtc in his talk as well as some of the frameworks on ios and android that you can use to make that happen and he's going to talk about an application that he has been working on so another great talk uh speaking about real life production experience so i just can't wait to see what he has prepared for us today wojciech like i said show us how to build voip applications of react native the right way hello welcome everyone my name is facebook again today i will talk about creating your voip applications in the react native so i'll talk about basics so we'll we'll see how to start with um with the boy maps and what they really are and what problems you can i can make during the development or uh of certain such kind of the app so but first things first so um as i said my name is poetry fedex i'm a cto at challenge so we are creating the product which is a business phone app so you can find it on charts that app i'm a javascript developer roughly 10 years now you know and i'm also a trainer mentor when it comes to the field so um when it comes to technology that i was involved in i actually did most of the it looks like uh i started with some jquery amber uh knockout js and going through angular and qr2 uh vue.js and yeah of course the react and react native recently so um i'm not only coding right now i'm also trying to bridge the gap between the tekken business so i'm also that guy who's uh who's actually checking if the business ideas are are really doable and what kind of technology can can help the business to grow okay so you can find myself um on a github or on a twitter so here are the links and yeah let's start with the topic so just as the beginning so what actually is and why app so when we talk about the voip apps you probably are thinking of something like zoom messenger teams whatsapp and skype so this is these are the main uh one of the main apps that are actually used to connect two peers together so basically when you're calling someone uh either with the audio or video so it's it's basically done via deployment so it doesn't necessarily has to be a phone number at the uh the other other at the other end so maybe just the connection between two apps right so that's that's what most of them does and they also are doing uh a mobile apps so this is something that will try to see how to create such such kind of app so when it comes to to do some kind of ingredients so what do we need to create such an app so i put here three things which i consider the main one so the first is access to the hardware so to the microphone or camera so we need to get the permission from the user we need to get the stream the audio stream from or the video stream from the user and then we can process it later so that's that's that's the very basic thing so to somehow get get the string then the second thing is we need a connection between these two endpoints by endpoints i mean two users two or more users because it doesn't necessarily need to have to be like we have just two users who may have a group call or something like this so we need connection between the participants so that's the second thing and the third thing which applies especially to the uh to the native apps is that you need some way to communicate to the api that your call your phone is calling so uh whatsapp does it some uh hangouts or zoom or meet that that if someone calls you uh they're showing you uh or that your phone is ringing so we that's that's the third thing so we need to somehow connect to the uh to the phone api to basically show that the call is incoming so let's start with the first first part so we need a set of permissions uh so the way i put it in as a separate topic because recently android and ios are trying to protect their users uh and they're trying to to give them visibility of what's going on with their devices so yeah a few years ago it was like okay on android you get the permission for everything actually and you you could um do whatever you want but these times are gone so now we need on both on both systems we need to ask for permissions for specific permissions we want to use microphone the user uh has to give it access and why this is such such a problem uh first because the guidelines especially on ios requires you uh to have a working app with even without the permissions so even if we have a calling app and you user don't give you any access to the microphone it still needs to work somehow it may uh give give some some kind of um of information that okay you don't have access to the maker microphone so please give them uh give it to us so so we can you can we will be able to make a call but yes still it needs to be a working app somehow the second thing is that there's something which is called the the call screen on android and it's sometimes maybe different from device to device uh on how it looks like and how it behaves so sometimes you'll you may need to educate users uh a little bit more on how to how to give the access to that because it may not be that simple like you can see on the screen that yeah app would like to access your microphone and that's it uh of course all of these permissions can be uh can be reversed um can be reversed so it can be basically taken from you uh for for the given app so bear that in mind that uh you should always have a fallback on that uh especially when describing to to describe to the user what's going on okay when we actually have a permissions will be pretty it will be pretty straightforward to get the audio stream but to get the audio stream we need some kind of solution to that and thanks to thanks to the webrtc we can we can use it so we'll talk about the webrtc first uh when it comes to the javascript because uh webrtc uh actually has has a lot of errors right now so it's like about 10 years i guess so actually the java the the webrtc is for a long time with us however this year came the webrtc 1.0 so this is also a good step uh because previously when using webrtc you may you may hit a wall when it comes to when it comes to the interoperability i mean like they then could be a different implementation of the same thing uh for example on chrome and firefox so the different apis uh that the apis could work in a different way uh after this 1.0 version it should not be a problem at all so um you probably will not need any kind of adapters polyfills and things like that to make webrtc work on every major browser what's what's also important to note is that uh actually every single browser even the software on ios or around on linux will work so so you can you can use webrtc between uh actually most of the today's uh browsers so but yeah let's talk a little bit on how the webrtc connection look like because usually what you can find on the internet it's just like webrtc it's a peer-to-peer connection and that's actually true of course but there's a little bit more behind it because to have a peer-to-peer connection you need to somehow discover to these two peers and this thing is discovering these two peers it's usually done through some uh external server but this external server are called stun turn uh these are the different different technologies to achieve the same thing uh i'll not go into the details when it comes the standard turn uh i will attach the links at the very very end so so you can read more about it however the idea behind it is that the webrtc supports all of them and both of them are basically to um enable the connection between two peers so to make them talk to each other however before you you will basically send the media between between two peers you will need to set up the connection and that's that's where this this middleware kicks in okay so we have here some high level implementation of the webrtc connection so first we need to get and share local anymore descriptions so it means that we need to share the metadata about the local media with some specified format this format you don't have to care about it that much because that's that's part of the webrtc thing but what we need to know is that we need to um we need to send our metadata about what's our uh our local stream on one device to another device so for example what's the resolution what colors do they support we need to uh to push that information to the other part and the second thing is to make our um to make the peers discoverable so uh it's it's about this the the service that we touch uh just before so we need to get get the information from the other peer and share the information about myself to the other peer so it's called the ic candidates uh so we need to send this to get this candidate and send it to them to the other party and as we have these two things we actually will have the webrtc connection so it means we can we are allowed or we we know how to send the data so the last part is basically send the data which we get from the uh from the from the particular device for for every single user okay i'll try to share some code here uh so this is like not the working snippet it's more like an idea of how it could look like of course the apis here are are are the real ones however uh what we can see here we can see the configuration object which has an url to the to the public stand server so it means you don't have to have uh your own server for that you may need the google ones and and that's that's actually pretty safe but probably if you uh if you later on will use your own app you may need uh your own your own server but yeah let's for the example take the google ones and you're creating rtc peer connection with that which means that this is like the the object that will will attach all their information so for example here you have oh i will put that later on uh so this one you will have the created offer from the peer connection so we are creating the alpha and we are setting this offer to our pre-connection and we are sending this through some cyanide in china i omitted this one because there's a cyanide channel which is kind of mock it when it comes to the webrtc implementation or or actual description the the signer link is not defined and it means this sign link channel can be can be anything so for example in this case it's some kind of webrtc sorry websocket thing which which sends to the node server and the node server manages this design link so you have that the send method to every other channel of the web rtc and also even links in there on the message so yeah let's let's go here uh so we are setting the local description we are putting this offer into the sign on channel okay so then we go to the receiver we have the same thing when it comes to creating a pure connection and we have the listener for the message with the offer so we have exactly we are taking this one uh on the receiver part and we are setting the remote description and as we said the remote description we are creating the answer and we are setting the local description with this answer and we are sending the answer so basically a receiver gets the offer creates uh sets the sets the offer as a remote subscription creates the answer sets it as a local description and puts the answer back and back to the sender we have a different listener for the message with the answer where we are setting the remote description so this was this first part about the negotiating um the the resolutions that the codex and so on so the metadata about um about what uh what what can we send and what can you receive the other part is that both sender and receiver are putting the listener to the ic candidate and this is what what the stand server uh actually actually does and we should as as we get the ic candidate we should send it to the um to the other channel yeah so um we are sending from the one peer to another the ic candidate and as we receive it we are adding the icd candidate to the view connection and now after these two things this this means that we have the networking setup so we can we are allowed to uh to send on the media so as we have the connection state changed here uh the lead and listener for that we can see that the connections they changed to the connected then we are we're good to go we can send the media okay things are getting complicated um so you can see that uh we just took a look at at the very beginning of the of of this let's say conversation so uh we just set up the connections between the the peers with the webrtc we didn't even send the media yet so to be honest the the whole webrtc is a very powerful tool but it's definitely not that easy and when it comes to the voip there's something called session initiation protocol so there's some very special protocol and there are some tools built on top of that that allows uh that works also on the top of the webrtc that allows us to do things a little bit simpler and what i mean about that that this the c can uh or actually this protocol can can take uh can set up a session between the endpoints so what we already did was between uh between two peers of the pure webrtc it can negotiate the media parameters and specs so yes one one more time exactly the same what we did it can manage the session so uh it can terminate the session you can adjust the parameters during the session you can substitute the tracks for example if you want to transfer the call to someone else or if you want to use a different track so for example you you put your headphones on so all this uh is already handled in some tools so when i think of some tools there are um some js libraries for that so there is jsc and cjs when the cgs is actually a of jstip and they um they are creating a kind of abstraction over the webrtc so you don't need to care of every single thing which you would do with the webrtc what's more it actually takes care of the synagogue so what it means that when you have this sign link server or whatever uh that was more under the example now all of this is being handled by the zip server that's also dancing because you have to use a zip server but the the upside is that it's already done so there are some servers like camellia asterisk or free switch or and more of them even so i i would just name to i would just name some some popular ones uh to to take care of the sign learning thing to take care of this negotiation and so on so uh would i say that if you want to use the cloud or you want to create a cloud to life on the application you probably wouldn't there will end up with with the the ship uh on the top of the wall rtc so but i strongly encourage you if you want to to give it a try uh let's try let's start with the pure webrtc and see where it goes and then let's let's go to the sieve and see how is that how it's different how it's so much much more helpful with that okay so the question is if this signaling if the sip is enough i would say for for the whole application it's not yet everything because what we have here what we discussed is just the part of you know sending the sending the media so even though we started with the webrtc with this uh initiation part then with the sign link it's still about the sending media so you have the whole bunch of things that you would also want to send by the rest api via graphql or even via another web sockets so uh bear in mind that all of this that we are talking about the signaling thing is all about just uh just a call yeah just the video or article okay so we talked a little bit about the webrtc but where's the react native in here so so the case is that thanks to react native webrtc library all of this is also true for for the react native so you can use all of this api also in the react native app so what's cool about this is that this this package also takes care of polluting the global javascript namespace with the webrtc globals so for example if if the library like jsc uses some some global ips like windowed up or webrtc or something it's uh it's able to use it as in normal just an application uh so this the this package is pretty cool so it requires some configuration step as far as i remember about uh yeah after that it's pretty smooth so so definitely definitely you should use that when it comes to the web rtc okay so now uh that's the title can write the app uh and that's true because um after all the steps we can now make a connection between two apps i mean between two instances of the app so between the two users we can send the voice send the video and all the technologies that we that we talked about after this time uh should be enough but there's one problem when it comes to the mobilist what if the app goes background because this is the problem that we don't really have on the uh on the web apps because usually they are done in the way that you open your opening tab you are doing something even you are calling you are having a mid conversation you're closing the tab that's gone but when it comes to the mobiles you put it you put the mobile phone in a pocket and then yeah you actually wanted it to ring as it's required so all all the other apps are doing that right so uh whatsapp is calling when someone is calling you on whatsapp is basically ringing us any other phone so this is something that we want to achieve also in our app right so for to achieve this thing we would need two things so the first one is the push notifications [Music] also when we have a slight difference here when it comes to the android and ios so for ios we have two kind of notifications so we have push notifications and by push notifications the voip ones are meant to be used only for signing the call so for example let's let's go back to the example if someone calls you on whatsapp so the whatsapp uses by push notification to notify your device that the call there's an incoming call on android on the other side there are just notifications and you are allowed basically to create such a call screen from any notification uh why is this important because on ios you definitely should use the voip because the priority of subject notifications is much higher and starting with ios 13 it's actually strictly bound to uh to the call screen so let's talk about the the call screens then uh so with ios 10 in 2016 uh apple introduced something which is called call kit the call kit is a set of apis which allows you to communicate to your full call system by call system i mean you can you can basically show call screen with your uh your data your apps data so and that's what what main competitors or main companies are uh are actually using right now uh it was even more prominent starting with ios 13 because uh starting from ios 13 they actually force you to use wipe notifications with the call screen together so every time the voice notification comes in to the 2d to the ios app there needs it needs to be reported as a call so the the call screen is being popped up so uh the only way then to use it the the you should follow the rule this uh you should use the voip uh push notifications only for for incoming calls and for the other uh you should use the the regular push notifications of the ios when it comes to android you have the priorities so we are managing this with priorities of notifications and one of them are simply showing the call screen while others are becoming like like an older notifications okay but when it comes to the call kit there's a library which is called react native called keep and this call keep manages both call kit on ios and connection services on android which means you that we can show uh the call screen on both android and ios using this package uh so this is this is the the package that probably is the only one on the market that will handle that without touching the native uh the native stuff in here so uh i strongly encourage you to take a look at that uh when it comes to handling the call kit and and the connection services on android so this is how it looks like when it comes to the incoming call on on android so we have basically our own screen then the notification which is the incoming call notification strictly from from android in this case we are answering the call and that's the uh that's the call screen of android so that's what you can achieve using this uh this call keep uh read native package okay so i bet now we we covered all of the pieces that are needed to to create such an app of course this is a very sneaky overview of what's going on here here because yeah there's a lot more underneath that but i hope you get some some very uh some very basic knowledge on where to start on how to how these apps are actually looking under the code so just a quick recap the first thing think of permissions because usually there will be more of that than just popping out the permission you need to handle what's what's going on when one user denies permission basically uh second thing i bet the only or actually the preferred way it might be the only way to do is the webrtc so so you need to incorporate the you have rtc into their native app and you may or you may not use the zip uh and the zip server however it depends on your use case so you may you may need some simple thing when the webrtc the pure webrtc will be enough but if you need the whole signaling thing the whole negotiation thing uh covered then the sieve is the way to go um the thing about the cockpit and connection services is very important when it comes to the background uh services to especially the incoming calls so if you want to do the incoming calls properly then you need to use the call kit on ios and voice push notifications uh on android there are push notifications just just the just casual ones and you have the connection services which allows you to uh to show the incoming call or outgoing call using the the native screen and there's a package which is called react native call keep to all to handle both of them uh last but not least as you're starting to to work on some kind of voip application see if uh if if you really need to create it from the scratch because there are some some tools on the market there are some sdks on the market like like twilio uh we are also entering the trainers challenged it up so uh maybe some part of this web applications are already done even if it's paid in maybe it might be even cheaper to create uh some sort of web application using using such uh such already built solutions so thank you very much and all the attentions of the the links to do some some additional resources and yeah see you hopefully next year in person bye thank you very tech for this talk and i'm really happy that we got these two talks together so that we were able to actually compare the video streaming capabilities with the audio copy capabilities so now we are fully cruelly uh fully uh fully equipped with the necessary knowledge needed to build video and audio driven applications and this um wraps it up so um i'm hoping that you liked it uh this was uh the second and actually the last day of react native eu conference and um i'm hoping that you have got as much out of it as possible now i wanted also to thank very much to all of the speakers that have been part of this conference all the great talks that they have created and recorded and prepared this has been amazing and i'm really really happy that you were able to make it happen and we're part of this conference so once again thank you very much for doing this i also wanted to thank every very much everybody who has actually submitted a talk submission to our rfp process while you may have not been selected this time i'm really happy that you have all taken part in react native eu and who knows maybe next year will be your opportunity to be part of the react native eu one further or the second date i also wanted to thank very much everybody who's been listening to us um it's been great that you have been with us today being interactive on our discord twitter and all the social media this conference is actually for you so i'm happy that you are kind of interacting with us on real time making sure that you are taking out of it as much as you can and uh like i said you can still leave your questions on our discord channel uh and we will be answering them on our react native show podcast soon after the conference um and don't forget to follow reacnativeyou on twitter and callstack on twitter and use reagnitfu hashtag this is how you can stay up to date with not only react native eu conference but also as we release the recordings of the first and second day as well as we answer your question this is all that we will be broadcasting through our social media channels um i'm really hoping that you liked it like i said and uh i'm also hoping that another uh edition the sixth edition will happen again but on site in wordsworth while you may not remember the first four editions were happening our third editions were happening in poland on site in vrozof but because of the global pandemic situation we're actually forced to move it remotely which has been working out quite nicely but we still miss your faces because that was one of these opportunities where we can all interact with each other shake our hands and kind of get out of this remote reality and see how our twitter and github handles and avatars compare to our faces in real life so like i said i'm hoping that next year we see each other in person and well well this is just a hope because we got another 12 months for the conference i like i i just wanted to thank you once again for joining and uh let's stay up to date in social media because that's the way how we can interact with each other while the pandemic is happening stay healthy stay safe and once again thank you for staying with us for two days it's been pleasure bye [Music] this conference is brought to you by coldstack react and react native development experts [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] [Music] so [Music] [Music] [Music] you

Channel: Callstack Engineers

Views: 1,379

Keywords: reactnative, reactjs, javascript, callstack, reactnativeeu, conference, techconference

Id: Q_18-Y4RyNw

Length: 387min 20sec (23240 seconds)

Published: Mon Sep 20 2021