Prevent KeyboardAvoidingView from causing content to overlap (React Native)?

Prevent KeyboardAvoidingView from causing content to overlap (React Native)? - javascript

I am trying to create a KeyboardAvoidingView area for a signup form. I have gotten the component to a place where the actual keyboard adjustment is decent on iOS and Android.
However, instead of adding more height to the bottom of the view and scrolling up, the KeyboardAvoidingView seems to be simply compressing the height.
Here is the resulting effect on Android:
Before keyboard adjustment:
After keyboard adjustment:
Here's the code for the component:
<KeyboardAvoidingView keyboardVerticalOffset={20} behavior={Platform.OS === 'ios' ? 'padding' : null} style={mainWithFooter.container}>
<View style={mainWithFooter.main}>
<Text style={material.display1}>Create Your Account</Text>
</View>
<View style={mainWithFooter.footer}>
<Input
placeholder='First name'
onChangeText={t => updateSignupForm('firstName', t)}
/>
<Input
placeholder='Last name'
onChangeText={t => updateSignupForm('lastName', t)}
/>
<Input
placeholder='Email'
keyboardType='email-address'
autoCapitalize='none'
onChangeText={t => updateSignupForm('email', t)}
/>
<Input
placeholder='Password'
secureTextEntry
onChangeText={t => updateSignupForm('password', t)}
/>
<Button
text='Create Account'
onPress={signup}
primary
disabled={!signupFormIsValid}
block
/>
</View>
</KeyboardAvoidingView>
And the styles:
export default StyleSheet.create({
container: {
display: 'flex',
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
padding: 30,
minHeight: '100%',
},
main: {
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 20,
},
footer: {
width: '100%',
flex: 0,
},
})
How can I fix this, so that the content does not overlap?

I ran into the same issue. I wrapped the children of KeyboardAvoidingView in a View component and then set the minHeight of that component using Dimennsions.get('window').height. See your example below:
<KeyboardAvoidingView keyboardVerticalOffset={20} behavior={Platform.OS === 'ios' ? 'padding' : null} style={mainWithFooter.container}>
<View style={mainWithFooter.wrapper}> ** <-- wrapper here. **
<View style={mainWithFooter.main}>
<Text style={material.display1}>Create Your Account</Text>
</View>
<View style={mainWithFooter.footer}>
<Input
placeholder='First name'
onChangeText={t => updateSignupForm('firstName', t)}
/>
...
</View>
</View>
</KeyboardAvoidingView>
Then the style:
const windowHeight: Dimensions.get('window').height;
export default StyleSheet.create({
wrapper: {
minHeight: windowHeight,
},
...
});
You may need to add additional necessary styles such as flex etc. to the wrapper.

Related

How to have two centered and clickable image link in react-native

I want to have the two images clickable next to each over, this is my view:
function MyView(props) {
return (
<View style={{ flex: 1, }}>
<View style={{
// width: 230,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<ExternalLink href="https://play.google.com/store/apps/details">
<Image
source={availableAtGooglePlayImage}
style={{
width: '100%',
height: 70,
flex: 1,
marginTop: 10,
resizeMode: 'contain',
}}
/>
</ExternalLink>
</View>
<View style={{
// width: 230,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<ExternalLink href="https://itunes.apple.com/fr/app">
<Image
resizeMode="stretch"
source={availableAtAppStoreImage}
style={{
width: '100%',
height: 70,
flex: 1,
marginTop: 10,
resizeMode: 'contain',
}}
/>
</ExternalLink>
</View>
);
}
As soon as I use flex: 1 on the parent view of ExternalLink, the image disappear.
I have not found a way to get those two images next to each over.
I have only find a way to have them on top of each over, and the whole width is clickable but I want only the image to be clickable.
How this is possible in react-native ?

Can you check this code please, this is a working example expo :
import * as React from 'react';
import { Text, View, StyleSheet ,Image,TouchableOpacity,Linking } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View>
<TouchableOpacity onPress={() =>Linking.openURL("https://play.google.com/store/apps/details")}>
<Image style={{height:50,width:50}} source={{uri:"https://source.unsplash.com/random"}} />
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() =>Linking.openURL("https://itunes.apple.com/fr/app")}>
<Image style={{height:50,width:50}} source={{uri:"https://source.unsplash.com/random"}} />
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row',
justifyContent:'space-around',
alignItems:'center',
},
});
Feel free for doubts

