RBSheet Close when typing anything on the TextInput

See original GitHub issue

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>;

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:2
  • Comments:5

github_iconTop GitHub Comments

1reaction
iamadityaazcommented, Nov 26, 2021

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

Moving it inside the Main Screen component solved my issue.

1reaction
sachinkammarcommented, May 25, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

RBSheet Close when typing anything on the TextInput
I am creating a Review Content in the RBSheet, when I try to type anything in the text field, it close the RBSheet...
Read more >
React native Keyboard pushes Bottomsheet out of screen / to top
Its enough to just use an example provided inside the git-repo, clear everything inside the bottom sheet and add a simple text-input.
Read more >
react-native-raw-bottom-sheet - npm
react-native-raw-bottom-sheet. TypeScript icon, indicating that this package has built-in type declarations.
Read more >
Add Your Own Component To Bottom Sheet Whatever You Want
closeOnPressBack, boolean, Press back android to close Bottom Sheet (Android ... If you combind RBSheet with react-native-gesture-handler, the components ...
Read more >
expo crashes when i type in textinput : r/reactnative - Reddit
I am making an app with react native, and I have my text input to search up ... But because the handler of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found