layouts.md

Create layouts

You might need to add custom BottomSheet types - you can add a config prop when rendering the BottomSheet component in your app's entry point.

When creating the config, you can either:

1. Create Bottom layouts from scratch

// App.tsx
import  { BottomSheet } from '@antbase/react-native-bottom-sheet';

/*
  1. Create the config
*/
const config = {
  content: (props) => (
    <View style={{ height: 60, width: '100%' }}>
      <Text>Welcome</Text>
      <Text>{props.uuid}</Text>
    </View>
    ),
  };
/*
  2. Pass the config as prop to the BottomSheet component instance
*/
export function App(props) {
  return (
    <>
      {...}
      <BottomSheet config={config} />
    </>
  );
}

Then just use the library as before.

For example, if I want to show the new content type I just created above:

BottomSheet.show({
  type: 'content',
  // And I can pass any custom props I want
  props: { uuid: 'bba1a7d0-6ab2-4a0a-a76e-aabe05ae6d70' }
});