There is no paste option for input field, is this a bug or?

Seems like when using version 5.0.0 in Android the height is not changed when needed. In previous versions, I was using the fix at #28, but now, the method _handleNativeEvent doesn't exist.
This is so weird, the purpose of this lib is to grow automatically, and that's not working...
10x,
EyalS

The Readme has instructions to manually link the libAutoGrow to the Xcode project:

Native side installation

To fix the issue with the height not being set for initial values ... add the libAutoGrowTextInput to your project ...

The React Native CLI can now do this automatically with one simple command:
react-native link

I have both of these inputs set to fontSize: 40, yet the AutoGrowingTextInput looks 10% larger:

<AutoGrowingTextInput
          returnKeyType={returnKeyType}
          autoCapitalize="none"
          editable={editable}
          underlineColorAndroid={underlineColorAndroid}
          clearButtonMode="while-editing"
          selectionColor={styleConstants.color.primary}
          autoFocus={autoFocus}
          style={[stylesConfig.textInputRowStyle, { width: '100%', textAlign: 'left', fontSize: 40 }]}
          defaultValue={value}
          value={value}
          ref={input => (this.input = input)}
          onSubmitEditing={onSubmitEditing}
          onFocus={this.onActiveChange}
          onChangeText={onChange}
        />

<TextInput
          keyboardType="email-address"
          returnKeyType={returnKeyType}
          autoCapitalize={autoCapitalize}
          editable={editable}
          underlineColorAndroid={underlineColorAndroid}
          clearButtonMode="while-editing"
          selectionColor={styleConstants.color.primary}
          autoFocus={autoFocus}
          style={[stylesConfig.textInputRowStyle, { fontSize: 40}]}
          defaultValue={value}
          value={value}
          ref={input => (this.input = input)}
          onSubmitEditing={onSubmitEditing}
          numberOfLines={numberOfLines}
          onFocus={this.onActiveChange}
          onChangeText={onChange}
        />

const stylesConfig = StyleSheet.create({
  textInputRowStyle: {
    textAlign: 'right',
    flex: 1,
    fontSize: styleConstants.fontSize.lg,
    color: styleConstants.color.primary,
  }
});

Environment:
  OS: macOS Sierra 10.12.6
  Node: 9.7.1
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.1 AI-173.4819257

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

It seems that RN > 0.48 can't bind anymore RCTTextView with textViewDidChange

While compiling with RN 0.48.1 I've got this error thrown:

`/node_modules/react-native-autogrow-textinput/ios/AutogrowTextInputManager.m:31:13: error: no visible @interface for 'RCTTextView' declares the selector 'textViewDidChange:'
[self textViewDidChange:textView];
~~~~ ^~~~~~~~~~~~~~~~~
1 error generated.

** BUILD FAILED **`

If I switch back to RN 0.47.2 it's working fine.

Any idea of what is going wrong here?

Is there a version of this library that is known to work on Android, for react native version 0.46.4?
Latest library version does not work, tried some other versions without success... upgrading RN is not an option for my project.

It's not finding <React/RCTTextView.h as well.

Using it with React Native 0.62.0 is crashing the app while debugging and release mode.

Error is thrown: ... cannot be cast to android.view.ViewGroup

Why the increase is not proportional?

import React from 'react'
import PropTypes from 'prop-types'
import { AutoGrowingTextInput } from 'react-native-autogrow-textinput'

const AutoGrowingText = ({ value, onChangeText, placeholder }) => {
  const { textInput } = styles

  return (
    <AutoGrowingTextInput 
      value={value}
      style={textInput} 
      placeholder={placeholder} 
      onChangeText={onChangeText}
    />
  )
}

const styles = {
  textInput: {
    fontSize: 16,
    fontFamily: 'AppleSDGothicNeo-Light',
    paddingRight: 5,
    paddingLeft: 10,
    color: '#474747',
    backgroundColor: 'gold'
  },
}

AutoGrowingText.propTypes = {
  value: PropTypes.string,
  placeholder: PropTypes.string,
  onChangeText: PropTypes.func,
}

export { AutoGrowingText }

Pressing the Done on the keyboard creates a new line when what I want is for the function in onSubmitEditing to be called.

<AutoGrowingTextInput
	style={styles.input}
	value={this.state.title}
	autoFocus={true}
	onSubmitEditing={this.addTask.bind(this)}
	onChangeText={(title) => this.setState({title})}
	returnKeyType="done"
	placeholder="Add task..."			
/>

Any fix or workaround would be greatly appreciated

Hello!
Have noticed that the default text color for the component's placeholder's text is black, while in the TextInput component, that is a basis of this component, the default color is '#C7C7CD'. Same with your example. On the gif, the color is '#C7C7CD', in the code it is black.

This is a minor issue, but still solving it could save up some time for the newcomers. So that they do not need to google "how to set text color of the placeholder" and "what is the default color of the placeholder".

