React Native

The release of React Native 0.64 introduced full opt-in support for Hermes on iOS. This promises to be a major shift in the React Native mobile app development ecosystem.

In this article, we will talk about the buzz around React Native for Web and set up a demo project with it, too!

This article covers additional tools for React Native that enable debugging capabilities the shipped React Native Developer Tools don’t offer. The focus is on inspecting and rewriting network traffic between your app and server.

In this tutorial, we’ll look at how we can implement in-app purchases in React Native. Aside from the frontend, we’re also going to implement the backend so that we can verify the purchases and update user data accordingly.

Whether you're an Apple fan or not, you'll likely agree that Apple sure does have a groundbreaking UI. And iMessage is definitely an important part of that design.

In React Native, you have to typically deploy apps on two platforms: Android and iOS. Both platforms use different languages and build tools. In this tutorial, we will build a continuous deployment pipeline of a React Native app on App Center via Azure DevOps.

In this guide, we’ll compare 10 of the most-used UI libraries for React Native.

In this tutorial, we’ll demonstrate how to build and show a splash screen in React Native. We’ll walk you through how to build stunning welcome displays for both iOS and Android apps using react-native-splash-screen.

In this tutorial, we’ll go over the basics of using React Native Elements.

React Native is among the most commonly used libraries for building mobile apps today. In this guide, we will explore unit testing in React Native applications, covering benefits, best practices, testing frameworks, and more.

In this tutorial, we’ll show you how to style components in React Native. We’ll demonstrate how styling in React Native works by building an example e-commerce mobile application.

In this tutorial, we’ll show you how to implement geolocation in React Native. We’ll build an example app in React Native that displays the user’s location on a map in longitude and latitude coordinates and enables the user to send their location to another source, such as Twitter.

Push notifications — messages from apps that are sent to users who have installed the app — have become an important aspect to consider when building applications for businesses and users.

In this post, I will walk you through building a React Native app that lets the user track their weight and, over time, visualize the stored data on demand. All that with no need to connect to the big bad internet!

In this tutorial, let’s discuss what advantages a library like styled-components has over the general StyleSheet manager in React Native.

A quick guide on how to test React Native apps in the cloud instead of using testing devices.

In this tutorial, we will be building a simple camera app in which the user can take pictures, see previews of their pictures, use flash mode, and switch between the front and the back cameras.

Build a complete, fully functioning app with Expo, UI Kitten, Stripe, and AdonisJs

Unit testing has become an integral part of the software development process. It is the level of testing at which the components of the software are tested. In this tutorial, you’ll learn how to test units of a React Native application.

In this post, we are going to go through creating a few forms using Formik. Formik is a simple React/React Native form library that helps with handling form state, input validation, formatting, error handling, form submission, amongst other things.

How To Share Code Between React Native And React JS

Expo is a powerful environment for React Native which helps you from creation to distribution of your React Native apps. Without the need to directly use XCode (iOS) or Android Studio, Expo allows you to see your work in progress apps on a phone, emulator, or browser.

How I went from Enzyme to React Native Testing Library and made my unit test more effective and closer to what the users can interact with.

After releasing SDK 38 about a week ago and following up on some loose ends, the Expo team is starting to work on SDK 39. Our top priorities for SDK 39 are: support for iOS 14, fixing bugs, the Updates and Splash Screen modules, and internal refactoring.

Building reviews into an application is a common necessity for any developer. This is a design that can be added to both web and or native.

The FlatList Component is among the simplest and most-used React Native components. If you are just starting out with React Native, you must get a gist of the FlatList Component and understand its purpose.

Gradients come in handy when trying to create multi-color backgrounds or custom buttons. We'll look at how to add linear gradients to our React Native apps.

Publishing and reusing React Native components across applications with Bit.

In this tutorial, we are going to build a React Native app that is integrated with a Firebase backend. The app will support both the React Native CLI as well as Expo CLI.

We are happy to announce the release of version 2.0 of React Native Testing Library. For the last couple of weeks, we’ve been working really hard to bring you useful new features and to polish our APIs and their documentation, as well as improve compatibility with other Testing Library implementations.

In this post, we are going to cover a list of open-source animations libraries that work with React Native and you might consider trying some of them for your next app to accelerate development time.

What is accessibility, why do you need it, and how to implement it in your app?

In this article, based on my experience with creating a GPS and navigation application, I will show you how to create a mobile app using Expo and Firebase services such as Firestore, Firebase functions and Expo push notifications.

Switch to autolinking to add new packages quickly with no worries about the native code.

React Native Debugger comes with a set of features that can boost your development and debugging speed. Here are a few tricks for React Native debugging.

Establish a better feedback loop by implementing Flipper and have more fun while working on your apps.

In this and the following articles, we will show you how to optimize the performance and stability of your apps. Thanks to the practices described in the guide, you will improve the user experience and speed up the time-to-market of your apps.

Upgrade your app to the latest version to get more features and better support.

Use native solutions to achieve smooth animations and gesture-driven interface at 60FPS.

Find the harmony between native and JavaScript to build fast-working and easy-to-maintain apps.

Use libraries dedicated to mobile and build features faster on many platforms at once, without compromising on the performance and user experience.

That's just one example of how authentication can be in your app. Today we will add authentication to a React Native app using Firebase.

In this tutorial, we are going to discuss one of the strategies to implement an authentication flow using an email sign-in provider with React Native and the latest versions of react-navigation (version 5) and react-native-firebase (version 6) libraries. Yes, for backend service, we are going to use Firebase SDK.

I would like to talk about the recently integrated developer tool for React Native called Flipper. I become a huge fan of this tool and believe it will be a revolution in a way we debug our React Native applications.