What you are looking for is {flexDirection: 'row'} property in style.
Copy code to https://snack.expo.io/
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Image, Linking } from 'react-native';
export default class App extends React.Component {
render() {
return (
<>
<View style={{flex:1, flexDirection:'row'}}>
<TouchableOpacity
style={styles.imageButton}
onPress={() =>{Linking.openURL("https://play.google.com/store/apps/details")}}
>
<Image
resizeMode={'contain'}
style={styles.coverImage}
source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.imageButton}
onPress={() =>{Linking.openURL("https://itunes.apple.com/fr/app")}}
>
<Image
resizeMode={'contain'}
style={styles.coverImage}
source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
/>
</TouchableOpacity>
</View>
</>
);
}
}
const styles = StyleSheet.create({
coverImage: {
flex: 1,
alignSelf: 'stretch',
width: undefined,
height: undefined
},
imageButton:{
flex:1,
height:70
}
});

React Native Elements Line underneath FormInput Component

I'm using the FormInput element from React Native Elements, which seems to produce a line underneath each FormInput component. One is more faint than the other.
Form looks as follows
<View style={styles.container}>
<Image
style={styles.image}
source={app.imageBackground}
/>
<View style={{ alignItems: 'center' }}>
<Image
style={styles.logo}
source={app.logo}
/>
</View>
<View style={styles.cardWrapper}>
<View style={styles.card}>
<FormInput
inputStyle={styles.textInput}
placeholder='user#email.com'
autoCapitalize='none'
autoCorrect={false}
underlineColorAndroid='transparent'
placeholderTextColor='white'
onChangeText={this.onEmailChange.bind(this)}
/>
<FormInput
secureTextEntry={true}
autoCapitalize='none'
placeholder='password'
autoCorrect={false}
inputStyle={styles.textInput}
underlineColorAndroid='transparent'
placeholderTextColor = 'white'
onChangeText={this.onPasswordChange.bind(this)}
/>
<FormValidationMessage>{this.renderError()}</FormValidationMessage>
{this.renderButton()}
<Text style={{color:'white', textAlign:'center'}}>New to Foodspecials?<Text style={{fontWeight:'900'}} onPress={() => this.props.navigation.navigate('SignUp')}> Sign up</Text></Text>
</View>
</View>
</View>
Here are my styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
cardWrapper: {
padding: 20
},
card: {
},
logo: {
justifyContent: 'center',
},
image: {
backgroundColor: '#ccc',
flex: 1,
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
},
textInput: {
height: 50,
fontSize: 20,
borderRadius: 50,
backgroundColor: 'rgba(255, 255, 255, 0.3)',
color: 'white',
width: '100%',
paddingLeft: 20,
marginTop: 10,
marginBottom: 10
},
button: {
borderWidth: 2,
borderColor: 'white',
marginTop: 10,
marginBottom: 10
}
})
I've tried to add a borderWidth property of 0 to the FormInput but this doesn't seem to work.
I've also tried to set a borderColor to transparent which didn't work either.
I've also noticed, if I remove the FormValidationMessage component, both line become more apparent.
Is there a workaround for this?

I was facing the same issue and fixed it by adding borderBottomWidth:0 as belows:
<Input inputContainerStyle={{borderBottomWidth:0}} />

Solution is add a property of input ,
<Input inputContainerStyle={{borderBottomWidth:0}} />

you can achieve that by changing the color of the border by passing "transparent" to borderColor as follows.
<Input
inputContainerStyle={{
borderWidth: 0,
borderColor: "transparent"
}}
placeholder="Test placeholder...."
/>

Try to put Each <FormInput/> inside a <View>. Then style that view accordingly. Those line is a part of <FormInput/> component so styling with InputStyle props won't do the job.
<View style={styles.input}>
<Input placeholder="Username" returnKeyType="next" />
</View>
<View style={styles.input}>
<Input placeholder="Password" returnKeyType="go" secureTextEntry />
</View>

