Building the basic Onboarding experience

Before we dazzle our users with lots of animations, let's focus on leveraging what we've learned so far to build a basic onboarding experience. The view will have four onboarding panels, followed by a completion state. Each of the four panels will have its own message, a placeholder image (in lieu of final product photos), and a unique background color. At a high level, we'll create a root Onboarding component that manages transitioning between the different states. Additionally, we'll build a few supporting Onboarding components, and two buttons for navigating us forward and backward through the onboarding experience. Lastly, we'll create an onboarding configuration to house all the information about each onboarding state.

Getting started

First, let's build our barebones view. Inside your RNNYT app, add the following files inside the src/components directory:

• Onboarding.js

• OnboardingButtons.js

• OnboardingPanel.js

• Button.js

• LinkButton.js

Let's begin with a...