Our adoption of React Native was, for all of us at ClassPass, a real lesson in the huge benefits that can accrue from both careful planning and successful adaptation.

How working with the right JavaScript libraries can help you boost the speed and performance of your apps.

Build good-looking and smooth animated arcs in React Native with ReanimatedArc library.

Find out how to use dedicated higher-ordered React Native components to improve user experience and performance of your apps.

There has recently been a lot of debate around the future of React Native. Last year, when Airbnb called off their React Native development, the frontend community became quite skeptical of choosing React Native for their next big product.

In this blog, we will use React Navigation to implement the different navigators. React Navigation is easy to use, with a big community to help with issues along the base, and very detailed documentation. On top of all this, it is the recommended navigation library in the React Native docs.

React Native is a JavaScript framework for writing hybrid native mobile applications for both iOS and Android platforms. React Native uses the same JSX and React development approach you would take for developing for the browser, but applications get built as native applications in Objective-C (for iOS) or Java (for Android) by the React Native tooling.

I started building JellyBean Jam as a volunteer project for Puppetry Arts LLC. I wanted to gain experience in React Native and it seemed like a fun way to get started. Before we get started, don’t forget to download JellyBean Jam for free on the App Store and try it out. My high score is 1400.

I’m a big fan of this library and my first solution to handle the Navigation in React Native, it has an awesome and easy API, very customizable. version 5 just went from beta to stable. and it comes with some features changes and new API design that is a simple and different way to declare the Routes. In this article, we are going through the new APIs and ways to use them in our applications.

In this article we are going to review the number of the best React Native starter kits to give you a fuller view of them. If you like something, follow a link in the description of the chapter and jump into the mobile development world. Enjoy reading!

My top reasons for choosing React Native

In this post, we are going to list some of the best component libraries available that are open source and not only help you use a robust approach but also offer quality support for platforms such as iOS and Android.

Useful React Native developer tools you should know in 2020.

In this short article, I want to give you an overview of what’s new and what’s coming up in React Native CLI. Also, I’ll tell how do we plan our work going forward on it.

In this short article, I want to give you an overview of what’s new and what’s coming up in React Native CLI. Also, I’ll tell how do we plan our work going forward on it.

React Native was designed to bridge gaps between web and mobile frameworks in software development. Unfortunately, developers face certain hurdles related to performance when working with React Native.

If you ever used React Native, you probably realized it doesn’t use normal HTML & CSS like a web application. In this guide, we will discuss the differences. And one of the main differences you will see is everything is automatically styled based on Flexbox.

In this tutorial, you’re going to learn how to create a simple WebView component using the react-native-webview npm module. You’ll also learn how to add custom navigation to handle URL history (just like in a web browser) using props provided by this module.

In simple terms, WebView is a component that used to load webpages in your React Native app. It was formerly available out of the box in React Native, but it will now be removed from React Native core and added as a component of the React Native Community libraries.

I want to bring light on how to make it in ReactNative with react-navigation TabBar.

React Native Elements is a styling library with pre-built components to replace the basic, limited React Native components. It’s similar to Bootstrap, giving you useable styles that are broad enough to customize as your own.

Some of the errors you may encounter could be misleading or very hard to find. Recently, the React Native team asked developers to help them determine which of these annoying errors lead to the most frustration. While they did address some of the worst errors, there is still a handful remaining that could go under the radar.

If you are familiar with normal React, it will be easy to pick up React Native, as long as you can understand the different components used. In this guide, we will look through the basic Native components that React Native uses.

Using AppCenter’s services in a React Native application.

On every React Native project that I was involved, there was always a most-feared moment: checking if your app is running as expected (and as similar as possible to the UIs shared by the designer) on lots of smartphones and iOS/Android version.

In the previous article, we created a GraphQL server with NodeJS and Express. We will now look to consume the endpoints in the server we created using a React Native mobile app.

A simple example of React Native, SQLite, and migrations; nothing too special.

In this post, we will demonstrate how to build different performant React Native forms with native React Native UI components.

Ethereum is a global, open-source platform for decentralized applications. On Ethereum, we can write code that controls digital value and essentially program our money. So let's jump right into it.

Replacing the Gesture Responder System with the Gesture Handler.

People like to understand what's happening around them, whether it's in real life or in an app on their phone. Let us have a little peak into how we can help users of our React Native app.

Hi, my name is Marte and I decided five months ago that I wanted to pursue a career within front-end development to get closer to the products and users.

React Native is the framework of choice for cross-platform mobile development. Here, we explore several strategies to secure React Native applications.

In this article, we’ll take a look at the available options for React Native date pickers and discuss how to choose the right one for your app.

State management is the core of any React application and as React is just a UI library, we need something to take care of the state of our app. State management can become troublesome and it is easy to create unmanageable React applications because of inconsistent state.

React Native animations can be simpler than you think! This first example may be what you need to start.

One of the most important aspects of React Native app development is the navigation. It’s what allows users to get to the pages they’re looking for. That’s why it’s important to choose the best navigation library to suit your needs.

The easiest way to create media queries universally!

Early on at Discord, we adopted React Native as soon as it was open sourced to build our iOS app from the core of our React app. Years later, we are still happy with that decision.

Detox is an end-to-end testing and automation framework that runs on a device or a simulator, just like an actual end user.

React Native SlowLog is a tool suitable for bigger performance problems in React Native.

In the React Native world, debugging may be done in different ways and with different tools, since React Native is composed of different environments (iOS and Android), which means there’s an assortment of problems and a variety of tools needed for debugging.

In this post, I'll show you how to add a login feature to a React Native application using OAuth 2.0 and OpenID Connect.

