react-native border progress bar

I’ve been doing some experimenting with react-native recently. Great posts such as React Native Youtube Animated Video Slide by @browniefed inspired me to write a post and learn more about layouts in react native.

For the app I am working on, I wanted to come up with a novel way of displaying time progression. Instead of a simple line or cicle, my friend Warren had the idea to use the border around the screen and animate from the top left moving clockwise around the edges.

The way I decided to approach this was to make each border its own view. React Native uses flexbox for layout. In order to accomplish this, I split each border section into a two view layout. For the first border, I created a View that contains a view for the top border and a view for the rest of the screen’s content. Then inside the content view, I split that vertically with the content and the right border. I repeated this process until I had all for edges.

splitting the screen into two views, one for the top border and one for the rest of the screen and so on

Here’s the code I used to create this layout.

const ExampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.borderH}></View> <View style={styles.contentH}> <View style={styles.contentV}> <View style={styles.contentH}> <View style={styles.borderV}> </View> <View style={styles.contentV}> <Text>content</Text> </View> </View> <View style={styles.borderH}> </View> </View> <View style={styles.borderV}> </View> </View> </View> ); } }); const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', marginTop: 20 }, borderH: { height: 20, backgroundColor: 'blue' }, borderV: { width: 20, backgroundColor: 'green' }, contentH: { flex: 1, backgroundColor: '#efefef', flexDirection: 'row' }, contentV: { flex: 1 } });

checkout the example on rnplay

Now let’s add progress to each border (I’m going to set a width for each border bar, but in a real scenario, the next clockwise border won’t be filled until the previous one has completely filled). We do this by adding a view inside each border view that has a width (or height if the bar is vertical) with a background color. I’m going to set the background color of the previously shown views to be white so that we can clearly see just the outside borders.



As you can see, the bordersare not starting from a clockwise direction. That is because the content of the borders are left or top aligned. We need to tell the bottom border to align right and the left border to align bottom. The way we do that with flex is to set the bottom border (the view that contains the progress bar) to flexDirection: 'row' so that flex knows which direction the content should orient and then justifyContent: 'flex-end' which since we are using flex row, is the right-hand side. Similarily, for the left border, we set flexDirection: column since it is vertical and then justifyContent: 'flex-end' and BOOM



See the final source on rnplay

This is how I was able to create the layout for a progress bar that goes around the border of the screen. There are several parts I didn’t put in this post like how to determine what width to give to each progress bar view and also how to determine how much each bar should be filled given an overall percentage.

I hope you found this helpful in learning how to use flex in React Native. If you want to chat, hit me up on twitter (@jhsu) or join the reactiflux chat. I’ll leave you with this teaser

