Native implementation of Bottom sheet
"react-native-sheet": "sergeymild/react-native-sheet#6.1.10"import {
FittedSheet,
attachScrollViewToFittedSheet,
FittedSheetRef,
presentFittedSheet,
dismissFittedSheetsAll,
dismissFittedPresented,
} from 'react-native-sheet';
import { ScrollView, TouchableOpacity } from 'react-native';
const RenderSheetComponent: React.FC = () => {
const [isLoading, setLoading] = useState(true)
useEffect(() => {
setTimeout(() => setLoading(false), 1000)
}, [])
if (isLoading) {
return <View style={{height: 200}}/>
}
return (
// if scrollView creates dynamically in bottom sheet (for example after loading)
// you have call attachScrollViewToFittedSheet to enable nestedScroll
<ScrollView onLayout={() => attachScrollViewToFittedSheet("textSheet")}/>
)
}
const App: React.FC = () => {
const sheetRef = useRef<FittedSheetRef>(null);
return (
<>
<TouchableOpacity
onPress={() => {
// show also accept params which will be passed to render function
sheetRef.current?.show()
// or you can call just pass the name of sheet which want to show
// in this case there is no need to store ref on Sheet
presentFittedSheet("textSheet")
}}
children={<Text children="Show sheet</"/>}
/>
<TouchableOpacity
onPress={() => {
// dismiss presented and all in queue sheets without animation
dismissFittedSheetsAll()
// dismiss top presented sheet
dismissFittedPresented()
}}
children={<Text children="Dismiss sheet</"/>}
/>
<FittedSheet
// can be any string.
// with this name sheet can be dismissed or presented via methods by passing that name
// `presentFittedSheet`, `dismissFittedSheet`
name="textSheet"
ref={sheetRef}
onSheetDismiss={(paramsPassedToHideMethod) => {
// called when sheet completely hided
}}
params={{
// if max min should be setted as max height
applyMaxHeightToMinHeight: true | false,
// allow to dismiss
dismissable: false | true,
// top left right corner sheet view radius
topLeftRightCornerRadius: 20,
// background color of sheet view
backgroundColor: 'purple',
// max allowed height of sheet view
maxHeight: 600,
// min height of sheet view
minHeight: 600,
// max allowed width in portrait view
maxPortraitWidth: 300
// max allowed width in landscape view
maxLandscapeWidth: 300,
// should status bar on android be either dark of light
isSystemUILight: false
}}
>
// data which was passed to .show() method or in presentFittedSheet methods
{(data) => <RenderSheetComponent/>)}
// if you do not need data you can omit render function and pass just component
<RenderSheetComponent/>
</FittedSheet>
</>
)
}More detailed examples may be found in example project
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT