This is my code:
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
<Text style={styles.title}>Login</Text>
<ActivityIndicator size="large" color="#0000ff" animating={this.state.isProcessing} />
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onChangeText={(email) => this.setState({ email })}
value={this.state.email}
keyboardType="email-address"
textContentType="emailAddress"
placeholder="Email"
editable={!this.state.isProcessing}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onChangeText={(password) => this.setState({ password })}
value={this.state.password}
secureTextEntry={true}
placeholder="Password"
editable={!this.state.isProcessing}
/>
</View>
<View style={styles.inputContainer}>
<TouchableOpacity
style={styles.button}
onPress={this.logIn.bind(this)}
disabled={this.state.isProcessing}
>
<Text style={{ color: '#fefffe' }}>Login</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
Keyboard.dismiss can work properly, but KeyboardAvoidingView does not work completely.
If I touch the TextInput, KeyboardAvoidingView will not adjust position based on the position of the keyboard.
Why does this happened?
Please help me. Thanks a lot.
Related
Hi I am trying to open an overlay by clicking on a touchable inside another overlay. While it works perfectly in android it is not working in iOS. When I try and open the same overlay from a touchable on my screen it works again.Has anyone come across something like this? Thanks in advance
Code
<Overlay isVisible={clientdeetsoverlay} overlayStyle={{height:'100%'}} fullScreen={true} animationType="slide">
<SafeAreaView>
<TO style={{alignSelf:'flex-end'}} onPress={()=>{setClientdeetsoverlay(false)}}>
<Icon name="times" color="#140F79" size={50} />
</TO>
{
isclientdeetloading?
<View>
<ActivityIndicator size="large" color="red" />
</View>
:
<Address ValidateDetails={ConfirmDetails.bind(this)} editClientData={editClientData.bind(this)} clientdata={clientdata} />
}
</SafeAreaView>
</Overlay>
<Overlay animationType="slide" isVisible={addressoverlay} overlayStyle={{height:'50%',width:'90%',borderRadius:20,padding:20}} onBackdropPress={toggleOverlay}>
{
!addressesloading?
<View>
<Text style={{fontSize:20,fontFamily:'Montserrat-Bold'}}>
Select or add an address
</Text>
<ScrollView horizontal={true} contentContainerStyle={{flexGrow:1,marginTop:20,alignItems: 'center',justifyContent: 'center',alignSelf:'center'}}>
<TouchableWithoutFeedback key="new" onPress={()=>{ValidateDetails("New")}}>
<View style={{margin:10,height:200,width:200,borderWidth:1,borderColor:'black',borderRadius:1,borderStyle:'dotted',alignItems:'center',justifyContent: 'space-evenly',}}>
<Image source={require("../Assets/mail.jpg")} style={{height:150,width:150,resizeMode:'contain'}} />
<Text style={{fontSize:15,fontFamily:'Montserrat-Regular'}}>Add new address</Text>
</View>
</TouchableWithoutFeedback>
{
addresses.map((item)=>{
return(
<TouchableWithoutFeedback key={item.id} onPress={()=>{selectaddress(item)}}>
<View style={selectedaddress.id==item.id?styles.selectedAddressStyle:styles.notselectedaddress}>
{
selectedaddress.id==item.id?
<Icon name="check-square" color="#4B53F2" size={30} style={{position:'absolute',right:1}} />
:
null
}
<Text style={{flex:1,fontFamily:'Montserrat-Bold'}}>Address {item.index}</Text>
<Text style={{flex:3,fontFamily:'Montserrat-Regular'}}>{item.data.add}</Text>
<Text style={{flex:1,fontFamily:'Montserrat-Regular'}}>Phone : {item.data.Phone}</Text>
<View style={{flex:1,alignItems:'flex-start',justifyContent:'space-between',flexDirection:'row',width:'100%'}}>
<TO style={styles.controlbuttonContainerStyle} onPress={()=>ValidateDetails(item.id)}>
<Icon name="edit" size={15} color="#4B53F2" />
<Text style={styles.controltextStyle}>Edit</Text>
</TO>
<TO onPress={()=>{removeAddress(item.id)}} style={styles.controlbuttonContainerStyle}>
<Icon name="trash-alt" size={15} color="#4B53F2" />
<Text style={styles.controltextStyle}>Remove</Text>
</TO>
</View>
</View>
</TouchableWithoutFeedback>
)
})
}
</ScrollView>
<TO onPress={()=>{PlaceOrder()}} style={{alignItems: 'center',justifyContent: 'center',width:'80%',height:40,backgroundColor:'#4B53F2',marginVertical:10,alignSelf:'center'}}>
<Text style={{color:'white',fontFamily:'Montserrat-Bold',fontSize:15}}>Place Order</Text>
</TO>
</View>
:
<View style={{flex:1,backgroundColor:'white',alignItems: 'center',justifyContent: 'center',}}>
<ActivityIndicator size={15} color="red" />
</View>
}
</Overlay>
I am using a ScrollView in my react-native app. The App work fine in my iOS simulator but when I test in my Android emulator the ScrollView does not work.
Here is what my React Components returns
<SafeAreaView style={styles.container}>
<Image
source={require('../assets/images/logo.png')}
style={styles.logo}
/>
<Androw style={styles.shadow}>
<Text style={[styles.logoText, styles.shadow]}>{NAME}</Text>
</Androw>
<Text style={styles.title}>Welcome Back</Text>
<View style={styles.subContainer}>
<ScrollView showsVerticalScrollIndicator={false}>
<Text style={styles.loginText}>Login</Text>
<View style={styles.textBox}>
<Input
// icon="email"
placeholder="Email or username"
autoCapitalize="none"
autoCompleteType="email"
value={this.state.email}
onChangeText={(txt) => this.setState({email: txt})}
/>
<View style={styles.textInput}>
<Input
// icon="pass"
placeholder="Password"
autoCapitalize="none"
autoCompleteType="password"
value={this.state.password}
onChangeText={(txt) => this.setState({password: txt})}
/>
</View>
</View>
<TouchableOpacity>
<Text style={styles.forgotPasswordText}>
Don't remember your password?
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => console.log(this.state)}>
<Button text="Login" />
</TouchableOpacity>
<Text style={styles.noAccountText}>
Don't have an account?{' '}
<Text style={styles.signupText}>Signup</Text>
</Text>
</ScrollView>
</View>
</SafeAreaView>
you should wrap your child views inside like
<ScrollView>
<View>
.....
</View>
</ScrollView>
Top <View> must have style flex:1. Alternate try doing like this
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
...
</ScrollView>
SafeAreaView that does not require flex: 1. Also try removing it from ScrollView too if it is there.
This is what i assume. Would be more helpful if you share your stylesheet also.
I'm trying to create a new simple app. While in this process, I've decided to start with a login page and a sign up page. These pages have the same styling, where the top third of the screen is a container with a logo in it, and the bottom two thirds is a form with input fields.
The problem that I'm stuck at now is that everything looks great, but when you press one of the inputs then the keyboard covers most of the inputs. I've done a little research and I've tried to apply both ScrollView and KeyboardAvoidingView, but neither of these seem to work properly.
This is how my page is set up:
<View style={styles.screen}>
{this.state.loading && (
<View style={styles.loading}>
<ActivityIndicator
color={primaryColor}
size="large"
/>
</View>
)}
<View style={styles.logoContainer}>
<Image source={require('../../../assets/logo.png')} style={styles.logo} />
</View>
<View style={styles.formContainer}>
<KeyboardAvoidingView
behavior={'padding'}
enabled
style={styles.form}
>
<FloatingLabelInput
blurOnSubmit={false}
editable={true}
keyboardType={'email-address'}
label="Email"
onChangeText={this.handleEmailChange}
onSubmitEditing={() => this.passwordInput && this.passwordInput.focus()}
ref={(input) => { this.emailInput = input; }}
returnKeyType="next"
value={this.state.email}
/>
<FloatingLabelInput
editable={true}
label="Password"
onChangeText={this.handlePasswordChange}
onSubmitEditing={() => this.signup()}
ref={(input) => { this.passwordInput = input; }}
secureTextEntry={true}
value={this.state.password}
/>
</KeyboardAvoidingView>
<View style={styles.buttonContainer}>
<Button buttonFunction={() => this.signup()} buttonStyle={'primary'} buttonText={'Sign Up'} />
</View>
</View>
</View>
I feel like I've exhausted most solutions, but I must be missing something crucial.
I had added a Content component in your code, which solves your problem. I don't know why issue had gone by removing KeyboardAvoidingView, but if you want to use KeyboardAvoidingView you can do like this.
<View style={styles.container}>
<Content>
<View style={{ alignItems: "center", marginTop: "50%" }}>
<Image source={require('../assets/CustomLogo1.png')} style={{ marginLeft: 10, marginBottom: 20, height: 200, width: 200 }} />
</View>
<View>
<KeyboardAvoidingView behavior={Platform.Os == "ios" ? "padding" : "height"}>
<FloatingLabelInput
blurOnSubmit={false}
editable={true}
keyboardType={'email-address'}
label="Email"
onChangeText={this.handleEmailChange}
onSubmitEditing={() => this.passwordInput && this.passwordInput.focus()}
ref={(input) => { this.emailInput = input; }}
returnKeyType="next"
value="sample mail"
/>
<FloatingLabelInput
editable={true}
label="Password"
onChangeText={this.handlePasswordChange}
onSubmitEditing={() => this.signup()}
ref={(input) => { this.passwordInput = input; }}
secureTextEntry={true}
value="password"
/>
</KeyboardAvoidingView>
<View style={{ marginTop: 20 }}>
<Button buttonFunction={() => this.signup()} title="sign up" />
</View>
</View>
</Content>
</View>
Initial login page when there is a problem in focusing password:
After making some necessary changes it will be like this:
Just add a content component which can be imported from native base after your View component. I think removing KeyBoardAvoidingView will not fix the issue for smaller screens.
Hope this helps!
When I remove TouchableWithoutFeedback then Input text is responding otherwise not.
I tried lots but I am not getting any solution there.
<TouchableWithoutFeedback
onPress={() => {
Keyboard.dismiss();
}}
>
<View style={styles.screen}>
<Text style={styles.title}>The a New Game !</Text>
<Card style={styles.inputContainer}>
<Text>Select a Number</Text>
<Input
style={styles.input}
blurOnSubmit
autoCapitalize="none"
autoCorrect={false}
keyboardType="number-pad"
maxLength={2}
onChange={numberInputHandler}
value={enteredValue}
/>
<View style={styles.buttonContainer}>
<View>
<Button style={styles.button} title="Reset" onPress={() => {}} color={Color.accent} />
</View>
<View>
<Button
style={styles.button}
title="Confirm"
onPress={() => {}}
color={Color.primary}
/>
</View>
</View>
</Card>
</View>
</TouchableWithoutFeedback>
);
};
Try using zIndex( style={{zIndex: 20}} ) on both TextInput and TouchableWithoutFeedback, and make sure you give a greater value to the TextInput.
I am trying to disable a TouchableOpacity element when username/password fields are not filled. It does not work. It is always in a disabled state.
I printed the condition !this.state.username || !this.state.password
to console and it is only false when both are filled which is the desired result but the disabled property of TouchableOpacity does not seem to reflect the value in this condition. Below is a snippet of my code:
can anyone suggest a solution to this problem?
<ScrollView style={styles.content}>
<View style={[styles.container, styles.content]}>
<View style={styles.inputContainer}>
<Image style={styles.inputIcon} source={emailicon}/>
<TextInput style={[styles.inputs]}
ref={`username`}
placeholder="Email"
keyboardType="email-address"
underlineColorAndroid='transparent'
onChangeText={(text) => {this.state.username = text}}
required={true}
/>
</View>
<View style={styles.inputContainer}>
<Image style={styles.inputIcon} source={keyicon}/>
<TextInput
style={styles.inputs}
ref={`password`}
placeholder="Password"
secureTextEntry={true}
underlineColorAndroid='transparent'
onChangeText={(text) => {this.state.password = text}}
required={true}
/>
</View>
<TouchableOpacity style={[styles.buttonContainer, styles.loginButton]}
onPress={() => { console.log(!this.state.username || !this.state.password) }} disabled={!this.state.username || !this.state.password}>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
Try to use setState instead of assign value this state in onChangeText.
Just replace this line in both textInput
onChangeText={(text) => {this.setState({username:text})}}
and
onChangeText={(text) => {this.setState({password:text})}}