KeyboardAvoidingView - Reset height when Keyboard is hidden











up vote
15
down vote

favorite
3












I'm using React Natives KeyboardAvoidingView to set the height of my View when the Keyboard is shown. But when I close the the keyboard in the app, the height of the View is not changed back to it's original value.



<KeyboardAvoidingView behavior="height" style={styles.step}>
<View style={styles.stepHeader}>
// my content
</View>
</KeyboardAvoidingView>


The View with the red outline did take up the whole space before I opened and closed the keyboard.



Screenshot










share|improve this question






















  • I experience the same issue. [iOS] Have you found a solution?
    – Edgar
    Mar 21 '17 at 18:39








  • 1




    @Edgar For some cases I switched to the following package which works, but the Component that RN offers still doesn't work. github.com/APSL/react-native-keyboard-aware-scroll-view
    – Max Tommy Mitschke
    Mar 21 '17 at 23:08

















up vote
15
down vote

favorite
3












I'm using React Natives KeyboardAvoidingView to set the height of my View when the Keyboard is shown. But when I close the the keyboard in the app, the height of the View is not changed back to it's original value.



<KeyboardAvoidingView behavior="height" style={styles.step}>
<View style={styles.stepHeader}>
// my content
</View>
</KeyboardAvoidingView>


The View with the red outline did take up the whole space before I opened and closed the keyboard.



Screenshot










share|improve this question






















  • I experience the same issue. [iOS] Have you found a solution?
    – Edgar
    Mar 21 '17 at 18:39








  • 1




    @Edgar For some cases I switched to the following package which works, but the Component that RN offers still doesn't work. github.com/APSL/react-native-keyboard-aware-scroll-view
    – Max Tommy Mitschke
    Mar 21 '17 at 23:08















up vote
15
down vote

favorite
3









up vote
15
down vote

favorite
3






3





I'm using React Natives KeyboardAvoidingView to set the height of my View when the Keyboard is shown. But when I close the the keyboard in the app, the height of the View is not changed back to it's original value.



<KeyboardAvoidingView behavior="height" style={styles.step}>
<View style={styles.stepHeader}>
// my content
</View>
</KeyboardAvoidingView>


The View with the red outline did take up the whole space before I opened and closed the keyboard.



Screenshot










share|improve this question













I'm using React Natives KeyboardAvoidingView to set the height of my View when the Keyboard is shown. But when I close the the keyboard in the app, the height of the View is not changed back to it's original value.



<KeyboardAvoidingView behavior="height" style={styles.step}>
<View style={styles.stepHeader}>
// my content
</View>
</KeyboardAvoidingView>


The View with the red outline did take up the whole space before I opened and closed the keyboard.



Screenshot







javascript ios react-native keyboard






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Jan 12 '17 at 15:05









Max Tommy Mitschke

7631625




7631625












  • I experience the same issue. [iOS] Have you found a solution?
    – Edgar
    Mar 21 '17 at 18:39








  • 1




    @Edgar For some cases I switched to the following package which works, but the Component that RN offers still doesn't work. github.com/APSL/react-native-keyboard-aware-scroll-view
    – Max Tommy Mitschke
    Mar 21 '17 at 23:08




















  • I experience the same issue. [iOS] Have you found a solution?
    – Edgar
    Mar 21 '17 at 18:39








  • 1




    @Edgar For some cases I switched to the following package which works, but the Component that RN offers still doesn't work. github.com/APSL/react-native-keyboard-aware-scroll-view
    – Max Tommy Mitschke
    Mar 21 '17 at 23:08


















I experience the same issue. [iOS] Have you found a solution?
– Edgar
Mar 21 '17 at 18:39






I experience the same issue. [iOS] Have you found a solution?
– Edgar
Mar 21 '17 at 18:39






1




1




@Edgar For some cases I switched to the following package which works, but the Component that RN offers still doesn't work. github.com/APSL/react-native-keyboard-aware-scroll-view
– Max Tommy Mitschke
Mar 21 '17 at 23:08






