A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

Overview

Build Status npm npm

React Native Modals

React Native Modals Library for iOS & Android.

How to thank me ?

Just click on ⭐️ button 😘

Try it with Exponent



     

BREAKING CHANGE

A lot of backward incompatible changes in v0.22.0. Please, Read the Docs before upgrading to v0.22.0

Installation

npm install --save react-native-modals
# OR
yarn add react-native-modals

Exposed Modules

  • Modal
  • ButtomModal
  • ModalPortal
  • Backdrop
  • ModalButton
  • ModalContent
  • ModalTitle
  • ModalFooter
  • Animation
  • FadeAnimation
  • ScaleAnimation
  • SlideAnimation
  • DragEvent,
  • SwipeDirection,
  • ModalProps
  • ModalFooterProps
  • ModalButtonProps
  • ModalTitleProps
  • ModalContentProps
  • BackdropProps

Examples

Example

Setup - this is essential step

The Component can not be used until ModalPortal is mounted. You should register in your app root. For example:

import { ModalPortal } from 'react-native-modals';
import { Provider } from 'react-redux';

const Root = () => {
  return (
    <Provider store={store}>
      <App />
      <ModalPortal />
    </Provider>
  );
}

Basic Usage

import { Modal, ModalContent } from 'react-native-modals';
import { Button } from 'react-native'

<View style={styles.container}>
  <Button
    title="Show Modal"
    onPress={() => {
      this.setState({ visible: true });
    }}
  />
  <Modal
    visible={this.state.visible}
    onTouchOutside={() => {
      this.setState({ visible: false });
    }}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Imperative APIs

show

import { ModalPortal } from 'react-native-modals';

const id = ModalPortal.show((
  <View>
    {...}
  </View>
));

update

ModalPortal.update(id, {
  children: (
    <View>
      <Text>Updated</Text>
    </View>
  ),
});

dismiss

ModalPortal.dismiss(id);

dismissAll

ModalPortal.dismissAll(id);

Usage - Animation

import { Modal, SlideAnimation, ModalContent } from 'react-native-modals';

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    modalAnimation={new SlideAnimation({
      slideFrom: 'bottom',
    })}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Swipe

import { Modal, ModalContent } from 'react-native-modals';
import { Button } from 'react-native'

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    swipeDirection={['up', 'down']} // can be string or an array
    swipeThreshold={200} // default 100
    onSwipeOut={(event) => {
      this.setState({ visible: false });
    }}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Modal Title

import { Modal, ModalTitle, ModalContent } from 'react-native-modals';

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    modalTitle={<ModalTitle title="Modal Title" />}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Modal Action

import { Modal, ModalFooter, ModalButton, ModalContent } from 'react-native-modals';

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    footer={
      <ModalFooter>
        <ModalButton
          text="CANCEL"
          onPress={() => {}}
        />
        <ModalButton
          text="OK"
          onPress={() => {}}
        />
      </ModalFooter>
    }
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Props

Modal

Prop Type Default Note
visible boolean false
rounded boolean true
useNativeDriver boolean true
children any
modalTitle? React Element You can pass a modalTitle component or pass a View for customizing titlebar
width? Number Your device width The Width of modal, you can use fixed width or use percentage. For example 0.5 it means 50%
height? Number 300 The Height of modal, you can use fixed height or use percentage. For example 0.5 it means 50%
modalAnimation? FadeAnimation animation for modal
modalStyle? any
containerStyle? any null For example: { zIndex: 10, elevation: 10 }
animationDuration? Number 200
overlayPointerEvents? String Available option: auto, none
overlayBackgroundColor? String #000
overlayOpacity? Number 0.5
hasOverlay? Boolean true
onShow? Function You can pass shown function as a callback function, will call the function when modal shown
onDismiss? Function You can pass onDismiss function as a callback function, will call the function when modal dismissed
onTouchOutside? Function () => {}
onHardwareBackPress? Function () => true Handle hardware button presses
onMove? Function () => {}
onSwiping? Function () => {}
onSwipeRelease? Function () => {}
onSwipingOut? Function () => {}
onSwipeOut? Function
swipeDirection? string or Array<string> [] Available option: up, down, left, right
swipeThreshold? number 100
footer? React Element null for example: <View><Button text="DISMISS" align="center" onPress={() => {}}/></View>

