KeyboardAvoidingView not working in FORM component

[jaysassyinfotech]

<View
    style={Pagestyles.walletSendView}
>
    <KeyboardAvoidingView 
        behavior='padding' 
    >
    <Form >
        <Item>
            <Input
                placeholder='Available Balance : XXX.XX / USD'
                onChangeText={(availableBalance) => this.setState({ availableBalance })}
                ref={(input) => this._availableBalance = input}
                returnKeyType='next'
                onSubmitEditing={() => this._focusInput('_sendToAddress')}
                value={this.state.availableBalance}
            />
        </Item>
        <Item>
            <Input
                placeholder='Send to address'
                onChangeText={(sendToAddress) => this.setState({ sendToAddress })}
                ref={(input) => this._sendToAddress = input}
                returnKeyType='next'
                onSubmitEditing={() => this._focusInput('_numberOfCoinsToSend')}
                value={this.state.sendToAddress}
            />
            <Icon
                active name='md-camera'
            />
        </Item>
        <Item>
            <Input
                placeholder='Number of coins to send'
                onChangeText={(numberOfCoinsToSend) => this.setState({ numberOfCoinsToSend })}
                ref={(input) => this._numberOfCoinsToSend = input}
                returnKeyType='next'
                onSubmitEditing={() => this._focusInput('_amountOfUSDToSendInFID')}
                value={this.state.numberOfCoinsToSend}
            />
        </Item>
        <Item>
            <Input
                placeholder='Amount of USD to send in FID'
                onChangeText={(amountOfUSDToSendInFID) => this.setState({ amountOfUSDToSendInFID })}
                ref={(input) => this._amountOfUSDToSendInFID = input}
                returnKeyType='next'
                onSubmitEditing={() => this._focusInput('_processingFee')}
                value={this.state.amountOfUSDToSendInFID}
            />
        </Item>
        <Item>
            <Input
                placeholder='Processing Fee : XXX.XX'
                onChangeText={(processingFee) => this.setState({ processingFee })}
                ref={(input) => this._processingFee = input}
                returnKeyType='done'
                value={this.state.processingFee}
            />
        </Item>
        <Button
            block
            onPress={() => this.onPress('')}
            style={{ marginTop: 10, backgroundColor: '#81a9cd' }}>
            <Text>
                Send
            </Text>
        </Button>
    </Form >
    </KeyboardAvoidingView> 
</View>

Hear i used Form native base component. i want scroll this form when fill up. For scrolling view i used KeyboardAvoidingView react-native component. Not working scroll view.

[SupriyaKalghatgi]

@jaysassyinfotech Can you share output for this?

[jaysassyinfotech]

@SupriyaKalghatgi

[akhil-ga]

@jaysassyinfotech try wrapping the code inside a <ScrollView/>

[jaysassyinfotech]

@akhil-geekyants

**<View
    style={Pagestyles.walletSendView}
>
    {/* <KeyboardAvoidingView 
                        behavior='padding' 
                    > */}
    <ScrollView>
        <Form >
            <Item>
                <Input
                    placeholder='Available Balance : XXX.XX / USD'
                    onChangeText={(availableBalance) => this.setState({ availableBalance })}
                    ref={(input) => this._availableBalance = input}
                    returnKeyType='next'
                    onSubmitEditing={() => this._focusInput('_sendToAddress')}
                    value={this.state.availableBalance}
                // onFocus={(event) => {
                //     console.log("event >>",event);
                //     this._scrollToInput(findNodeHandle(event.target))
                // }}
                />
            </Item>
            <Item>
                <Input
                    placeholder='Send to address'
                    onChangeText={(sendToAddress) => this.setState({ sendToAddress })}
                    ref={(input) => this._sendToAddress = input}
                    returnKeyType='next'
                    onSubmitEditing={() => this._focusInput('_numberOfCoinsToSend')}
                    value={this.state.sendToAddress}
                // onFocus={(event) => {
                //     this._scrollToInput(findNodeHandle(event.target))
                // }}
                />
                <Icon
                    active name='md-camera'
                />
            </Item>
            <Item>
                <Input
                    placeholder='Number of coins to send'
                    onChangeText={(numberOfCoinsToSend) => this.setState({ numberOfCoinsToSend })}
                    ref={(input) => this._numberOfCoinsToSend = input}
                    returnKeyType='next'
                    onSubmitEditing={() => this._focusInput('_amountOfUSDToSendInFID')}
                    value={this.state.numberOfCoinsToSend}
                // onFocus={(event) => {
                //     this._scrollToInput(findNodeHandle(event.target))
                // }}
                />
            </Item>
            <Item>
                <Input
                    placeholder='Amount of USD to send in FID'
                    onChangeText={(amountOfUSDToSendInFID) => this.setState({ amountOfUSDToSendInFID })}
                    ref={(input) => this._amountOfUSDToSendInFID = input}
                    returnKeyType='next'
                    onSubmitEditing={() => this._focusInput('_processingFee')}
                    value={this.state.amountOfUSDToSendInFID}
                // onFocus={(event) => {
                //     this._scrollToInput(findNodeHandle(event.target))
                // }}
                />
            </Item>
            <Item>
                <Input
                    placeholder='Processing Fee : XXX.XX'
                    onChangeText={(processingFee) => this.setState({ processingFee })}
                    ref={(input) => this._processingFee = input}
                    returnKeyType='done'
                    value={this.state.processingFee}
                />
            </Item>
            <Button
                block
                onPress={() => this.onPress('')}
                style={{ marginTop: 10, backgroundColor: '#81a9cd' }}>
                <Text>
                    Send
                            </Text>
            </Button>
        </Form >
        {/* </KeyboardAvoidingView>  */}
    </ScrollView>
