Emojis in React Native text

emoji-text.js

import React from 'react'
import { Text } from 'react-native'
import emojiRegex from 'emoji-regex'
import { map, split, reduce, get, last } from 'lodash'

export default ({ text, textStyle = {}, emojiStyle = {}, keySalt = Date.now() }) => {
    const taggedSymbols = map(split(text, ''), symbol => ({ symbol, emoji: emojiRegex().test(symbol) }))

    const sectionedSymbols = reduce(taggedSymbols, (sections, taggedSymbol, index) => {
        if(taggedSymbol.emoji !== get(taggedSymbols, `${index - 1}.emoji`)) {
            sections.push({ symbols: [], emoji: taggedSymbol.emoji })
        }

        last(sections).symbols.push(taggedSymbol.symbol)
        return sections
    }, [])

    return map(sectionedSymbols, ({ symbols, emoji }, index) => {
        if(emoji) {
            return <Text numberOfLines={1} style={emojiStyle} key={`text:${keySalt}:${index}`}>{symbols.join('')}</Text>
        }

        return <Text numberOfLines={1} style={textStyle} key={`text:${keySalt}:${index}`}>{symbols.join('')}</Text>
    })
}

usage.js

import React from 'react'
import { StyleSheet } from 'react-native'
import EmojiText from 'emoji-text'

export default ({ name, groupId }) => (
    <EmojiText
        text={name}
        textStyle={[styles.text, styles.name]}
        emojiStyle={[styles.text, styles.emoji]}
        keySalt={`group:${groupId}:name`} />
)

const styles = StyleSheet.create({
    text: {
        fontFamily: vs.fonts.sans,
        fontWeight: '700'
    },
    name: {
        fontSize: 16,
        color: vs.colors.grayDark
    },
    emoji: {
        marginTop: -6
    }
})