react-native-bottom-sheet: [v4] BottomSheetTextInput inside BottomSheetFooter keeps re-rendering, doesn't retain input value
Bug
I am using a BottomSheetModal
with a footerComponent
to render a text input at the bottom of the sheet. It seems to render okay but when you add text into the BottomSheetTextInput
it doesn’t retain the input value. It should set the state of the commentText
but it keeps being erased and the keyboard loses focus on each keystroke. I suspect this is because the component keeps re-rendering but I can’t figure out how to resolve this. Are there any guidelines for using this pattern?
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | 4.4.7 |
react-native | 0.70.8 |
react-native-reanimated | 3.2.0 |
react-native-gesture-handler | 2.9.0 |
Steps To Reproduce
This is my custom footer method which I reference in the footerComponent
prop on BottomSheetModal
-
const [commentText, setCommentText] = useState('');
const renderActivePostSheetFooter = useCallback(props => (
<BottomSheetFooter {...props}>
<View style={styles.footerContainer}>
<HStack alignItems="center">
<BottomSheetTextInput
placeholder="Add your comments"
style={styles.bottomSheetInput}
ref={activePostSheetInput}
onChangeText={setCommentText}
value={commentText}
/>
<Button onPress={addComment}>Post</Button>
</HStack>
</View>
</BottomSheetFooter>
), []);
Describe what you expected to happen:
- Typing into the
BottomSheetTextInput
correctly sets the state ofcommentText
.
Reproducible sample code
[<!–
Please use the Bottom Sheet issue snack template https://snack.expo.io/@gorhom/bottom-sheet-v4-reproducible-issue-template or provide a minimal runnable repro as explained above so that the bug can be tested in isolation. or use –>](https://snack.expo.dev/2BcvtOebu)
About this issue
- Original URL
- State: closed
- Created 10 months ago
- Comments: 17
I got it. The key was to use a ref instead of state to hold the text and use “defaultValue” instead of “value” in the textInput. Here’s what worked for me:
well, try to log the text when change the text and check if u have the updated value ,after that try to pass call backfunction to take the value from the text input
like this
then if this way not works remove the callback
i hope this solution helps u
I was facing the same problem and realized when you remove the value prop it would stop rerendering. maybe it might help someone. you could also add a ref so you clear the value on submit by using the ref