CODEWITHSUNDEEP
react-native
Swap
Swap

Reputation: 61

React Native Soft Keyboard Issue

I have TextInput at the bottom of the screen. When TextInput is focused then keyboard appears and due to this all the flex view gets shrink to the available screen. I want to achieve that page layout should not change and input should be visible to user.

  <View style={MainView}>
        <View style={subMain1}>
            <View style={{flex:1,backgroundColor:'#add264'}}></View>
            <View style={{flex:1,backgroundColor:'#b7d778'}}></View>
            <View style={{flex:1,backgroundColor:'#c2dd8b'}}></View>
        </View>
        <View style={subMain2}>
            <View style={{flex:1,backgroundColor:'#cce39f'}}></View>
            <View style={{flex:1,backgroundColor:'#d6e9b3'}}></View>
            <View style={{flex:1,backgroundColor:'#69ee9a'}}>
                <TextInput placeholder="input field"/>
            </View>

        </View>
    </View>

const Styles = {

MainView:{
    flex:1,
    backgroundColor:'green'
},
subMain1:{
    flex:1,
    backgroundColor:'blue'
},
subMain2:{
    flex:1,
    backgroundColor:'orange'
}

} enter image description here

Upvotes: 0

Views: 1590

Answers (3)

user9480243
user9480243

Reputation:

Use 'react-native-keyboard-aware-scroll-view' and keep this as parent view and put all view inside that view. This node module creates scrollview and it listens to keyboard show event and automatically scrolls your screen so user can see the input box without getting it hidden behind the soft keyboard.

Upvotes: 0

Swap
Swap

Reputation: 61

I just found an answer to this.

I just have to use fixed height for my main container and inside that I can use flex layout. And If keyboard is hiding the content then we can use Scrollview that will allow scrollable interface when user clicks on input.

This helped me hope it can help others. :)

Upvotes: 2

Skip Suva
Skip Suva

Reputation: 935

I'm not quite sure I understand what the issue you're running into, but I recently struggled with keyboard avoiding views in my app - for some reason, the native component just wasn't working.

Check this package out - it did the trick for me, and offers some cool customization capabilities: https://github.com/APSL/react-native-keyboard-aware-scroll-view

Upvotes: 0

Related Questions