Implementing Progress Tracker in React Native

First version

Original design

Second Version

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

Third Version

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

Fourth Version

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.

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Vue user permissions through directives

Reusable Popover (or Menu) with Material UI and Typescript

React vs Angular vs Vue; Which is better?

How to Resize Image in NodeJS

The Quirks and Peculiarities of NaN

JavaScript Algorithm: Square(n) Sum

Mocking multiple API’s with Jest

LumApps — Road to React

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

More from Medium

React Native 참고 사이트 모음(feat.Firebase)

React Native #1

Handling custom layouts on Device orientation changes in React Native