emojiStrip.js

import React, { Component, StyleSheet, View } from 'react-native';
import Emoji from './emoji';

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 5,
    marginBottom: 5,
  },
});

export default class EmojiStrip extends Component {

  constructor(props) {
    super(props);
    this.state = { selected: null, emoji: 'hello' };
    this.emojis = ['smiley', 'neutral_face', 'disappointed', 'x'];
  }

  onSelectEmoji = (emoji) => this.setState({ selected: emoji });

  isEmojiSelected = (emoji) => {
    if (this.state.selected === emoji) {
      return true;
    }
    return false;
  }

  renderEmojis = () => this.emojis.map((emoji, index) =>
    <Emoji
      key={index}
      emoji={emoji}
      enabled={this.isEmojiSelected(emoji)}
      onSelectEmoji={this.onSelectEmoji}
    />
  );

  render() {
    return (
      <View style={styles.container}>
        {
          this.renderEmojis()
        }
      </View>
    );
  }
}