React Native is one of those cross-platform solutions. It’s one of the most widely used frameworks for mobile development, and in this article we’ll discuss when it’s a good idea to use it, what are its benefits, and some tips on what to consider when working with it.

End-to-end testing is a technique that is widely performed in the web ecosystem with frameworks like Cypress, Puppeteer, or maybe with your own custom implementation.

Facebook describes GraphQL as a “query language for APIs and a runtime for fulfilling those queries with your existing data”.

Making pixel-perfect layouts on mobile is hard. Even though React Native makes it easier than its native counterparts, it still requires a lot of work to get a mobile app to perfection.

Unit testing with Jest is an integral part of projects that are built with React. But we’ve also found that sometimes entire classes of bugs slip through with several Jest configurations, such as the preset included with React Native, and the testing never seems to really cover everything.

In this guide, we’re going use React Native to create a real-time location tracking apps. We’ll build two React Native apps. One will act as a tracking app (called “Tracking app”) and the other will be the one that’s tracked (“Trackee app”).

Front end vs mobile development — what you need to know to change your mindset.

We’ve been working on several improvements to React Navigation, such as improving animation performance with gesture-handler and reanimated libraries, migrating to TypeScript, and more.

In this article you will find an introduction to the pixels-catcher project that can be applied to any React Native application and will enable you to do UI snapshots testing of any screen or a component.

Now that the mobile apps have been live in production for over a year, we’d like to share our development experience with the broader community, including a deep dive into a few internal tools powered by Expo JavaScript bundles and app manifests.

Stories are now a trending feature of most social media applications, including WhatsApp, Snapchat, Instagram, and others.

In this tutorial, we’ll learn about what state actually is, and about the setState() method, the Context API and React Hooks. This is the foundation of setting state in React Native.

For the first part, we’ll be building a GraphQL server with a PostgreSQL database that will serve as the backend of our application. In the second part (blog post to come later) we will build an application with React Native that will consume data from our server.

Tinder was among the first “swiping apps” that heavily used a swiping motion for choosing the perfect match. Today we’ll build a similar solution in React Native.

Bottom line up front: There is a possible "React Native Web Singularity", when it starts being a better standalone choice for developing for the mobile web than react-dom. If this speculation comes true, this would be gamechanging.

In order to re-create this game I decided to use the (to my knowledge) only game engine currently available for React Native: react-native-game-engine

If you're a fan of HBO's Silicon Valley, you'll remember when they launched a real AI-powered mobile app that classifies hotdogs from a given image (or not). Using Google's Vision API, let's try to recreate a working model of the application in React Native.

Let us explain why app developers prefer to React Native for their cross-platform development needs.

The default Gesture and Animation APIs from React Native have some small declarative parts but they are mostly imperative: in most cases, they rely on communication between the JS and Native thread.

Building minesweeper in react native in less than 50 minutes.

In this guide, we’ll take a closer look at React Native. You’ll learn the absolute basics of getting started with it.

The react-native community has come up with good advice and tools to master the performance of react-native apps, such as learning about frame rates and how to use systrace, understanding over-rendering (also here), or using the Profiler component within react-native.

React Native has a Share module to use the platform share functionality, but in this case we want to send the link to the user’s contacts so that’s not what we want to use.

Expo SDK v34.0.0 is out today and is based on React Native 0.59.8, the same React Native version as SDK 33.

I’ve worked for a year optimizing one of the largest banks mobile apps performance. We ended up getting it from 14s TTI to around 2.5s on a slow Huawei P20 Lite. Here is what i wish i knew before starting!

React Native is a powerful framework that can make developing mobile applications a breeze. Its ease of use has enabled developers to create a number of tools, kits, and templates to work with, each with its own specialized use.

Learn how to create a React Native component for SMS verification and make it reusable and shareable.

This is a toggle that I developed while working for Above. Or more precisely, we developed it for one of their clients.

Recently I’ve been working with with Michał Osadnik on a new version of the stack navigator, which lives under the react-navigation-stack repo as a standalone package.

At Chain React 2019, we announced the Hermes JavaScript engine. We have open-sourced the Hermes engine, as well as integration with Hermes for React Native. We are excited to work with the open source community and have developers start using Hermes today.

After months of hard work from hundreds of contributors, the React Native Core team is proud to announce the release of version 0.60. This release handles significant migrations for both Android and iOS platforms, and many issues are resolved too. This blog post covers the highlights of the release.

When building mobile apps, of primary concern is how we handle a user’s navigation through the app — the presentation of the screens and the transitions between them. React Navigation is a standalone library that allows a developer implement this functionality easily.

So, if you’re are the one who is looking to upgrade your app to this version, we will discuss complete information in this post and the top React UI Components to use in 2019.

This article is based on two years of experience building Nelio React Native Mobile Apps, available on iOS and Android.

We’ll be building out a simple weather app in React Native using MetaWeather, a free weather API.

Learn how to use Flexbox with React Native.

We will be harnessing Microsoft’s “off-the-shelf” Custom Vision services to classify clothes as “cute” or “not cute” according to data you’ve given it.

In this React Native Camera tutorial, we will create a QR code reader app. It will be able to read QR codes in real time and render their content to the screen at the time of detection. We will be using React Native’s CLI Quickstart.

The animations are an important part of the UX of an app, and interacting with the user using the animations create a better experience for the user, the most successful user experience are made with animations, that’s why we are goin to play around animations in React Native.

Explore the best ways to style a React Native application.

Turns out that React Native’s WebView has some challenges.

Let's make our react-native app work in the browser, the right way.

We announced our React Native Open Source roadmap in Q4 2018 after deciding to invest more in the React Native open source community. In the past two months, we made more progress than we expected. Read on for more details.

