refactor message cell style

Author: Uncle Charlie

js/message/MessageCell.js

@@ -6,6 +6,7 @@ import {
   Image,
   TouchableOpacity,
   Dimensions,
+  StyleSheet,
 } from 'react-native';
 
 const {width, height} = Dimensions.get('window');
@@ -20,28 +21,37 @@ export default class MessageCell extends React.PureComponent {
     const {name, full_name} = this.props.item.item || {};
     console.log(`===>message cell props, ${name}, ${full_name}`, this.props.item.item)
     return (
-      <View style={{ alignItems: 'stretch', justifyContent: 'center', backgroundColor: 'white', paddingHorizontal: 10, paddingTop: 10, }}>
+      <View style={styles.container}>
         <TouchableOpacity
           onPress={() => console.log('item clicked')}
-          style={{
-            backgroundColor: 'yellow', alignItems: 'stretch', justifyContent: 'center',
-            height: 250,
-          }}>
-          <View style={{
-            flex: 1, justifyContent: 'flex-start', alignItems: 'center',
-            backgroundColor: 'orange', borderRadius: 10, overflow: 'hidden'
-          }}>
+          style={styles.touchable}>
+          <View style={styles.touchableInside}>
             <Image
               source={require('./img/graphql_wx.jpg')}
-              style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: 'red', width: SCREEN_WIDTH - 20, height: 150 }}
+              style={styles.image}
               resizeMode={Image.resizeMode.stretch} />
-            <View style={{ flex: 1, justifyContent: 'space-around', alignSelf: 'stretch', alignItems: 'flex-start', paddingVertical: 20, marginHorizontal: 20 }}>
-              <Text style={{ textAlign: 'left', backgroundColor: 'yellow' }}>{name}</Text>
-              <Text style={{ textAlign: 'left', backgroundColor: 'yellow' }}>{full_name}</Text>
+            <View style={styles.insideView}>
+              <Text style={styles.insideText}>{name}</Text>
+              <Text style={styles.insideText}>{full_name}</Text>
             </View>
           </View>
         </TouchableOpacity>
       </View>
     );
   }
-}
+}
+
+const styles = StyleSheet.create({
+  container: { alignItems: 'stretch', justifyContent: 'center', backgroundColor: 'white', paddingHorizontal: 10, paddingTop: 10, },
+  touchable: {
+    backgroundColor: 'yellow', alignItems: 'stretch', justifyContent: 'center',
+    height: 250,
+  },
+  touchableInside: {
+    flex: 1, justifyContent: 'flex-start', alignItems: 'center',
+    backgroundColor: 'orange', borderRadius: 10, overflow: 'hidden'
+  },
+  image: { borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: 'red', width: SCREEN_WIDTH - 20, height: 150 },
+  insideView: { flex: 1, justifyContent: 'space-around', alignSelf: 'stretch', alignItems: 'flex-start', paddingVertical: 20, marginHorizontal: 20 },
+  insideText: { textAlign: 'left', backgroundColor: 'yellow' },
+});