Just add this property (placeholderTextColor='#C7C7CD') to your example code.

Good luck! Thanks for the great component!

P.S. Also, I have noticed, that the placeholder's text does not stay in the vertical center of the component on-screen. But this might be something personal, have not digged into.

Becasue of React.Proptypes, you know.

Does this work with Expo?

Running [email protected] with Cocoapods. Received this CLI message on pod install:

[!] use_native_modules! skipped the react-native dependency 'react-native-autogrow-textinput'. No podspec file was found.
    - Check to see if there is an updated version that contains the necessary podspec file
    - Contact the library maintainers or send them a PR to add a podspec. The react-native-webview podspec is a good example of a package.json driven podspec.
    See https://github.com/react-native-community/react-native-webview/blob/master/react-native-webview.podspec
    - If necessary, you can disable autolinking for the dependency and link it manually. See
    https://github.com/react-native-community/cli/blob/master/docs/autolinking.md#how-can-i-disable-autolinking-for-unsupported-library

import {AutoGrowingTextInput} from "react-native-autogrow-textinput";

<AutoGrowingTextInput
            style={styles.textInput}
            placeholder={I18n.t("chatRoom.typeMessage")}
            placeholderTextColor="#868B97" //$paletteGrey2
            underlineColorAndroid='rgba(0,0,0,0)'
            enablesReturnKeyAutomatically={true}
            value={this.state.text}
            onChangeText={text => this.setState({text})}
            blurOnSubmit={false}
            returnKeyType='send'
            onSubmitEditing={this.sendMessage}
          />

style

textInput:           {
    alignSelf:       "center",
    height:          30,
    width:           100,
    backgroundColor: "$white",
    color:           "$colorTextDark",
    flex:            1,
    padding:         0,
    margin:          0,
    fontSize:        15,
  },

R : 0.41.2
RN : 15.5.4

How is this library useful when I can't use it inside scroll view? What am I missing? :)

For some reasons, placeholder text doesn't seem to obey textAlign: 'center' style prop. The actual text is center, its just the placeholder.
Thanks.

When I type and the limit of input box is complete, the AutoGrow TextInput doesn't broke lines, but created scrolling inside input box. How can I fix this ?

If the value that is being set into the TextInput has Emojis, they're cut off and the box still has a scroll. Pleas take into consideration the size difference between normal text and Emojis, I've noticed that by rule of thumb FontSize+8 seems to do the trick, but I haven't messed with any large font-sizes with Emojis, 16 being the maximum and 12 being the minimum.

If the input is filled with Emojis it doesn't resize at all.

Hi today i suddenly got this problem

node_modules/react-native-autogrow-textinput/android/src/main/java/com/wix/autogrowtextinput/AutoGrowTextInputModule.java:55: error: cannot find symbol                 editText.setBlurOnSubmit(false);

can u help?

This change:

facebook/react-native@bac84ce

Will mean you can no longer get the contentSize from "onChange" events, and will need to use "onContentSizeChange" instead.

Hi,

I have some initial multiline content that should be displayed in TextInput once it opened. Now autogrow-text-input always starts with empty state. This could be easily fixed by setting correct state this.state = {text: this.props.value || '', height: 0}; but TextInput should also update its height on that time corresponding given content. Could you please investigate how to do it?

Getting this are using the component in the freshly installed 'react-native-cli" project.

rn0.50

• also when trying to scroll the input it take on focus and the keyboard pops up.

Hi! Nice package!

I noticed it doesn't expose the internal TextFields clear or isFocused methods. I've created a small pull request that implements these

When I'm typing multiple line sentence on autogrow-textinput. it always shows only first three lines only.
I have to manually scroll down to the bottom. To see what I am typing.

<AutoGrowingTextInput ref={(r) => { this._textInput = r; }} value={this.props.text} onChange={(event) => this.onChangeText(event.nativeEvent.text)} style={styles.editor} placeholder={"Type here"} placeholderTextColor="#a5b3b6" minHeight={30} maxHeight={60} />

react-native-autogrow-textinput: 4.1.0
react-native: 0.38
os: android 7.0
device: sumsung A5

react v16.2.0
react-native v0.50.4
react-native-autogrow-textinput v4.1.3

So basically after upgrading react-native from v48 to v50 this happens to the package.
Any ideas??

I noticed in the line below there's double async to main queue. Its really weird to write it this way. Is there a rationale for this?

https://github.com/wix/react-native-autogrow-textinput/blame/master/ios/AutogrowTextInputManager.m#L89-L90

<ScrollView>
<<AutoGrowTextInput/>
<View/>
<View>
</ScrollView>

In this setup the TextInput scrolls seperately when the textinput is focused(or when keyboard is open)
The expected result would parent scrollview working.
But textinput has a seperate scroll.
Anyway to fix this issue?
Thanks in advance.

PS: scrolling works proper if the textinput is not in focus.

