Breaking News: Grepper is joining You.com. Read the official announcement!

react native keyboard avoiding view : text input

Sore Sardine answered on January 9, 2023 Popularity 9/10 Helpfulness 4/10

answer react native keyboard avoiding view : text input

react native keyboard avoiding view : text input

Comment

## UP Screen when Keyboard Active ( for : ios , android )
##### Use: <KeyboardAvoidingView> component with <ScrollView>

## Set ( behavior == 'position' , So: [ contentContainerStyle={{flexGrow: 1}}  ] property set height of View 

```

<Fragment>
    <SafeAreaView style={{ flex: 0, backgroundColor: colors.backgroundAuth }} />
    <SafeAreaView style={{ flex: 1, backgroundColor: colors.backgroundAuth }}>
        <StatusBar barStyle="light-content" hidden />
        <KeyboardAvoidingView style={{ flexGrow: 1 }}  behavior={ "position"} contentContainerStyle={{flexGrow: 1}} >  // --- $$$ : behavior:
            <ScrollView contentContainerStyle={{ flexGrow: 1 }} bounces={false} >	// --- $$$ :  bounces={false}  cannot scrolling

                <View style={[{  flexGrow: 1, backgroundColor: '', paddingHorizontal: sc.padMax }]}>

                    {content}

                </View>

            </ScrollView>
        </KeyboardAvoidingView>

    </SafeAreaView>
</Fragment>


```

Popularity 9/10 Helpfulness 4/10 Language whatever

Source: Grepper

Tags: input keyboard react-native text whatever

Link to this answer
Share Copy Link

Contributed on Jan 09 2023

Sore Sardine

0 Answers Avg Quality 2/10

react native keyboard avoiding view : text input

Contents

More Related Answers

react native keyboard avoiding view : text input

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.