React Native Slide Modal

• Features
• Built With
• Pending Items
• Screenshot (iOS)
• Screenshot (Android)
• Getting Started
• Props
• Example App
• Building & Publishing
• Changelog

Features

• ✅ iOS/Android
• ✅ Dark Mode
• ✅ Built with TypeScript
• ✅ Built with React Hooks
• ✅ Lightweight (0 Third Party Libraries)

Built With

• TypeScript - Programming Language
• React Hooks - Functional Component State/Lifecycle Methods
• React Native - Mobile (iOS/Android) Framework

Pending Items

• [ ]

Screenshot (iOS)

Bottom Sheet

Form Sheet

Screenshot (Android)

Getting Started

1. Install Package:

npm i react-native-slide-modal

2. Add Example Code:

// Imports: Dependencies
import React, { useState } from 'react';
import { Button, Text } from 'react-native';
import { SlideModal }  from 'react-native-slide-modal';

// App
const App: React.FC = (): JSX.Element => {
  // React Hooks: State
  const [ modalVisible, setModalVisible ] = useState<boolean>(false);

  return (
    <SlideModal
      modalType="iOS Form Sheet"
      // modalType="iOS Bottom Sheet"
      modalVisible={modalVisible}
      screenContainer={
        <>
          <Button
            title="Show Modal"
            onPress={() => setModalVisible(!modalVisible)}
          />
        </>
      }
      modalContainer={
        <>
          <Text>Modal Content</Text>
        </>
      }
      modalHeaderTitle="Header Title"
      pressDone={() => setModalVisible(!modalVisible)}
      pressCancel={() => setModalVisible(!modalVisible)}
      darkMode={false}
      doneDisabled={false}
    />
  );
};

// Exports
export default App;

3. Run Project:

Android

react-native run-android

iOS

react-native run-ios

Props

Default: | Property | Type | Default | Description | | ------------------- | :------------: | :---------------------: | ---------------------------------------------------------------------- | | screenContainer | JSX.Element | <></> | Screen content | | modalContainer | JSX.Element | <></> | Modal content | | modalType | ModalType | 'iOS Bottom Sheet' | Modal slide type ('iOS Bottom Sheet' or 'iOS Form Sheet') | | modalVisible | boolean | false | Modal visible | | pressCancel | () => void | undefined | onPress for Cancel button | | pressDone | () => void | undefined | onPress for Done button | | doneDisabled | boolean | false | Disable Done button |

Optional: | Property | Type | Default | Description | | ----------------------------------- | :----------------------------: | :----------: | ---------------------------------------------------------------------- | | darkMode | boolean | false | Dark mode | | modalHeaderTitle | string | '' | Modal header title | | customStyleContainer | ContainerStyle | iOS Theme | Styling for container | | customStyleModalHeaderContainer | ModalHeaderContainerStyle | iOS Theme | Styling for modal header container | | customStyleCancelText | CancelTextStyle | iOS Theme | Styling for cancel text | | customStyleDoneText | DoneTextStyle | iOS Theme | Styling for done text | | customStyleModalContentContainer | ModalContentContainerStyle | iOS Theme | Styling for modal content container | | customStylePickerItemText | PickerItemTextStyle | iOS Theme | Styling for picker item text |

Example App

1. Open Example App:

cd ExampleApp

2. Run Simulator:

Android

react-native run-android

iOS

react-native run-ios

Building & Publishing

Build

npm run build

Publish

npm publish

Changelog

[0.0.31] - 5/22/2021

Removed

Removed react-native-typescript-transformer as dependency.

[0.0.28] - 5/20/2021

Added

• Added assets to exclude in tsconfig.json.

Changed

• Updating tsconfig.json.
• Updating peerDependencies in package.json.

Removed

• Removed types to exclude in tsconfig.json.

[0.0.27] - 5/20/2021

Added

• Added Props section to README.
• Added Example App section to README.

Changed

• Changed file structure.
• Changed index.js to index.tsx.
• Changed package.json build script to cd src && tsc && cp ../package.json && Echo Build completed!.

Removed

• Removed yalc as a global dependency.

[0.0.20] - 5/19/2021

Added

• Added yalc as a global dependency, so yalc publish can be used.

[0.0.19] - 5/18/2021

Changed

• Changed inlineRequires: true to inlineRequires: false in metro.config.js.

[0.0.17] - 5/18/2021

Changed

• Changed compilerOptions.jsx from react to react-jsx.

[0.0.16] - 5/18/2021

Removed

• Removed import React from 'react'.

[0.0.15] - 5/18/2021

Changed

• Changing "lib": ["es2017"] to "lib": ["es2015"] in tsconfig.json.

[0.0.12] - 5/18/2021

Changed

• Changing import from import React from 'react'; to import * as React from 'react';.

[0.0.11] - 5/18/2021

Changed

• Updated NPM dependencies.

[0.0.9] - 5/18/2021

Changed

• Changed alignContent from react to alignItems.
• Changed compilerOptions.jsx from react to react-jsx.

[0.0.8] - 5/18/2021

Changed

• Changed compilerOptions.jsx from react-jsx to react.

[0.0.7] - 5/18/2021

Changed

• Added @types/react as devDependencies.

[0.0.6] - 5/18/2021

Changed

• Changed compilerOptions.jsx from react-native to react-jsx.

[0.0.5] - 5/18/2021

Changed

• Updated typescript.

[0.0.4] - 5/18/2021

Added

• Added react and react-native as dependencies.

[0.0.3] - 5/18/2021

Added

• Added README screenshots.

[0.0.2] - 5/18/2021

Added

• Added README example code.

[0.0.1] - 5/18/2021

Added

• Added SlideModal component (iOS Bottom Sheet, iOS Form Sheet).