</View>**

Not work i already used that.

[akhil-ga]

@jaysassyinfotech place <ScrollView/> outside <KeyboardAvoidingView/>

[jaysassyinfotech]

KeyboardAvoidingView is commented in code @akhil-geekyants

<View
    style={Pagestyles.walletSendView}
>
    <ScrollView>
        <Form >
            <Item>
                <Input
                    placeholder='Available Balance : XXX.XX / USD'
                    onChangeText={(availableBalance) => this.setState({ availableBalance })}
                    ref={(input) => this._availableBalance = input}
                    returnKeyType='next'
                    onSubmitEditing={() => this._focusInput('_sendToAddress')}
                    value={this.state.availableBalance}
                />
            </Item>
            <Item>
                <Input
                    placeholder='Send to address'
                    onChangeText={(sendToAddress) => this.setState({ sendToAddress })}
                    ref={(input) => this._sendToAddress = input}
                    returnKeyType='next'
                    onSubmitEditing={() => this._focusInput('_numberOfCoinsToSend')}
                    value={this.state.sendToAddress}
                />
                <Icon
                    active name='md-camera'
                />
            </Item>
            <Item>
                <Input
                    placeholder='Number of coins to send'
                    onChangeText={(numberOfCoinsToSend) => this.setState({ numberOfCoinsToSend })}
                    ref={(input) => this._numberOfCoinsToSend = input}
                    returnKeyType='next'
                    onSubmitEditing={() => this._focusInput('_amountOfUSDToSendInFID')}
                    value={this.state.numberOfCoinsToSend}
                />
            </Item>
            <Item>
                <Input
                    placeholder='Amount of USD to send in FID'
                    onChangeText={(amountOfUSDToSendInFID) => this.setState({ amountOfUSDToSendInFID })}
                    ref={(input) => this._amountOfUSDToSendInFID = input}
                    returnKeyType='next'
                    onSubmitEditing={() => this._focusInput('_processingFee')}
                    value={this.state.amountOfUSDToSendInFID}

                />
            </Item>
            <Item>
                <Input
                    placeholder='Processing Fee : XXX.XX'
                    onChangeText={(processingFee) => this.setState({ processingFee })}
                    ref={(input) => this._processingFee = input}
                    returnKeyType='done'
                    value={this.state.processingFee}
                />
            </Item>
            <Button
                block
                onPress={() => this.onPress('')}
                style={{ marginTop: 10, backgroundColor: '#81a9cd' }}>
                <Text>Send</Text>
            </Button>
        </Form >
    </ScrollView>
</View>

[anil1712]

In my case Input loses focus when updating state and keyboard gets disappeared

[akhil-ga]

@jaysassyinfotech tried your code. Attaching a Gif

Gif

It would be easy for you, if you follow NativeBase screen structure . NativeBase <Content/> component have KeyboardAwareScrollView implemented in it.

Example :

[akhil-ga]

@anil1712 couldn't find any such issue. Attaching a Gif

Gif

[anil1712]

Since there is no onSubmit event is available in Form component provided by NativeBase.
So I am using [simple-react-form](https://github.com/nicolaslopezj/simple-react-form) component. Maybe that's why I am getting this behavior.

@akhil-geekyants Can you please tell me how to get all input fields values on onPress events?

[anil1712]

@akhil-geekyants I want to pass object directly into form then it set the input field values based on the object keys.
Is it possible?

[anil1712]

@akhil-geekyants Attaching gifs, please check the behavior

1. Keyboard gets disappeared

2. Flickering issue and fields get duplicated

[akhil-ga]

@anil1712 can you post some code

[anil1712]

Sorry It was my mistake, I was using the new Date().getUTCTimeMillis() to generate the key props for elements, so that's why it was creating those issues.

[SupriyaKalghatgi]

@anil1712 any issues left unsolved here?

[anil1712]

No.
But it would be better if you can provide any solution for this comment.
#1518 (comment)
and
#1518 (comment)

[akhil-ga]

@anil1712 you can pass the value to an <Input/> component using it's value prop.
You can store the value of an input in state and pass those values while submitting.
See the gif for an example

[masumbillah]

My problem is solved

 <ScrollView>
    <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    .........
    .........
    </KeyboardAvoidingView>
 </ScrollView>