@Edgar For some cases I switched to the following package which works, but the Component that RN offers still doesn't work. github.com/APSL/react-native-keyboard-aware-scroll-view
– Max Tommy Mitschke
Mar 21 '17 at 23:08














2 Answers
2






active

oldest

votes

















up vote
10
down vote



accepted










A more detailed explanation on Nisarg's answer.



Create a key for the KeyboardAvoidingView in the constructor



constructor(props) {
this.state = {
keyboardAvoidingViewKey: 'keyboardAvoidingViewKey',
}
}


add listener on the keyboard's will/did hide (and remove it in the willUnmount)



import { KeyboardAvoidingView, Keyboard, Platform } from 'react-native'

componentDidMount() {
// using keyboardWillHide is better but it does not work for android
this.keyboardHideListener = Keyboard.addListener(Platform.OS === 'android' ? 'keyboardDidHide': 'keyboardWillHide', this.keyboardHideListener.bind(this));
}

componentWillUnmount() {
this.keyboardHideListener.remove()
}


update the keyboardAvoidingViewKey in the keyboardHideListener function, should be a new value each time (I used a timestamp) and use this key when rendering the KeyboardAvoidingView element.



keyboardHideListener() {
this.setState({
keyboardAvoidingViewKey:'keyboardAvoidingViewKey' + new Date().getTime()
});
}

render() {
let { keyboardAvoidingViewKey } = this.state
return (
<KeyboardAvoidingView behavior={'height'} key={keyboardAvoidingViewKey} style={...}>
...
</KeyboardAvoidingView>
)
}


Note:
Keep in mind that this will recreate the elements inside the KeyboardAvoidingView (i.e: will call their constructor function, I'm not quite sure why, I'll update the answer after deeper investigation), so you'll have to keep track of any state/prop values that might be overwritten



Update



After a much deeper investigation, I now know why the views are recreated once you change the key.
In order to truly understand why it happens, one must be familiar with how react-native dispatches the render commands to the native side, this particular explanation is pretty long, if it interests you, you can read my answer here. In short, react-native uses Reactjs to diff the changes that should be rendered, these diffs are then sent as commands to a component named UIManager, which sends imperative commands that translate into a layout tree, which changes the layout based on the diff commands.
Once you set a key on a component, reactjs uses this key to identify changes to said component, if this key changes, reactjs identifies the component as a completely new one, which in return sends the initial command to create said component, making all it's children to be created from scratch because there are identified as new elements in a new layout tree, deleting the old tree and creating a new one instead of just adjusting the diffs



If you would like, you can actually spy on these dispatched messages by adding the following code to your App.js file:



import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'
const spyFunction = (msg) => {
console.log(msg);
};

MessageQueue.spy(spyFunction);


If you do that, you'll notice in the logs that each time the key changes, the command that is dispatched in return is createViews, which like stated above creates all the elements that are nested under said component.






share|improve this answer























  • Thanks for the detailed explanation. If you find out why it does recreate the elements I'd appreciate and update on your answer!
    – Max Tommy Mitschke
    Sep 16 '17 at 20:10










  • In my case, the keyboard just does not go away, keep popping up and down.
    – Eduard
    Oct 15 '17 at 16:48










  • this is probably another kind of issue, what you are experiencing, this code doesn't affect the keyboard, only the layout that is hidden behind of the keyboard, read the question, it says > when I close the the keyboard in the app, the height of the View is not changed back to it's original value.
    – Samer Murad
    Oct 16 '17 at 9:57












  • Worked like a charm. Thanks!
    – dsternlicht
    Feb 21 at 13:57






  • 1




    If you get this.setState is not a function, change this.keyboardHideListener to this.keyboardHideListener.bind(this) in componentDidMount.
    – jinglesthula
    Jul 10 at 17:02


















up vote
3
down vote













Please give key to KeyboardAvoidingView and change when keyboard open and close so it will render and take height



<KeyboardAvoidingView behavior="height" style={styles.step} key={values}>





