The footer button is equipped with a soft keyboard,

I am developing an interactive application. I use a fixed footer button, which works great on the page, but when used inside a modal, it appears on top of the soft keyboard when text input is focused. I want the footer button to remain stationary even when the soft keyboard appears. Structure of my code:

`<Modal>
 <View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View>footerButton</View>
 </View>
 </Modal>`

      

        
        
        
      

    

Below is the code for my footer:

`<TouchableHighlight 
   style={commonStyles.footerButton} 
   onPress={this.action.bind(this)}>
   <View style={commonStyles.footerbuttonView}>
       <Text style={commonStyles.buttonText}>BUTTON TEXT</Text>
   </View>
 </TouchableHighlight>`

const commonStyles = StyleSheet.create({
  footerButton: {
    flexDirection: 'row',
    backgroundColor: '#1a485a',
    position: 'absolute',
    height: height/10,
    left: 0,
    bottom: 0,
    right: 0,
    margin:0,
    padding:0,
    justifyContent: 'center',
    alignItems: 'center'
  },
footerbuttonView:{
    flexDirection: 'row',
    padding:15,
  },
buttonText : {
    color: 'white',
    fontFamily: 'Montserrat-Light',
    textAlign: 'center',
    fontSize: 14*fontScale
  },
});

      

        
        
        
      

    

I have set android: windowSoftInputMode for settingPan:

android:windowSoftInputMode="adjustPan" 

      

        
        
        
      

    

This works well on all pages. But it doesn't work for modals. Can anyone suggest how to fix this problem?