Latest Tutorials

Have you ever noticed how often image (and card) carousels appear within mobile applications? Carousels consolidate items within a single horizontally rotating widget. Users can scroll through items by dragging across right or left to preview subsequent or previous items. Displaying items this way preserves vertical screen real estate, and therefore, allows users to have quicker access to the bottom of the view without scrolling down endlessly. React Native comes with several built-in components, such as <FlatList /> and <ScrollView /> , that can be used to quickly implement an image carousel. Unlike ScrollView /> , <FlatList /> renders child components lazily. Since <FlatList /> only stores in memory the items that are about to appear (and removes from memory the items that disappear offscreen), this results in better performance from reduced memory consumption and processing resources. Below, I'm going to show you how to build an image carousel with React Native's <FlatList /> core component. Users will be able to scroll through the items by dragging along the items: Or by clicking an arrow button to move to the next or previous item: To get started, initialize a new React Native project using the TypeScript template : At the root of the project directory, create two new directories: Delete the contents of the App.tsx file, and replace it with the following: ( App.tsx ) The image carousel will showcase six high-quality Unsplash images of various flowers. At a minimum, each item of the carousel must have a unique ID ( id ), a URI to its corresponding image's location ( uri ) and a title for labeling the image ( title ). To enforce these properties, create a definition file to globally expose the ImageCarouselItem interface. ( types/index.d.ts ) Note : Inside of the tsconfig.json file, set the typeRoots compiler option to ["./types"] . Create a new file named ImageCarousel.tsx under the src/components directory: Inside of the src/components/IamgeCarousel.tsx file, define a new functional component named ImageCarousel that accepts the prop data : ( src/components/ImageCarousel.tsx ) data contains the items that will be rendered by the <FlatList /> component. The <FlatList /> component provides a virtualized list that is highly customizable via its many props. Coincidentally, it inherits most of these props from the <ScrollView /> component. At a minimum, the <FlatList /> component requires two props: Let's render a simple horizontal carousel using the least number of props possible. ( src/components/ImageCarousel.tsx ) Each item follows the same layout: a square-shaped cover image with its title overlaid above and positioned at the lower-right corner. Specify the horizontal prop to tell the <FlatList /> component to arrange the items horizontally rather than vertically. Hide the horizontal scroll indicator, and set a keyExtractor function to tell the <FlatList /> component which item property (or set of properties) it can use to track each item for caching and re-ordering purposes. Adjacent items are spaced away from each other by 30px (for each item, 15px of left- and right-margining). If you save these changes and run the React Native project inside of an iOS simulator, then you will see a basic image carousel: In fact, you can scroll through these items by horizontally dragging along them. Let's modify the carousel to snap items in place and translate an item upwards when it approaches the middle of the screen and downwards when it moves towards either edge of the screen. Currently, when the carousel loads the items, the first item begins at the far left end of the screen, not the middle. When you scroll all the way to the last item in the carousel, the last item ends at the far right end of the screen, not the middle. We're going to need two placeholder items, one at the beginning and another at the end of the carousel, to help position the first and last items in the middle of the screen when reaching either end of the carousel. ( src/components/ImageCarousel.tsx ) As we scroll through the items, the item approaching the middle of the screen should be translated upwards to put it front and center as the current item being visited. Inside of renderItem , define an interpolation that maps an item's x-position to its y-translation. ( src/components/ImageCarousel.tsx ) An item appears to move upwards when its y-translation ( CURRENT_ITEM_TRANSLATE_Y ) is smaller compared to other items' y-translations ( CURRENT_ITEM_TRANSLATE_Y * 2 ). This item ( (index - 1) * ITEM_LENGTH ) happens to be the one that appears in the middle of the screen, not the edges. clamp restricts the extrapolation to only within the boundaries of the specific range. For items to snap into place at the end of a scroll action, specify these additional props on the <FlatList /> component. ( src/components/ImageCarousel.tsx ) Putting it altogether... ( src/components/ImageCarousel.tsx ) Reload the application to preview the smooth animations! Let's introduce arrow controls to give users an alternative way to explore the carousel's items. The <FlatList /> component's reference comes with a scrollToIndex method, which tells the component which item in the carousel to scroll to based on the specified index. All we need to do is track the index of the item currently in the view. Increment it when we scroll right and decrement it when we scroll left. To figure out which item is currently in the view, we need to specify these two props on the <FlatList /> component: ( src/components/ImageCarousel.tsx ) For an item to be considered as currently in the view, it must be 100% visible to the user (no part of it hidden off screen). onViewableItemsChanged calls a handler function whenever the items currently in the view have changed and tells us which items are now 100% visible in the view (based on the visibility percent threshold). We'll track the current index via a React ref since we don't need to re-render the component whenever this index changes. ( src/components/ImageCarousel.tsx ) Define the handleOnViewableItemsChanged handler function. This function checks for the item currently in view and sets the ref's value to this item's index value. ( src/components/ImageCarousel.tsx ) Note : The placeholder items are technically 100% in the view when the user moves to the first or last item in the carousel. Therefore, we need to filter out those placeholder items. Note : Wrap the handleOnViewableItemsChanged function in a useCallback hook to avoid the following issue: Now, let's create the arrow controls. Add two flag variables, isNextDisabled and isPrevDisabled , to check whether or not the arrow controls should be disabled or not. For instance, the previous arrow control should be disabled when the current item is the first item in the carousel, and the next arrow control should be disabled when the current item is the last item in the carousel. ( src/components/ImageCarousel.tsx ) Obtain a reference to the <FlatList /> component to access the scrollToIndex method: ( src/components/ImageCarousel.tsx ) Implement the controls' functionality and style them: ( src/components/ImageCarousel.tsx ) For a consistent scrolling motion between adjacent items via the scrollToIndex method, specify the getItemLayout prop on the <FlatList /> component. Since we already know the fixed dimensions of the carousel's items, we should let the <FlatList /> component know these dimensions so that it doesn't need to dynamically measure the items' dimensions and have scrollToIndex always scroll to a target item correctly. ( src/components/ImageCarousel.tsx ) Altogether... ( src/components/ImageCarousel.tsx ) Reload the application. Here's how the carousel should look and behave: For the final version of this project, click this link for the GitHub repository. Try implementing your own image carousel with React Native's <FlatList /> component. For more about building apps with React Native, check out our new course The newline Guide to React Native for JavaScript Developer .

