text: import React from 'react';
  import { View, StyleSheet, Text, LayoutAnimation } from 'react-native';
  
  const styles = StyleSheet.create({
  	firstUnread: {
  		flex: 1,
  		flexDirection: 'row',
  		alignItems: 'center',
  		marginVertical: 5
  	},
  	firstUnreadLine: {
  		borderTopColor: 'red',
  		borderTopWidth: StyleSheet.hairlineWidth,
  		flex: 1
  	},
  	firstUnreadBadge: {
  		color: 'red',
  		backgroundColor: '#fff',
  		fontSize: 11,
  		paddingHorizontal: 10,
  		transform: [{ scaleY: -1 }]
  	}
  });
  
  export default class UnreadSeparator extends React.PureComponent {
  	componentWillUnmount() {
  		LayoutAnimation.linear();
  	}
  	render() {
  		return (
  			<View style={styles.firstUnread}>
  				<View style={styles.firstUnreadLine} />
  				<Text style={styles.firstUnreadBadge}>unread messages</Text>
  			</View>
  		);
  	}
  }
  