Helping to grow React Native’s fairly young ecosystem is great. When I decided to take on this task not long ago, I noticed there wasn’t much material around publishing React Native components to NPM. So I’m hoping this post will help make the process much easier for others.

Starting today, you can use as little or as much of the Expo SDK as you like in any React Native app. We’ve spent a lot of time building and maintaining these cross-platform APIs for native features, and we’re happy to finally share them with the entire React Native ecosystem and to continue evolving them as a together.

When I received an offer for a software engineering role to build an app in React Native, I wasn’t sure what to expect. Now I’m a few months in, and here are some of the lessons I learned along the way.

While implementing pagination in mobile devices, one has to take a different approach since space is minimal unlike the web, due to this factor, infinite scrolling has always been the go to solution, giving your users a smooth and desirable experience.

Approximately 2 years back we decided to move from Native Android and iOS applications to something cross-platform. As most, I went looking for a boilerplate, and this story is about why I decided to write my own after all deliberations.

In 2018 the React Native Community made a number of changes to the way we develop and communicate about React Native. We believe that a few years from now we will look back and see that this shift was a turning point for React Native.

Thoughts on React Native after using it professionally for projects of many scales.

Nowadays, almost all mobile applications have a maps feature. I had to integrate Google Maps to my React Native application, and the only choice was react-native-maps by Airbnb (it’s the only one still supported by the React Native community).

Nothing is better than building apps with JavaScript. Unless you are building mobile apps.

To add a staging and production environment, and to add app icons, requires us to use Xcode and Android Studio, and we do it the same way we do with native iOS or Android projects.

Let's try to understand the what and how of the process to run React-Native apps on iOS.

The comprehensive step by step React Native and Firebase tutorial: Build CRUD (Create, Read, Update, Delete) Firestore Android and iOS App.

In this blog post, I’ll go over some tips and tricks and eventually the best practices I’ve deployed for one of my apps coded in React Native

In this article, I will tell you about the versioning scheme we use for our React Native modules at Wix.

In this post, I’m going to create four React Native powered Android apps.

Before reading the rest of the tutorial and going further, just try to remember that you are only learning about Redux because it will make things easier for you, and not more difficult.

In this post I’ll describe how I got React Native working with Storybook and Storyshots plugin along with a custom script to generate a separate test file per story file.

In a few minutes, you’ll have a Pokedex app, one that runs on iOS, Android, and on the web.

In this article, we will learn how to persist user data using Redux in a React Native application.

In this article, we gathered the typical approaches to debug and solve memory problems in a React Native app.

Let’s create a basic chat application that works on every iOS and Android device. To do this we will use a framework called Expo!

This is not a technical article; it's just my thoughts and conclusions after briefly playing with it and some discussion with my colleagues.

In this article, we will quickly build a chat app using React Native, Expo and Microsoft’s Bot Framework.

Taking a Picture Every 30 Seconds and Sending It To A Server.

WordPress can work as an excellent back-end platform for your next native app, especially if it is content-driven or an online shop. In this article, you will learn the foundations for building mobile apps with React Native and WordPress.

Today, we're going to look at how to use TypeScript in React Native apps.

Not all developers are aware of how useful React Native actually is. Here are some tips on how to create an audio and video recording app by using Expo development tools.

Discover how React Native functions internally, and what it does for you without you knowing it.

Unfortunately React Native’s documentation about animations is not so great. Some things are explained rather vaguely and other things are plain missing. That’s why I wanted to give you a quick overview of the things I think need a bit of extra explanation.

A todo app touches on all the important parts of building any data-driven app, including the Create, Read, Update and Delete (CRUD)

We will go over the process of building a starter e-commerce mobile app for searching through a books datastore using React native.

Mega-post with everything I learned + lots of code examples.

Every developer will get to a point when they’re working where they’re going to have to debug their code.

I’m going to teach you how to write a native mobile app with React Native and Redux.

Forms are pretty simple, right? Yeah! But there can be quite a few moving parts involved. A few things you might have to take care of…

Writing unit & end-to-end tests to ship your mobile app with confidence.

Let’s talk about debugging and performance measurement.

Until someone makes react-native-bootstrap (which does not exist yet, by the way), here are a number of other React Native UI Toolkits that you can use to bootstrap (get it?) your next React Native project

Accomplished musicians often talk about how, at certain moments in their careers, they had to unlearn old habits in order to progress. This process often causes them to regress in performance while they adjust to an ultimately better method. Once the new approach is integrated, they are able to reach new heights that would not have been possible with their previous techniques.

Today I released a simple React-Native game on the App Store with the aim of providing some tips on how to handle small React-Native projects like this one.

Developer velocity is a defining value of Instagram’s mobile engineering.

The bar is set high for today’s mobile apps. First, apps must meet the standard of quality that app markets expect. Secondly, mobile app users are very demanding. Plenty of alternatives are available to download, so users will not tolerate a buggy app. Because mobile apps have become such a crucial part of people’s lives, users won’t be shy about sharing their love or hate for an app — and that feedback gets in front of millions of users in seconds.

One of the hardest decisions to make when starting a new app is which platforms to target. A mobile app gives you more control and better performance but isn’t as universal as the web. If you’re making a mobile app, can you afford to support both iOS and Android? What about trying to build a mobile app and a responsive web app? Ultimately, the best experience for your customers is for your app to work everywhere, but the development and maintenance costs of that can be prohibitive.

In part 1 of this tutorial we started building our iOS app from scratch. We started out by setting up a blank React Native project. Then we pulled data from the Unsplash.it API. Because downloading data takes time, we built a loading screen. In the process we went over positioning UI elements with flexbox and styling them using CSS-like properties.