share|improve this answer





















  • Saved my day! Thnx! :)
    – Teuta Koraqi
    Jun 11 at 13:11










  • How that would work? Tested and didn't work for me
    – diofeher
    Sep 12 at 11:10






  • 1




    @diofeher please read Samer Murad answer he describes my answer you people can understand. Thank you ..!!
    – Nisarg Thakkar
    Sep 12 at 12:14











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41616457%2fkeyboardavoidingview-reset-height-when-keyboard-is-hidden%23new-answer', 'question_page');
}
);

Post as a guest
































2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
10
down vote



accepted










A more detailed explanation on Nisarg's answer.



Create a key for the KeyboardAvoidingView in the constructor



constructor(props) {
this.state = {
keyboardAvoidingViewKey: 'keyboardAvoidingViewKey',
}
}


add listener on the keyboard's will/did hide (and remove it in the willUnmount)



import { KeyboardAvoidingView, Keyboard, Platform } from 'react-native'

componentDidMount() {
// using keyboardWillHide is better but it does not work for android
this.keyboardHideListener = Keyboard.addListener(Platform.OS === 'android' ? 'keyboardDidHide': 'keyboardWillHide', this.keyboardHideListener.bind(this));
}

componentWillUnmount() {
this.keyboardHideListener.remove()
}


update the keyboardAvoidingViewKey in the keyboardHideListener function, should be a new value each time (I used a timestamp) and use this key when rendering the KeyboardAvoidingView element.



keyboardHideListener() {
this.setState({
keyboardAvoidingViewKey:'keyboardAvoidingViewKey' + new Date().getTime()
});
}

render() {
let { keyboardAvoidingViewKey } = this.state
return (
<KeyboardAvoidingView behavior={'height'} key={keyboardAvoidingViewKey} style={...}>
...
</KeyboardAvoidingView>
)
}


Note:
Keep in mind that this will recreate the elements inside the KeyboardAvoidingView (i.e: will call their constructor function, I'm not quite sure why, I'll update the answer after deeper investigation), so you'll have to keep track of any state/prop values that might be overwritten



Update



After a much deeper investigation, I now know why the views are recreated once you change the key.
In order to truly understand why it happens, one must be familiar with how react-native dispatches the render commands to the native side, this particular explanation is pretty long, if it interests you, you can read my answer here. In short, react-native uses Reactjs to diff the changes that should be rendered, these diffs are then sent as commands to a component named UIManager, which sends imperative commands that translate into a layout tree, which changes the layout based on the diff commands.
Once you set a key on a component, reactjs uses this key to identify changes to said component, if this key changes, reactjs identifies the component as a completely new one, which in return sends the initial command to create said component, making all it's children to be created from scratch because there are identified as new elements in a new layout tree, deleting the old tree and creating a new one instead of just adjusting the diffs



If you would like, you can actually spy on these dispatched messages by adding the following code to your App.js file:



import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'
const spyFunction = (msg) => {
console.log(msg);
};

MessageQueue.spy(spyFunction);


If you do that, you'll notice in the logs that each time the key changes, the command that is dispatched in return is createViews, which like stated above creates all the elements that are nested under said component.






share|improve this answer























  • Thanks for the detailed explanation. If you find out why it does recreate the elements I'd appreciate and update on your answer!
    – Max Tommy Mitschke
    Sep 16 '17 at 20:10










  • In my case, the keyboard just does not go away, keep popping up and down.
    – Eduard
    Oct 15 '17 at 16:48










  • this is probably another kind of issue, what you are experiencing, this code doesn't affect the keyboard, only the layout that is hidden behind of the keyboard, read the question, it says > when I close the the keyboard in the app, the height of the View is not changed back to it's original value.
    – Samer Murad
    Oct 16 '17 at 9:57












  • Worked like a charm. Thanks!
    – dsternlicht
    Feb 21 at 13:57






  • 1




    If you get this.setState is not a function, change this.keyboardHideListener to this.keyboardHideListener.bind(this) in componentDidMount.
    – jinglesthula
    Jul 10 at 17:02















