RBSheet Close when typing anything on the TextInput

[binumathew]

HI

I am creating a Review Content in the RBSheet, when I try to type anything in the text field, it close the RBSheet automatically and first letter of what ever entered is added to the Text Input when we re open the RBSheet, the Any Idea why ?

const [reviewContent, setReviewContent] = React.useState("");

<RBSheet
	ref={refRBSheet}
	keyboardAvoidingViewEnabled={true}
	closeOnDragDown={true}
	height={430}
	customStyles={{
		wrapper: {
			backgroundColor: "transparent",
		},
		draggableIcon: {
			backgroundColor: "#000",
		},
	}}
>
	<View style={{ flex: 1, alignItems: "center", marginTop: 20 }}>
		<Text
			style={{
				color: "black",
				fontFamily: "lato-bold",
				fontSize: 20,

				padding: 8,
				textAlign: "center",
			}}
		>
			How was your overall experience with
		</Text>

		<TextInput
			multiline={true}
			underlineColorAndroid="transparent"
			onChangeText={setReviewContent}
			value={reviewContent}
			style={{
				borderWidth: 1,
				borderColor: "#e0e0e0",
				height: 150,
				width: "60%",
				textAlignVertical: "top",
			}}
		/>
		<TouchableOpacity>
			<Text
				style={[
					styles.text,
					{
						textAlign: "left",
						color: "black",
						fontFamily: "lato-regular",
						marginTop: 5,
						borderWidth: 1,
						borderColor: "blue",
						padding: 10,
						borderRadius: 25,
					},
				]}
			>
				Write A Review
			</Text>
		</TouchableOpacity>
	</View>
</RBSheet>;

[sachinkammar]

Keep the RBSheet inside the same View that your onPress handler is.

[ajaygupta1988]

I am having the same problem on android. On IOS its works fine

[iamadityaaz]

Keep the RBSheet inside the same View that your onPress handler is.

Moving it inside the Main Screen component solved my issue.

[Ericnsamba]

I've done something like this, and whatever children I have inside the RBSheet, it seems to work fine

return ( <View style={{}}> <TouchableOpacity style={styles.TouchableOpacity} onPress={() => refRBSheet.current.open()}> <Icon name={iconName} size={26} color={theme.Colors.blue} /> </TouchableOpacity> <RBSheet closeOnPressBack={closeOnPressBack} ref={refRBSheet} closeOnDragDown={true} closeOnPressMask={true} height={height} animationType="fade" customStyles={{ wrapper: { // backgroundColor: 'rgba(0,0,0,0)', backgroundColor: 'rgba(0,0,0,0.5)', }, draggableIcon: { backgroundColor: '#ccc', }, container: { padding: 20, paddingTop: 10, borderTopRightRadius: theme.ScreenDimensions.width * 0.08, borderTopLeftRadius: theme.ScreenDimensions.width * 0.08, }, }}> {children} </RBSheet> </View> );

[Malik-Usman17]

i am still facing the same issue and I'm also wrap my RBSheet component inside the main component.

[ibraheem88]

If you are opening RBSheet inside the render function of flatlist . Then it is a bug related to flatlist. It has nothing to do with RBSheet and TextInput. A bit strange but I figured out after carefully going through the react native documentation of Flatlist props. Set the prop removeClippedSubviews={false} of FlatList, since it is true by default on android. According to documentation it may increase performance but can cause bugs. In this case, closes the bottom sheet when textinput is focused. That behavior is also random.