I'm a front end developer building and playing with the latest technologies. In my free time I run React meetups, and React and React Native workshops in Portland Oregon.
showing 50 lessons...
In this lesson we'll show how to structure views to create a responsive progress bar (without defining a set width). It will allow for dynamic border, bar, and fill colors. We'll finish off by showing how to add animation to make the progress indicator smoothly transition.
In this lesson we'll use
CellMeasurerCache to automatically calculate and cache the height of a row. This will allow us to remove the predefined
rowHeight on list and allow for dynamically sized rows.
In this lesson we'll show how to use the
AutoSizer component from
react-virtualized to automatically measure the width/height of our content area. We'll then use the
List component to render our set of data as a virtualized list into the DOM using windowing.
In this lesson we'll create a VSCode snippet for quickly reusing code. We'll show how to setup tab stops orders to move the cursor in a specific order when tab is pressed. Then we'll show how to create named variables with default values.
In this lesson we'll show how to setup a
.babelrc file with presets and plugins. Then create npm scripts that use
babel-preset-env we'll show how to target specific versions of node and how to use babel plugins, while not transpiling features (like
await) that are already supported by node natively.
In this lesson we'll use licensee.js to see how to configure accepted license types for our project. We'll also explore how to use whitelist overrides to allow specific libraries that may not match our license configuration. We'll also setup an npm script to show a more visible exit code 1 failure.
In this lesson we'll create a collapsible header bar. This technique is used to show additional information or actions but hide when the user scrolls to expose more of the information they are looking at.
We'll use a combination of
onScroll, and the
Animated.event function to update our
Animated.Value every time the user scrolls. Then with a series of
interpolate calls we can define a scroll threshold to show/hide pieces of information, as well as shrink the
fontSize of our title.
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.
In this lesson we'll use
PanResponder gesture handlers to add the ability to swipe a modal closed in either direction. We'll need
ScrollView callbacks to allow us to still scroll through comments and only close when desired.
We'll use the
Animated.setValue function to
translate our Modal up or down depending on the direction of the swipe.
In this lesson we'll create an event details card with basic information displayed. On press basic information will slide up to present additional information. We'll use
state and the
componentDidUpdate callback to trigger our animations.
Depending our state we'll use
Animated.timing to animate the information in and out. We'll use a series
interpolate on our
Animated.Value to rotate the arrow, and
translate our information into view.
In this lesson we'll create a tap to show more information animation card. This is a great technique for exposing minimal information and then revealing more information if a user needs it.
Animated.timing and rely heavily on
interpolate to coordinating the sliding of the card, and scaling image animations. Finally we will need to disablethe
ScrollView to allow for our gestures to work correctly.
In this lesson we'll create an animated floating action button. This technique can be used as a quick action menu to hide additional options. When pressed we'll use
Animated.parallel to execute our stagger menu options and execute our
Animated.timing animation which will rotate our button and change our background color with
interpolate. We use
Animated.stagger to create a delay of our buttons sliding up.
Animated.spring will give our buttons a spring effect as they shoot upwards.
In this lesson we'll build a "tap to show love" animation. This technique is commonly used on many streaming sites to show the streamer they appreciate the content. When the screen is pressed an
Animated.Value will be created. We will measure the screen dimensions with
Dimensions so we can place our heart in a random location. Then we'll use
Animated.timing to animate the heart upwards. Finally a series of
interpolate will allow the heart to explode from nothing to full sized heart, wobble side to side, move upwards, and then fade out.
In this lesson we'll create a like button that explodes with hearts. We'll use
Animated.parallel to execute the bouncy heart animation as well as the series of hearts exploding at the same time. Then we'll use an array of
Animated.timing animations and then use
Animated.stagger to make the hearts appear with a 50ms stagger. We use
Animated.delay to wait before we then use
Animated.stagger again to hide the hearts in. Finally our
Animated.sequence will cause each of those animations to happen one after the other.
In this lesson we'll create a heart shaped like button that bounces when it is pressed. This technique is a great way to show feedback for when a user likes a piece of content. We'll
Animated.spring to create a realistic feeling spring animation with the use of friction. We'll also use
interpolate to our animated value to scale our heart up and down to make it look like it's bouncing.
We'll use the cross platform ActivityIndicator to add a loading spinner while the items load from AsyncStorage. We'll show off the importance of rendering order, absolute positioning, and how to center items with
justifyContent set to center.
In this lesson we'll walk through the process of installing the react-native-cli through setting up a basic react-native project on iOS. We'll get the basic project running in a simulator via XCode. We'll also setup Android, Android Studio and get the project running on an emulator with the react-native run-android command.
In this lesson we'll explore how to measure the dimensions and get the position of a React Native element using
UIManager.measure. Additionally we'll see how to use the helper function
measure on the component ref for easier measurement.
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.
In this lesson we will use Animated.spring and TouchableWithoutFeedback to animate the scale of a button in our React Native application. We will use the scale transform property and see how adjusting the friction of a spring will effect the spring animation.