react

Watch User Created Playlist (9)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Create an Expanding Notify Input with Success Message in React Native

P

Build an SVG icon component in React

P

Get the Dimensions of a React Native Phone Screen

P

Create a Draggable Card with React Native Pan Responder, and Animated.decay

P

React Native: Debugging on an iOS Device

P

Create a Scrollable React Native Component with ScrollView

P

Use Images in a React Native Application

P

Understand the fetch API

P

Use State and Touch Events in React Native

P
react tutorial about Create an Expanding Notify Input with Success Message in React Native

Create an Expanding Notify Input with Success Message in React Native

7:07 react PRO

In this lesson we'll create a notify button that expands from the middle to show a TextInput with a send button and once sent will hide the TextInput and show a thank you message. We'll use the helper method StyleSheet.absoluteFill to position our input inside of our wrapping View. This allows us to animate our TextInput and our messages in and out without effecting layout of each other.
When pressed to show the TextInput and when we show the thank you message a combination of animating the width and justifyContent: "center" to make it appear as if we're animating the view from the center. We'll use Animated.timing and a success boolean on state to control what is rendered, and what is animating. interpolate will be used heavily to scale in and out views when they are needed.

react tutorial about  Build an SVG icon component in React

Build an SVG icon component in React

3:51 react PRO

Learn one way to render SVG icons as a React component. You’ll learn about the dynamic nature of SVG by passing props to a component that modify the icons properties such as colors and size.

You'll learn how to set up a stateless functional component, set up prop types and add a set of default props.

One benefit to building an individual icon component is that only the SVG markup needed for that icon will be rendered, instead of having to load an entire set of icons and only using one of them. Also, different attributes can be overridden using props, making theming and integration simple.

react tutorial about Get the Dimensions of a React Native Phone Screen

Get the Dimensions of a React Native Phone Screen

1:10 react PRO

In this lesson we'll use Dimensions to get the width and height of the screen. Also we'll use onLayout to detect orientation changes.

react tutorial about Create a Draggable Card with React Native Pan Responder, and Animated.decay

Create a Draggable Card with React Native Pan Responder, and Animated.decay

3:57 react PRO

In this lesson we'll create a PanResponder to allow us to drag a card around the screen. We'll use Animated.event to automatically set the values of our Animated.Value and when the card is released we'll use Animated.decay to decelerate it to a stop.

react tutorial about React Native: Debugging on an iOS Device

React Native: Debugging on an iOS Device

4:15 react PRO

In this lesson we'll explore debugging our React Native application in an actual iOS device.

react tutorial about Create a Scrollable React Native Component with ScrollView

Create a Scrollable React Native Component with ScrollView

7:20 react PRO

To show a list of unchanging data in React Native you can use the scroll view component. In this lesson, we'll map through the data we got back from the Github API, and fill complete ScrollView component for the user profile.

react tutorial about Use Images in a React Native Application

Use Images in a React Native Application

7:03 react PRO

Let's take a look at the basics of using React Native's Image component, as well as adding some reusable styling to our Dashboard component buttons.

react tutorial about Understand the fetch API

Understand the fetch API

4:20 react PRO

The way you make HTTP requests in React Native is with the Fetch API. In this video we'll talk about Fetch and how to work with promises.

react tutorial about Use State and Touch Events in React Native

Use State and Touch Events in React Native

7:07 react PRO

In React, components manage their own state. In this lesson, we'll walk through building a component which manages it's own state as well as using TextInput and TouchableHighlight to handle touch events.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?