Implementing a Modal Bottom Sheet in React Native

Setting Up the App

To start, we need to set up our React Native app. We will use Expo to build our app and initialize our project using the command:

npx create-expo-app react-native-bottom-sheet

We will also install the required dependencies, including react-native-bottom-sheet and axios.

Creating the App Layout

Next, we need to create our app layout. We will create a utils folder and a components folder. Inside the components folder, we will have two components: Homes and BottomSheetModalComponent. The Homes component will render a list of properties, and the BottomSheetModalComponent will display the modal bottom sheet.

Feching Data from the API

We will fetch data from an API to render a list of properties. We will use the axios library to make requests to the API endpoint. We will also create a homesApi file to create a function that fetches data from the API endpoint.

import axios from 'axios';

const fetchHomes = async () => {
  try {
    const response = await axios.get('undefined.example.com/homes');
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

export default fetchHomes;

Implementing the Modal Bottom Sheet

To implement the modal bottom sheet, we will import BottomSheetModal and BottomSheetModalProvider from the react-native-bottom-sheet library. We will wrap our app with the BottomSheetModalProvider and call the BottomSheetModal component. We will pass in the required props, including snapPoints, index, and ref.

import { BottomSheetModal, BottomSheetModalProvider } from 'eact-native-bottom-sheet';

const App = () => {
  return (
    <BottomSheetModalProvider>
      <Homes />
      <BottomSheetModal
        snapPoints={[300, 500, 700]}
        index={0}
        ref={bottomSheetModalRef}
      >
        <BottomSheetModalComponent />
      </BottomSheetModal>
    </BottomSheetModalProvider>
  );
};

Passing Data to the Modal Bottom Sheet

To pass data to the modal bottom sheet, we will create a new state called houseDataModal and set the initial value to null. We will then pass the item object to the openModal function and set houseDataModal to the item passed to the openModal function.

const [houseDataModal, setHouseDataModal] = useState(null);

const openModal = (item) => {
  setHouseDataModal(item);
  bottomSheetModalRef.current.present();
};

Styling the Modal Bottom Sheet

Finally, we will style our modal bottom sheet to suit our preference. We will use the styles prop to apply styles to our modal bottom sheet.

.bottom-sheet-modal {
  backgroundColor: #fff;
  padding: 20px;
  borderRadius: 10px;
  boxShadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

Result

After implementing the modal bottom sheet, we can see that it works as expected. When we click on the “View Details” button, the modal bottom sheet slides up and displays the additional information about each property.

• The modal bottom sheet provides an easy way to display extra content or longer descriptions.
• It makes our app more user-friendly and interactive.

By following these steps, we can implement a modal bottom sheet in our React Native application.