I did this for an Input element. You might get the same effect for a FormInput. Anyway, it got rid of the bottom border. You use the inputContainerStyle.
<Input
placeholder="Username"
leftIcon={<FontAwesome name="user-o" size={24} />}
onChangeText={(username) => this.setState({username})}
value={this.state.username}
containerStyle={styles.formInput}
inputContainerStyle={{
borderRadius:10,
backgroundColor:'white',
borderBottomColor:'white'
}}
/>

Vertically align items in the center inside flew direction row

I have some icon buttons inside a view which is pushed to the right of the container by flex direction row on the parent. Currently I cannot align them vertically in the middle of the container. Here is the code I have:
JSX:
<View style={styles.groupContainer}>
<View style={styles.groupTextContainer}>
<Text style={styles.groupText}>{title.toUpperCase()}</Text>
</View>
<View style={styles.groupButtonsContainer}>
<Icon
key={name + type}
onPress={onPress}
style={{marginLeft: 8}}
name={name}
type={type}
color='silver' />
<Icon
key={name + type}
onPress={onPress}
style={{marginLeft: 8}}
name={name}
type={type}
color='silver' />
</View>
</View>
styles:
groupContainer: {
backgroundColor: '#ddd',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
groupText: {
fontWeight: 'bold',
color: '#808080',
},
groupTextContainer: {
padding: 10,
alignSelf: 'flex-start',
},
groupButtonsContainer: {
alignSelf: 'flex-end',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}
UPDATE
Forgot to mention that Icon is a react-native-elements component.
I need it to look like this:
But I get this:

<View style={styles.groupContainer}>
<View style={styles.groupButtonsContainer}>
<Text style={styles.groupText}>{title.toUpperCase()}</Text>
<Icon
key={name + type}
onPress={onPress}
style={{marginLeft: 8}}
name={name}
type={type}
color='silver' />
</View>
</View>
mybe you can follow this code and you restyle from text

Stretch height to fit content in react native

I want to change the height of the modal to fit to the content. It always just goes to the height of the screen:
jsx:
<Modal style={styles.modal}
isVisible={props.categories.some(x => showModal(x))}>
<Container style={styles.modalView}>
<Header style={styles.header}>
<Left>
<Title
style={styles.title}>{getDisplayedCategoryLabel(props.categories)}
</Title>
</Left>
<Right>
<Button
small
transparent
danger
rounded
icon
onPress={() => props.setAllShowSubcategoriesToFalse()}>
<Icon name="times" size={20} color='#9E9E9E' />
</Button>
</Right>
</Header>
<Content >
<SelectMultiple
labelStyle={styles.label}
items={getDisplaySubcategories(props.categories)}
selectedItems={
props.categories.filter(category => category.selected)
}
onSelectionsChange={props.toggleSubcategory} />
</Content>
</Container>
</Modal>
styles:
const styles = {
modalView: {
flex: 1,
backgroundColor: '#FFFFFF',
padding: 20,
borderRadius: 8,
height: 100
},
modal: {
padding: 10,
height: 100
}
}
Changing the height of modal style doesn't do anything. I can't seem to change the height at all. What should I be doing to affect the height?
I'm using react-native-modal

How about something like:
<Modal transparent>
<View style={{ flex: 1, alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>
{/* fill space at the top */}
<View style={{ flex: 1, justifyContent: 'flex-start' }} />
<View style={{ flex: 1, backgroundColor: 'white' }}>
{/* content goes here */}
</View>
{/* fill space at the bottom*/}
<View style={{ flex: 1, justifyContent: 'flex-end' }} />
</View>
</Modal>

This is just a guess but how about you give paddingTop a value of 0 and see how that works out. Remove the generic padding you have and specify it exactly using paddingLeft, paddingRight, paddingBottom according to the style you want to achieve.
Hopefully, that helps some bit

How can I put an icon inside a TextInput in React Native?

I am thinking of having something like this https://android-arsenal.com/details/1/3941 where you have icon that you press to show password as plaintext, not as dots. However, I was unable to find any custom component that would help me.
I don't want to put too much time on such a minor feature, so I'm asking without having attempted anything yet: Is there a custom component I've missed? If not, is there a simple way to add children to TextInput? Or should I just have TextInput and Touchable side by side?

You can use combination of View, Icon and TextInput like so:
<View style={styles.searchSection}>
<Icon style={styles.searchIcon} name="ios-search" size={20} color="#000"/>
<TextInput
style={styles.input}
placeholder="User Nickname"
onChangeText={(searchString) => {this.setState({searchString})}}
underlineColorAndroid="transparent"
/>
</View>
and use flex-direction for styling
searchSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
searchIcon: {
padding: 10,
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
backgroundColor: '#fff',
color: '#424242',
},
Icons were taken from "react-native-vector-icons"

Basically you can’t put an icon inside of a textInput but you can fake it by wrapping it inside a view and setting up some simple styling rules.
Here's how it works:
put both Icon and TextInput inside a parent View
set flexDirection of the parent to ‘row’ which will align the
children next to each other
give TextInput flex 1 so it takes the full width of the parent View
give parent View a borderBottomWidth and push this border down with paddingBottom (this will make it appear like a regular textInput with a borderBottom)
(or you can add any other style depending on how you want it to look)
Code:
<View style={styles.passwordContainer}>
<TextInput
style={styles.inputStyle}
autoCorrect={false}
secureTextEntry
placeholder="Password"
value={this.state.password}
onChangeText={this.onPasswordEntry}
/>
<Icon
name='what_ever_icon_you_want'
color='#000'
size={14}
/>
</View>
Style:
passwordContainer: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: '#000',
paddingBottom: 10,
},
inputStyle: {
flex: 1,
},
(Note: the icon is underneath the TextInput so it appears on the far right, if it was above TextInput it would appear on the left.)

This is working for me in ReactNative 0.60.4
View
<View style={styles.SectionStyle}>
<Image
source={require('../assets/images/ico-email.png')} //Change your icon image here
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Name Here"
underlineColorAndroid="transparent"
/>
</View>
Styles
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: 0.5,
borderColor: '#000',
height: 40,
borderRadius: 5,
margin: 10,
},
ImageStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
alignItems: 'center',
}