up vote
10
down vote



accepted










A more detailed explanation on Nisarg's answer.



Create a key for the KeyboardAvoidingView in the constructor



constructor(props) {
this.state = {
keyboardAvoidingViewKey: 'keyboardAvoidingViewKey',
}
}


add listener on the keyboard's will/did hide (and remove it in the willUnmount)



import { KeyboardAvoidingView, Keyboard, Platform } from 'react-native'

componentDidMount() {
// using keyboardWillHide is better but it does not work for android
this.keyboardHideListener = Keyboard.addListener(Platform.OS === 'android' ? 'keyboardDidHide': 'keyboardWillHide', this.keyboardHideListener.bind(this));
}

componentWillUnmount() {
this.keyboardHideListener.remove()
}


update the keyboardAvoidingViewKey in the keyboardHideListener function, should be a new value each time (I used a timestamp) and use this key when rendering the KeyboardAvoidingView element.



keyboardHideListener() {
this.setState({
keyboardAvoidingViewKey:'keyboardAvoidingViewKey' + new Date().getTime()
});
}

render() {
let { keyboardAvoidingViewKey } = this.state
return (
<KeyboardAvoidingView behavior={'height'} key={keyboardAvoidingViewKey} style={...}>
...
</KeyboardAvoidingView>
)
}


Note:
Keep in mind that this will recreate the elements inside the KeyboardAvoidingView (i.e: will call their constructor function, I'm not quite sure why, I'll update the answer after deeper investigation), so you'll have to keep track of any state/prop values that might be overwritten



Update



After a much deeper investigation, I now know why the views are recreated once you change the key.
In order to truly understand why it happens, one must be familiar with how react-native dispatches the render commands to the native side, this particular explanation is pretty long, if it interests you, you can read my answer here. In short, react-native uses Reactjs to diff the changes that should be rendered, these diffs are then sent as commands to a component named UIManager, which sends imperative commands that translate into a layout tree, which changes the layout based on the diff commands.
Once you set a key on a component, reactjs uses this key to identify changes to said component, if this key changes, reactjs identifies the component as a completely new one, which in return sends the initial command to create said component, making all it's children to be created from scratch because there are identified as new elements in a new layout tree, deleting the old tree and creating a new one instead of just adjusting the diffs



If you would like, you can actually spy on these dispatched messages by adding the following code to your App.js file:



import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'
const spyFunction = (msg) => {
console.log(msg);
};

MessageQueue.spy(spyFunction);


If you do that, you'll notice in the logs that each time the key changes, the command that is dispatched in return is createViews, which like stated above creates all the elements that are nested under said component.






share|improve this answer























  • Thanks for the detailed explanation. If you find out why it does recreate the elements I'd appreciate and update on your answer!
    – Max Tommy Mitschke
    Sep 16 '17 at 20:10










  • In my case, the keyboard just does not go away, keep popping up and down.
    – Eduard
    Oct 15 '17 at 16:48










  • this is probably another kind of issue, what you are experiencing, this code doesn't affect the keyboard, only the layout that is hidden behind of the keyboard, read the question, it says > when I close the the keyboard in the app, the height of the View is not changed back to it's original value.
    – Samer Murad
    Oct 16 '17 at 9:57












  • Worked like a charm. Thanks!
    – dsternlicht
    Feb 21 at 13:57






  • 1




    If you get this.setState is not a function, change this.keyboardHideListener to this.keyboardHideListener.bind(this) in componentDidMount.
    – jinglesthula
    Jul 10 at 17:02













up vote
10
down vote



accepted







up vote
10
down vote



accepted






A more detailed explanation on Nisarg's answer.



Create a key for the KeyboardAvoidingView in the constructor



constructor(props) {
this.state = {
keyboardAvoidingViewKey: 'keyboardAvoidingViewKey',
}
}