These frameworks and the whole idea of building mobile apps with JavaScript never appealed to me, though. I always thought, why not just learn Swift/Objective-C or Java and build real apps? That definitely requires a significant amount of learning, but isn’t that what we developers do and should be good at?

In this video tutorial you'll learn how to create a Countdown timer in React Native using FlatList and Animated API (Animated.parallel and Animated.sequence) from React Native.

In this video tutorial you'll learn how to create an Advanced React Native Parallax Carousel using FlatList and Animated API from React Native.

In this video tutorial you'll learn how to create an Advanced React Native Carousel using FlatList and Animated API from React Native.

In this video tutorial you'll learn how to create a reusable Animated Progress indicator bar component in React Native using React Native Animated API and React Native onLayout.

Getting started with React Navigation v5 and Shared Element transition in React Native + create a photography carousel animation using React Native Animated API and FlatList.

Getting started with React Navigation v5 and Shared Element transition in React Native + create a parallax carousel animation using React Native Animated API and FlatList.

Fluid body animation using Bézier Curves and Reanimated 2.

Getting started with React Navigation v5 and Shared Element transition in React Native + create an advanced carousel animation using React Native Animated API.

In this video tutorial you'll learn how to create an animated donut chart component in React Native using React Native Animated API and React Native SVG.

Building a wave animation using Bézier Curves.

Learn how to create a custom carousel animation using.

In this tutorial I'm going to teach you how to synchronise two different FlatList and how to create a picker animation in React Native. This is a performant react native FlatList animation that will work on both iOS and Android at 60fps and there's no need for a Masked View to create this type of animation.

In this video, we are looking a making animations via the dbrand.com color selection.

In this tutorial we are going to create a stack carousel animation in React Native using FlatList, Animated API and FlingGestureHandler from react-native-gesture-handler package.

In this video, we are looking a making animations via the dbrand.com color selection.

In this tutorial we will build a custom drawer in React Native using SVG, Masked View and vanilla Animated API from React Native. We will go through how to animate a Polygon in React Native, how to animate the inner content of the drawer and how the React Native MaskedView is working.

In this series, we are building a React Native App from 0 to 1.

In this series, we are building a React Native App from 0 to 1.

In this series, we are building a React Native App from 0 to 1.

In this tutorial we will build a custom drawer in React Native using SVG, Masked View and vanilla Animated API from React Native. We will go through how to animate a Polygon in React Native, how to animate the inner content of the drawer and how the React Native MaskedView is working.

In this video, we are building an interactive Graph with Reanimated 2.

In this series, we are building a React Native App from 0 to 1.

In this series, we are building a React Native App from 0 to 1.

In this series, we are building a React Native App from 0 to 1.

In this video, we are building the iOS-Style Picker with React Native Gesture Handler and Reanimated.

In this series, we are building a React Native App from 0 to 1.

In this video tutorial we'll learn how to create an accordion animation in React Native using Transition API from React Native Reanimated library and flexbox styling without the need of layout measurements, just pure flexbox and Transition API from react native reanimated library.

In this series, we are building a React Native App from 0 to 1.

In this video tutorial we'll learn how to create this mind blowing animation in React Native using perspective, scale and rotation and vanilla Animated Api from React Native. This is working cross platform thanks to expo, in other words you can use it either on web or in your React Native projects.

In this series, we are building a React Native App from 0 to 1.

In this series, we are building a React Native App from 0 to 1.

In this series, we are building a React Native App from 0 to 1.

In this video, we are building the Android Ripple Effect with React Native Gesture Handler and Reanimated

In this video, we are building some of the animations from the Beautiful Trigonometry from Numberphile.

In this video, we are looking at the Uber Eats Swipe to Delete user interaction.

In this video, we look at transitions with Reanimated 2.

In this React Native course, you will learn how to add declarative gestures and animations to your React Native projects.

In this video, we get to know animation worklets from Reanimated 2.

In this video, we take our first look at Reanimated 2.

In this video, we are looking at the WhatsApp Photos user-interaction.

In this video, we build an animation provided to use by the amazing Mengo To from https://designcode.io

In this video, we build a swiper with React Native.

In this video, we build a baby 3d engine with React Native.

In this video, we showcase the decompose2d and tween function from redash.

In this video, we use the RotationGestureHandler for the first time.

In this clip, we build a simple D3 Candlestick chart using D3.

In this clip, we build a simple circular gesture using React Native Gesture Handler and Reanimated.

In this video, we are looking at the Hue color selection.

In this video, we are looking at the Instagram pinch-to-zoom effect.

In today's video, we will be looking at React Native transforms.

In today's video, we will be looking to implement in React Native the animation challenge.

In today's video, we will be looking to implement in React Native the following animation challenge.

In today's video, we will be looking to implement in React Native the following animation challenge.

Learn how to use React Navigation v5 by implementing the navigation pattern that is found in most popular apps right now. We cover authentication, stack/tab navigation, params, TypeScript, and more.

In this video, we are building the custom slider.

In this video, we are building the Airbnb Shared Element Transition.

Today we will start building a mobile app with React Native that will link up with a brain computer interface!

In this video, we are looking at React Native pixel rounding.

I respond to a video TechLead made and make the case in favor of React Native.

In this course we will talk about what React Native is and get setup, look at some of the built in components and build a small shopping list app.

In this video, we are building the Coinbase Pro Candlestick Scrubber.

Same time last year I did a video on how to bootstrap a React Native project in 2019 so what changed since?

In this video, we are building the Activity rings from iOS.

In this video, we are building an angular gradient in React Native using a masked view.

In this video, we are building our first OpenGL Shader in React Native.

In this video, we are building a nice throwback: the iPod Classic using a phone touch screen.

