TutorialsCourses
Code Daily
Modern JavaScript for web and mobile
Start Learning Now

Latest Courses

React Navigation for Beginners
3 Lessons
Formik for Beginners
11 Lessons
React Native Reanimated Fundamentals
4 Lessons
See all courses...

Latest Screens

React Native
Create a Recipe Difficulty Component
react nativecomponentrecipe
React Native
Build a Recipe Caloric Display
react nativecomponentrecipes
React Native
Animated Color Palette Generator in React Native
react nativeanimatedhooks
React Native
Create an Animated Product Review Display with React Native

Latest Tutorials

Upload a File to an S3 Pre-Signed URL with React Native
Jason Brown
Jason Brown

First we'll write an endpoint to create S3 pre-signed upload URLs. Next we'll setup a React Native Camera, and show how to save a captured photo. Finally we'll use fetch and getBlob to get our image contents and upload them directly to s3.

react nativenodes3aws
React Native
React Native
Customize Create React App without Ejecting
Jason Brown
Jason Brown

Create React App has been the standard choice for building React applications. With standards comes inflexibility. With customize-cra and react-app-rewired you can customize your build without ejecting.

React
React
Yup Date Validation with Custom Transform
Jason Brown
Jason Brown

In this lesson we'll examine how yup validations are setup. Also we'll show some of the builtin helpers like email, required, and min/max for dates. Then using date-fns we'll setup a custom transform so our validation system can handle different formatted dates.

JavaScript
JavaScript
Unit Test Token Verification for Auth0 using Jest and mock-jwks
Jason Brown
Jason Brown

Testing authentication can be difficult, especially with many 3rd party providers like Auth0. We'll show how to use Jest and mock-jwks to test out your authentication to create fast unit tests with out hacks.

Jest
Jest
Create a Multi-Step Animated Modal Depending on User Actions in React Native
Jason Brown
Jason Brown

Animations can be used to effectively communicate a users action. However many times the reverse animation is used for both a close, or success. We can do better, and we'll walk through how to use Animated to create 2 different animations with a single animated value.

React Native
React Native
Create GraphQL Enums with Hasura Enum Tables
Jason Brown
Jason Brown

We'll tackle setting up user types by creating a userstypes table with a value text primary key. We'll add the users type as a foreign key to our new table. Finally we'll insert values as a SQL query and track it as a migration.

Hasura
Hasura
Sticky Header with Highlighting Sections on Scroll
Jason Brown
Jason Brown

We'll use position: sticky to lock our sticky header to the content container that it's in when the user scrolls. Using a useEffect hook we can monitor the scroll position and determine if the user is looking at a section of our content. If they are we can update a useState hook to highlight it in our nav bar. Finally we'll add a scroll to section feature as well.

React
React
Create an Animated Circular Progress Indicator to Track Article Read Percentage in React
Jason Brown
Jason Brown

We'll build a circular progress button to show how far a user has read an article. The techniques will rely on stroke-dasharray and stroke-dashoffset. Using the useLayoutEffect hook and useRef hook we will measure our article height dynamically and calculate progress based upon the scroll position. We'll show how to dynamically calculate all necessary values to render our progress circle exactly where we want it.

react
React
React
Create a Query Param Login Modal Route with React Router
Jason Brown
Jason Brown

Routes are some times better served as a modal. If you have a modal (like a login modal) that needs to be routeable and appear on all pages you may need to use query params. Will explore how to render a route all the time and use query params to control when it's content renders

React Router
React Router
Create a Query Param Login Modal Route with React Router
Jason Brown
Jason Brown

Routes are some times better served as a modal. If you have a modal (like a login modal) that needs to be routeable and appear on all pages you may need to use query params. Will explore how to render a route all the time and use query params to control when it's content renders

React Router
React Router

Subscribe to Code Daily

Up to date content on React, React Native, and the latest libraries.
Home