React Native Cell Test

CellTest.js

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

export default () => {
  const showIcon = true

  return (
    <View style={styles.cell}>
      {showIcon && <View style={styles.icon} />}
      <View style={styles.leftSide}>
        <View>
          <Text style={styles.title} numberOfLines={1} ellipsizeMode='tail'>
            My Really Really Really Super Duper Long Title
          </Text>
          <Text style={styles.subtitle} numberOfLines={1} ellipsizeMode='tail'>
            My super long subtitle
          </Text>
        </View>
      </View>

      <View style={styles.rightSide}>
        <Text style={styles.info} numberOfLines={1} ellipsizeMode='tail'>
          Info Text
        </Text>
        <View style={styles.chevron} />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  cell: {
    flexDirection: 'row',
    alignItems: 'center',
    minHeight: 43.5,
    paddingRight: 16,
    backgroundColor: 'white'
  },
  leftSide: {
    flex: 0,
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 16,
    marginVertical: 10
  },
  rightSide: {
    flex: 1,
    justifyContent: 'flex-end',
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 10
  },
  icon: {
    marginLeft: 16,
    width: 30,
    height: 30,
    backgroundColor: 'steelblue'
  },
  chevron: {
    marginLeft: 11,
    width: 11,
    height: 17,
    backgroundColor: 'orange'
  },
  title: {
    marginRight: 16,
    fontSize: 17,
    color: 'black'
  },
  subtitle: {
    marginRight: 16,
    fontSize: 12,
    color: 'grey'
  },
  info: {
    flex: 1,
    fontSize: 17,
    textAlign: 'right',
    color: 'grey'
  }
})