In this video, we are building the Uber Eats sticky header.

In this video, we discuss React Native Reanimated Transitions.

In this tutorial we'll learn what's new in react navigation 5.

With iOS 13 Apple finally opened the SDK to write data on some of the most popular NFC chips. Thankfully one of the most popular (and to my knowledge only) NFC React Native library, react-native-nfc-manager also added (some) support to do this. Let's see how it works in practice!

In this video tutorial we'll learn how to create a minimalist Clock UI and how to animate it using React Native Animated API. We'll be using day.js library to get the timestamp, Animated.timing to animate the seconds, minutes, hours and Animated.stagger to animated the initial render of the Clock.

In this video, we are building the Google Chrome Tab ordering feature.

Learn how to share code between React and React Native to avoid duplicating logic.

In this lesson we’re going to be animate words in a sentence in React Native and Expo for creating the react-native project. We'll be using Animated stagger function.

In this video, we are building the Liquid Swipe example from Cuberto.

In this talk you will see how to get voice input ready in React and React Native, how to react on voice input and how to process it to get the intent from the user voice.

This talk I am going to share with you my experience of dealing with these in React Native by moving towards TDD. Also how writing unit and e2e tests helped me write better code and build beautiful apps.

In this talk, Karan will share his learnings from working on the React Native infrastructure at Skyscanner. These are concepts, issues and roadblocks that a developer would encounter in their journey of integrating React Native in a brownfield app.

There are cases when product has a lot of business logic and want's to share it across web and mobile platforms, especially when the web part uses React and mobile - React Native.

By combining a canvas rendering strategy with invisible React UI for manipulating video overlays on the client side, and ffmpeg on the backend, we were able to build a video editing experience in a matter of weeks that supports near pixel perfect previews that can be edited in real time, and highly optimised mp4 output for the fully rendered videos.

In this video, we implement an accordion list.

Today I'm going to recreate yet another classic game in React Native: Whack-A-Mole. I'm going to use rn-sprite-sheet, which I believe is one of the best ways to do on-demand animation with React Native in a game.

This talk will show you all the steps involved in converting a React Native project to TypeScript, as well as many of the pitfalls and gotchas that you might encounter along the way.

In this video, we build our own angular gradient.

In the previous episode we created a proof of concept version of Flappy Bird using react-native-game-engine and Matter.js. While it was fun, it wasn't even remotely the kind of game that any user would enjoy or even use for more than 10 seconds. Today we are aiming to make the game to be (more or less) production ready.

In this video, we are building the Spotify bottom sheet gesture and animation using React Native.

Today I'm building the "classic" game Flappy Bird in react native, using react-native-game-engine and Matter.js. This kind of game is not necessarily something that I would encourage to build using react native, but it is entirely possible, so might as well.

React native tutorial on building the classic Snake game, made popular by Nokia in the late 90s.

This is the second part of the series where I try to create a fully fledged Slot Machine Game in React Native. In this episode we are going to evaluate the result of the spin and highlight the lines that won with a nice little animation.

Slot Machines are not necessarily the kind of apps you would build in React Native... Challenge... Accepted.

Free React Native Introduction for Beginners: Get Started with React Native and learn how to build an iOS and Android app.

In this lesson we’re going to be building a Shared Element Transition in React Native using react-navigation, react-navigation-fluid-transition, React Native and Expo for creating the react-native project.

You'll learn how to create the header animation similar to the Airbnb App.

What is Expo, what have we been working on, and what’s up next? Give me your attention for half an hour and let me tell you about that.

In this session I will demonstrate a basic setup of Bitrise to build the application for both iOS and Android platforms, with a deployment to Appetize for both versions.

At Nozbe, we share almost all component-level code between React for the web and React Native (both iOS and Android) — without ReactXP, react-native-web, or react-primitives! Let me show you how we did this — from project setup, through shared infrastructure, all the way up to shared components and styling — and how you can achieve the same thing.

I could tell tales for days of the many seas we've been through, the high waves and the storms we've weathered - but one constant has been the help provided from other sailors like me, part of the community. The collaboration with the RN team allowed for increasingly more complex roles and projects to ship - and we are all but done.

In this session, I would share my experiences building React Native Apps, and the 10 things that I wish I knew early on. By the end of this talk, you will be equipped with best practices to follow while building your React Native App. Make sure you don’t repeat the same mistakes that I did.

In a world where perpetually confused developers can’t quite get their React Native development environments working, new libraries emerge from the ashes of lost productivity: envinfo and Solidarity. Escape the complexity and be part of the wave of teams embracing change to save their projects from themselves.

In this talk, we will look at the various tips and tricks for taking full advantage of React Native and using the performance attributes of the new architecture.

In this talk, I am going to give you an update where we are, what are the highlights from past few months and what you can expect from the future.

Visual regressions in mobile applications can be serious problems and are notoriously tedious to catch. Hours, even days, can be spent manually sifting through screenshots of a mobile application before releasing it to real users. With automated screenshot testing, much of this tedium can be avoided, and mobile app developers can be empowered to iterate with confidence.

Jetpack Compose is a new declarative UI framework that is being developed in the open for Android. It has a very similar programming model to React, and this talk will dive deep into the internals of both to explain the similarities and differences in the architectures of both, and how React Native might be able to leverage some of this technology long term.

In this talk we will walk through the process from defining complex animation, to implementing it by going through all stages of animation creation process.

This talk will look at the ways in which my team and I learned, sometimes the hard way, how to develop a react native app for Android, as well as my experience as a JavaScript developer being thrust into the native world.

A brief exploration of decisions and difficulties encountered when employing third-party libraries in React Native applications, yielding actionable advice for open-source package maintainers in our community.

