But let's move on to the fun part, code examples. We are going to see two examples in this talk. The first one will be React Native standalone case and the other one will be with content management system.
Let's have the options first of all to preview our applications. There are two options that I would like to introduce you. The first one is called Snack, which works on the browser. So you're going to see from this Snack preview that within different OS, in this case minimum three of them can share one code, and you can have the same preview. Moving on to the physical device, you know, like a preview option. In this case I installed an app called X-Bot, and that's why you can see my mobile device in the screen, that I can actually have a preview of the application that I am building right now.
Moving on to the use built-in, moving on to the example of using the built-in core components, and don't worry about if you don't know anything about basic components or pressable, written in here, we are going to cover, you know, like, what is necessary, you know, like, to have the information and have the understanding of the content you're going to see. So this view component will work as a reference component, and this image component stands for what you could imagine to render the image components. This style sheet would also represent, as you could guess, CSS style sheets. This pressable component is a little bit unique because that's something you probably didn't have to consider about, you know, like, web and web applications. So it works as an alternative of the button, but it will detect, you know, more various touch events such as single touch or long press. And here's the pressable component example based on what we learned together along with the other components. So when you choose, when you click this choose photo text, and it will prompt an alert, and should work all the same in the different OSes, iOS, Android, web. And the point is, I brought this text component with the pressable component that you can call as an API. And by doing so, you can do all the same, you know, you can apply, you know, all the same features into the different OSes.
Moving on to the third party library API examples. In this case, we are going to see two examples. But like I said, React Native has really an outstanding numbers of third party library APIs available. But to make things, you know, like simple, we're going to have a look at two APIs to build this up to modify the images that you select from the camera roll, then, you know, like change the size or scale from the editor and you can save that into the camera roll. And moving on to the workflow part, so there are three steps. So first of all, let's check or request the permissions to access to the media library. So to do that, let's use an API, media library. And with a combination of the hook code use permissions, you'll be able to ask the permissions or request the permissions to access to the camera roll. And moving on already to the second workflow, which is saving the files at the user's media library. And to do that, again, use the API, media library. But this time we are going to use save to library async. So by calling this functionality, you will be able to save the files at the given local URI, to the user's camera roll.
Comments