Mess

import React from 'react';
import {
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';


import { LinearGradient } from 'expo';
import { Viewport } from '../../utils';

export default class Message extends React.Component {


  render() {
    let { message, isOwner } = this.props;

    return (
      <View style={styles.container}>
        {isOwner ? 
          <LinearGradient 
            style={[styles.messageWrapper, styles.messageOwner]}
            colors={['#7b7dff', '#31baff']}
            start={[0, 1]}
            end={[1, 0]}
          >
            <View style={[, ]}>
              <Text style={[styles.messageText, styles.messageTextOwner]}>
                {message.text}
              </Text>
            </View>
          </LinearGradient>
        :
          <View style={[styles.messageWrapper, styles.messageFrom]}>
            <Text style={[styles.messageText, styles.messageTextFrom]}>
              {message.text}
            </Text>
          </View>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f7f7f7',
  },
  messageWrapper: {
    maxWidth: Viewport.width - 100,
    margin: 10,
    padding: 15,
    paddingVertical: 12,
    borderRadius: 5,
  },
  messageFrom: {
    alignSelf: 'flex-start',
    backgroundColor: '#fff',
    shadowColor: 'rgb(46, 61, 73)',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 7,
  },
  messageText: {
  
  },
  messageTextFrom: {

  },
  messageOwner: {
    alignSelf: 'flex-end',
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 0,
    overflow: 'hidden'
  },
  messageTextOwner: {
    color: '#fff',
  },
});