In this talk, I will go through some of the best practices you should consider from setting up a project, challenges most react native app faces to scalability. At the end of this talk, you will go home with practices you can apply to your projects and feel more confident doing so.

This talk is about my journey in building an app that will keep track of your gym life. One single codebase and React Native. Only one person making an app for both Android and iOS that goes from zero to production till seeing your gym buddy using it.

Creating scalable and maintainable React Native app using Mobx State Tree.

In this talk, I'll show how you can rapidly prototype, build, & deploy your app using GraphQL, React Native, & AWS AppSync so you can spend your time worrying about more important things in life. In addition to what you'd expect from a conference app, we'll be adding live chat so attendees discuss talks & speakers can field questions & interact with them in real-time.

This talk will show you all the steps involved in converting a React Native project to TypeScript, as well as many of the pitfalls and gotchas that you might encounter along the way.

I talk about the drag and drop list I created with Reanimated and RecyclerListView.

In this video, we make some fancy tap gesture animation with React Native Reanimated and Gesture Handler.

Learn about the high performant listview in React Native called RecyclerListView by Flipkart.

If you've ever been curious what it's like to convert a Component to React Hooks then this is the video for you! I convert 4 components LIVE with you!

If you are a curious React developer who believes that knowing the internals of a library makes you a better developer, join me to the journey Under The Bridge.

Learn the basics of Reanimated in React Native.

Learn how to compute the index of an item in a FlatList in React Native.

Learn how to code a drag and drop flatlist in React Native.

In this video, we make some loop animations in React Native using Reanimated.

In this video, we are building the BBC iPlayer using React Native.

Talk at React Native Wrocław Meetup

Talk at React Native Wrocław Meetup

In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.

In this video, we are a simple animation using React Native.

You noticed a button in your app is in the wrong color. You fix it and merge the code to your production branch. Congratulations! now it’s time for your code to meet your users.

We'll take a brief look at what AR is and how it works, and then take a deep dive into Viro and everything it provides to get you moving rapidly with AR development. We'll focus on a few very interesting pieces that Viro provides, such as 3D models, portals, image recognition, and real life object recognition.

We’ll look at options of writing cross-platform apps and see how to leverage React’s clever rendering strategies to build apps as effortlessly as possible.

In this video, we are building the iOS Safari Tabs animations using React Native.

In this video, we are building an SVG Path morphing in 5 minutes using React Native.

Konstantin Raev talks about reaching React Native performance goals for Facebook Marketplace--one of Facebook's biggest applications.

Today I'ma run you through how to make a web app with Expo. The steps are really just expo init, expo build:web, netlify deploy. In my usual distracted fashion I walk you through these steps in 12 minutes.

In this video, we are looking at the Monzo card selection.

In this video, we are building a D3/SVG graph animation in 5 minutes using React Native.

In this video, we are looking at the Spotify scrollable header.

This session will cover how we use - and open source - our mobile development stack to deliver beautifully designed and super responsive apps on both Android and iOS.

Writing truly universal code and deploying it everywhere.

In this presentation Hein will dive further into shared element transitions (aka magic-moves), how you can achieve them using react-native-magic-move; and what additional work needs to be done to make this is a first class feature in react-native.

In this talk we will walk through the process from defining complex animation, to implementing it by going through all stages of animation creation process.

In this talk, I'll talk about this philosophy in depth, discuss the options available from different service providers, & then show how (live-code) to build a full-stack React Native application in just a few minutes by using React & AWS Amplify React Native to quickly build a real-world app complete with a GraphQL API, analytics, search, authentication & authorization.

In this talk I will give real examples from my work with made.com, migrating their web and mobile application to React and React-Native with code sharing as a primary objective.

In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.

React Native is the tool for building cross platform React apps. To build native-like experiences, we need good APIs providing the native capabilities of each platform in a unified way. Is the answer a standard library for React apps?

The majority of users are now browsing websites primarily using touch devices. In this talk, Rick Hanlon from the React Native team at Facebook shares what React Native has learned about touch devices with web developers, including how to provide a rich user experience today, and where this space is going.

Understanding the basics of how to apply CI/CD practices in React Native mobile application development to automate software release tasks will improve performance and will free up time more usefully spent elsewhere in the project.

In this video, we are looking at the Apple Bedtime feature.

Building an app destined for production is a daunting task, especially to replace existing legacy apps available for download in the App and Play Store. We could have pursued a typical release strategy—instead, we got creative with React Native.

In this talk, I will show you why accessibility matters, what those rules are, accessibility standards your app falls into, common patterns to follow and how to get over your fear of voice-over.

In this talk you wil see how to get React Native to the Windows and Mac OS X platform, what the advantages and disadvantages are with these setups and what you can do to get the best results for your App.

In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.

This talk stems from my experiences as a web-developer newbie on the React Native team, and is an attempt to document my journey in comprehending the code base. At the end of the talk, the attendees will not only be able to build React Native apps, but also understands how it all works together.

In this video, we are looking at the Learnji app.

In this video, we are looking at the Google Chrome refresh effect.

In this video, we are building a 3D animation in 5 minute using React Native.

In today's live stream, we will be looking to implement in React Native the Tabbar animation challenge.

In this video, we are looking at the Airbnb app intro.

In this video we'll use Popmotion Pure to morph SVGs with Flubber and also animate the LinearGradients in React Native.

In this video, we are looking at the Flipboard 3d animation. This video is all about 3D transformations in React Native.

In this video, we are looking at the Flipboard 3d animation. Hope that you will enjoy the video! 😀 Let me know what you think.

Learn how to setup React Native to work with React Hooks.

