CODEWITHSUNDEEP
reactjsreact-native
FairyQueen
FairyQueen

Reputation: 2373

How to force react native content to ignore keyboard?

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:

enter image description here

What it looks like with the keyboard:

enter image description here

Upvotes: 6

Views: 8602

Answers (6)

sofian
sofian

Reputation: 1

use zIndex for the element that you want to be displayed

Upvotes: 0

faryar76
faryar76

Reputation: 168

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

Upvotes: 0

Rahul Shakya
Rahul Shakya

Reputation: 1425

remove the position absolute it will works just fine trust me

Upvotes: 0

brkn
brkn

Reputation: 636

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.

Upvotes: 10

sharad_kalya
sharad_kalya

Reputation: 285

I went through a similar problem and solved it by changing android:windowSoftInputMode="adjustPan”

In android manifest. Also clean and rebuild. This might work

Upvotes: 0

Prashant Dhameja
Prashant Dhameja

Reputation: 85

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.

Upvotes: 2

Related Questions