React native Question posted in
The official React Native documentation can be found here.

React native – how can i change @gorhom/bottom-sheet's BottomSheetModal bottom radius

I want to give margins from the bottom and both sides.

so i gave margins backgroundcomponent it doesn’t work i expected

I using BottomSheetFlatList in BottomSheetModal (@gorhom/bottom-sheet )

this is my component

this is what i want

      <BottomSheetModal
        ref={yearBottomSheetModalRef}
        index={0}
        snapPoints={snapPoints}
        backdropComponent={renderBackdrop}
        handleIndicatorStyle={{backgroundColor: '#E8EAED'}}
        bottomInset={170}
        backgroundComponent={renderBackground}
        style={{
          marginHorizontal: 16,
          marginBottom: 17,
          overflow: 'hidden',
        }}>
        <BottomSheetFlatList data={YEAR_DATA} renderItem={yearRenderItem} />
      </BottomSheetModal>

  const renderBackground = useCallback(
    (props: any) => <BottomSheetBackground {...props} />,
    [],
  );

import {View, Text} from 'react-native';
import React from 'react';

const BottomSheetBackground = ({style}: any) => {
  return (
    <View
      style={[{backgroundColor: 'red', borderRadius: 20}, {...style}]}></View>
  );
};

export default BottomSheetBackground;

but it’s not working

can i set bottomradius for bottomsheetbackground?

Tags:

2

Answers


  1. 0

    I think to archive this kind of view, you can use react-native-modal instead of bottom sheet and customise it as per your requirement

    Login or Signup to reply.
  2. 0

    You can add detached prop to BottomSheetModal, this will make BottomSheetModal to detach from the bottom of the screen.

    adjust your BottomSheetBackground & BottomSheetModal child style with marginBottom and borderRadius

    <BottomSheetFlatList 
  style={{
    marginBottom: 20,
    borderRadius: 20,
  }}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search