I have two AutoGrowTextInput's:

<AutoGrowingTextInput onChange={(event) => this._onChange(event)}
    style={styles.textInput}
    placeholder={'Your Message'}
    maxHeight={200}
    ref='test1'/>
<AutoGrowingTextInput onChange={(event) => this._onChange(event)}
    style={styles.textInput}
    placeholder={'Your Message'}
    maxHeight={200}
    ref='test2'/>

If I enter a lot of text in the first input it eventually overlaps the second:

Is there any way to fix this?

Any plans to make this available for web via react-native-web?

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

A few ios users are complaining that the letter I is turning into uppercase automatically, does anyone have any idea why? And one other told that all words were doing this all of a suden, even though the keyboard capital letters is disabled.

It may be related to this package because the app has many fields and all users that complained mentioned the only exact field that uses auto grow.

Hi,

upon installing in my project app, when I tried testing it the autogrow was not working. I can just auto scroll it but the height of the textinput is not adjusting. I'm using the latest version of React-Native

"react": "16.0.0-alpha.12",
"react-native": "0.46.4",

is this compatible to the latest version of RN?

LMK if you have questions.

I will also work on same functionality on Android, if you have ideas how it should be implemented, please share them with me.

Hey!

Cool component but it appears that I can't access setNativeProps since I can't pass down a ref to the TextInput. Passing it as a props might be a viable solution, but you need to expose the ref on the TextInput inside :)

Cheers

With React-Native 0.57 and react-native-autogrow-textinput 5.1.1, I'm trying to build a beta version, during the build I have the following error :

:app:assembleRelease
:react-native-autogrow-textinput:extractReleaseAnnotations UP-TO-DATE
:react-native-autogrow-textinput:mergeReleaseConsumerProguardFiles UP-TO-DATE
:react-native-autogrow-textinput:transformResourcesWithMergeJavaResForRelease UP-TO-DATE
:react-native-autogrow-textinput:transformClassesAndResourcesWithSyncLibJarsForRelease UP-TO-DATE
:react-native-autogrow-textinput:transformNativeLibsWithSyncJniLibsForRelease UP-TO-DATE
:react-native-autogrow-textinput:bundleRelease UP-TO-DATE
:react-native-autogrow-textinput:compileReleaseSources UP-TO-DATE
:react-native-autogrow-textinput:mergeReleaseResources UP-TO-DATE
:react-native-autogrow-textinput:verifyReleaseResources/Users/zedtux/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/f1cd761f58c96deaa16acc3d5f07445e/res/values-v26/values-v26.xml:9:5-12:13: AAPT: error: resource android:attr/colorError not found.

/Users/zedtux/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/f1cd761f58c96deaa16acc3d5f07445e/res/values-v26/values-v26.xml:13:5-16:13: AAPT: error: resource android:attr/colorError not found.

/Users/zedtux/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/f1cd761f58c96deaa16acc3d5f07445e/res/values-v26/values-v26.xml:17:5-93: AAPT: error: style attribute 'android:attr/keyboardNavigationCluster' not found.

/Users/zedtux/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/f1cd761f58c96deaa16acc3d5f07445e/res/values/values.xml:251:5-69: AAPT: error: resource android:attr/fontStyle not found.

/Users/zedtux/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/f1cd761f58c96deaa16acc3d5f07445e/res/values/values.xml:251:5-69: AAPT: error: resource android:attr/font not found.

/Users/zedtux/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/f1cd761f58c96deaa16acc3d5f07445e/res/values/values.xml:251:5-69: AAPT: error: resource android:attr/fontWeight not found.

error: failed linking references.
:react-native-autogrow-textinput:verifyReleaseResources FAILED

FAILURE: Build failed with an exception.

Here is the my android/build.gradle file :

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 26
        supportLibVersion = "27.1.1"
    }
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.4'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        google()
    }
}

subprojects {
    project.configurations.all {
        resolutionStrategy.eachDependency { details ->
            if (details.requested.group == 'com.android.support'
                    && !details.requested.name.contains('multidex') ) {
                details.useVersion "27.1.1"
            }
        }
    }
}


task wrapper(type: Wrapper) {
    gradleVersion = '4.4'
    distributionUrl = distributionUrl.replace("bin", "all")
}

(and neither does .setNativeProps({ text: '' }) )

"react-native": "0.55.4",
"react-native-autogrow-textinput": "^5.1.1",

          <AutoGrowingTextInput 
            ref='command'
            onChangeText={(command) => this.setState({command: command})}
            maxHeight={140}
            style={styles.command} 
            blurOnSubmit={false}
            onSubmitEditing={(e) => {
              this._pushMessage();
            }}
          />

  _pushMessage() {
    if(!this.state.command) return;
    let data = { score: -(moment().toDate().getTime()), body: this.state.command }
    this.references.messages.push().set(data)

    console.log("clear");
    this.refs.command.clear();
}