How you can Create a Backside Sheet in React Native






Overview

These days we now have an amazing range of parts which are all the time essential to create a web web page or a cellular utility and I imagine that in nearly all of the purposes we all the time find yourself having a Backside Sheet.

This element has a number of use circumstances, from filling in types, to performing an motion reminiscent of creating, modifying or deleting. Nonetheless, it can be used to indicate one thing intimately or while you wish to introduce one thing on a display however haven’t any context for it, reminiscent of sending suggestions or contacting assist.

Now comes a dilemma, there are a number of methods to implement it, the identical manner that you are able to do every thing by your self, you may as well use a dependency. I feel that doing every thing by hand, aside from taking for much longer to implement, also can trigger different issues. And then again, typically when utilizing a dependency we’re caught with sure limitations, essentially the most well-known ones are its stylization.

So on this instance we’ll use two dependencies, one will probably be to create a portal (a really well-known strategy when working with modals) and the opposite will probably be a dependency to create massively customizable modals.

Let’s set up the next dependencies:

npm set up @gorhom/portal react-native-modalize react-native-gesture-handler
Enter fullscreen mode

Exit fullscreen mode

First let’s create our element, which on this case would be the Backside Sheet:

// @src/parts/BottomSheet.jsx
import React from "react";

const BottomSheet = () => {
  // ...
};

export default BottomSheet;
Enter fullscreen mode

Exit fullscreen mode

Now let’s import the Portal and Modalize into our element:

// @src/parts/BottomSheet.jsx
import React from "react";
import { Portal } from "@gorhom/portal";
import { Modalize } from "react-native-modalize";

const BottomSheet = () => {
  return (
    <Portal>
      <Modalize>
        // ...
      </Modalize>
    </Portal>
  );
};

export default BottomSheet;
Enter fullscreen mode

Exit fullscreen mode

Then we might want to cross two attributes to our Modalize, the primary would be the ref (which we’ll obtain via the element’s props) and the second would be the top of the modal.

To outline the peak of the modal we’ll import the Dimensions from React Native and we’ll create a variable referred to as modalHeight which will probably be half the peak of the display.

// @src/parts/BottomSheet.jsx
import React from "react";
import { Dimensions } from "react-native";
import { Portal } from "@gorhom/portal";
import { Modalize } from "react-native-modalize";

const { top } = Dimensions.get("display");
const modalHeight = top * 0.5;

const BottomSheet = ({ modalRef }) => {
  return (
    <Portal>
      <Modalize ref={modalRef} modalHeight={modalHeight}>
        // ...
      </Modalize>
    </Portal>
  );
};

export default BottomSheet;
Enter fullscreen mode

Exit fullscreen mode

After that we are going to begin engaged on the content material that we are going to have on the Backside Sheet, on this case we’ll use a View as a wrapper of our content material, then we’ll use a Textual content to have a small message and eventually we can have a Button to shut the Backside Sheet.

To shut the modal we’ll use a operate that will probably be handed because the element’s prop.

// @src/parts/BottomSheet.jsx
import React from "react";
import { Dimensions, View, StyleSheet, Textual content, Button } from "react-native";
import { Portal } from "@gorhom/portal";
import { Modalize } from "react-native-modalize";

const { top } = Dimensions.get("display");
const modalHeight = top * 0.5;

const BottomSheet = ({ modalRef, onClose }) => {
  return (
    <Portal>
      <Modalize ref={modalRef} modalHeight={modalHeight}>
        <View model={kinds.content material}>
          <Textual content model={kinds.textual content}>Howdy World</Textual content>
          <Button title="Shut Modal" shade="#F0F5F9" onPress={onClose} />
        </View>
      </Modalize>
    </Portal>
  );
};

export default BottomSheet;

const kinds = StyleSheet.create({
  content material: {
    flex: 1,
    justifyContent: "space-between",
    top: modalHeight,
    paddingHorizontal: 20,
    paddingVertical: 32,
    backgroundColor: "#52616B",
  },
  textual content: {
    fontSize: 48,
    fontWeight: "600",
    letterSpacing: 48 * 0.02,
    alignSelf: "heart",
    shade: "#C9D6DF",
  },
});
Enter fullscreen mode

Exit fullscreen mode

Now on our App.js let’s begin by importing the PortalProvider which would be the root element of our utility. Then we’ll import from React the useRef hook.

// @src/App.js
import React, { useRef } from "react";
import { PortalProvider } from "@gorhom/portal";

const App = () => {
  return (
    <PortalProvider>
      // ...
    </PortalProvider>
  );
};

export default App;
Enter fullscreen mode

Exit fullscreen mode

First let’s create our modalRef and we’ll create two capabilities, one to open the modal and the opposite to shut it.

// @src/App.js
import React, { useRef } from "react";
import { PortalProvider } from "@gorhom/portal";

const App = () => {
  const modalRef = useRef(null);

  const onOpen = () => {
    modalRef.present?.open();
  };

  const onClose = () => {
    modalRef.present?.shut();
  };

  return (
    <PortalProvider>
      // ...
    </PortalProvider>
  );
};

export default App;
Enter fullscreen mode

Exit fullscreen mode

Now we will import our Backside Sheet element and we will cross it the required props. However earlier than that, let’s import from React Native the View element that would be the wrapper of the display content material and the Button that will probably be answerable for opening the BottomSheet.

// @src/App.js
import React, { useRef } from "react";
import { StyleSheet, Button, View } from "react-native";
import { PortalProvider } from "@gorhom/portal";

import BottomSheet from "./parts/BottomSheet";

const App = () => {
  const modalRef = useRef(null);

  const onOpen = () => {
    modalRef.present?.open();
  };

  const onClose = () => {
    modalRef.present?.shut();
  };

  return (
    <PortalProvider>
      <View model={kinds.container}>
        <BottomSheet modalRef={modalRef} onClose={onClose} />
        <Button title="Open Modal" shade="#1E2022" onPress={onOpen} />
      </View>
    </PortalProvider>
  );
};

export default App;

const kinds = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#C9D6DF",
    alignItems: "heart",
    justifyContent: "heart",
  },
});
Enter fullscreen mode

Exit fullscreen mode



Conclusion

As all the time, I hope you discovered it fascinating. If you happen to observed any errors on this article, please point out them within the feedback. πŸ§‘πŸ»β€πŸ’»

Hope you’ve gotten an amazing day! πŸ™Œ



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#Create #Backside #Sheet #React #Native