 JavaScript to build and compose your UI instead of using Objective-C and Swift and Java. It's so much faster than using those native technologies because there's no recompiling. You can use a live reload and just hit save and you see directly what your changes. You also have hot reload which allows you to keep the state of the application and just import some new code and see the changes directly, like keeping you where you were inside the deep screen that you reached. React Native is also really a performance out of the box because it's really just using native elements behind the scene. So instead of using the DOM on the browser, it's just using the native elements on iOS and Android. So that's the view, the text, and the scroll view, all the toolbars and all the things that you can use on the native side. And it runs perfectly well at 60 FPS. And it's really in this string, in this string interval from native application built just using iOS and Objective-C and Swift. And another interesting part of React Native is you can easily import all the views, like existing Objective-C or Java views that you can do. And also call any API that are available on those platforms. You're never limited to the React and JavaScript API that is given to you. And you just follow the steps on the website. There are some guides, really interesting guides. And the last point is about code sharing. So in general what I've observed is I can usually share like 95% of the code. So that's really a big, big plus because it's, again, so much faster to ship a feature with the React Native thanks to that. All right. So to learn React Native, I highly recommend you to check out the React Native website. There's a really good Getting Started Guide. And it's really interactive and you can easily follow along and play with it. And in addition to that, I also recommend having a look at React Native Express because it just complements and built up on what is expressed and shown in the React Native Getting Started Guide. All right. So now we're going to get into the code. I'm going to show you how to build your first application. And this is going to be like the rest of the presentation so about only live coding. Let's do that. So let's get into terminal. So there are multiple ways to bootstrap a React Native application. But what we're going to use here is the create React Native app. It's basically the counterpart to create React app that Bobby was explaining. So you just install it on your computer using NPM. But you need create React Native app. But you need no setup on your computer to be able to do that. So here I'm just going to do it, but it's already there. So all right. So from there, we're just going to call it. Let's create this application. So it's going to fetch everything, all the dependencies from NPM. So it shouldn't take too long. A couple minutes. Still working. All right. 35 seconds. That's better. That's good. All right. Let's get started. So now let's open our project. I'm going to use Visual Studio Code because it's a really good editor and comes pre-packaged. I mean, not pre-packaged, but you can install some React Native extension that makes it really easy to develop a React Native application. And here you see on the right, we have just the new, the file that creates React Native app has already set up and created for us. And the entry point is the app.js file. And here you see you can recognize the React component, the root React component that it has created for us. So now what we want to do is actually start the React Native package here, but in the correct directory. And the package is a little bit like Webpack. It bundles your JavaScript into JavaScript bundles that is usable by the application. So everything is already set up for you. So Babel is being used. And also FlowType, you can use FlowType directly. It's already ready for you to use. And now let's just launch the iOS simulator. You just press I and it's going to launch it. And we're going to be able to see directly the application running as soon as it's loaded. And you see behind it's bundling the JavaScript and that's the first time you do it. It's a bit long, but as soon as it's ready, it's just when you do some changes, it's almost instantaneous. And there you go. You can see the text of the application. It's also the Android simulator. So I guess for the rest of the talk, I won't show the Android simulator. It's going to be hard to see. Yeah, that's correct. You need to install Xcode and Android Studio to either use iOS or Android. And there you go. We have our React Native application running in both emulators. And it works as well on your own device if you want to do it. All right. So let's have a look at the code. So here you see, for instance, we can, let's change the background. And just, it's saved. And you see the Android directly reloaded. So for iOS, I guess we just need to enable the library load. And now we just, all right. Yeah. Okay. It works. But on the Android emulator, sometimes it's a bit slower and it doesn't get notified of the change. So sometimes we have to just retry and retry. Yeah. I guess. Yeah. There you go. So yeah, I'll just do the iOS emulator because this little bug is a bit annoying. Okay. So, I guess here you see the render function is containing three text lines basically. And so the view element is like the equivalent of the div element on the web. And the text element is basically the span element. And yeah, we have a bunch of different other components to use. So we're going to view, to take a look at the view components now to see what we can do with it. So let's just remove this and introduce a new view here. So let's call it box. And we're going to style it. So basically this is CSS in JS. It's a subset of what you can do on the web. Not all the CSS properties are supported, but a bunch of them are and it's really convenient. So let's add a background. I'm going to switch back to white for the background. But here you see nothing, of course, because there's no size. 100. All right. Here we have our box. We can apply a border radius 20. Okay. So that's interesting, because here you see the error box that tells us that we didn't spell something correctly. Yeah, yeah. Exactly. Thanks. And then iOS, I mean, a reactive error message are quite helpful. So usually you can figure out easily what's wrong and just not waste too much time trying to figure out where the error comes from. And you can also apply an opacity, for instance. There you go. Yeah, that's the basic property that you can use. So we're going to add a bunch of other boxes here. So to have a look at how the layout works with React Native. So let's add some spacing a little bit. So React Native uses Flexbox for the layout. And it's exactly what, if you already know Flexbox on the web, you won't be lost with Flexbox with React Native. It's exactly the same. But the different is the axes are inverted because the main axis, the main direction is in the column. And I believe on the web it's in a row. But that's basically because of mobile application are usually laid out in a column like this. So here you see the container that we have is configured to lay out the item just in the center. But we can just change this and use FlexStart, for instance. And then it starts to render from the start. And this is like the main, the justify content is for doing the layout on the main axis, which here is the vertical axis. So when we say FlexStart on the vertical axis, it puts all the items at the top vertically. And line items it's for the secondary axis. So here the horizontal axis. And so horizontally they're all centered, but we can move them to the left, for instance, or to the right, this FlexEnd. And so if your device is configured left to right or right to left, it's going to respect that and change that. And what else can we do? FlexStart. We can, can you space around, for instance? It's not here. Yes, it's on the other axis. So you see I was just trying to change the layout, but I entered something correct. Here, for instance, I'm using space around. And that's what it does. Just like splitting them with an equal margin between them. And space between as well works. All right, yeah, but you don't see much of the difference. All right, what else can I show you? Oh, yeah, we have the, so if we switch the direction and switch to a row like you have on the web, so here we have this. And here you see, we can only see like four of them, but we can also apply another attribute, which is just to display them in a grid. But I don't know what to do with that. I'm just having a brain freeze. How do you display them in a grid? Oh, yeah, we have to flex or wrap. We have to wrap it. Okay, flex wrap. And now we wrap them and we can, yeah, that's how you basically implement a grid with Flexbox. You start to wrap the items. So it doesn't have enough space, so the rest of the items continue next on the second line. Let's add more of them. And here you see that all the items are like displayed under like the time and basically the status bar at the top. And we can easily fix that by using the safe area view component. And this will basically make it so all the items are displayed in the useful area content. And this works like on all devices. For instance, here it's the iPhone 10, which has a notch, which is more problematic. And for most applications, you need to take care of that and account for that. And for instance, if you were using the safe area view on an iPhone 6 or 7 or 8, it would just like make it a little bit, move the items on the top a little bit so they still appear under the status bar. All right. Let's have a look now at the text elements. So this is the text elements. It's quite simple. But let's apply some new styles to it. I'm not going to detail all the styles because it's actually a bit boring, but you can read about all of them on the React Native website. So you can also apply the style in line in your render function. For instance, let's put the text to green. And let's make it a little bit smaller. Make it bigger from size. All right. And you can also nest text elements and apply different styles to that. But as soon as you start nesting them, like the nested elements cannot be placed, some properties doesn't work. Like if you try to apply a transform or basically all the layout properties are not applied to the nested elements because it's a limitation of the current system. So let's apply a different color. Let's say red. And we can make it bold. So that's how you, the text element, quite simple if you just, yeah, all the properties are listed on the React Native website. What else can we do? Let's add an image component. So the image component just takes, it takes a source property. And here we're going to fetch it from the web, but we need to import the image element. And we don't actually see anything because we need to apply a size within height to the component. And that's different, that's on purpose because the React Native developer decided that it wasn't a good experience to have the layout change as the image was loaded. So they require all elements to, all image elements to provide the width and height. So it's, and there you go. A cute little kitten. We can also apply a tint color, I believe. Let's say, nope. Oh, but, yeah, it doesn't work. It works, I guess. It's blue, but completely blue. So let's just, let's apply an opacity. Okay. No, fails. Doesn't work. So, yeah, it works if you were using like a transparent PNG. All right. So let's have a look at another component which is quite useful for mobile application, which is the scroll view. So let's see, scroll view. We're going to wrap everything inside the scroll view. But, yeah, let's add much more elements to this. A new box. So here we go. So we have the scroll view. So as soon as we want to see the other elements, we can scroll the view here. All right. So, yeah, there are a bunch of other properties for the scroll view. You can enable paging if you want. But, yeah, I'm not going to have enough time to cover this. So let's just take this moment to have a look at the Android emulator to see how it looks there. Yeah, it works as well. So you see just with the same code, we have basically the same kind of rendering. But, yeah, it's still displayed under the status bar, but I believe yes. Safe area view is just for iOS and Android is a bit different. Okay. So let's have a look at the next part of this talk. So at Crossfield, we recently built the Red Bull Global Rally Cross iOS and Android apps. So they had an existing WordPress website. And this is it. It's a pretty standard WordPress website. So you have different sections and news and gallery and everything. And you have a website that you would expect for such a website and the results. That's probably the most interesting part of this website. And so the mobile application which are on the App Store were built using React Native. This is the iOS version. So I'm just going to show you some quick screenshots. So here we have, for instance, the news and the results and the details and the driver profile pages. And on Android, it looks basically the same. But there are some platform-specific changes like the transitions that are respecting Android and the transitions. And the buttons are using the ripple effects. So you really have the feeling those two applications are really at home in both of these platforms. So what we're going to do today is rebuild the news feed basically and connect it to the Red Bull Global Rally Cross API and fetch basically the same data. Let's do that. Let's go back to our editor. And we're going to start from scratch. So first of all, so we're going to need a bunch of different dependencies. So I'm going to, let's switch to the prof. I'm going to add them. So we're going to add the dependencies we need. So we need the moment JS library, React navigation as well and React Native renderer HTML. And you'll see when I use them. We just add them to the product. So you see the moment library, it's just the moment library that you're probably used to. And that's what's good with React Native. You can just reuse the existing JavaScript libraries that you've been using for a long time on the web and just import them and to use them inside your React Native applications. That's quite awesome because it saves a lot of time being able to reuse all these libraries. All right. So here we have those. So we're going to use React navigation, which is a really great navigation library open source. What's good about this one is it abstracts away the platform differences between iOS and Android. So on iOS it will use the iOS transition and on Android the Android transitions. And also the navigation bars, differences and toolbars and everything. So you don't have to worry too much about this. And it's really great. You should check it out. Okay. So let's remove all of this because we're not going to need it. So here I'm going to use a snippet because, yeah, I don't want you to wait for me to type all this line of code and it's a bit boring but I'm going to explain what they do. So the stack navigator basically manages a stack of views. And here we declare the different routes that it manages. So here it's the main route is going to be the news screen and the secondary one is going to be the news details. And here we have a bunch of different styling options so it looks nice. So let's, but here if we save it's going to complain because here we have a screen which is defined but we haven't, like the news screen is not, is not there yet. So let's just add them. So screen, new file, the news dot js and details. Okay. So let's just use, okay. Let's add a background call. One, okay. Let's go back. And now we need to import them, import news from screen, news. Okay. Same for details. Okay. And if we reload a fully, no. Something is not correct. Yeah, because, yeah, we are not exporting anything yet but we need just to export the stack that we created. And this is our root component, stack, export default. Yeah. There we go. So that's our first screen. And here we have the title of this screen so we can change it easily as well. It reloads, it works. Okay. That's great. So let's go to our news screen. And here we're going to basically use a, we want to display the list of news so we're going to use a flat list. The flat list component is really good when you have a large number of items to display in a list because it's just going to render the items that are on screen and this is what you need to do on mobile and I believe basically on the browser as well. Otherwise it's going to have to create so many different and render different elements that it's going to be too slow and too memory intensive that it's going to crash your application. So that list is optimized for this use case. And that list takes as input a data which is basically a list, an array of items that you want to display and the render item method which tells how which item is going to be rendered. All right. So, but we need some actual data. So for now we're going to use some fake data just so we don't have to wait for anything. Items. And let's define our render item method. Okay. So, yeah, just so you don't have to, I'm just depicting some stuff. So that's our render item method. So it's basically using, you see view text elements and the touchable highlight element. So we're going to use to import them. And just I need to add the style as well. All right. Just remove this one. Again, these are just the styles that I'm using in this view. And it's import everything that is needed. So we have the image component, the touchable highlight component. And we got an interesting error. So return flat list. Yeah, okay. Oh, we forgot about the moment library. Okay. Text. Yeah. And there you go. You just need to adapt a few more things. So we have here our list of items. But for now it's just pulling some fake data from that we have here. So the title, the date and image for each item. But the images are actually from the Red Bull Global R&E Cross website. Here we just have an issue with this. We have a warning which tells us that we are missing keys for each item. So we're just going to add a little thing, a little property, which is a key extractor. It basically tells the flat list component which key to use for each item. Because that's what Bobby was explaining when you're rendering dynamic lists of items. React expects a key for each item. So item.id. See, here we're just going to use the idea of the key and no more warning. All right. So let's just adapt. Oh, yeah. I forgot this, the container. So it looks just a bit nicer. And here we go. See, it looks basically like the real Red Bull Global R&E Cross application. And the next step is to actually fetch the data from the WordPress API. All right. So we're going to use the component amount lifecycle method. And here you see I can just use a wait. Because fetch is really returning a promise. So if you follow the talk from Kevin, so you should be familiar with the syntax now. And once we have the response, we just get the JSON from it. And here I'm just processing those items and just extracting what I actually need. And then from there I just change the state and pass it, update the state from the component. So here we're going to add those two state properties. So it's loading true and what else? Post. Which is, we can just define first as post. Okay. And here we're going to use those properties from the state. Okay. All right. Let's save it and see what it does. Yay! There you go. It fetched the data from the API. And you see it's probably, you see that the items are different because these are the real items used on the website, on the WordPress website. And now what we're going to do is basically implement the second screen where you access the details and you want to display the new details. And for that we're going to implement the on press handler for the touchable highlight. So touchable highlight is basically a button, a wrapper for handling touch events. And what it does is when you touch the element, it highlights the background a little bit so you can see what that something is being done. So I'm just going to add the function here. So it's being part of the post item. And so since we're using React navigation, each screen managed by React navigation is passed a navigation property which allows to get access to the navigation API and push different screens. And that's what we're going to use here. So props.navigation. Navigate. That's how you use it. And you just pass the name of the route that you want to use. And here we also want to pass it the post item as a parameter. So let's have a look at this. So now, for instance, if I click, so you see that when I click, it applies a small overlay on top of it. I don't know if it's visible here. Yeah, okay. And if I let it through it, so yeah, it put just my screen and you see it's using the standard iOS transition. And you can also swipe from the edge to go back. So it's exactly what you're used to on iOS. So let's just have a look at what we have on Android. If we do it, do the same. It needs to be refreshed first. Okay, it's fetching and there you go. And when you touch this one, it uses a different transition. That's the transition you're used to on Android. And you see the title is aligned on the left. And it's just respecting the platform paradigm. So here we have basically the React Native application running on both emulator. And yeah, with basically the same code, we are producing a really nice-looking application with standard platform styles. And I believe this is really powerful. I don't know what you think, but yeah. To me, I think it's amazing compared to what I was used to when I was doing standard iOS and just replicating the same code on Android with Java. And that's so much easier to do that this way. All right. Let's go to the news detail screen. So here we're going to render basically the news component, the news detail. So we're going to use the React Native render HTML component. Let's just call it HTML. It's simpler. Okay. Whoops. We need to pass just the data. So the data, so since we're passing the post directly to the screen, so we can access this parameter from the props navigation as well. States. I believe that's what I called it. Body here. Let's reload. Wait for it to load. And there you go. We're displaying basically the content of the news item. What it does here, basically it passes the HTML that is written as the body of the post from the WordPress API. And it renders it using native elements. So this works reasonably well, but it doesn't support like the full HTML and CSS syntax, but like for simple news elements like this, it's enough. And it's more powerful and faster than using a web view to display this content. But if you had like more complicated stuff, you would most likely use a web view so you don't lose anything here. Okay. So we're going to also display an image at the top. So it looks a bit nicer. So image and the source. Yeah. It supports a subset of CSS. Yeah. And this is an open source component. More of them. And this one is the one that was working the best for this use case. So that's why I used it. But actually on the real Red Bull Global Rail across application, I used the web view because I needed to support more styles and it was easier to do it this way. So here for the image, we're just going to display. We need to pass the style. So let's add a style. I'm just going to use a constant here because it will be useful later on when we add the animation. Image height. Let's just reload. The image should appear unless. Yeah. Here it is. So let's have a look at another item. That's too small. But here you see we forgot to wrap everything inside a scroll view. And you cannot really see the end of it. So let's just add, let's just use a scroll view instead. Yeah. Okay. View. There you go. Now it scrolls. Scrolls here as well. I'm just going to replace the HTML element here because I added a bunch of other properties to fix some of the rendering. And use feed. Use item. HTML. Okay. So I added those line of codes because to render some of the content inside the body of each new item. Yeah. So it, like images, for instance, were not sites properly for mobile applications. So here there is this alternate method which allows to transform a little bit the HTML elements before they are passed to the React Native rendering function. And yeah, you can basically change anything that doesn't display correctly using this library. So it's quite powerful. But yeah, eventually you would like to use the WebView if it's going, if you have too much trouble to display those elements. So here you see that the image inside the news is now displayed correctly and doesn't grow past the width of this emulator. And yeah, so just so that it looks nicer. I think we're almost done here. But what we're going to do now is add a little animation. So, yeah, so it's a little bit nicer. And for this, we're going to use the animated library. It's a really powerful declarative animation library. It comes with a lot of different possibilities. And what we're going to do here is just apply a little overscroll effect on the image. Let me show you how to do this. It might make not too much sense to you, but once we are finished, and you can ask me more questions. So for this, we're going to change the scroll view to be an animated scroll view. This allows it to more efficiently link the scroll position to the transform and scale that we're going to apply to the image. So it doesn't pass over the React Native Bridge and everything will be handled natively on the native side and it will be like all performance. So we change just the image to be an animated image. We need to introduce some state here. So let's call it scroll Y. And it's just basically an animated value that we're going to use. Y. Okay. And now we're going to connect it. And that's how you connect. Basically, you link the scroll position to the animated value. Yeah, the syntax might not make too much sense to you, but there are more information on the React Native website. And now that the scroll position is linked to the scroll Y variable, we're going to use it to change the scale of the image. So we need to change this. So transform. So it's her scale. Image scale. So just save. And I'm going to use scale. All right. So here what we're going to do is basically tell that when the scroll position is negative, it's going to grow up to twice the size of the image. So we're basically mapping what's happening to the scroll position to what should happen to the scale of the image here, with an input and an output. And extrapolate right set to clamp means we're not going to do anything when it's not overscrolling. So let me show you. Let's go inside. Oops. Image scale. Image scale. Did I? Oh, I forgot to save. Okay. So all right. So here now when I go down, you see that the image is being scaled. But that's quite nice. But yeah, it doesn't look correct yet. So let me just switch to Live Reload. So we don't lose the set every time I save. Let's go back. So now I don't need to go back to the screen every time I'm going to do a change to the new detail screen. So that's really handy. And when you have a big application, it saves so much time. That's really great. So let's, we see that we also need to translate the image as we scroll, otherwise it doesn't look too nice. So image translate. All right. So first translate. We're just going to translate along the y-axis. Image translate. Save. And now when I go down, you see it looks much better. It just translates at the same time as it's being scaled. So it looks like more normal, like what you would expect from it. So yeah, I believe we've reached the end of this application. Let's have a look at the Android versions to see how it works there. Here we go. So yeah, on Android, there's actually no over scroll effect because it's a different pattern. But we could have applied another, like another animation, like some parallax, basically. So here we have our application basically working on both platforms. Yeah, don't you think it's amazing? So what's cool as well is, so we're just going to connect it to the back end, but we can easily change the back end. So let's change it. So let's use the Crossfield website. Just change it here. Let's go back to, let's just reload basically. So now it's fetching some data from our own website, which should work, I believe. Oh, there you go. It's coming. It's a bit slow. And where are the images? I guess it's just a network. Oh, it's coming. Yeah. Yeah, let's see. Can I have the other images? Yeah. Yeah, it's really slow. But yeah, so let's have a look at this one. Yeah, so we just, yeah, you could, if you have your own WordPress website, which I believe all of you have, you could just change this line of code and create a native application for your website. Oh, yeah. Yeah. And that's Ricky, our CEO. All right. Okay. Let's see. Did I, oh, yeah. So I've got, I've got something else to show you. All the code that I've prepared here is also, I've posted it to, to this incredible tool, which is called the Expo Snack. So it's basically code sandbox for a React native application. So it's really great when it works. I wish I could show you this because it's really, really great. All right. So yeah, I guess, yeah, we'll see that. Yeah, I'll post the link later on and you can have a look yourself. But, oh, there you go. So, yeah, it's, it's, it's basically all the code that I've, I've shown you today is, is on this link. And you don't even have to install anything. It's just, you go to this website and you've got all the code that I've, I've done. And on the right you've got an, an emulator that you can use. And so here, here it says device preview is at capacity because it's a free service. So there's some kind of line and, and to use the emulator. But if you scan the, the QR code that you see here, you can run it directly on, on your own, on your own device, iOS and Android. You just have to install the, the expo application. And yeah, you can directly play with it. And, and let me show you with my device. I'm going to scan. Oh, let's do it here. So I'm scanning it and it's going, it says device connected. And yeah, there you go. You have just the react native application, but now it's much better because it's on your own device. And, and yeah, you can do that on your own as well. And I encourage you to, to play with this tool because here you can change the code and have it live reload and, and change everything and, and you can play, play with it. And yeah, that's, that's, that's it. Go play with this one. So it's a link with the, the QR code, but you only got it. And that's it. Thank you everyone for watching this. Okay. Yeah, if you, if you have some questions that I can start to answer now. Yeah. It's, it's, I think it's possible, but I've never used it. So yeah, but that's something I've had never the, the need to, to do because like using the strategy that is provided directly with react native is, is quite, quite, quite good. And it's also like isolated for each component. And that's what you want for this kind of application. Yeah. Yeah. It's, that's the better way to do it in react native. Yeah. Yeah. Can you repeat? Sorry. It's basically when you have, for instance, on the buttons, you're going to use a condition. I like to use like the ripple button on Android and, and the standard like opacity based button on iOS. And that's like the, the difference and all the little difference that you have between iOS and Android. So buttons, transitions, what else, some platform specific APIs like, like the share sheet as well is different between those platforms. And that's where you integrate some if into your code. And yeah, that's the difference. Yeah. Sorry? Oh yeah, yeah, sure. Yeah. You basically reuse the native push notification system on both platforms. So what you have to do is import a native component to do it. And, but with a react native JavaScript interface. But for this, you cannot, you have to eject from create react native app because create react native app cannot use like new additional native components that are not provided directly. Yeah. So you just like, you just install the dependency using npm. So for instance, how you didn't talk. Okay. Okay. When you eject basically what it does, it produces a next code and Android project. And from there you can import whatever native components that you need to use. For instance, for push notification, you can use like one signal. I don't know if you know this one, but yeah, this one is pretty good, but, and you would use a one signal library for an integrated on both iOS and Android. But control it from react native. Yeah. Sometimes we drop down to iOS and Java code just for really specific stuff. But most of the time what I've observed is when I need like a platform specific native API, it's already like prepackaged by someone else, a third party component. And I just import it and add it to my project and I can use it directly. And that's right. I understand. Sorry. Augmented reality. Yeah. Yeah. You can definitely, that's what we did recently. I played with that. So what I did for this is basically dropped down to native code, but there's a company out there which does like a react native abstraction on top of AR kits and what is it called on Android? AR core, I think. Yeah. And it looks really promising because you can use all these augmented reality components and use it from react native and yeah, I can post a link if you're interested. All good? No, no, no. For chats. So either they would provide an API and you would recreate like the correct chat, like views to display those elements or also because it's quite a lot of work already, so you can also like reuse there, like if you have a chat library that you like to use on iOS or Android, you could import it inside react native and that would save you sometimes. But you would lose some A, B, D to customize some of those elements because you cannot really touch the styles of what's really important. It's basically isolated and yeah. Yes, you can. So it's just like the standard way of importing native component inside react native and you can import fragments as well and whatever you like. So what's interesting is all the building blocks that you were using inside react, like view text and all the others are really imported the same way that you would import your own components. It's like the same interface and you're not, they don't have their own private way of importing native components. Yeah, every component that you want to import natively is treated the same way. Thank you.