React Native component for inline text and elements

InlineTextAndElements.js

import React from 'react';
import { View } from 'react-native';
import { flatMap, map } from 'lodash';

import { utils } from '../theme';
import Text from './Text';

const InlineTextAndElements = (props) => {
  const { children, containerProps, ...restProps } = props;

  const elements = flatMap(children, (child, i) => {
    if (typeof child === 'string') {
      const words = child.split(' ');
      return map(words, (word, j) => (
        <Text {...restProps} key={`${i}_${j}`}>
          {i > 0 && j === 0 && ' '}{word}{' '}
        </Text>
      ));
    }
    return child;
  });

  return (
    <View style={[utils.row, utils.flexWrap, utils.flexEndItems]}>
      {elements}
    </View>
  );
};

export default InlineTextAndElements;