react-native-card-modal-reanimated
react-native-card-modal-reanimated is a cross-platform, smooth animation, pure js component. Modal transition vertically slides the modal view up from the bottom of the screen and back down when it's dismissed.
Dependencies
react-native-reanimated
: https://github.com/software-mansion/react-native-reanimated
react-native-gesture-handler
: https://github.com/software-mansion/react-native-gesture-handler
react-native-safe-area-context
: https://github.com/th3rdwave/react-native-safe-area-context
react-native-redash
: https://github.com/wcandillon/react-native-redash
Installation
yarn add react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-redash
cd ios && pod install
yarn add react-native-card-modal-reanimated
Why another wheel instead of CardStyleInterpolators.forModalPresentationIOS
react-navigation CardStyleInterpolators.forModalPresentationIOS just a transition animation, can not handle gesture event exactly. On the contrary, react-native-card-modal-reanimated have greate gesture handler and animation no difference with original ios modal animation.
Usage
Basic
import SafeAreaProvider initialWindowMetrics from 'react-native-safe-area-context';import createSlideModal openModal from 'react-native-card-modal-reanimated'; const SlideModalContainer = ; const App = return <SafeAreaProvider => <SlideModalContainer> // main page, such as react-navigation container etc. <View => <TouchableHighlight = => <View => <Text =>Press Me</Text> </View> </TouchableHighlight> </View> </SlideModalContainer> </SafeAreaProvider>
Open Modal, Close Modal
import openModal from 'react-native-card-modal-reanimated'; const openModal: name: string params?: any => void | undefined;const closeModal: name?: string => void | undefined;
Prepare Modal
prepared modal exsit always
import openModal from 'react-native-card-modal-reanimated'; const addPrepared: name: string params?: any => void | undefined;const clearPrepared: name: string => void | undefined;
createSlideModal
declare const createSlideModal: modals: Array<ModalType> => props: children: ReactReactNode; // main page toggleStatusBarStyle?: boolean; // toggle status bar style, default true JSXElement; declare type ModalType = name: string; title: string | params: any string; hideHeaderButton?: boolean; // default false hideHeader?: boolean; // default false component: any; // modal component;
Modal props
declare type ModalNavigation = params: any; // params state void; // like setState void; // close self gestureHandler: // gesture controller void; void; ; onModalDidFocus: void void; // invoke callback on modal did focus;
Custom Header
Example
The source code for the example (showcase) app is under the Example/ directory. If you want to play with the API but don't feel like trying it on a real app, you can run the example project. Clone the repo, go to the Example/ folder and run:
yarn
Running on iOS
Before running the app, install the cocoapods dependencies:
cd ios && pod install && cd ..
Now, you can start the app:
react-native run-ios
Running on Android
Run the react native's cli command:
react-native run-android
Important:
You will need to have an Android or iOS device or emulator connected as well as react-native-cli package installed globally.
License
MIT. Copyright (c) 2020 Daniel Bryan.