wix-incubator / react-native-autogrow-textinput Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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.
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
<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.
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
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 ?
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?
There is no paste option for input field, is this a bug or?
Does this work with Expo?
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?
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.
This change:
Will mean you can no longer get the contentSize from "onChange" events, and will need to use "onContentSizeChange" instead.
For some reasons, placeholder text doesn't seem to obey textAlign: 'center'
style prop. The actual text is center, its just the placeholder.
Thanks.
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?
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
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
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
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?
(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();
}
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 }
rn0.50
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.
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
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
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.
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
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?
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
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?
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 FAILEDFAILURE: 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")
}
It's not finding <React/RCTTextView.h as well.
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.
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
How is this library useful when I can't use it inside scroll view? What am I missing? :)
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.