React Native Modals

When you first start making a React Native application, you naturally set out to create components and pages like you would in a regular React.JS app. This will work for a while when you're making and testing your components, but what about when you need those components to interact with or display on top of a screen or another component? Can you just place those components inside JSX elements and render them like in React.JS? Unfortunately, the answer is no. You have to do a little bit more to get the elements to interact the way you want them to in native applications. That's where modals come in. The Modal component is a basic way to present content above an enclosing view. There's a couple of different options when it comes to modals, but I went with react-native-modals when designing my application. In order to use the Modal component you will need to install the package -
npm install --save react-native-modals
OR
yarn add react-native-modals

So the only thing you really need to do to turn a normal component into a modal is to make it to where that component can be toggled in and out of view. For my first attempt at this I took the difficult path and built the entire modal into the component I wanted it to render on top of. This proved to be difficult, but not impossible. Because I was unfamiliar with the technology and not sure it would actually work, I imported the Modal tag in and began to fiddle around with it inside the component. This took several hours of trial and error; trying to shift the Modal tags up and down and screwing around with CSS until it finally resembled a working screen. The end result code-wise is kind of ugly to look at and takes up too many lines

I don't recommend doing this. It's overly complicated, especially when using the modal for the first time, and it kind of flies in the face of modular component structure. The good news however is that it does work.

My second approach to this problem was initiated much like the first. I wanted to jump in as quickly as possible and make something work because of an unreasonable deadline, which led to me trying to do the simplest thing I could think of: just stick my already built component that I wanted to be a modal in the screen I wanted it to display on wrapped in some Modal tags. Genius. This idea worked pretty much instantly, and I was able to get it to behave the way I wanted with much less tinkering than my previous exploit. To toggle the modal off I simply placed the toggle switch in the Modal tag's onBackButtonPress method, and it is toggled on by pressing the card title in the top level component.

The resulting modal looks and behaves exactly how I wanted it.

Basically what I learned is that you can make any component display and behave as a modal simply by encapsulating the code, or a previously constructed component, inside Modal tags. You can make this as complicated as you want, but the main takeaway is to stick to the basics of React. Keep your code modular and separated, and it will be easier to implement scary new technologies.