React Native Conference detail

ConfDetail.js

/**
 * Created by Owen Ju on 22/05/2017.
 */

import React, {Component} from 'react'
import {AppRegistry, View, Text, StyleSheet, Image} from 'react-native'

export default class ConfDetail extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.detailsContainer}>
          <Text style={styles.title}>Conference Keynote</Text>
          <Text style={styles.subtitle}>Thursday, May 18</Text>
          <Text style={styles.description}>Hear about awesome stuff</Text>
        </View>
        <View style={styles.speakerContainer}>
          <Image style={styles.image} source={{uri: 'https://unsplash.it/40/40/?random'}}/>
          <View style={styles.speakerDetailsContainer}>
            <Text style={styles.speakerName}>Lucy Vatne</Text>
            <Text style={styles.speakerBio}>The Best doggo</Text>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  },
  detailsContainer: {
    paddingVertical: 30,
    paddingHorizontal: 20,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: 'gray'
  },
  title: {
    fontSize: 24,
    fontWeight: '500'
  },
  subtitle: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 12,
  },
  description: {
    fontSize: 13
  },
  speakerContainer: {
    flexDirection: 'row',
    paddingVertical: 30,
    paddingHorizontal: 20,

  },
  image: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "grey",
    marginRight: 10
  },
  speakerDetailsContainer: {
    justifyContent: 'center',

  },
  speakerName: {
    color: 'purple',
    fontWeight: '500'
  },
  speakerBio: {
    fontSize: 13,
  }
})

AppRegistry.registerComponent("ConfDetail",() => ConfDetail)