React Native is a platform for developing apps that can be deployed to multiple platforms, including Android and iOS, providing a native experience. In other words, write once, deploy multiple times . This tenet holds true across most aspects of app development. Take, for example, usability testing. In native development, teams would need to test business logic separately on each platform. With React Native, it only needs to be tested once. The code we write using React Native is good to go on both platforms and, in most cases, covers more than 90% of the entire code base. The React Native platform offers a plethora of options. However, knowing which to use and when comes from understanding how those pieces fit together. For example, do you even need a database, or is AsyncStorage sufficient for your use case? Once you get the hang of the ecosystem around React Native, building apps will become the easy part. The tricky parts are knowing how to set up a strong foundation that helps you build a scalable and maintainable app and using React Native the right way. If we look at the app as a product that our end users will use, we will be able to build a great experience , not just an app. Should that not be the principal aim of using a cross-platform tool? Let's try and break it down. Using React Native we are: Looking at the points above, it's clear that focusing on building our app as a product makes the most sense. Having a clear view of what we are looking to build will help us get there. It will also keep us in check that we are building the right thing, focusing on the end product and not getting lost in the technicalities or challenges of a platform. Storyboarding the app will help us achieve just that. I recommend a Storyboarding approach to build any front-end application, not just apps. This is not the typical storyboard that is created by the design teams, though the idea is similar. These storyboards can be a great way of looking at our app from a technical implementation point of view, too. This step will help us: To start, we will need to go through the wireframe design of the app. The wireframe is sufficient as we will not be focusing on colors and themes here. Next, we will go through every screen and break it down into reusable widgets and elements . The goals of this are multi-fold: For example, let's look at a general user onboarding flow: A simple and standard flow, right. Storyboarding can achieve quite a lot from the perspective of the app's development and structure. Let us see how. Visualize your app from a technical, design, and product standpoint As you will see, we have already defined eight or nine different elements and widgets here. Also, if elements like the search box, company logo, and the cart icon, need to appear on all screens, they can be put inside a Header widget. The process also helps us build consistency across the app. I would recommend building custom elements for even basic native elements like the Text element. What this does is make the app very maintainable. Say, for some reason, the designer decides to change the app's font tomorrow. If we have a custom element, changing that is practically a one-line change in the application's design system. That might sound like an edge case, but I am sure we have all experienced it. What about changing the default font size of the app or using a different font for bold texts or supporting dark mode? The Atomic Design pattern talks about breaking any view into templates, organisms, molecules, and atoms. If you have not heard about it, Atomic Design comes highly recommended, and you can read about it here . Taking a cue from the methodology, we will break down the entire development process into elements and widgets and list out all those that we will require to build the views. How do you do this? The steps are as follows: This process will help streamline the entire development process. You'll end up with a list of widgets and elements that you need to build. This list will work like a set of Lego blocks that will build the app for you. You may end up with a list like this for the e-commerce app: Looking at this list, we might decide to build a carousel widget that works like a banner carousel by passing banners as children, and as a category scroller by passing an array of category icons. If we do this exercise of defining every component for the entire app before we start building, it will improve our technical design and allow us to plan better. The process can also help iron out design inconsistencies as we will be defining all the elements, down to the most basic ones. If, for example, we were to end up with more than four of five primary buttons to define, that could indicate that we need to review the design from a user experience perspective. Source: Google Following this model will make the development approach very modular and set us up for the development phase. By now, we should also have a thorough understanding of: We also have an idea of how the layout of views will look from a technical standpoint: do we need a common header, how will transitions happen if there is animation, and so on. To summarize, we now have a wireframed plan in place that will give us a lot of confidence as we proceed with development.  To learn more about building apps with React Native, check out our new course The newline Guide to React Native for JavaScript Developer .

