Update for week 6

Overview

The release 2.7 landed successfully this week and I am happy to be one of the contributors. Next week we will work on the plan for 2.8 and I picked 2 issues to work on.

React Native Home Page

As I mentioned in my last blog post, I finished mostly the issues and just need some styling to make the page looks like its original version.
However, it is not easy at that. I had a hard time with styling. I had to re-order some View, Text and other elements to give them appropriate styling. Styling in React Native is not nearly the same as CSS styling.

container: {
   flex: 1,
   justifyContent: 'center',
}

This means the container will spread out the whole screen if it is the only parent element. And all the child elements will be centered horizontally.
In CSS, I normally use em or rem when applying padding or margin. However React Native does not understand that. We have to use specific number like marginTop: 25
On top of that, it is sometimes annoying that React Native StyleSheet,which a lot of people and I are using, does not have some styling properties like CSS. For example, letterSpacing. To deal with this issue, I have to research a lot and basically you have to style inside the tag. So your code will have separate parts of styling:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  studentQuote: {
    zIndex: 1000,
  },
  studentQuoteText: {
    color: 'white',
    fontSize: 21,
    textAlign: 'center',
    marginTop: 25,
  },
});

<View style={styles.container}>
      <Text
        style={{
          zIndex: 1000,
          letterSpacing: 13,
          fontSize: 45,
          fontWeight: '600',
          color: '#A0D1FB',
        }}
      >
        Telescope
      </Text>
      <Pressable style={styles.studentQuote} onPress={() => Linking.openURL(studentQuote.url)}>
        <Text style={styles.studentQuoteText}>"{studentQuote.quote}"</Text>
        <Text style={styles.studentQuoteText}> {studentQuote.author}</Text>
      </Pressable>
    </View>

Dashboard issue

Big challenge for me is that the dashboard has changed a lot since the last time I worked on an issue about it. It is now using Handlebars. In terms of the issue, the contribution cards will not sometimes show the avatar of contributors if there are more than 1 authors. This problem is related to how we render the view of Handlebars. My guess is that we have to make a loop into the numbers of authors to render out all of their name and avatars.