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 intsconfig.json
.
Changed
- Updating
tsconfig.json
. - Updating
peerDependencies
inpackage.json
.
Removed
- Removed
types
to exclude intsconfig.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
toindex.tsx
. - Changed
package.json
build script tocd 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, soyalc publish
can be used.
[0.0.19] - 5/18/2021
Changed
- Changed
inlineRequires: true
toinlineRequires: false
inmetro.config.js
.
[0.0.17] - 5/18/2021
Changed
- Changed
compilerOptions.jsx
fromreact
toreact-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"]
intsconfig.json
.
[0.0.12] - 5/18/2021
Changed
- Changing import from
import React from 'react';
toimport * as React from 'react';
.
[0.0.11] - 5/18/2021
Changed
- Updated NPM
dependencies
.
[0.0.9] - 5/18/2021
Changed
- Changed
alignContent
fromreact
toalignItems
. - Changed
compilerOptions.jsx
fromreact
toreact-jsx
.
[0.0.8] - 5/18/2021
Changed
- Changed
compilerOptions.jsx
fromreact-jsx
toreact
.
[0.0.7] - 5/18/2021
Changed
- Added
@types/react
asdevDependencies
.
[0.0.6] - 5/18/2021
Changed
- Changed
compilerOptions.jsx
fromreact-native
toreact-jsx
.
[0.0.5] - 5/18/2021
Changed
- Updated
typescript
.
[0.0.4] - 5/18/2021
Added
- Added
react
andreact-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
).