Nowadays, modern user interface designs involve more animations than ever before. Applying animations to actionable elements like buttons brings greater attention to them. For example, being the first to like a tweet on Twitter fills the heart icon with "+1" and causes plus signs to fly out. When done properly, these animations add an extra dimension of personality to the user interface and effectively communicate complex ideas to users. React Native lets developers implement animations in their mobile applications via its Animated API . Although an animation can be expressed as a declarative relationship between an input value and output value, writing even the simplest animation requires several steps to be followed: Here's a fade-in animation that illustrates this process: Try it out for yourself within this Expo Snack . Often, designers are responsible for creating animations. After all, designers have more experience with tools like Adobe After Effects and decide the creative direction of the user interface. Given the number of lines needed to write a single fade-in animation, imagine how many more lines of code (and developer hours) will be needed to perfectly reproduce animations with lots of elements simultaneously moving around, shrinking, growing, etc. Observing each element frame-by-frame to figure out its unique timing function takes too much time and effort. The end result is unmaintainable code. Why repeat work that's already been done by the designer? Lottie , Airbnb's library for animations, bridges the designer-developer gap by natively rendering animations created in Adobe After Effects . Animations made by designers can be added to a user interface like static images without any loss in quality. Lottie parses a JSON representation of the animation and automatically renders it. Designers can immediately ship beautiful animations without waiting on a developer to recreate it from scratch. Below, I'm going to... To get started, initialize a new React Native project using the TypeScript template : At the root of the project directory, create two new directories: Install the libraries lottie-react-native and lottie-ios (version 3.2.3). These libraries provide support for Lottie in React Native. Inside of the ios directory, run the following command to install and auto-link the modules lottie-ios and lottie-react-native : Note : Lottie is compatible with multiple platforms: Android , iOS/macOS , React Native , Web and Windows . Please consult the documentation for platform-specific installation instructions. The application will display a list of Hacker News stories fetched from the official Hacker News API . If the user plans on saving a story to read at a later time, then they must press an empty bookmark icon. This will fill the icon (with a single color) and cause small circles to pop out. For now, we'll stub it out with a static bookmark emoji (🔖). Later on, we'll replace it with the proper Lottie animation. Begin by creating a <HnStoryListItem /> component, which represents a Hacker News story. The component displays the story's title, source URL, score and author. Each story features a bookmark icon that allows the user to bookmark the story. ( src/components/HnStoryListItem.tsx ) Refactor the <App /> component to render a list of Hacker News stories with the <FlatList /> React Native component. Only the ten most recent stories are rendered to the screen. ( App.tsx ) Create a definition file to globally expose several types and interfaces. ( types/index.d.ts ) Note : Inside of the tsconfig.json file, set the typeRoots compiler option to ["./types"] . Verify that everything works by running the application inside of a mobile device simulator (in this case, an iPhone): Note : If you encounter any linking-related errors, such as the one below, when building the application, then visit this StackOverflow post to resolve the issue. To use Lottie, you must export the animation's data from Adobe After Effects as a JSON file via the open-source extension Bodymovin . This JSON file gets passed to Lottie, which then renders the animation. For developers who don't have any experience with Adobe After Effects, you can download free, open-source Lottie animations from LottieFiles and customize them within LottieFiles' drag-and-drop online editor . Let's search for a bookmark animation on LottieFiles and download it (as a Lottie JSON file) to the project's assets directory. Pick this bookmark animation by Bryan Trang : To add a Lottie animation to the React Native project, we must first import the <LottieView /> component from the lottie-react-native library: ( src/components/HnStoryListItem.tsx ) The <LottieView /> component serves as a container for our vector-based Lottie animation. Now, replace the bookmark emoji with the <LottieView /> component and set the source of the animation to the bookmark animation we just downloaded: ( src/components/HnStoryListItem.tsx ) The autoPlay flag indicates whether or not to play the animation automatically upon being mounted. The loop flag indicates whether or not to continuously run the animation in a loop. Save the changes. Notice how the animation does not appear. This is because we haven't yet specified the animation's height and width: ( src/components/HnStoryListItem.tsx ) Reload the application. Now the animation should be running! Let's remove some bottom margining from the urlContainer styles to account for the extra space introduced by the animation's larger size. ( src/components/HnStoryListItem.tsx ) Here's what the application should look like: If a story is not yet bookmarked, then the bookmark icon should be empty, and vice-versa. Ideally, when the user presses the bookmark icon to bookmark a story, the animation should begin playing. The animation should stop as soon as the circles finish dispersing and the bookmark icon is completely filled. Lottie's imperative API allows us to play the animation starting at a specific frame and ending at a specific frame: animation references the <LottieView /> component. This is important for a few reasons: Fortunately, we can quickly identify these frames in LottieFiles' online editor: To implement bookmarking, let's disable auto-playing and looping: ( src/components/HnStoryListItem.tsx ) Then, get a reference to the <LottieView /> component via the useRef hook. ( src/components/HnStoryListItem.tsx ) Nest the <LottieView /> component within a <TouchableOpacity /> component. Set onPress to a function that calls the onBookmarkChange function, which will be passed as a prop to the <HnStoryListItem /> component. onBookmarkChange will either bookmark or unbookmark the story. ( src/components/HnStoryListItem.tsx ) Using the useEffect hook, we can play the animation (bookmarking) or reverse the animation (unbookmarking) whenever the isBookmarked flag has changed. isBookmarked will be passed as a prop to the <HnStoryListItem /> component, and it indicates whether the story has been bookmarked or not. ( src/components/HnStoryListItem.tsx ) When we start up the application, we shouldn't run any bookmarking/unbookmarking animations. All we want to do is immediately show the user either a filled bookmark or empty bookmark per story. Then, whenever the user presses the bookmark icon, an animation will run and the icon will either become filled (if bookmarking the story) or empty (if unbookmarking the story). Let's add a flag to check for the initial mount. Only show either an empty icon or a filled icon (play one frame only) during the initial mount. ( src/components/HnStoryListItem.tsx ) Finally, inside of the <App /> component, add a simple map to track bookmarked stories (in-memory) and set the onBookmarkChange and isBookmarked props on each <HnStoryListItem /> component. ( App.tsx ) Altogether... ( src/components/HnStoryListItem.tsx ) ( App.tsx ) ( types/index.d.ts ) For a final version of this demo application, check out the source code at this GitHub repository . Reload the application and try out the animations by pressing on the bookmark icon! Add Lottie animations to your React Native projects!

