This video covers React Native topics ranging from adding basic UI components to successfully implementing Redux. The video follows a top-down approach, beginning with building rich user interfaces. These UIs will be created with both built-in and custom components. You will then animate UIs to make the application feel more alive. Then you will learn to store data in a native database and integrate it with the Facebook SDK. Finally, you will learn to make Redux fit into your application.
About the Authors
In this recipe, we will see how to use containers and text, but most importantly we will see how styles work in React Native.
In this recipe, we will use images to create a video player.
In this recipe, we will create a toggle button, which by default is going to be unselected. When the user taps on it, we will change the styles of the button to make it look selected.
For this recipe, we are going to display several items in a list component.
Tabs are a very common component, especially in iOS apps, so in this recipe you will learn how to use the tabs component on iOS devices only.
In this recipe, we will focus on the properties of flexbox to create a profile page.
One of the most popular features in React Native is the navigator. This component allows us to add or remove views easily.
In this video, we will create a button component, and we will define several properties to change it's look and feel.
In this video, we will create a layout to display a list of blog posts. Each post will be a small card with an image, an excerpt, and a button to read more. We will use flexbox to arrange the posts.
In this video, we will import a few fonts in Xcode and then we will display a text using different font families. We will also use different styles of a single font, such as bold and italic.
In this video, first copy the fonts files, then refresh the app, and finally, fix the issue regarding font weight by using workaround.
For this video, we will use a third-party library to help us render the icons. You will also learn how to install other libraries using npm.
For this video, we will show a list of contacts and explore to load remote data from a REST API.
In this video, we will render a menu based on the screen orientation. In landscape, we will render an expanded menu with icons and texts, and in portrait we will only render the icons.
In this video, we will see how to open WebView by clicking on a button in our app and dynamically setting the URL value.
In this video, we will render text in the HTML format using native components. To achieve this, we will use a third-party library called react-native-htmlview.
In this video, we will first collect data using different keyboards and show an alert message with the resulting information.
In this video, we will use an image to create a simple linear movement from the right to the left of the screen.
In this video, you will learn how to use the same animation values in several elements.
In this video, we will create a notification component from scratch.
In this video, we will create a custom container with a title and content. On clicking on the title, the content will collapse or expand. We will explore the layout animation API.
In this video, we will continue working with the LayoutAnimation class.
In this video, you will learn how to drag elements from a ListView to remove them. We will use the PanResponder to handle the drag events.
In this video, we will create a component similar to the Facebook's reaction widget. We will have a like button image, which whenclicked on will show four icons with a slide-in animation and opacity from 0 to 1.
In this video, we will create a timeline of images, then we will
allow the user to press any of the images to display it with a black
background and the image in the center of the screen.
In this video, you will be learning about simple and basic strategies to save and retrieve data locally from the device.
In this video, you will be learning to request data from an API.
In this video, you will be learning to POST data to the same endpoint to add new bookmarks.
In this video, we will be integrating WebSockets in a React Native application.
In this video, we will walk through using Realm in React Native.
In this video, we will be creating an app that shows an alert message when a network connection is lost.
In this video, we will be showing a simple implementation of using the NetInfo module to control whether or not our application will make an API call.
In this video, we will cover the first two bits of functionality–logging in and getting basic user information from a Facebook account.
In this video, we will use the Facebook SDK for React Native to share some content using our application.
In this video, we will hook our sample application into Facebook Analytics and begin firing launch events, as well as a few custom events when we share information.
In this video, we will be installing Redux in an empty application, and then define the main folder structure of our bookmarks application.
In this video, we will be creating the actions to load the initial bookmarks.
In this video, we will introduce a reducer to set the bookmarks, from the actions defined on the previous video, to the global state.
In this video, we will be bringing together the actions and the reducer that we created earlier.
In this video, we will create a middleware to fetch data from an API.
In this video, we will be enabling components to access the store that we have defined, then we will be rendering the categories on a list.
In this video, we will be first using the redux-persist library and then we will be applying the middleware and finally persist the store and set the AsyncStorage.
In this video, we will be learning how to use Redux to keep the state of the network status. When we lose network connectivity, we will display an alert message to inform the user that there's no network available.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.