ModalTitle

Prop Type Default Note
title String
style? any null
textStyle? any null
align? String center Available option: left, center, right
hasTitleBar? Bool true

ModalContent

Prop Type Default Note
children any
style? any null

ModalFooter

Prop Type Default Note
children ModalButton
bordered? Boolean true
style? any null

ModalButton

Prop Type Default Note
text String
onPress Function
align? String center Available option: left, center, right
style? any null
textStyle? any null
activeOpacity? Number 0.6
disabled? Boolean false
bordered? Boolean false

Backdrop

Prop Type Default Note
visible Boolean
opacity Number 0.5
onPress? Function
backgroundColor? string #000
animationDuration? Number 200
pointerEvents? String null Available option: auto, none
useNativeDriver? Boolean true

Animation

Params for (*)Animation

FadeAnimation

Preview:

Example:
new FadeAnimation({
  initialValue: 0, // optional
  animationDuration: 150, // optional
  useNativeDriver: true, // optional
})
Param Type Default Note
initialValue Number 0
animationDuration? Number 150
useNativeDriver? Boolean true

ScaleAnimation

Preview:

Example:
new ScaleAnimation({
  initialValue: 0, // optional
  useNativeDriver: true, // optional
})
Param Type Default Note
initialValue Number 0
useNativeDriver Boolean true

SlideAnimation

Preview:

Example:
new SlideAnimation({
  initialValue: 0, // optional
  slideFrom: 'bottom', // optional
  useNativeDriver: true, // optional
})
Param Type Default Note
initialValue Number 0
slideFrom String bottom Available option: top, bottom, left, right
useNativeDriver Boolean true

Create your custom animation

Example:
import { Animated } from 'react-native';
import { Animation } from 'react-native-modals';

class CustomAnimation extends Animation {
  in(onFinished) {
    Animated.spring(this.animate, {
      toValue: 1,
      useNativeDriver: this.useNativeDriver,
    }).start(onFinished);
  }

  out(onFinished) {
    Animated.spring(this.animate, {
      toValue: 0,
      useNativeDriver: this.useNativeDriver,
    }).start(onFinished);
  }

  getAnimations() {
    return {
      transform: [{
        translateY: this.animate.interpolate({
          inputRange: [0, 1],
          outputRange: [800, 1],
        }),
      }],
    };
  }
}

Development

yarn

yarn run build

yarn test

