React Native Keyboard pushing the header(Android)

Question

When the TextInput is onFocus the keyboard keeps pushing the content and the header outside the screen, with or without the KeyboardAvoidingView Component, the behaviour is the same.

I tried the following in the manifest:

android:windowSoftInputMode="adjustPan"

when I changed the above to

android:windowSoftInputMode="adjustResize"

it works fine the header is not being pushed but it pushes all the views which is found under the TextInput above the keyboard which is not desired

android:windowSoftInputMode="adjustNothing"

it shows no effect even if i added the KeyboardAvoidingView Component

My Code

<SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'never' }}>
            <StatusBarPlaceHolder />
            <StatusBar barStyle="light-content" hidden={false} backgroundColor="#A4395A" translucent={true} />
            <Header title={'ارسال دعوة'} />
            <View style={{ flex: 1, backgroundColor: '#fff' }}>
                <Text style={{ fontSize: 15, fontWeight: 'bold', textAlign: 'right', marginHorizontal: 15, marginTop: 5, fontFamily: Fonts.Cairo }}>نوع المناسبة</Text>
                <View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 5 }}>
                    <TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgGe, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-General.png'))} >
                        <Image resizeMode='stretch' style={{ borderRadius: 5, height: height / 8, width: width / 6 }} source={require('../../assets/T-General.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgG, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Grad.png'))} >
                        <Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Grad.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgE, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Eng.png'))}>
                        <Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Eng.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgB, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Birthday.png'))}>
                        <Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Birthday.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgW, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Wedding.png'))}>
                        <Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Wedding.png')} />
                    </TouchableOpacity>

                </View>

         <KeyboardAvoidingView style={{flex:1}}>


                    <ScrollView  style={{flex:1, backgroundColor: 'white' }} ref={scrollView => this.scrollView = scrollView}>

                              <View style={{ justifyContent: 'space-between', flexDirection: 'row', marginHorizontal: 5 }}>
                            <View style={{ flex: 1, marginHorizontal: 5 }}>
                                <Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >يوافق الهجري</Text>
                                <View style={{ flex: 1, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
                                    <TextInput
                                        underlineColorAndroid='transparent'
                                        value={this.state.dateH}
                                        onChangeText={(value) => this.setState({ dateH: value })}
                                        style={{
                                            flex: 1, paddingBottom: 7,
                                            textAlign: 'right', marginHorizontal: 10
                                        }} placeholder={'الهجري'} />
                                </View>
                            </View>
                            <View style={{ flex: 1, marginHorizontal: 5 }}>
                                <Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >التاريخ ميلادي</Text>
                                <View style={{ flex: 1, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
                                    <DatePicker
                                        date={this.state.date}
                                        mode="date"
                                        placeholder="اختار التاريخ"
                                        format="YYYY-MM-DD"
                                        minDate="2019-1-1"
                                        maxDate="2020-1-1"
                                        confirmBtnText="Confirm"
                                        cancelBtnText="Cancel"
                                        locale={"ar"}

                                        customStyles={{

                                            dateIcon: {
                                                height: 0,
                                                width: 0
                                            },
                                            dateInput: {
                                                marginLeft: 45,

                                                paddingBottom: 10,
                                                borderWidth: 0,
                                            }

                                            // ../.. You can check the source to find the other keys.
                                        }}
                                        onDateChange={(date) => this.setDate(date)}
                                    />
                                </View>
                            </View>
                        </View>
                        <View style={{ flex: 1, justifyContent: 'space-between', flexDirection: 'row', marginHorizontal: 5, marginTop: 5 }}>
                            <View style={{ flex: 1, marginHorizontal: 5 }}>
                                <Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >موقع المناسبة</Text>
                                <View style={{ flex: 1, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
                                    <TextInput
                                        underlineColorAndroid='transparent'
                                        multiline
                                        blurOnSubmit
                                        onChangeText={(value) => this.setState({ location: value })}
                                        style={{
                                            flex: 1, paddingBottom: 7,
                                            textAlign: 'right', marginHorizontal: 10
                                        }} placeholder={'الشارع الحي'} />
                                </View>
                            </View>
                            <View style={{ flex: 1, marginHorizontal: 5 }}>
                                <Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >الداعي</Text>
                                <View style={{ flex: 1, padding: 8, backgroundColor: '#F3F3F3', borderRadius: 5 }}>

                                    <TextInput
                                        underlineColorAndroid='transparent'
                                        multiline
                                        blurOnSubmit
                                        onChangeText={(value) => this.setState({ fromD: value })}
                                        style={{
                                            flex: 1, paddingBottom: 7,
                                            textAlign: 'right', marginHorizontal: 10
                                        }} placeholder={'اسم الداعي'} />
                                </View>
                            </View>
                        </View>
                        <Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginTop: 5, marginHorizontal: 10, fontFamily: Fonts.Cairo }} >نص الدعوة</Text>
                        <View style={{ flex: 1, marginHorizontal: 10, marginTop: 5, backgroundColor: '#F3F3F3', borderRadius: 5 }}>

                            <TextInput
                                underlineColorAndroid='transparent'
                                multiline
                                onBlur={() => this.scrollView.scrollTo({ x: 0, y: 0, animated: true })}
                                onFocus={Platform.OS=='ios'? () => this.scrollView.scrollTo({ x: 0, y: 90, animated: true }):null}
                                blurOnSubmit

                                onChangeText={(value) => this.setState({ body: value })}
                                style={{
                                    flex: 1, paddingBottom: 7, height: height / 7,
                                    textAlign: 'right', marginHorizontal: 10
                                }} placeholder={'نتشرف بحضوركم لحفل تخرج ولدنا عثمان الصفادي'} />
                        </View>
                        <Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginTop: 5, marginHorizontal: 10, fontFamily: Fonts.Cairo }} >ملحاظات</Text>
                        <View style={{ flex: 1, alignItems: 'flex-end', marginHorizontal: 10, marginTop: 5, }}>

                            <TextInput
                                underlineColorAndroid='transparent'
                                multiline
                                blurOnSubmit
                                onBlur={() => this.scrollView.scrollTo({ x: 0, y: 0, animated: true })}
                                onFocus={Platform.OS=='ios'? () => this.scrollView.scrollTo({ x: 0, y: 195, animated: true }):null}
                                onChangeText={(value) => this.setState({ notes: value })}
                                style={{
                                    width: width / 2, paddingHorizontal: 10,
                                    paddingBottom: 7, height: height / 10,
                                    textAlign: 'right', backgroundColor: '#F3F3F3', borderRadius: 5
                                }} placeholder={'ممنوع اصطحاب الاطفال..'} />
                        </View>
                    </ScrollView>
                     </KeyboardAvoidingView>

                <View style={{ alignItems: 'center', justifyContent: 'flex-end' }}>


                    <View style={{ flexDirection: 'row' }}>


                        <TouchableOpacity onPress={() => this.designCard()} style={{
                            justifyContent: 'center', width: width / 3, backgroundColor: '#753C4C', padding: 7,
                            borderTopLeftRadius: 5, borderBottomLeftRadius: 5, height: 45, marginVertical: 20, marginHorizontal: 1, alignSelf: 'center'
                        }}>
                            <Text style={{ color: 'white', textAlign: 'center', fontSize: 18, fontFamily: Fonts.Cairo }}>تصميم كرت</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.takephoto()} style={{
                            justifyContent: 'center', borderTopRightRadius: 5, borderBottomRightRadius: 5,
                            backgroundColor: '#753C4C', height: 45, width: width / 3, padding: 7, marginVertical: 20, marginHorizontal: 1, alignSelf: 'center'
                        }}>
                            <Text style={{ color: 'white', textAlign: 'center', fontFamily: Fonts.Cairo, fontSize: 18 }}>ادراج كرت</Text>
                        </TouchableOpacity>

                    </View>
                </View>
            </View>
        </SafeAreaView>

Answer 1

尝试

<KeyboardAvoidingView behavior='padding'>