In this video, I'm demonstrating my favorite way bootstrap React Native Project this year!

In this video we'll show how to use Suspense along with @reach/router and React.lazy to code-split and lazy-load each route/page of our application, showing a fallback component while it's loading.

In this lesson we’re be building a react native animation using pose library by Popmotion and Expo for creating the react-native project.

In this talk, Karan will share his learnings from working on the React Native infrastructure at Skyscanner. These are concepts, issues and roadblocks that a developer would encounter in their journey of integrating React Native in a brownfield app. Knowing these ahead of time would help folks take the right decisions when building their own React Native infrastructure.

At HuffPost we just finished rebuilding our main android news app in React Native. Explore some of the decisions we made about our code base and how those decisions impacted the success of the project and its future potential.

In this talk, we'll do a deep dive into how React Native and Metro goes about resolving platform specific code, common patterns for separating platform-specific code, and look at those same patterns from the perspective of a platform developer to see how we can make them more resilient to new & upcoming platforms.

In this video, we are looking at the flutter demo app.

In this talk, we will look at the internals of React Native, and how code written in JavaScript can power a fully native mobile application. We will look at the various parts of the system like the bridge, the UI manager and the plugins.

An introduction to writing React Native applications using ReasonML. Find out why ReasonML is great, why writing React Native with Reason is the jam, and learn how you can get started with it today!

Physical Web taking the world by a storm. More and more applications interact with physical devices using Beacons and low energy bluetooth. In this talk I will cover how to interact with physical world from inside React Native application.

While Animations can be created in React Native pretty easily, real world mobile apps require a combination of several layers of animations, gestures and micro interaction animations to make user experience stand out. In this talk we will walk through the process from defining complex animation, to implementing it by going through all stages of animation creation process.

In this talk, we will look at the current state of React Native with a whirlwind tool of its internals. We will also look at the upcoming changes in the architecture and how it plays well with React Fiber.

Learn how to setup a React Native application with Typescript.

Working consistently across multiple platforms with different file types in React Native can be challenging. In this talk, I will discuss and implement working with and opening a multitude of different file types consistently on both iOS and Android.

Use React Native and your React knowledge and take your web development skills to build native iOS and Android Apps.

Adding Firebase support to a React Native starter kit that I've built.

iOS and Android App Development from scratch - build full React Native mobile apps ridiculously fast!

Simple, easy to follow, step-by-step lessons for every type of animation.

The end product is to build a Twitter kind of clone where we have real time updates

Learn once, write anywhere: Build mobile apps with React Native

Master the advanced topics of React Native: Animations, Maps, Notifications, Navigation and More!

In this course we’ll explore getting started with a basic React Native application on both iOS and Android.

By coding along with Scott in this course, you’ll be able to take the same skills you use on the web and use them to build cross-platform, native applications in JavaScript.

In today’s episode of the React Native Radio Podcast, the panel talks with Michael Lynn and Drew Dipalma about Mongo DB Stitch and Atlas. The panel and guests talk in-detail about the databases. Check out today’s episode to hear all the details!

Chris and Lee join the show to discuss the rearchitecture, including the engineering history of React, the technical debt within the React project, and the vision that the React team has for the future.

In today’s episode of the React Native Radio podcast, the panel speaks with Josh Justice of Big Nerd Ranch. The discussion covers several main points on test such as, End to End Testing, Unit Testing, and Test Driven Development.

In today’s episode of the React Native Radio Podcast, the panel talks with Christian and Eric about various topics; such as: Flow, Flutter, C, C++, React Native, React, React Navigation, and much more! Check out today’s episode to hear all of the details.

In today’s episode of the React Native Radio podcast, Nader Dabit, Peter Piekarczyk and Mike Grabowski speak with Krzysztof Magiera. Krzysztof talks about his recent libraries on Native Driver, Gesture Handler, Reanimated, React Native Screens. The panel and Krzysztof dive deep into Gesture Handler and give insight on the best use cases. This is a great episode to learn about Krzysztof and his most current company and projects.

In today's episode of React Native Radio, Nader Dabit, Peter Piekarczyk & Spencer Carli talk with Gabriel Peal. Gabriel is the author of the Medium blog post “Sunsetting React Native” & formally worked with React Native Android at Airbnb. Gabriel has worked with Android for 6 years at Google & Airbnb. Gabriel is on the show to talk about Flutter, React Native, & hist current work at Tonal.

In this episode of React Native Radio, the panel talks to Eric Vicenti about React-navigation and more! He pays a lot of attention to navigation as well as what is blocking people from being able to build apps quickly, both in React Native and the web. They talk about the journey of creating React-navigation, the major changes to this library in the past few months, React Native gesture handler, and more!

In this episode of React Native Radio, the panel talks to Elliot Hesp and Mike Diarmid, who are a part of the React Native Firebase team. They talk about what they do in their day jobs, how people used Firebase prior to the library being created, what Firebase is, and why you would want to use it. They also touch on types of applications you should and should not use with Firebase, their past experiences working on open source projects, how these past projects have impacted how they work on the React Native Firebase project, and more!

In this episode of React Native Radio, the panel talks to Radoslav Stankov and Vlad Vladimirov, who are engineers at Product Hunt. They talk about why they came to Product Hunt, how the company works and collaborates remotely, and the general size and operation of Product Hunt. They also touch on the overview of the Product Hunt mobile app, the benefits and issues to using React Native to create the application, roadblocks and issues he ran into, and more!

In this episode, the React Round Up panelists talk to Orta Therox about his 2 years of experience with React Native at Artsy. They talk about the different popular blog posts about React Native, why his team decided to switch over to React Native, and the effects of team size on the success of the fit of React Native in each company’s app.