Issues
  • warning , Animated:` useNativeDriver` was not specified.

    warning , Animated:` useNativeDriver` was not specified.

    hi, i got a warning, "Animated:useNativeDriver was not specified. This is a required option and must be explicitly set to true orfalse "

    I think this issue is caused by the React Native update to version 0.62 (changelog#deprecated)

    do you have a plan to update this package?

    opened by ilhamsa1 21
  • Dialog disappears after state change

    Dialog disappears after state change

    Dialog disappears when I make a change in state (in which causes to re-render the page), only the gray modal background stays.

    opened by Arman92 20
  • Extremely slow to render

    Extremely slow to render

    I havent figured out why yet, but after adding this component and looking to display it in render() , it takes like 10 seconds or so before it surfaces. If you have encountered this before appreciate if u can let me know why. ill keep looking at this in the mean time when i get a chance.

    opened by ajonno 20
  • Invariant Violation with Redux connected components

    Invariant Violation with Redux connected components

    I'm hitting an Invariant Violation error that goes like this:

    Invariant Violation: Could not find "store" in the context of "Connect(ConnectedSubComponent)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(ConnectedSubComponent) in connect options.
    

    I've noticed that this only happens when using react-redux connect() to connect a component into redux store and placing this as the child component in the popup dialog.

    I reproduced the error for you to take a look at here: https://github.com/tuomohopia/reduce-fail

    Am I using this library the correct way or is this an actual bug that is discovered?

    I'm using Android with emulator.

    Versions:

    • Windows 10
    • node v10.15.3
    • react-native-popup-dialog 0.17.0
    • react-native v0.59.2
    • redux 4.01
    • react-redux 6.01
    opened by tuomohopia 18
  • Unexpected token in components/Dialog.js

    Unexpected token in components/Dialog.js

    while I upgrade 0.5.20 -> 0.7.22 it shows the error below at runtime: node_modules/react-native-popup-dialog/src/components/Dialog.js: Unexpected token, expected , (16:14) seems the problem is at import { type DialogType} from ...

    run on: react 15.4.2 react-native 0.41.2

    any suggestion??

    opened by vault13tech 16
  • Overlay layer hidden by the NavBar

    Overlay layer hidden by the NavBar

    If used with https://github.com/aksonov/react-native-router-flux the overlay layer of the dialog is hidden by the navbar. Is there any way to draw it on top of the navbar?

    Thanks

    opened by loregr 15
  • Code verifications & Lighter demo app

    Code verifications & Lighter demo app

    Hey, Here's the changelog:

    1. Fixed the path in package.json to relative (rather than local absolute)
    2. Continuing #1 , I've cleaned the linear-gradient and the sparkly deps as they wouldn't link thus project won't compile
    3. some indentation ezgif com-resize

    This change is Reviewable

    opened by aviadhahami 12
  • How to change contentView backgroundColor

    How to change contentView backgroundColor

    I want to change contentView background color, but not cover a new view set background color

    follow code not work

    <PopupDialog
                style={{backgroundColor: 'transparent'}}
                ref={(popupDialog) => { this.popupDialog = popupDialog;}}
                width={Dimensions.get('window').width}
                height={Dimensions.get('window').height}
                haveTitleBar={false}
                dialogAnimation = { new SlideAnimation({ slideFrom: 'bottom' }) }
                onClosed={()=>{Actions.pop()}}
                >
                  {this._popupView()}
                </PopupDialog>
    

    The contentView still white background color

    opened by bawn 10
  • How to position absolute.

    How to position absolute.

    Is it possible to align the popup to the bottom of the screen?

    Reference screens: What I want: screen shot 2017-12-04 at 1 51 53 pm

    What I have: screen shot 2017-12-04 at 1 53 15 pm

    Currently, I have set the width equal to screen width and height is 60% of screen height. I just need a way to push it down 😞

    Thanks!

    opened by princenaman 10
  • setState donesn't work well with Animation

    setState donesn't work well with Animation

    In my dialog content, there are buttons to change states. (onPress handlers of the buttons are going to change the state) When I click the button and change the state, my popup dialog view would be gone! When I don't use Animation, it works fine.

    opened by jeongmincha 9
  • BottomModal is missing from type def

    BottomModal is missing from type def

    I'm seeing the following error in a Typescript-based React Native project:

    Module '"react-native-modals"' has no exported member 'BottomModal'. Did you mean to use 'import BottomModal from "react-native-modals"' instead?
    

    I found a work-around by creating my own type def file for the module with the following:

    declare module 'react-native-modals' {
      export class BottomModal extends Modal {}
    }
    
    opened by sflahave 0
  • Rendering screen with modals takes long time

    Rendering screen with modals takes long time

    I'm developing an application, and one screen in the app has many modals (let say 7-8 modals) which is used to show up information or enter data. The issue is, when I navigate to this screen, it's always take a long time (2-3 seconds) to render the screen. The screen was smooth and render fast before I put those modals on it. I guess it's because the screen has to render all modals, even though they're not yet displaying. Is it true? How can I solve this issue.

    opened by xuantubka 0
  • Bump url-parse from 1.4.7 to 1.5.3 in /example

    Bump url-parse from 1.4.7 to 1.5.3 in /example

    Bumps url-parse from 1.4.7 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tmpl from 1.0.4 to 1.0.5 in /example

    Bump tmpl from 1.0.4 to 1.0.5 in /example

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tmpl from 1.0.4 to 1.0.5

    Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tar from 4.4.4 to 4.4.19

    Bump tar from 4.4.4 to 4.4.19

    Bumps tar from 4.4.4 to 4.4.19.

    Commits
    • 9a6faa0 4.4.19
    • 70ef812 drop dirCache for symlink on all platforms
    • 3e35515 4.4.18
    • 52b09e3 fix: prevent path escape using drive-relative paths
    • bb93ba2 fix: reserve paths properly for unicode, windows
    • 2f1bca0 fix: prune dirCache properly for unicode, windows
    • 9bf70a8 4.4.17
    • 6aafff0 fix: skip extract if linkpath is stripped entirely
    • 5c5059a fix: reserve paths case-insensitively
    • fd6accb 4.4.16
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • how to remove padding of ModalContent?

    how to remove padding of ModalContent?

    how to remove padding of ModalContent?

    opened by codercatmomi 1
  • Bump path-parse from 1.0.6 to 1.0.7 in /example

    Bump path-parse from 1.0.6 to 1.0.7 in /example

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.5 to 1.0.7

    Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • updated react native to 0.64 and modal stopped working

    updated react native to 0.64 and modal stopped working

    I just updated react native to 0.64.2 and my modal stopped working. It's just not showing at all.. no errors, just not showing.. Im using version 0.19.9.

    opened by timurridjanovic 1
Releases(v0.4.16)
Owner
Jack Lam
Work EFFICIENTLY and EFFECTIVELY is more important than long working hours. CREATIVITY is the key to everything. IMAGINATION creates endless possibilities.
Jack Lam
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

Dan 398 Oct 18, 2021
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Peace 322 Nov 24, 2021
A cross-platform (iOS / Android), full-featured, highly customizable web browser module for React Native apps.

react-native-webbrowser A cross-platform (iOS / Android), full-featured in-app web browser component for React Native that is highly customizable. Cur

Dan 192 Nov 16, 2021
react-native-select is a highly customizable dropdownlist for android and ios.

rect-native-select react-native-select is a highly customizable dropdownlist for android and ios.

null 1 Nov 10, 2021
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
Swipeable SegmentedControl component for React Native apps

react-native-segment-control Demo Installation $ npm install react-native-segment-control --save Example import React from 'react'; import { View, Te

Ainur Baizhumanova 22 Oct 7, 2021
customizable multi-action-button component for react-native

react-native-action-button customizable multi-action-button component for react-native Known Issues Doesn't Work While Android Debugging. See issue #7

Yousef Kama 2.4k Nov 24, 2021
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Rishabh Sharma 19 Nov 15, 2021
Provides a function like transform-origin in css, anchor point in iOS, pivot point in Android. It makes3D transform animation better in React-Native.

react-native-anchor-point Provide a simple, tricky but powerful function, withAnchorPoint , like Anchor Point in iOS, Pivot Point in Android, transfor

RY Zheng 132 Nov 18, 2021
Highly customizable material design components for React Native

React Native Material UI (iOS and Android supported) Highly customizable material design components for React Native! Documentation Getting Started Us

Jiří Otáhal 3.7k Nov 25, 2021
Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

React Native Textinput Effects I've come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-nativ

Halil Bilir 2.8k Nov 24, 2021
A Beautiful, Customizable React Native Button component for iOS & Android

React Native Button component React Native Button component for iOS & Android. Provided Components This library provided the following button componen

Jack Lam 526 Nov 25, 2021
A FAB button component for Android and iOS, customizable, simple and as per material design specs.

react-native-fab A FAB button component for Android and iOS, customizable, simple and as per material design specs. See Google Material Design for mor

Swapnil Devesh 71 Sep 21, 2021
React Native Carousel control with support for iOS and Android

React Native Carousel Control React Native Carousel with support for both iOS and Android. React >= 16 -> 2.x.x React < 16 -> 1.x.x Installation npm i

Gustavo Machado 238 Nov 18, 2021
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

Talut TASGIRAN 26 May 23, 2021
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Devio.org 1.1k Nov 24, 2021
A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible.

React Native Search Box A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible, customizable. Support both iOS/

React Native Vietnam 445 Nov 20, 2021
Simple multi-select component for react-native

react-native-multiple-select Simple multi-select component for react-native (Select2 for react-native). Important notice I've been super busy with wor

MBO 469 Nov 22, 2021