In case is useful I share what I find a clean solution:
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
onChangeText={(text) => onChange(text)}
value={value}
/>
<Icon style={styles.icon} name="your-icon" size={20} />
</View>
and then in your css
inputContainer: {
justifyContent: 'center',
},
input: {
height: 50,
},
icon: {
position: 'absolute',
right: 10,
}

import { TextInput } from 'react-native-paper';
<TextInput
label="Password"
secureTextEntry
right={<TextInput.Icon name="eye" />}
/>

You can use this module which is easy to use: https://github.com/halilb/react-native-textinput-effects

You can wrap your TextInput in View.
<View>
<TextInput/>
<Icon/>
<View>
and dynamically calculate width, if you want add an icon,
iconWidth = 0.05*viewWidth
textInputWidth = 0.95*viewWidth
otherwise textInputwWidth = viewWidth.
View and TextInput background color are both white. (Small hack)

//This is an example code to show Image Icon in TextInput//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, TextInput, Image } from 'react-native';
//import all the components we are going to use.
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.SectionStyle}>
<Image
//We are showing the Image from online
source={{uri:'http://aboutreact.com/wp-content/uploads/2018/08/user.png',}}
//You can also show the image from you project directory like below
//source={require('./Images/user.png')}
//Image Style
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Name Here"
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.SectionStyle}>
<Image
//We are showing the Image from online
source={{uri:'http://aboutreact.com/wp-content/uploads/2018/08/phone.png',}}
//You can also show the image from you project directory like below
//source={require('./Images/phone.png')}
//Image Style
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Mobile No Here"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
},
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: 0.5,
borderColor: '#000',
height: 40,
borderRadius: 5,
margin: 10,
},
ImageStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
alignItems: 'center',
},
});
Expo

Anyone who's struggling on this
you can try to follow mine also
<View style={{flex:1}}>
<KeyboardAvoidingView enabled>
<View style={{flexDirection:'row',paddingBottom:5, borderColor:'#ccc',borderBottomWidth:1}}>
<TextInput
style={{flex:1}}
onChangeText={(UserEmail) => setUserEmail(userEmail)}
placeholder="Password"
placeholderTextColor="#ccc"
autoCapitalize="none"
keyboardType="default"
returnKeyType="next"
ref={passwordInputRef}
onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={false}
/>
<FontAwesome5 name={"eye"} size={25} style={{alignSelf:'center'}}/>
</View>
</KeyboardAvoidingView>
</View>

