import React from 'react'; import PropTypes from 'prop-types'; import { Text, View, TouchableOpacity, Platform } from 'react-native'; import { emojify } from 'react-emojione'; import { responsive } from 'react-native-responsive-ui'; import styles from './styles'; import CustomEmoji from './CustomEmoji'; const emojisPerRow = Platform.OS === 'ios' ? 8 : 9; const renderEmoji = (emoji, size) => { if (emoji.isCustom) { return <CustomEmoji style={[styles.customCategoryEmoji, { height: size - 8, width: size - 8 }]} emoji={emoji} />; } return ( <Text style={[styles.categoryEmoji, { height: size, width: size, fontSize: size - 14 }]}> {emojify(`:${ emoji }:`, { output: 'unicode' })} </Text> ); }; const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve)); @responsive export default class EmojiCategory extends React.Component { static propTypes = { emojis: PropTypes.any, window: PropTypes.any, onEmojiSelected: PropTypes.func, emojisPerRow: PropTypes.number, width: PropTypes.number }; constructor(props) { super(props); const { width, height } = this.props.window; this.size = Math.min(this.props.width || width, height) / (this.props.emojisPerRow || emojisPerRow); this.emojis = []; } componentWillMount() { this.emojis = this.props.emojis.slice(0, emojisPerRow * 3).map(item => this.renderItem(item, this.size)); } async componentDidMount() { const array = this.props.emojis; const temparray = []; let i; let j; const chunk = emojisPerRow * 3; for (i = chunk, j = array.length; i < j; i += chunk) { temparray.push(array.slice(i, i + chunk)); } temparray.forEach(async(items) => { await nextFrame(); this.emojis = this.emojis.concat(items.map(item => this.renderItem(item, this.size))); this.forceUpdate(); await nextFrame(); }); } shouldComponentUpdate() { return false; } renderItem(emoji, size) { return ( <TouchableOpacity activeOpacity={0.7} key={emoji.isCustom ? emoji.content : emoji} onPress={() => this.props.onEmojiSelected(emoji)} > {renderEmoji(emoji, size)} </TouchableOpacity>); } render() { return <View style={styles.categoryInner}>{this.emojis}</View>; } }