Implementing a dynamic “Terms & Conditions” page with animation and progress tracking in React Native

Saad Khan
Saad Khan
Dec 14, 2021 · 3 min read
Photo by Markus Winkler on Unsplash

We all know the common user experience of going through a terms & conditions page. User needs to scroll down to the bottom to enable the submit button and only after that, they can proceed. We will try to build a small demo of the same experience in this post.

First, let us see the end product to get a clear picture of what we are trying to achieve.

From the demo, we can point out a few key areas that need to be tackled to implement this behavior.

  1. First, we need to detect if the user has reached the bottom of the page, if they reach a certain point at the bottom we will need to enable the disable button.

Alright, let’s start with the implementation.

1. Detecting if the user has reached the bottom of the screen:

At the initial phase, our button is disabled. We can create a state to change the button enable/disable state, like so –

const [btnDisable, setBtnDisable] = React.useState(true)

To detect the user’s scroll position we will use the onScroll props of our ScrollView.

detect if the user has reached the bottom

2. Enable the button with an opacity animation:

From the above code, we can see that we are enabling the button. We can add a simple opacity animation to create a nicer feeling. Initially, the opacity value is 0.2. That’s why we see a pale orange value which lets the user know that the button is still inactive.

const fadeAnim = useRef(new Animated.Value(0.2)).current;

We can make the opacity value to 1 when we set the value of the btnDisble state to false.

and this is our button component.

3. Tracking and showing the progress bar

Our last task is to track the progress of the user’s scroll against the full height of the page. In order to track the progress, we will use an animated value in our onScroll function.

const AnimatedProgressValue = new Animated.Value(0)

The following code describes the process of tracking the progress.

We have the progress value in our AnimatedProgressValue variable. We can use this to generate the progress bar at the bottom of the page. This implementation is the following

The progress bar has a width equal to the width of the screen. We just need to increase the scaleX according to progress value. The translateX is needed to scale from the left, otherwise, the scale starts to happen from the center, It works like transformOrigin: '0px 0px' the web.

Here is the full code and demo of the post — https://snack.expo.dev/@saad-bashar/terms-conditions-demo

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Saad Khan

Written by

Saad Khan

Mobile App Dev (Mainly focused on React Native)

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.