/* @flow */
import { connect } from 'react-redux';

import React, { PureComponent } from 'react';
import { StyleSheet, Image } from 'react-native';

import type { GlobalState } from '../types';
import { getActiveRealmEmojiById } from '../selectors';

const styles = StyleSheet.create({
  image: {
    width: 20,
    height: 20,
  },
});

type Props = {
  realmEmoji: {},
  name: string,
};

class RealmEmoji extends PureComponent<Props> {
  props: Props;

  render() {
    const { name, realmEmoji } = this.props;

    if (!realmEmoji[name]) {
      return null;
    }

    return <Image style={styles.image} source={{ uri: realmEmoji[name].source_url }} />;
  }
}

export default connect((state: GlobalState) => ({
  realmEmoji: getActiveRealmEmojiById(state),
}))(RealmEmoji);

@@ -217,18 +217,20 @@
 mEmojiBy
-Id
+Name
  %7D from 
@@ -346,25 +346,31 @@
 Props = %7B%0A  
-r
+activeR
 ealmEmoji: %7B
@@ -366,16 +366,22 @@
 almEmoji
+ByName
 : %7B%7D,%0A  
@@ -494,17 +494,23 @@
 %7B name, 
-r
+activeR
 ealmEmoj
@@ -510,16 +510,22 @@
 almEmoji
+ByName
  %7D = thi
@@ -543,17 +543,23 @@
    if (!
-r
+activeR
 ealmEmoj
@@ -555,24 +555,30 @@
 veRealmEmoji
+ByName
 %5Bname%5D) %7B%0A  
@@ -655,17 +655,23 @@
 %7B%7B uri: 
-r
+activeR
 ealmEmoj
@@ -671,16 +671,22 @@
 almEmoji
+ByName
 %5Bname%5D.s
@@ -761,17 +761,23 @@
 =%3E (%7B%0A  
-r
+activeR
 ealmEmoj
@@ -777,16 +777,22 @@
 almEmoji
+ByName
 : getAct
@@ -810,10 +810,12 @@
 jiBy
-Id
+Name
 (sta

Use new by-name emoji selector.