this is my first stackoverflow question, please bare with me if I do anyhting wrong. Here goes my question: how do I restrict the number of lines in a textInput using react? I have to say im new to react and dont know if i am doing it wrong. I have searched for this question before asking this one and they recommend to use maxheight. Ive tried it and it doesnt work. this is my code. I am trying to restrict the number of written lines to 4. Currently, a textInput appears but i can write more thatn 4 lines.
import React, { Component } from 'react';
import { TextInput } from 'react-native';
export default class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = { text: 'Write something' };
}
render() {
return (
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
multiline={true}
numberOfLines={5}
/>
);
}
}
Any type of help is very much appreciated.
Related
I am trying to use react-native-snap-carousel but however, the swiping effect is not working as expected - it is often difficult to swipe left and right, it requires user to swipe harder to move to another picture (as illustrated in the link below).
Swiping issue with React Native Snap Carousel
I am not able to find any documented soluton but I found one possible prop - swipeThreshold. I try various value, but still the issue persist.
Does anyone know the solution to this?
I suggest you to use react-native-image-slider.
it's flexible and easy to use.
https://www.npmjs.com/package/react-native-image-slider
I made a component named slider.js:
import React, { Component } from 'react';
import {
View,
StyleSheet,
Image,
} from 'react-native';
import ImageSlider from 'react-native-image-slider';
export default class Slider extends Component {
render() {
return (
<ImageSlider
loop
autoPlayWithInterval={3000}
images={this.props.dataSource}
customSlide={({ index, item, style, width }) => (
<View key={index} style={[style, styles.customSlide]}>
<Image source={{ uri: item }} style={styles.customImage} />
</View>
)}
/>
);
}
}
const styles = StyleSheet.create({
customImage: {
height: 180,
marginRight: 20,
marginLeft: 20,
borderWidth: 1,
borderRadius: 10,
marginTop: 8,
},
customSlide: {
backgroundColor: '#eee',
},
});
you can add this to your project and use it wherever you need it like this:
import Slider from '../component/slider';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
images: [
'https://placeimg.com/640/480/nature',
'https://placeimg.com/640/480/tech',
'https://placeimg.com/640/480/animals',
'https://placeimg.com/640/480/tech',
],
}
render() {
return (
<View style={{flex: 1, backgroundColor: '#eee'}}>
<Slider dataSource={this.state.images} />
</View>
);
}
}
I tried to create a search bar using react native elements. When I ran the code, a search bar appeared, but it would not let me type text inside of it. As a matter of fact, the search bar did not even occupy the top part of the simulator. It was like the size of a small button. It looked like an icon or still image that would not let me input text. Has this ever happened to anyone? Below is the code I wrote up. Anybody know what could be the issue? I installed RN elements and linked it. I even NPM installed just for the heck of it and nothing happened. Any help or leads would be appreciated. Here is the link to the search bar I am trying to create:
https://react-native-training.github.io/react-native-elements/docs/searchbar.html#docsNav
import { SearchBar } from 'react-native-elements';
export default SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
search: ""
};
updateSearch = search => {
this.setState({ search });
};
}
render(){
return(
<SearchBar
containerStyle={{
backgroundColor: "white",
borderBottomWidth: 1,
borderRadius: 1 1
}}
inputStyle={{ backgroundColor: "white" }}
placeholder="Type Here..."
placeholderTextColor={ "White" }
onChangeText={this.updateSearch}
value={search}
/>
)
}
}
I think the problem is ,
value={search}
this should be,
value={this.state.search}
Or you should take state in a variable,
render(){
const { search } = this.state;
return(
Note: You have written updateSearch method inside of constructor, you need to write is outside of constructor (if not a typo)
This is the example from link provided by you,
import { SearchBar } from 'react-native-elements';
export default class App extends React.Component {
state = {
search: '',
};
updateSearch = search => { //This function is outside of constructor
this.setState({ search });
};
render() {
const { search } = this.state; //You missed this
return (
<SearchBar
placeholder="Type Here..."
onChangeText={this.updateSearch}
value={search}
/>
);
}
}
you need to call the value set in your constructor using this.state.search
Like a title, I want to disable a submit button (Search) on device's keyboard if text input is an empty string.
I creating a search bar and using TextInput.
How can I do this?
you should have 2 state (textSearch and buttonStatus) and check every onChangeText in TextInput props
here's a simple code I've used:
import React, {Component} from 'react';
import RN, {View, StyleSheet, Text} from 'react-native';
export default class History extends Component {
constructor(props) {
super(props);
this.state={
search:null,
disabledButton:true
}
}
render(){
return(
<View style={styles.container}>
<RN.TextInput
value={this.state.search}
onChangeText={(e)=>{
this.setState({search:e, disabledButton:e==""?true:false})
}}
/>
<RN.Button
title="Search"
disabled={this.state.disabledButton}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{flex:1, justifyContent:'center', alignItems:'center'}
})
this is the first time I've provided help here, so hopefully it helps someone.
The inputText should be whatever state you use to store your text.
addItem() is whatever function name you want to execute when there are enough characters.
I wanted to require the user to type more than 1 character, so adjust to your liking.
onSubmitEditing={() => {(inputText.length < 2) ? console.log('test') : addItem()}}
<TextInput
style={styles.input}
onSubmitEditing={() => {
(inputText.length < 2) ? console.log('test') : addItem()
}}
maxLength={20}
autoCorrect={false}
onChangeText={onChangeText}
placeholder={'Scavenger Hunt Item'}
value={inputText}>
</TextInput>
I am trying to build an input field which will only take numbers as input. Minimal component definition to explain my problem is as below
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
text: 'PlaceHolder'
}
}
sanitizeInput(input) {
let sanitizedInput = input.replace(/[^0-9]/g, '');
this.setState({text: sanitizedInput});
}
render() {
console.log("In render - ", this.state.text);
return (
<View style={{flex: 1, justifyContent: 'center'}}>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.sanitizeInput(text)}
value={this.state.text}
/>
</View>
);
}
}
But, when I am executing it, I am not getting the desired result. It seems that the TextInput is not respecting the value prop passed into it. The console.log is clearly showing desired value to be shown in TextInput, but I am not able to get that value properly in TextInput of device.
A video describing my problem is posted here
How can we handle two events at the same time for React Native text input? For example, in my component I want the text to change when I am typing and submit when I am hit enter. I tried with the code below and it did not work but I think that's the idea
<TextInput onChangeText={this.functionA} onSubmitEditing={this.functionB}></TextInput>
Here what i have done testing and checking for you.
import React, { Component } from 'react';
import { AppRegistry, TextInput, View } from 'react-native';
export default class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
}
functionA(){
alert('AAA');
}
functionB(){
alert('BBB');
}
render() {
return (
<View style={{paddingTop:40}}>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
// onChangeText={(text) => this.setState({text})}
onChangeText={this.functionA} onSubmitEditing={this.functionB}
value={this.state.text}
/>
</View>
);
}
}
Please make sure you have read the Document
And moreover, you should understand:
onChangeText is called when the text input's text changes.
============
onSubmitEditing is called when the text input's submit button is pressed.
Hope this will help you to figure and guide you more information.