An easy way to improve code quality is linting code for formatting issues, syntax typos and inconsistencies. For example, you may have accidentally left a console.log statement that prints environment variables during development. Or you may have forgotten a semi-colon during a quick bug fix. Regardless, identifying and resolving these mistakes not only reduces the amount of time and resources spent on quality assurance and control, but also reassures developers of the code's functionality. Popular linting tools include ESLint for JavaScript/TypeScript and stylelint for CSS/SCSS/Sass/Less/SugarSS. While coding, you may have the linting tool running in watch mode within a terminal to monitor and report errors and warnings whenever you edit and save a file. This can become quite distracting, especially if you are focused more on adding new features to the application code before a tight deadline and you cannot afford to switch back-and-forth between the terminal and code editor. Suppose you correct a problem and later on, you decide to scrap the code that you just fixed. Unfortunately, you wasted time on fixing a non-existent problem. Ideally, you should run the linter after you finish coding, but you may forget to run the linter and immediately commit the changes (with the mistakes). With lint-staged , executing the command git commit automatically runs the linter against files staged for commit. This lets you continue working on the application code without any interruptions, and once you are done with the code, you can stage the modified files and run the linter before committing them. You can configure lint-staged to run a specific linter command against files that match a glob pattern. For JavaScript files ( *.js ), you may select ESLint as the linter to run against those files. For CSS files ( *.css ), you may select stylelint as the linter to run against those files. If any files fail to pass, then they are not committed to the remote repository! Before the files can be committed, you must first resolve the errors raised by the linter. For projects with many contributors, linting enforces the project's coding conventions despite each contributor having their own set of opinions and conventions. Below, I'm going to show you how to integrate lint-staged into your project. Unlike lint-staged , pre-commit and Husky lints all files, not just staged files. As your project grows, linting every file, even those that have not been recently modified and previously passed all the linting rules, becomes inefficient and increases development time from redundant linting. Husky supports all Git hooks, whereas pre-commit and lint-staged only support the pre-commit Git hook. Nevertheless, each library allows you to run any number of custom scripts defined in package.json when a hook, such as pre-commit , is invoked by an event, such as executing the git commit command. lint-staged uses Husky under-the-hood. To get started, check that your project already has ESLint, stylelint or Prettier configured (either via a .xxxrc configuration file or a key inside package.json ). Otherwise, the following error message is shown during the installation of lint-staged . To install lint-staged , run the following command within the root directory of your project: Note : mrm is a command line tool for automating and managing project configurations. If you are prompted with the following message, then press y to proceed with the installation: This command... If lint-staged finds a .eslintrc.js configuration file, then a *.js property is added to the lint-staged object. ( package.json ) Anytime a JavaScript file is staged for a commit, lint-staged runs the ESLint linter with the --cache and --fix options. --cache tells ESLint to only check changed files, and --fix tells ESLint to automatically fix problems when possible. If lint-staged finds a .prettierrc configuration file, then a *.{js,css,md} property is added to the `lint-staged object. ( package.json ) Anytime a JavaScript, CSS or Markdown file is staged for a commit, lint-staged runs Prettier to properly format the contents of the files. This ensures the files are formatted, even if a contributor does not have the Prettier plugin installed on their IDE to automatically format the files when saved. Suppose you want the staged JavaScript files to pass unit tests written with the Jest testing framework . Adding a new script is relatively straight-forward. Just update the value of the *.js key to an array that contains a list of scripts to run against the staged JavaScript files. Let's run the tests with the jest --passWithNoTests command. The --passWithNoTests option allows the test suite to pass even if there are no test files present and you plan to add unit tests in the future. ( package.json ) These scripts run in sequence from the first listed item to the last listed item. If a single command fails, then the entire commit is rejected. Try integrating lint-staged to your own JavaScript libraries. You can also check out our new course, The newline Guide to Creating React Libraries from Scratch , where we teach you everything you need to know to succeed in creating a library. 

