Enter key did not insert new line

[manrashid]

On Android emulator it works. But not on device. RN 0.43.4. Probably this issue?
facebook/react-native#12717

[manrashid]

Until they fix it, add this as solution. From renehauck:
onSubmitEditing={() => {
if (!this.state.postText.endsWith("\n")) {
let postText = this.state.postText;
postText = postText + "\n";
this.setState({ postText: postText })
}
}}

[vendramini]

I tried the other solution (on the same post) that add new line between words, and it works "ok".
But another problem arises now: the autogrow doesn't work. I noticed that the onChange event isn't dispatching, so i forced it:

<AutoGrowingTextInput
    ref="descriptionTextInput"
    style={styles.textInput}
    blurOnSubmit={false}
    onChangeText={(text) => {
        this.setState({ text });
    }}
    onChange={(event) => {this.nativeEvent = event.nativeEvent}} //save the nativeEvent to pass as parameter later
    value={this.state.text}
    onSelectionChange={(event) => this.setState({ cursorPosition: event.nativeEvent.selection.start })}
    onSubmitEditing={this.onSubmitEditingDescription.bind(this)}
    />

On constructor:

constructor(props) {
        super(props);

        this.state = { text: ''};

        this.onSubmitEditingDescription = debounce(this._onSubmitEditingDescription, 100, true); //prevent android to dispatch the event twice (google it)
    }

Now the function that add new line and force the new height:

_onSubmitEditingDescription(event) {
            const { text, cursorPosition } = this.state;

            let newText = text;
            const ar = newText.split('');
            ar.splice(cursorPosition, 0, '\n');
            newText = ar.join('');

            this.setState({ text: newText });
            this.refs.descriptionTextInput._handleNativeEvent({contentSize: {height: this.nativeEvent.contentSize.height + 30}});
    }

I used +30 because this size fits to my needs.

What do u think? Is there some other smart way to solve this?

[artald]

hey guys, thanks for reporting about it.
I pushed a fix that I hope will solve it for your case as well.

available in version 4.0.0

[vendramini]

artald, thanks for your push!

I tested here and i've got exactly the same behavior described above. I removed the line that I'm forcing the _handleNativeEvent expecting the textinput's height to be updated correctly, but nothing happens.

I still have to force the event. Am I doing something wrong?

My test scenario was: a clean <AutoGrowingTextInput> with the workaround to add new line.

• "react": "16.0.0-alpha.6"
• "react-native": "0.44.0"

[artald]

@vendramini that's strange, maybe something in your layout is breaking it. We saw different results between iOS and Android where a certain layout was fine for iOS but broke Android.

Can you try to run the example project and see if it works for you?

[manrashid]

Well. I updated autogrow to the latest. Still the same issue on my users' android device. I gave up. I just tell the users to download and use Gboard (Google Keyboard). Insert new line for multiline textInput just works with Gboard on android.

[vendramini]

@manrashid, it's not an autogrow-textinput issue, this new line's problem came from RN, for whatever reason.

@artald, I ran the example and it works as expected without the workaround for new line. With the workaround, the component isnt updated. Try yourself, it's exactly your example plus the workaround:

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View, TouchableOpacity, Platform} from 'react-native';

import {AutoGrowingTextInput} from 'react-native-autogrow-textinput';
import debounce from 'debounce';

class example extends Component {
    constructor(props) {
        super(props);
        this.state = {textValue: 'My initial\nText', shortProductDescription: ''};
        this.onSubmitEditingDescription = debounce(this._onSubmitEditingDescription, 100, true);
    }

    _onSubmitEditingDescription(event) {
        const { shortProductDescription, cursorPosition } = this.state;

        let newText = shortProductDescription;
        const ar = newText.split('');
        ar.splice(cursorPosition, 0, '\n');
        newText = ar.join('');

        this.setState({ shortProductDescription: newText });
        this.refs.descriptionTextInput._handleNativeEvent({contentSize: {height: this.nativeEvent.contentSize.height + 30}});
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Auto Growing TextInput Example
                </Text>
                <View style={styles.textInputContainer}>
                    <AutoGrowingTextInput
                        style={styles.textInput}
                        ref="descriptionTextInput"
                        blurOnSubmit={false}
                        onChangeText={(text) => {
                            this.setState({ shortProductDescription: text });
                        }}
                        onChange={(event) => {this.nativeEvent = event.nativeEvent}}
                        value={this.state.shortProductDescription}
                        onSelectionChange={(event) => this.setState({ cursorPosition: event.nativeEvent.selection.start })}
                        onSubmitEditing={this.onSubmitEditingDescription.bind(this)}
                    />
                    <TouchableOpacity style={styles.button} onPress={() => this._resetTextInput()}>
                        <Text>Clear</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    _onChange(event) {
        this.setState({ textValue: event.nativeEvent.text || '' });
    }

    _resetTextInput() {
        this.refs.descriptionTextInput.clear();
        this.refs.descriptionTextInput.resetHeightToMin();
    }
}

const IsIOS = Platform.OS === 'ios';
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#76c6ff'
    },
    textInputContainer: {
        flexDirection: 'row',
        paddingLeft: 8,
        paddingRight: 8
    },
    welcome: {
        marginTop: 100,
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    textInput: {
        paddingLeft: 10,
        fontSize: 17,
        flex: 1,
        backgroundColor: 'white',
        borderWidth: 0,
        borderRadius: IsIOS ? 4 : 0,
    },
    button: {
        paddingLeft: 5,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

AppRegistry.registerComponent('example', () => example);

Type something, then add breaks between words. The height is not updated, so i've to force the event as I said above.

Thanks!

UPDATE
It's not mandatory to use debounce, you could comment it and change the function's name to bind on line 43. debounce is used to prevent some Androids to dispatch the event twice.

[artald]

@vendramini

it works as expected without the workaround

So I'm not sure i completely understand - if it works, then why add the workaround? :)
Am I missing something here?

[vendramini]

@artald, maybe is ambiguous the way I put. When I said "it works" I mean: the text input is auto growing. But the problem still: RN isn't adding new line when press <enter>. So we need to add the workaround. When added and we press break, the height is not updated.

See: facebook/react-native#12717

How are you dealing with breaks in multiline text input?

[artald]

@vendramini okay, now I got what you're saying. Yes, I guess it's a new bug in RN.
We've just started an upgrade process from RN38 to RN44, so don't know how to handle this just yet.

[vendramini]

@artald ok, for now I'm going to use the workaround as suggested on that link plus forcing your update event, It's working well, but not coded as I would like.

Some news about that I back here.

Thanks!

[abhishekgargx]

@vendramini thankyou so much , this is also working with default Text Input component from react native.