add listener on the keyboard's will/did hide (and remove it in the willUnmount)



import { KeyboardAvoidingView, Keyboard, Platform } from 'react-native'

componentDidMount() {
// using keyboardWillHide is better but it does not work for android
this.keyboardHideListener = Keyboard.addListener(Platform.OS === 'android' ? 'keyboardDidHide': 'keyboardWillHide', this.keyboardHideListener.bind(this));
}

componentWillUnmount() {
this.keyboardHideListener.remove()
}


update the keyboardAvoidingViewKey in the keyboardHideListener function, should be a new value each time (I used a timestamp) and use this key when rendering the KeyboardAvoidingView element.



keyboardHideListener() {
this.setState({
keyboardAvoidingViewKey:'keyboardAvoidingViewKey' + new Date().getTime()
});
}

render() {
let { keyboardAvoidingViewKey } = this.state
return (
<KeyboardAvoidingView behavior={'height'} key={keyboardAvoidingViewKey} style={...}>
...
</KeyboardAvoidingView>
)
}


Note:
Keep in mind that this will recreate the elements inside the KeyboardAvoidingView (i.e: will call their constructor function, I'm not quite sure why, I'll update the answer after deeper investigation), so you'll have to keep track of any state/prop values that might be overwritten



Update



After a much deeper investigation, I now know why the views are recreated once you change the key.
In order to truly understand why it happens, one must be familiar with how react-native dispatches the render commands to the native side, this particular explanation is pretty long, if it interests you, you can read my answer here. In short, react-native uses Reactjs to diff the changes that should be rendered, these diffs are then sent as commands to a component named UIManager, which sends imperative commands that translate into a layout tree, which changes the layout based on the diff commands.
Once you set a key on a component, reactjs uses this key to identify changes to said component, if this key changes, reactjs identifies the component as a completely new one, which in return sends the initial command to create said component, making all it's children to be created from scratch because there are identified as new elements in a new layout tree, deleting the old tree and creating a new one instead of just adjusting the diffs



If you would like, you can actually spy on these dispatched messages by adding the following code to your App.js file:



import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'
const spyFunction = (msg) => {
console.log(msg);
};

MessageQueue.spy(spyFunction);


If you do that, you'll notice in the logs that each time the key changes, the command that is dispatched in return is createViews, which like stated above creates all the elements that are nested under said component.






share|improve this answer














A more detailed explanation on Nisarg's answer.



Create a key for the KeyboardAvoidingView in the constructor



constructor(props) {
this.state = {
keyboardAvoidingViewKey: 'keyboardAvoidingViewKey',
}
}


add listener on the keyboard's will/did hide (and remove it in the willUnmount)



import { KeyboardAvoidingView, Keyboard, Platform } from 'react-native'

componentDidMount() {
// using keyboardWillHide is better but it does not work for android
this.keyboardHideListener = Keyboard.addListener(Platform.OS === 'android' ? 'keyboardDidHide': 'keyboardWillHide', this.keyboardHideListener.bind(this));
}

componentWillUnmount() {
this.keyboardHideListener.remove()
}


update the keyboardAvoidingViewKey in the keyboardHideListener function, should be a new value each time (I used a timestamp) and use this key when rendering the KeyboardAvoidingView element.



keyboardHideListener() {
this.setState({
keyboardAvoidingViewKey:'keyboardAvoidingViewKey' + new Date().getTime()
});
}

render() {
let { keyboardAvoidingViewKey } = this.state
return (
<KeyboardAvoidingView behavior={'height'} key={keyboardAvoidingViewKey} style={...}>
...
</KeyboardAvoidingView>
)
}


Note:
Keep in mind that this will recreate the elements inside the KeyboardAvoidingView (i.e: will call their constructor function, I'm not quite sure why, I'll update the answer after deeper investigation), so you'll have to keep track of any state/prop values that might be overwritten



Update



