Implementing Progress Tracker in React Native

First version

At the beginning, the design is like this. There are two buttons. There is an arrow between them.

Original design

Second Version

To remove the extra background of the arrow, I use react-native-svg to draw a polyline as the gray edge of the arrow. It’s easy to draw a polyline with react-native-svg. points property of Polyline is a string of all points like '0,0 1,1 0,2'. 0,0 is the first point. 1,1 is the second point. The code is here.

<Svg width={ARROW_WIDTH} height={HEIGHT}>
<Polyline fill='none' stroke='gray' strokeWidth='2'
points={'0,-2 ' + (ARROW_WIDTH-1) +','+ HEIGHT/2
+ ' 0,' + (HEIGHT+2)} />

Third Version

The design changed. There could be more than 2 buttons. We need to scroll the progress tracker horizontally.

New design
<ScrollView horizontal={true}>
<View style={left: -20}>

Fourth Version

It’s very frustrating that the third version does not work on Android. I need to use a RelativeLayout instead of a LinearLayout in ScrollView. Finally, I figured out a solution. Add all buttons into a view first, and then add the view into ScrollView. That view is like the content view of UIScrollView. So there is only one item in ScrollView. It works well on both iOS and Android.

Lessons I learnt

  1. iOS is the first-class citizen of React Native. Sometimes code works well on iOS but does not work on Android. We have to spend more time on Android. Now I always run code on Android emulator and run on iPhone simulator occasionally.
  2. Overlapping subviews of TouchableOpacity introduce ugly highlighting effect on Android when the button is pressed down. We should avoid it.
  3. overflow: visible does not work on Android. (It will change in the future.)
  4. If you want to do complex things in ScrollView, you can add items into a content view first. It will be easier to implement.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aijin Yuan (Vince)

Aijin Yuan (Vince)

iOS/Android/Web developer. UX engineering lead at Grab. Singapore/Hong Kong/Shanghai