I have tried using both KeyboardAvoidingView and ScrollView to prevent my content from being squished (pushed up) when the keyboard is present. I have tried using padding, height, and position for my behavior but nothing is working. Can someone please tell me how I can force my content to ignore the keyboard and not get pushed up??
return (
<View style={{height: '100%', backgroundColor: '#D6D6D6', position: 'relative'}}>
<View style={styles.wrapper}>
<View style={{height:'100%', borderRadius: 7}}>
<View style={styles.container}>
<ScrollView style={{borderRadius: 7}}
horizontal
showsHorizontalScrollIndicator={false}
scrollEventThrottle={10}
pagingEnabled
onScroll={
Animated.event(
[{nativeEvent: {contentOffset: {x: this.animVal}}}]
)
}
>
{imageArray}
</ScrollView>
<View style={styles.listViewContainer}>
<TouchableOpacity style={styles.listView} onPress={() => Actions.pop()}>
<View style={{flex: 1, flexBasis: 22}}>{listIcon}</View>
<View style={{flex: 2, flexBasis: 57}}><Text style={{color: '#fff'}}>List View</Text></View>
</TouchableOpacity>
</View>
<View style={styles.circleContainer}>
{circleArray}
</View>
</View>
<View style={styles.productsSection}>
<Text style={styles.title}>{prodDesc}</Text>
<Text style={styles.desc}>{prodBrand}</Text>
<Text style={styles.desc}>Item: {prodId || ''}</Text>
<Text style={[styles.desc, {marginBottom: 15}]}>Category: {prodCat}</Text>
<Table borderStyle={{borderWidth: 0}}>
<Rows data={rows}/>
</Table>
</View>
<View style={styles.bodyFooter}>
<QuantityCounter style={{width: '100%', display: 'block', marginRight: 20}} data={{productId: prodId}} />
</View>
</View>
</View>
<View style={styles.footer}>
<View style={styles.cartContainer}>
{cartIcon}
<Text style={{color: '#3A3A3A', fontSize: 14}}>18 items</Text>
</View>
<TouchableOpacity style={styles.viewCartButtonContainer} onPress={() => this.cartRedirect() }>
<Text style={{color: '#fff', fontSize: 15, marginTop: '5%'}}>View Cart</Text>
</TouchableOpacity>
</View>
<Header/>
</View >
);
here are my main styles for this:
var styles = StyleSheet.create({
wrapper: {
backgroundColor: '#E6E6E6',
marginVertical: 15,
marginHorizontal: 10,
borderRadius: 7,
elevation: 3,
maxHeight: '80%',
flexShrink: 1,
zIndex: 0,
marginTop: 75
},
container: {
flex: 1.7,
justifyContent: 'space-between',
alignItems: 'center',
height: '50%',
borderRadius: 7
},
footer: {
justifyContent:'space-between',
alignItems: 'center',
height: '10%',
backgroundColor: '#E6E6E6',
paddingVertical: 15,
paddingHorizontal: 17,
flexDirection: 'row',
borderStyle: 'solid',
borderTopColor: '#8E8E93',
borderTopWidth: 1
},
cartContainer: {
flexDirection: 'row',
width: '35%'
},
viewCartButtonContainer: {
backgroundColor: '#356FAF',
height: '90%',
width: '45%',
padding: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 3
},
bodyFooter: {
backgroundColor: '#F6F6F6',
justifyContent: 'center',
flex: 0.45,
borderTopColor: '#D6D6D6',
borderTopWidth: 1,
borderStyle: 'solid',
borderBottomRightRadius: 7,
borderBottomLeftRadius: 7
},
circleContainer: {
position: 'absolute',
zIndex: 2,
bottom: 10,
left: 10,
flexDirection: 'row',
},
listViewContainer: {
position: 'absolute',
zIndex: 10,
top: 0,
right: 0,
justifyContent: 'center'
},
listView: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderTopRightRadius: 3,
backgroundColor: '#000',
paddingVertical: 5,
paddingHorizontal: 10
},
What it looks like without the keyboard:
What it looks like with the keyboard:
Handling View behavior when toggling a keyboard can be a tricky thing in React Native. There are multiple possible solutions to questions like this, but in this case the solution was this:
Instead of using style={{height:'100%'}} on your components that get pushed up, try using Dimensions:
import {Dimensions} from 'react-native';
const { height } = Dimensions.get('window');
and specify style={{ height }} in the right components.
Another thing that might be worth a try if someone else stumbles on this question:
React Native for Android has some default settings defined in the Android manifest. If you are not using Expo (or CRNA), you can change the behavior of the keyboard in AndroidManifest.xml by changing the windowSoftInputMode rule.
Try changing android:windowSoftInputMode="adjustResize" to android:windowSoftInputMode="adjustPan" or to android:windowSoftInputMode="adjustNothing". You can try to play around with some other options (See here) if this doesn't give you the desired effect.
You should use try behavior as "none" for android and if you don't want to getting small, you can set android:windowSoftInputMode="adjustPan" in manifest file.
and if still face any error checkout react-native-keyboard-aware-scrollview
here on npm.
I went through a similar problem and solved it by changing
android:windowSoftInputMode="adjustPan”
In android manifest.
Also clean and rebuild. This might work
remove the position absolute it will works just fine trust me
for some cases if you want keep defualt manifest
you can move your elements inside a Scrollview it may help.
issue solved for me in this way
Related
I was wondering how to wrap the title on to another line or possibly 2 lines before cutting off...
I tried flex wrap but im possibly not applying it correctly. Or if theres some javascript I could add to the ternary. Apologies if this has already been answered I couldnt find it.
enter image description here
<View style={styles.titleWrapper}>
<Text style={styles.title}>
{title.length > 20 ? title.slice(0, 22) + "..." : title}
</Text>
<MaterialIcons name="favorite-border" color="#72bcd4" size={24} />
</View>
<View style={styles.descriptionWrapper}>
<Text style={styles.description}>
{description.length > 100 ? description.slice(0, 100) + "..." : description }
</Text>
</View>
</View>
</TouchableOpacity>
)
const styles = StyleSheet.create({
card: {
backgroundColor: "#fff",
height: 300,
margin: 20,
borderRadius: 10,
shadowColor: "black",
shadowOpacity: 0.25,
shadowOffset: {width: 0, height: 2},
shadowRadius: 8,
elevation: 5
},
imageWrapper: {
width: "100%",
height: "60%",
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: "hidden"
},
titleWrapper: {
height: "10%",
paddingHorizontal: 15,
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
marginTop: 10
},
You have specify the line count like
<Text style={styles.title} numberOfLines={2}>
{titile}
</Text>
React native will handle the ellipsis for you based on the lines
I am learning react-native and the flexbox layouts don't seem to be consistent. In the code snippet below all I am trying to do is have a divider in the middle of the screen but it always align to the left:
<View style={styles.row}>
<View
style={{
flex: 0.8,
justifyContent:'center',
borderColor: '#1abc9c',
borderWidth: 1
}}
/>
</View>
</View>
let styles = StyleSheet.create({
row: {
flexDirection: 'row',
marginHorizontal: 6,
marginVertical: 6,
},
});
Can somebody please let me know what I am doing wrong here?
Try this:
<View
style={{
flex: 1, // << look at this // Occupy the entire container
flexDirection: "row",
marginHorizontal: 6,
marginVertical: 6,
justifyContent: "center" // center the children horizontally -
//since flexDirection: 'row'
}}
>
<View
style={{
flex: 0.5,
justifyContent: "center",
borderColor: "#1abc9c",
borderWidth: 1
}}
/>
</View>
Image here.
App
Code
I just want Advice component close to Weather component.
How can I get it ?
App.js
<View style={styles.columnLayout}>
<Weather currentCity="Phuket"/>
<Advice />
</View>
const styles = StyleSheet.create({
columnLayout : {
flex : 1,
flexDirection: 'column',
}
})
Weather and Advice component are not using flex.
WeatherData.js (export to Weather.js)
<View style={styles.viewStyle}>
<View style={styles.dataStyle}>
<Text style={styles.textStyle}>Temperature</Text>
<Text style={styles.textStyle}>{this.props.temp} °C</Text>
</View>
<View style={styles.dataStyle}>
<Image style={{ width: 80, height: 80 }} source={{ uri: `http://openweathermap.org/img/w/${this.props.icon}.png` }}></Image>
<Text style={styles.textStyle}>{this.props.description}</Text>
</View>
<View style={styles.dataStyle}>
<Text style={styles.textStyle}>Humidity</Text>
<Text style={styles.textStyle}>{this.props.humidity} %</Text>
</View>
</View>
const styles = StyleSheet.create({
dataStyle: {
backgroundColor: '#00b377',
flex: 1,
alignItems: "center",
justifyContent: "center"
},
viewStyle: {
height: 150,
flexDirection: "row",
justifyContent: "center"
},
textStyle: {
color: 'white',
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: {width: -1, height: 1},
textShadowRadius: 10
}
})
another one Component using the same style.
I already add code.
In react-native documents flex : 1 and flexDirection : column all View are adjacent
but mine is not.
Hi I'm new in react native. I would like to ask how to fixed the position of these three colors, because every time i tried to click the search text input and the keyboard goes up those three colors will also goes up. I tried position: 'fixed' but it didnt work.
Screenshot
Here is also the code:
render(){
return(
<View style={{flex: 1}}>
<View style={{flex: 3, backgroundColor: '#E1F1FE'}}>
<View style={styles.form}>
<TextInput
style={styles.input}
placeholder = "Search"
returnKeyType="go"
underlineColorAndroid={'rgba(0,0,0,0)'}
/>
<Icon name="search" size={20} color="#900" style={styles.label} />
</View>
</View>
<View style={{flex: 1, backgroundColor: '#77D3F8'}}>
</View>
<View style={{flex: 1, backgroundColor: '#AEEAF2'}}>
</View>
<View style={{flex: 1, backgroundColor: '#39CFDE'}}>
</View>
</View>
);
}
and the styles
import {StyleSheet} from 'react-native';
module.exports = StyleSheet.create({
navBar: {
backgroundColor: '#EAEAEC',
},
title: {
color: '#rgba(0, 0, 0, 0.65)',
},
buttonText: {
color: '#rgba(0, 0, 0, 0.45)',
},
style3:{
fontSize: 35,
color: '#fff',
padding: 10,
alignContent:'center',
justifyContent: 'center',
},
style2: {
flexDirection: 'row',
alignContent: 'center',
alignItems: 'center',
flex:1
},
buttonstyle: {
flex: 1
},
form:{
flexDirection: 'row',
borderBottomWidth:1,
borderColor: '#00BBD1',
marginTop:80,
marginRight: 40,
marginLeft: 40,
alignContent: 'center',
alignItems: 'center',
},
input: {
height: 40,
borderWidth: 0,
flex: 1
},
label:{
alignContent:'center',
justifyContent: 'center',
marginRight: 10,
color: '#00BBD1'
},
});
Thank you in advance :)
It will not going to be stick to position when keyboard activated. You may need to use keyboardavoidingview or another package like react-native-keyboard-aware-scroll-view So design may not disturb when keyboard activated.
I'm trying to put a white dot over a green square like below.
But no matter how I try I still get this. The background color and margin of the white dot is gone.
Here's the code.
<View style={backgroundColor: 'white', zIndex: 1, margin: 2, borderRadius: 10, borderWidth: 2} >
<View style={backgroundColor: 'green', zIndex: 0} />
</View>
I though zIndex will solve my problem but it doesn't. I've also tried swapping the order but it just give me a plain green square. Help?
<View style={backgroundColor: 'green', zIndex: 0}>
<View style={backgroundColor: 'white', zIndex: 1, margin: 2, borderRadius: 10, borderWidth: 2} />
</View>
I don't think you need/want to use z-index for this. z-index is used for depth, to layer items that occupy the same space.
Read up on it here: CSS Tricks - z-index
I'd agree that you want to make use of flexbox if you're trying to keep everything aligned.
Here's an example:
<View style={styles.container}>
<View style={styles.holder}>
<View style={styles.circleHolder}>
<View style={styles.circle} />
</View>
<View style={styles.square} />
</View>
</View>
and the styling:
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
circleHolder: {
width: 200,
height: 200,
justifyContent: 'center',
alignItems: 'center'
},
circle: {
backgroundColor: 'white',
width: 150,
height: 150,
borderRadius: 75,
borderWidth: 2
},
square: {
backgroundColor: 'green',
width: 200,
height: 200,
},
});
RNPlay: https://rnplay.org/apps/k5DbDQ
<View>
<View style={
backgroundColor: 'white',
zIndex: 1,
margin: 2,
borderRadius: 10,
borderWidth: 2
}/>
<View style={backgroundColor: 'green', zIndex: 0}/>
</View>
Try this. You shouldn't be nesting them, because they are related to each other as a parent and child. By the way you might need to use flex to align them correctly :)