After a much deeper investigation, I now know why the views are recreated once you change the key.
In order to truly understand why it happens, one must be familiar with how react-native dispatches the render commands to the native side, this particular explanation is pretty long, if it interests you, you can read my answer here. In short, react-native uses Reactjs to diff the changes that should be rendered, these diffs are then sent as commands to a component named UIManager, which sends imperative commands that translate into a layout tree, which changes the layout based on the diff commands.
Once you set a key on a component, reactjs uses this key to identify changes to said component, if this key changes, reactjs identifies the component as a completely new one, which in return sends the initial command to create said component, making all it's children to be created from scratch because there are identified as new elements in a new layout tree, deleting the old tree and creating a new one instead of just adjusting the diffs



If you would like, you can actually spy on these dispatched messages by adding the following code to your App.js file:



import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'
const spyFunction = (msg) => {
console.log(msg);
};

MessageQueue.spy(spyFunction);


If you do that, you'll notice in the logs that each time the key changes, the command that is dispatched in return is createViews, which like stated above creates all the elements that are nested under said component.







share|improve this answer














share|improve this answer



share|improve this answer








edited yesterday

























answered Sep 1 '17 at 11:08









Samer Murad

546618




546618












  • Thanks for the detailed explanation. If you find out why it does recreate the elements I'd appreciate and update on your answer!
    – Max Tommy Mitschke
    Sep 16 '17 at 20:10










  • In my case, the keyboard just does not go away, keep popping up and down.
    – Eduard
    Oct 15 '17 at 16:48










  • this is probably another kind of issue, what you are experiencing, this code doesn't affect the keyboard, only the layout that is hidden behind of the keyboard, read the question, it says > when I close the the keyboard in the app, the height of the View is not changed back to it's original value.
    – Samer Murad
    Oct 16 '17 at 9:57












  • Worked like a charm. Thanks!
    – dsternlicht
    Feb 21 at 13:57






  • 1




    If you get this.setState is not a function, change this.keyboardHideListener to this.keyboardHideListener.bind(this) in componentDidMount.
    – jinglesthula
    Jul 10 at 17:02


















  • Thanks for the detailed explanation. If you find out why it does recreate the elements I'd appreciate and update on your answer!
    – Max Tommy Mitschke
    Sep 16 '17 at 20:10










  • In my case, the keyboard just does not go away, keep popping up and down.
    – Eduard
    Oct 15 '17 at 16:48










  • this is probably another kind of issue, what you are experiencing, this code doesn't affect the keyboard, only the layout that is hidden behind of the keyboard, read the question, it says > when I close the the keyboard in the app, the height of the View is not changed back to it's original value.
    – Samer Murad
    Oct 16 '17 at 9:57












  • Worked like a charm. Thanks!
    – dsternlicht
    Feb 21 at 13:57






  • 1




    If you get this.setState is not a function, change this.keyboardHideListener to this.keyboardHideListener.bind(this) in componentDidMount.
    – jinglesthula
    Jul 10 at 17:02
















Thanks for the detailed explanation. If you find out why it does recreate the elements I'd appreciate and update on your answer!
– Max Tommy Mitschke
Sep 16 '17 at 20:10




Thanks for the detailed explanation. If you find out why it does recreate the elements I'd appreciate and update on your answer!
– Max Tommy Mitschke
Sep 16 '17 at 20:10












In my case, the keyboard just does not go away, keep popping up and down.
– Eduard
Oct 15 '17 at 16:48




In my case, the keyboard just does not go away, keep popping up and down.
– Eduard
Oct 15 '17 at 16:48












this is probably another kind of issue, what you are experiencing, this code doesn't affect the keyboard, only the layout that is hidden behind of the keyboard, read the question, it says > when I close the the keyboard in the app, the height of the View is not changed back to it's original value.
– Samer Murad
Oct 16 '17 at 9:57






this is probably another kind of issue, what you are experiencing, this code doesn't affect the keyboard, only the layout that is hidden behind of the keyboard, read the question, it says > when I close the the keyboard in the app, the height of the View is not changed back to it's original value.
– Samer Murad
Oct 16 '17 at 9:57














