I am following this link https://www.npmjs.com/package/react-native-material-textfield
But, I didn't get the Exact showing that input and When i was enter in Text not Showing in this filed.
Please Find Out my Issue
Here this my Code:
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<TextField style={{ opacity: 0 , marginLeft: windowSize.width / 1.4, color: 'red' }}
label='Phone number'
textColor={'red'}
value={this.state.userName}
labelHeight={40}
disabled={false}
labelPadding={1}
Bottom padding= {8}
labelHeight={32}
multiline={true}
blurOnSubmit={true}
//characterRestriction={10}
onChangeText={(data) => this.setState({ userName: data })}
/>
</View>
I want like this showing in given text filed in above link like that...
Related
I'm using react-native-paper Modal.
I used KeyboardAvoidingView but its not working. It working fine in android ,But it's not working in IOS.
I have specify behaviour as padding, position, height of KeyboardAvoidingView but it doesn't work
Please give any solution.
Screenshot on Android [1]: https://i.stack.imgur.com/UETKh.jpg
Screenshot on IOS[2]: https://i.stack.imgur.com/SIDib.png
My code is as below:
<Modal
contentContainerStyle={{ backgroundColor: 'white', padding: 20, borderRadius: 10, marginLeft: 30, marginRight: 30 }}
animationType="fade"
visible={this.state.dialogVisible}
>
<KeyboardAvoidingView behavior='padding' enabled>
<Text style={styles.descDialogInqueryFor}> Inquire for </Text>
<TextInput
autoFocus={true}
maxLength={50}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Name'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ name: text })}
></TextInput>
<TextInput
autoCompleteType={'email'}
maxLength={40}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Email'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.validateEmail(text)}
></TextInput>
<Text style={[styles.errorText, { display: this.state.displayEmailError }]}>Invalid email address</Text>
<TextInput
autoCompleteType={'email'}
maxLength={40}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Email'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.validateEmail(text)}
></TextInput>
<Text style={[styles.errorText, { display: this.state.displayPhoneError }]}>Invalid phone number</Text>
<TextInput
maxLength={30}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Subject'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ subject: text })}
></TextInput>
<TextInput
blurOnSubmit={true}
multiline={true}
underlineColorAndroid={'transparent'}
style={styles.messageInpuText}
placeholder='Message'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ message: text })}
></TextInput>
<Button style={styles.sendButtonDialog} onPress={() => this.sendInquire()}>
<Text style={styles.sendButtonText}>Send</Text>
</Button>
</KeyboardAvoidingView>
</Modal>
You just add KeyboardSpacer in the Modal
In my experience, if you don't want any issue about keyboard you need using scrollview and observer keyboard show/hide for animal fix layout. Custom yourself.
I have get this issue too and because I support many version ios so using KeyboardAvoidingView can not fix all of them and sometime get some hidden issue just appear when you have many user using special version.
Android auto scroll content when layout change so you no need to do anything to fix layout when keyboard show. If you check KeyboardAvoidingView for ios maybe it effects to android. So observer keyboard show and custom yourself will be best that is mine sugess.
PS I remember KeyboardAvoidingView have contentOffSet attribute to fix animation scroll when keyboard change state. But I very confused how to using it fixable for all version ios and after many trying time I custom myself. Hope my experience can help you see the right way in your case
(I'm testing on Android if it matters)
I'm using the component KeyboardAwareScrollView to make the inputs visible while the soft keyboard is open. I have two inputs, one below the other, and when I press the top one, the soft keyboard does make sure it's visible but also hides the one below.
Is there a way to make sure that when the keyboard is open, the two inputs will remain visible, even if the user pressed the one at the top?
My code:
<KeyboardAwareScrollView scrollEnabled={false} resetScrollToCoords={{ x: 0, y: 0 }}>
<Image {...this.image.header} style={{ height: 400, width: '100%' }} />
<View>
<TextInput style={{ backgroundColor: 'red' }} />
<TextInput style={{ backgroundColor: 'blue' }} />
</View>
</KeyboardAwareScrollView>
I am copying this answer of boredgames.
<TextInput
placeholder = "FirstTextInput"
returnKeyType = { "next" }
onSubmitEditing={() => { this.secondTextInput.focus(); }}
blurOnSubmit={false}
/>
<TextInput
ref={(input) => { this.secondTextInput = input; }}
placeholder = "secondTextInput"
/>
I'm trying to delete the top, right and left borders of my textInput (so obviously, I'd like to have just the bottom border :) ) with the package react-native-autocomplete-input
I tried borderTop : 0 / and 'transparent' but it's not working I still have the borders on top and sides.
borderStyle didn't work either
I get this:
https://zupimages.net/viewer.php?id=20/03/ovck.bmp
my code is this:
<ScrollView style={styles.containerScroll}>
<Text style={styles.h1}>{i18n.t("tripsform.title")}</Text>
<Autocomplete
containerStyle={styles.container}
inputContainerStyle={styles.inputContainer}
autoCapitalize="none"
autoCorrect={false}
data={this.findAirports(query_arrival)}
defaultValue={this.findAirports(query_start)}
onChangeText={text => this.setState({ query_start: text })}
placeholder="Enter Start airports"
renderItem={({ airport }) => (
<TouchableOpacity
onPress={() => this.setState({ query_start: airport })}
>
<Text style={styles.h2}>{airport}-</Text>
</TouchableOpacity>
)}
/>
<Autocomplete
containerStyle={styles.container}
inputContainerStyle={styles.inputContainer}
autoCapitalize="none"
autoCorrect={false}
data={this.findAirports(query_arrival)}
defaultValue={this.findAirports(query_arrival)}
onChangeText={text => this.setState({ query_arrival: text })}
placeholder="Enter Arrival airports"
renderItem={({ airport }) => (
<TouchableOpacity
onPress={() => this.setState({ query_arrival: airport })}
>
<Text style={styles.h2}>{airport}-</Text>
</TouchableOpacity>
)}
/>
<Form ref={c => (this._form = c)} type={Trip} options={options} />
<Text>{"\n"}</Text>
<Text>{"\n"}</Text>
<Button
containerStyle={[styles.mybtnContainer]}
style={styles.mybtn}
onPress={this.handleSubmit}
>
{i18n.t("tripsform.item.add").toUpperCase()}
</Button>
<Button
onPress={() => this.props.navigation.navigate("MyTrips")}
containerStyle={[styles.mybtnContainer]}
style={styles.mybtn}
>
Return to my trips
</Button>
<Text>
{"\n"}
{"\n"}
</Text>
</ScrollView>
with this style:
inputContainer: {
minWidth: 300,
width: "90%",
height: 55,
backgroundColor: "transparent",
color: "#6C6363",
fontSize: 18,
fontFamily: "Roboto",
borderBottomWidth: 1,
borderBottomColor: "rgba(108, 99, 99, .7)"
},
If I can get any help that's really nice, thanks for reading and for any help !
You need to use inputContainerStyle property to apply styles to the input.
You can also use containerStyle to style the container around the AutoComplete so you also don't need to wrap the Autocomplete with View tag.
<Autocomplete
inputContainerStyle={styles.inputContainer}
/>
This Should give you the desired output :) :
<Autocomplete
inputContainerStyle={{width:"100%",borderBottomWidth:1}}
inputStyle={{borderWidth:0}}
data={Options}
handleSelectItem={(item,id)=>optionHandler(item.value,id)}
valueExtractor={item => item.value}
/>
It seems that it's impossible with that package.
I could do what I wanted to do with 'native base autocomplete'.
So, it doesn't completely answer the question but it allows you to do the right thing!
You can set the inputContainer style borderWidth to 0:
// other styles
inputContainer: {
borderWidth: 0,
},
I've been trying to get my TextInput to focus (open keyboard) when I tap anywhere within the (gray) multiline box, but it is only detecting taps on lines with text (or the placeholder).
Is there any way to force the TextInput to focus when I click anywhere on the gray area?
<ScrollView style={{ flex: 1}}>
<View style = {Style.dropdownField}>
<Dropdown
label={'Motivo'}
data={this.props.remiseExcusesData}
value={this.state.remiseExcuses.value}
onChangeText={(value,index, data)=> this.setState({remiseExcuses:data[index]})}
/>
</View>
<View style = {{ height:150, marginHorizontal:20, backgroundColor:'#f9f9f9', marginTop:20}}>
<TextInput
style={Style.minitextInput}
placeholder={'Escribir motivo'}
textAlign={'left'}
autoCorrect={false}
autoCapitalize={'none'}
underlineColorAndroid='transparent'
multiline
onChangeText={(text) => this.setState({motive:text}) }
value={this.state.motive}
onFocus={() => console.log('Fire only on tap')}
/>
</View>
</ScrollView>
You can use this for handle the focus of gray box.
<TouchableOpacity style = {{ height:150, marginHorizontal:20, backgroundColor:'#f9f9f9', marginTop:20}} onPress={this.onPressGrayBox}>
<TextInput
ref="textInput"
style={{ height: 150, textAlignVertical: 'top' }}
placeholder={'Escribir motivo'}
textAlign={'left'}
autoCorrect={false}
autoCapitalize={'none'}
underlineColorAndroid='transparent'
multiline
onChangeText={(text) => this.setState({motive:text}) }
value={this.state.motive}
/>
</TouchableOpacity>
declare the method to handle the action, this will help to set textinput focus automatically.
onPressGrayBox=()=>{
this.refs.textInput.focus()
}
This steps helps me, please use
You can handle something like
<View style = {{ height:150, marginHorizontal:20, backgroundColor:'#f9f9f9', marginTop:20}}>
<TextInput
style={{ height: 150, textAlignVertical: 'top' }}
placeholder={'Escribir motivo'}
textAlign={'left'}
autoCorrect={false}
autoCapitalize={'none'}
underlineColorAndroid='transparent'
multiline
onChangeText={(text) => this.setState({motive:text}) }
value={this.state.motive}
onFocus={() => console.log('Fire only on tap')}
/>
</View>
I've been tackling this issue for a few weeks, and it's driving me insane.
Basically, I have a Modal component that nests a form. The form is a bunch of TextInput components, at the heart of everything. One of the components in the form is an Autocomplete, from React Native Autocomplete Input. The problem is that I'm able to put the results list from Autocomplete in front of everything else, but my touches pass right through the container and focuses on the TextInput behind the results list. I'm not able to change the order of components, so I can't just put this one input after everything else.
The general setup of the form is below:
<Modal>
<TouchableWithoutFeedback>
<View style={containerStyle}>
<TouchableWithoutFeedback>
<View>
<CardSection style={sectionStyle}>
<Input
...props...
/>
</CardSection>
<CardSection style={acSectionStyle}>
<Text style={labelStyle}>Brand *</Text>
<View style={acContainerStyle}>
<Autocomplete
autoCapitalize='none'
autoCorrect={false}
listStyle={acListStyle}
data={brands.length === 1 && comp(query, brands[0]) ? [] : brands}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
renderItem={this.renderItem.bind(this)}
hideResults={this.state.hideResults ? this.state.hideResults : undefined}
onBlur={() => this.setState({ hideResults: true })}
onFocus={() => this.setState({ hideResults: false })}
/>
</View>
</CardSection>
<CardSection style={sectionStyle}>
<Input
...props...
/>
</CardSection>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
I had to stack the TouchableWithoutFeedback components in order to make the modal behave. There's more props in the components, but I only kept what was relevant.
My renderItem method is:
renderItem(brand) {
return (
<TouchableOpacity
style={{ width: '100%', height: 25 }}
onPress={() => {
this.setState({ pBrand: brand.trim(), query: brand.trim() });
}}
>
<Text style={styles.listItemStyle}>{brand}</Text>
</TouchableOpacity>
);
}
I don't believe it's a styling issue, but I've added the styles that deal with zIndex just in case:
containerStyle: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
position: 'relative',
flex: 1,
justifyContent: 'center',
zIndex: 1
},
acSectionStyle: {
justifyContent: 'center',
zIndex: 2,
height: 40
},
acContainerStyle: {
right: 0,
width: '75%',
flex: 1,
position: 'absolute',
zIndex: 2
}
The default keyboardShouldPersistTaps for Autocomplete is always. All of the questions I've seen suggest to set a higher zIndex (which isn't a problem - I can see the list, but if I tap on it, the tap goes through to the TextInput behind it), change the order of components (which I can't do), set onStartShouldSetResponderCapture to true (which didn't work), or mess with Pointer Events, none of which worked.
I'm using React Native V0.57.1, an actual Android device, and the project is built with Expo.
Finally, I've recorded a small demo for what my problem is. When the cursor re-appears, that's when I clicked on a result.
Is there just something I'm missing? I've only been writing in React Native for a few months so that's a definite possibility. I come from a web development background, so I thought that if a component was on top (thanks to zIndex), I'd be able to tap on it and not through it by default.
Edit: While messing around, if I change acSectionStyle to a height big enough for the dropdown, then the dropdown works how it should. The issue comes in when a sibling CardSection is being covered. The other CardSection takes precedence.
So, I finally found a workaround. Whether it's correct or not, which I feel like it isn't, at least it works!
I ended up taking the Autocomplete component (along with its' view) outside of the CardSection, but leaving the label in it, like so:
<CardSection style={acSectionStyle}>
<Text style={labelStyle}>Brand *</Text>
</CardSection>
<View style={acContainerStyle}>
<Autocomplete
autoCorrect={false}
listStyle={acListStyle}
// Text input container
inputContainerStyle={acTextContainerStyle}
style={acTextStyle}
placeholder='China Glaze'
data={brands.length === 1 && comp(query, brands[0]) ? [] : brands}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
renderItem={this.renderItem.bind(this)}
hideResults={this.state.hideResults ? this.state.hideResults : undefined}
onBlur={() => this.setState({ hideResults: true })}
onFocus={() => this.setState({ hideResults: false })}
/>
</View>
Then, and this is the part I think is wrong, I just played with the absolute-positioned view until I moved it far enough down to line up next to the label:
labelStyle: {
fontSize: 18,
paddingLeft: 20,
flex: 1
},
acContainerStyle: {
right: 0,
top: 102,
width: '72%',
flex: 1,
position: 'absolute',
zIndex: 10
}
I would love if someone has a better solution, but this is the best I could come up with. I try to avoid moving views with hard coded values just for scaling purposes, but it seems like this is the only option.