npm centralizes third-party, open-source Node.js packages and libraries within a large, online registry. Contributing to the Node.js ecosystem involves no vetting process, which lets anyone publish packages to the npm registry with little effort. Not only has npm's short process for publishing packages led to the explosive growth of the Node.js ecosystem, but also fosters the development of various types of packages: front-end libraries/frameworks, tooling, bundlers, routers, state management, etc. However, this comes at the cost of more packages being released with more security vulnerabilities and less reliability. Despite these concerns, npm continues to introduce new features and statistics for helping developers identify high quality packages. A library author uses npm's command line client to publish their library's package to the npm registry and share it. Once published, npm allows developers to update their projects' dependencies with the latest version of this package or install this package within their projects. Below, I'm going to show you how to publish a package to the npm registry. I will demonstrate this with the rgb-hex TypeScript library. It will be modified accordingly to get it ready for publishing. To get started, you must have an npm account. If you do not have an npm account, sign up for an account here . Within the root of the package directory, run the following command in the terminal: Logging into your account associates your package with your account. You will be prompted to enter your npm username, password and e-mail address. When you publish a package to the npm registry, there are some files and directories, such as a testing suite and coverage reports, that can be omitted from the package. A testing suite validates your library's functionality and coverage reports inform you of areas in your code that lack tests. They are not required for end users to consume your library within their projects. The main benefit of excluding files with .npmignore is reducing the number of files and directories the end user downloads when fetching your package from npm. Ideally, end users should be able to quickly download your package, and your package should not take up unnecessary space on their machines. If your library uses the Jest testing framework, then you would add the __tests__ and coverage directories to the .npmignore file. ( .npmignore ) To further reduce the number of files within the package, you can exclude formatting-related configuration files, such as .eslintrc.js , .prettierrc and .editorconfig . ( .npmignore ) Just think about which files and directories are needed within the package to allow end users to use your library. Whichever files and directories are not necessary should be added to the .npmignore file. Note : If the project contains a .gitignore file, then the files and directories listed within the .gitignore file will automatically be excluded from the package. Alternatively, you could list the files to include within the package via package.json 's files property. The entry point of your library indicates the file from which execution begins when the library is imported. By default, npm searches for a main property inside of the package.json file to determine the package's entry point. For tooling that supports ESM modules, you can define a module property that points to the package's .mjs file. Note : module is not an official package.json property. It is a proposal for ES6 module interoperability in Node.js. Read more about it here . Commonly, your library's generated build will be outputted to a build or dist directory. Therefore, the main and module properties should point to files within either of these directories. ( package.json ) To verify the package's contents before publishing to npm (and whether or not the .gitignore and .npmignore files filter out the correct files and directories), create a tar archive of the package. This tar archive contains all of the files and directories that will end up in the published package. To generate the tarball, run the following command: In the current directory, you will find a tar file named <package-name>-v<version>.tgz . package-name comes from the name property of package.json , and version comes from the version property of package.json . To extract and list its contents, run the following command: The tar -xzf command deposits the contents into a directory named package . Here, we can see that the package.json file, README.md file and dist directory are included. Lastly, to publish the package to npm, run the following command: When prompted to enter a version, press enter to use the version mentioned in the package.json file. If you run into the following error message, then you will need to enable two-factor authentication for your npm account: To enable two-factor authentication, visit your npm account's "Account Settings" page and click the "Enable 2FA" button under the "Two Factor Authentication" section. After you enter your password, npm redirects you to a wizard that walks through the process of enabling two-factor authentication. Enable two-factor authentication for both authorization and updating/publishing packages. Scan the QR code with an authenticator app like Authy . Verify that Authy successfully registered npm by entering a six-digit code generated by Authy. Once two-factor authentication is successfully enabled, you will be shown recovery codes. Save them to a new, empty text file. Without these codes, it will not be possible to recover your account in the event that you are not able to provide the one-time password. Return to the terminal and re-enter the npm publish command. Once your package has been published to npm, you can navigate to your package's page at npm's website. Try publishing your own packages to npm. You can also check out our new course, The newline Guide to Creating React Libraries from Scratch , where we teach you everything you need to know to succeed in creating a library.