Worked like a charm. Thanks!
– dsternlicht
Feb 21 at 13:57




Worked like a charm. Thanks!
– dsternlicht
Feb 21 at 13:57




1




1




If you get this.setState is not a function, change this.keyboardHideListener to this.keyboardHideListener.bind(this) in componentDidMount.
– jinglesthula
Jul 10 at 17:02




If you get this.setState is not a function, change this.keyboardHideListener to this.keyboardHideListener.bind(this) in componentDidMount.
– jinglesthula
Jul 10 at 17:02












up vote
3
down vote













Please give key to KeyboardAvoidingView and change when keyboard open and close so it will render and take height



<KeyboardAvoidingView behavior="height" style={styles.step} key={values}>





share|improve this answer





















  • Saved my day! Thnx! :)
    – Teuta Koraqi
    Jun 11 at 13:11










  • How that would work? Tested and didn't work for me
    – diofeher
    Sep 12 at 11:10






  • 1




    @diofeher please read Samer Murad answer he describes my answer you people can understand. Thank you ..!!
    – Nisarg Thakkar
    Sep 12 at 12:14















up vote
3
down vote













Please give key to KeyboardAvoidingView and change when keyboard open and close so it will render and take height



<KeyboardAvoidingView behavior="height" style={styles.step} key={values}>





share|improve this answer





















  • Saved my day! Thnx! :)
    – Teuta Koraqi
    Jun 11 at 13:11










  • How that would work? Tested and didn't work for me
    – diofeher
    Sep 12 at 11:10






  • 1




    @diofeher please read Samer Murad answer he describes my answer you people can understand. Thank you ..!!
    – Nisarg Thakkar
    Sep 12 at 12:14













up vote
3
down vote










up vote
3
down vote









Please give key to KeyboardAvoidingView and change when keyboard open and close so it will render and take height



<KeyboardAvoidingView behavior="height" style={styles.step} key={values}>





share|improve this answer












Please give key to KeyboardAvoidingView and change when keyboard open and close so it will render and take height



<KeyboardAvoidingView behavior="height" style={styles.step} key={values}>






share|improve this answer












share|improve this answer



share|improve this answer










answered Jul 8 '17 at 5:09









Nisarg Thakkar

810916




810916












  • Saved my day! Thnx! :)
    – Teuta Koraqi
    Jun 11 at 13:11










  • How that would work? Tested and didn't work for me
    – diofeher
    Sep 12 at 11:10






  • 1




    @diofeher please read Samer Murad answer he describes my answer you people can understand. Thank you ..!!
    – Nisarg Thakkar
    Sep 12 at 12:14


















  • Saved my day! Thnx! :)
    – Teuta Koraqi
    Jun 11 at 13:11










  • How that would work? Tested and didn't work for me
    – diofeher
    Sep 12 at 11:10






  • 1




    @diofeher please read Samer Murad answer he describes my answer you people can understand. Thank you ..!!
    – Nisarg Thakkar
    Sep 12 at 12:14
















Saved my day! Thnx! :)
– Teuta Koraqi
Jun 11 at 13:11




Saved my day! Thnx! :)
– Teuta Koraqi
Jun 11 at 13:11












How that would work? Tested and didn't work for me
– diofeher
Sep 12 at 11:10




How that would work? Tested and didn't work for me
– diofeher
Sep 12 at 11:10




1




1




@diofeher please read Samer Murad answer he describes my answer you people can understand. Thank you ..!!
– Nisarg Thakkar
Sep 12 at 12:14




@diofeher please read Samer Murad answer he describes my answer you people can understand. Thank you ..!!
– Nisarg Thakkar
Sep 12 at 12:14


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41616457%2fkeyboardavoidingview-reset-height-when-keyboard-is-hidden%23new-answer', 'question_page');
}
);

Post as a guest




















































































Popular posts from this blog

Guess what letter conforming each word

Port of Spain

Run scheduled task as local user group (not BUILTIN)