Here you have an example I took from my own project, i have just removed what i thought we didnt need for the example.
import React, { Component } from 'react';
import {
Text,
TouchableOpacity,
View,
StyleSheet,
Dimensions,
Image
} from 'react-native';
class YourComponent extends Component {
constructor(props) {
super(props);
this._makeYourEffectHere = this._makeYourEffectHere.bind(this);
this.state = {
showPassword: false,
image: '../statics/showingPassImage.png'
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={this._makeYourEffectHere}>
<Text>button</Text>
<Image style={styles.image} source={require(this.state.image)}></Image>
</TouchableOpacity>
<TextInput password={this.state.showPassword} style={styles.input} value="abc" />
</View>
);
}
_makeYourEffectHere() {
var png = this.state.showPassword ? '../statics/showingPassImage.png' : '../statics/hidingPassImage.png';
this.setState({showPassword: !this.state.showPassword, image: png});
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
button: {
width: Dimensions.get('window').width * 0.94,
height: 40,
backgroundColor: '#3b5998',
marginTop: Dimensions.get('window').width * 0.03,
justifyContent: 'center',
borderRadius: Dimensions.get('window').width * 0.012
},
image: {
width: 25,
height: 25,
position: 'absolute',
left: 7,
bottom: 7
},
input: {
width: Dimensions.get('window').width * 0.94,
height: 30
}
});
module.exports = YourComponent;
I hope It helps you.
Let me know if it was useful.

you can also do something more specific like that based on Anthony Artemiew's response:
<View style={globalStyles.searchSection}>
<TextInput
style={globalStyles.input}
placeholder="Rechercher"
onChangeText={(searchString) =>
{this.setState({searchString})}}
underlineColorAndroid="transparent"
/>
<Ionicons onPress={()=>console.log('Recherche en cours...')} style={globalStyles.searchIcon} name="ios-search" size={30} color="#1764A5"/>
</View>
Style:
searchSection: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderRadius:50,
marginLeft:35,
width:340,
height:40,
margin:25
},
searchIcon: {
padding: 10,
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
marginLeft:10,
borderTopLeftRadius:50,
borderBottomLeftRadius:50,
backgroundColor: '#fff',
color: '#424242',
},

It's now more easier to use with nativebase input hope this will help someone. I used Iconscout and you can use any icon library.
<View style={styles.input}>
<Input leftElement={<UilReact size="30" color="#61DAFB" style={styles.icon}/>} style={styles.input} size={'2xl'} variant="underlined" placeholder="Round" />
</View>
const styles = StyleSheet.create({
input: {
justifyContent:'center'
},
icon: {
marginRight:10
}
});

You can test this too, dont forget to add the style below as well.
<View style={styles.searchContainerStyle}>
<Ionicons name="search" size={24} color="gray"/>
<View style={{ flex: 1 }}>
<TextInput
type="search"
placeholder="Search for doctors & labs"
style={{ marginLeft: Sizes.fixPadding}}
/>
</View>
</View>
searchContainerStyle: {
backgroundColor: "#F5F5F5",
borderRadius: 30.0,
height: 45.0,
flexDirection: "row",
alignItems: "center",
paddingLeft: Sizes.fixPadding + 5.0,
marginBottom: 10,
},

if you are Willing to ADD Your OWN Custome SVG to the Left of Right.
Follow this..
Import svgs from "your Svgs Location"
<TextInputRNP
label="lable"
placeholder="placeholder"
right={<TextInput.Icon icon={() => <svgs.Calender />} size={30} />}
left={<TextInput.Icon icon={() => <svgs.Calender2 />} size={30} />}
/>
Here TextInputRNP is the text Input from React-native-Paper

Develop Reference

JavaScript is the programming language of the Web.

Prevent KeyboardAvoidingView from causing content to overlap (React Native)? - javascript

Related

How to have two centered and clickable image link in react-native

React Native Elements Line underneath FormInput Component

Vertically align items in the center inside flew direction row

Stretch height to fit content in react native

How can I put an icon inside a TextInput in React Native?

Categories

Resources