{"id":13042,"date":"2025-08-01T12:27:56","date_gmt":"2025-08-01T12:27:56","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13042"},"modified":"2025-08-01T12:28:21","modified_gmt":"2025-08-01T12:28:21","slug":"bottom-sheet-always-opens-on-load","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react-native\/bottom-sheet-always-opens-on-load","title":{"rendered":"Bottom Sheet Always Shows Up On Mount"},"content":{"rendered":"<h3>1. Initial index should be -1<\/h3>\n<p>Make sure the index prop is set to -1 so it stays hidden initially.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\nconst bottomSheetRef = useRef&lt;BottomSheet&gt;(null);\r\n\r\n&lt;BottomSheet\r\n  ref={bottomSheetRef}\r\n  index={-1} \/\/ HIDDEN on mount\r\n  snapPoints={['25%', '50%']}\r\n  enablePanDownToClose={true}\r\n&gt;\r\n  {\/* Content *\/}\r\n&lt;\/BottomSheet&gt;\r\n<\/pre>\n<h3>2. Only show when user interacts<\/h3>\n<p>Trigger it explicitly from your button press:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\nconst handleOpenSheet = () => {\r\n  bottomSheetRef.current?.snapToIndex(0); \/\/ Or use .expand() if you want full height\r\n};\r\n\r\nconst handleOpenSheet = () => {\r\n  bottomSheetRef.current?.snapToIndex(0); \/\/ Or use .expand() if you want full height\r\n};\r\n<\/pre>\n<h2>Common Mistakes to Avoid<\/h2>\n<ul>\n<li>Setting index={0} on mount \u2013 this will auto-open the sheet.<\/li>\n<li>Calling expand() in useEffect() without a condition.<\/li>\n<li>Forgetting to use ref or calling snapToIndex() before the sheet is mounted.<\/li>\n<\/ul>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/react-native-state-management\" target=\"_blank\">React Native State Management<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1. Initial index should be -1 Make sure the index prop is set to -1 so it stays hidden initially. const bottomSheetRef = useRef&lt;BottomSheet&gt;(null); &lt;BottomSheet ref={bottomSheetRef} index={-1} \/\/ HIDDEN on mount snapPoints={[&#8216;25%&#8217;, &#8216;50%&#8217;]} enablePanDownToClose={true} &gt; {\/* Content *\/} &lt;\/BottomSheet&gt; 2. Only show when user interacts Trigger it explicitly from your button press: const handleOpenSheet = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13043,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-13042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13042"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=13042"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13042\/revisions"}],"predecessor-version":[{"id":13045,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13042\/revisions\/13045"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/13043"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=13042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=13042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=13042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}