Fix badge flickering (#341)

app/components/badge.js

@@ -4,22 +4,6 @@
 import React, {PropTypes, PureComponent} from 'react';
 import {View, Text, TouchableWithoutFeedback, StyleSheet} from 'react-native';
 
-const styles = StyleSheet.create({
-    container: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexDirection: 'row'
-    },
-    text: {
-        paddingVertical: 2,
-        paddingHorizontal: 4,
-        backgroundColor: 'transparent',
-        fontSize: 14,
-        textAlign: 'center',
-        textAlignVertical: 'center'
-    }
-});
-
 export default class Badge extends PureComponent {
     static defaultProps = {
         extraPaddingHorizontal: 10,
@@ -38,11 +22,6 @@ export default class Badge extends PureComponent {
         onPress: PropTypes.func
     };
 
-    constructor(props) {
-        super(props);
-        this.width = 0;
-    }
-
     renderText = () => {
         const {count} = this.props;
         let text = count.toString();
@@ -51,7 +30,6 @@ export default class Badge extends PureComponent {
         }
         return (
             <Text
-                onLayout={this.onLayout}
                 style={[styles.text, this.props.countStyle]}
             >
                 {text}
@@ -59,44 +37,11 @@ export default class Badge extends PureComponent {
         );
     };
 
-    badgeRef = (ref) => {
-        this.container = ref;
-    };
-
-    onLayout = (e) => {
-        let width;
-
-        if (e.nativeEvent.layout.width <= e.nativeEvent.layout.height) {
-            width = e.nativeEvent.layout.height;
-        } else {
-            width = e.nativeEvent.layout.width + this.props.extraPaddingHorizontal;
-        }
-
-        width = Math.max(width, this.props.minWidth);
-        if (this.width === width) {
-            return;
-        }
-
-        this.width = width;
-        const height = Math.max(e.nativeEvent.layout.height, this.props.minHeight);
-        const borderRadius = height / 2;
-        this.container.setNativeProps({
-            style: {
-                width,
-                height,
-                borderRadius
-            }
-        });
-    };
-
     render() {
         return (
-            <View
-                ref={this.badgeRef}
-                style={[styles.container, this.props.style]}
-            >
+            <View style={[styles.badge, this.props.style]}>
                 <TouchableWithoutFeedback onPress={this.props.onPress}>
-                    <View>
+                    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                         {this.renderText()}
                     </View>
                 </TouchableWithoutFeedback>
@@ -104,3 +49,20 @@ export default class Badge extends PureComponent {
         );
     }
 }
+
+const styles = StyleSheet.create({
+    badge: {
+        top: 2,
+        padding: 12,
+        paddingTop: 3,
+        paddingBottom: 3,
+        backgroundColor: '#444',
+        borderRadius: 20,
+        position: 'absolute',
+        right: 30
+    },
+    text: {
+        fontSize: 14,
+        color: 'white'
+    }
+});

app/scenes/channel/channel_drawer_button.js

@@ -23,11 +23,16 @@ function ChannelDrawerButton(props) {
 
     if (badgeCount !== 0) {
         const badgeStyle = {
-            position: 'absolute',
-            top: 5,
-            left: 5,
+            backgroundColor: 'rgb(214, 73, 70)',
+            borderRadius: 10,
             flexDirection: 'row',
-            backgroundColor: 'rgb(214, 73, 70)'
+            height: 20,
+            left: 5,
+            padding: 3,
+            position: 'absolute',
+            right: 0,
+            top: 5,
+            width: 20
         };
 
         const mentionStyle = {