TextInput maxlength cuts Unicode caracters (Emojis)

[jpolack]

Hello everyone,

yesterday i noticed that a TextInput has a problem displaying Emojis at the end of the fields maxlength.
If i insert the "white happy man with black hair raising one hand" Emoji (iOS) at the position maxlength-1 it shows a square with an "A" in it instead.
If i insert the "white happy man with black hair raising one hand" Emoji (iOS) at the position maxlength-2 it shows a square with an "yellow happy woman with blonde hair raising one hand" in it instead.
If i insert the "white happy man with black hair raising one hand" Emoji (iOS) at the position maxlength-3 it shows a square with an "white happy woman with black hair raising one hand" in it instead.
If i insert the "white happy man with black hair raising one hand" Emoji (iOS) at the position maxlength-4 it shows a square with an "yellow happy woman with blonde hair raising one hand" and the square with an "A" in it instead.

Seems like the maxlength cuts the unicode sign at the end and causes to show different Emojis than inserted

• React Native version: 0.36
• Platform: iOS - tested on iOS 10.1.1

[ericvicenti]

Might be related to this?

#10929

[hramos]

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

[euharrison]

This also happen with me.

We have maxLength={4} and this is what happen in different cases:

• type: mmmm then works perfect
• type mm😀 then it reach the limits (emojis count 2 characters)
• type 😀😀 then it reach the limits (emojis count 2 characters)
• type m😀😀 then it breaks the limits with "5" characteres and bug cleaning all text

[KavithaSaras]

@euharrison can you please share this plugin link?

[euharrison]

@KavithaSaras sorry, which plugin?

My solution was to set a dynamic maxLength that resolve this:

import React from 'react';
import { TextInput } from 'react-native';

const MAX_LENGTH = 95;

class MessageInput extends React.Component {
  constructor(props) {
    super(props);

    this.valueLength = 0;
    this.amountOfEmoji = 0;

    this.state = {
      value: '',
      maxLength: MAX_LENGTH,
    }
  }
  
  onChangeText = (text) => {
    // if text.length increased by 2, then the user has typed an emoji
    if ((text.length - this.valueLength) === 2) {
      this.amountOfEmoji += 1;
    }

    // maxLength will be increased to support emoji as only one character count
    let maxLength = MAX_LENGTH + this.amountOfEmoji;

    // if missing only one character to be typed, reduce maxLength to avoid emoji breaks the TextInput
    if (text.length >= (MAX_LENGTH + this.amountOfEmoji) - 1) {
      maxLength = text.length;
    }

    this.setState({ value: text, maxLength });
    this.valueLength = text.length;
  }

  render() {
    return (
      <TextInput
        editable
        value={this.state.value}
        maxLength={this.state.maxLength}
        onChangeText={this.onChangeText}
      />
    )
  }
}