`TextInput`: Underline for Japanese IME composition text is missing in v5 (MD3)

[kazuya32]

Current behaviour

After upgrading react-native-paper from v4 to v5, the underline for Japanese IME (Input Method Editor) composition text has disappeared from the TextInput component. This underline is a standard UI element that indicates the text is in an unconfirmed state, and its absence is a regression in usability for users typing in Japanese.

Expected behaviour

As was the case in v4, an underline should appear beneath the text that is being composed and is not yet confirmed by the user. This provides a crucial visual cue to distinguish between unconfirmed and confirmed text.

How to reproduce?

Here is a simple code snippet to reproduce the issue:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { PaperProvider, TextInput, MD3LightTheme } from 'react-native-paper';

export default function App() {
  const [text, setText] = React.useState('');

  return (
    <PaperProvider theme={MD3LightTheme}>
      <View style={styles.container}>
        <TextInput
           label="Enter Japanese text"
           value={text}
           onChangeText={setText}
           style={{ width: '80%' }}
         />
       </View>
     </PaperProvider>
  );
 }

 const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
  },
 });

What have you tried so far?

I have attempted several methods to resolve this issue, but none have been successful so far:

1. Customizing the MD3 Theme:

   • I tried overriding various color properties within the MD3LightTheme object, including primary, onSurface, onSurfaceVariant, surface, and surfaceVariant.
   • Changing these colors affected other parts of the TextInput (like the border and label), but none of them restored the underline for the IME composition text.

2. Attempting to Revert to MD2 Behavior:

   • I configured the theme to use Material Design 2 by setting version: 2 and using MD2LightTheme as the base.

3. Applying Direct Props to TextInput:

   • I experimented with props like underlineColor and activeUnderlineColor on the TextInput component itself. This only affects the main, persistent underline of the
     flat mode input, not the temporary composition underline.

It seems the control over the IME composition underline style is not exposed through the current theme properties or component props in v5.

Your Environment

software	version
ios	18.5
react-native	0.79.5
react-native-paper	5.14.5
node	18.20.8
npm or yarn	10.8.2
expo sdk	53.0.20

[kazuya32]

This is a significant usability issue for users of CJK languages who rely on IMEs for text input. Any guidance on how to restore this functionality would be greatly appreciated. Thank you.

[kazuya32]

Hi, I found an important update.After further investigation, I've discovered this is caused by react native new architecture.

On my enviroment, the issue can be resolved by disabling the New Architecture in Expo's app.json:

{
  "expo": {
     "newArchEnabled": false
   }
}

So this issue may not due to react-native-paper. Hopefully, this information helps anyone else who encounters this problem.