n4kz / React Native Material Ripple
Licence: other
Base component for touchable elements
Stars: ✭ 359
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Material Ripple
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+5496.1%)
Mutual labels: material-design, material
Framework7
Full featured HTML framework for building iOS & Android apps
Stars: ✭ 16,560 (+4512.81%)
Mutual labels: material-design, material
Material Motion Js
Reusable gestural interactions in JavaScript. In development.
Stars: ✭ 277 (-22.84%)
Mutual labels: material-design, material
Sequent
A simple continuous animation library for Android UI.
Stars: ✭ 263 (-26.74%)
Mutual labels: material-design, material
Material Showcase Ios
✨ An elegant way to guide your beloved users in iOS apps - Material Showcase.
Stars: ✭ 300 (-16.43%)
Mutual labels: material-design, material
Githubfollows
A demo project based on MVVM architecture and material design & animations.
Stars: ✭ 272 (-24.23%)
Mutual labels: material-design, material
Ng Notadd
In-middle background front-end solution based on angular material 基于Angular Material的中后台前端解决方案
Stars: ✭ 287 (-20.06%)
Mutual labels: material-design, material
Alyle Ui
Minimal Design, a set of components for Angular 9+
Stars: ✭ 234 (-34.82%)
Mutual labels: material-design, material
Primedatepicker
PrimeDatePicker is a tool that provides picking a single day, multiple days, and a range of days.
Stars: ✭ 292 (-18.66%)
Mutual labels: material-design, material
Materia Theme
A Material Design theme for GNOME/GTK based desktop environments
Stars: ✭ 3,177 (+784.96%)
Mutual labels: material-design, material
Epiboard
Web Extension — A new tab page extension with material design and useful features 🆕 🎉
Stars: ✭ 262 (-27.02%)
Mutual labels: material-design, material
Ngx Materialize
Angular wrap around Materialize library
Stars: ✭ 322 (-10.31%)
Mutual labels: material-design, material
Materiallettericon
Material first letter icon like lollipop contacts icon. Letter(s) on a shape drawn on canvas.
Stars: ✭ 255 (-28.97%)
Mutual labels: material-design, material
React Native Material Menu
Pure JavaScript material menu component for React Native
Stars: ✭ 327 (-8.91%)
Mutual labels: material-design, material
Responsive scaffold
Responsive Scaffold - On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item. Maintainer: @rodydavis
Stars: ✭ 238 (-33.7%)
Mutual labels: material-design, material
Progressstatusbar
Another way to show progress. A progress View over the system StatusBar.
Stars: ✭ 283 (-21.17%)
Mutual labels: material-design, material
Hexo Theme Fluid
🌊 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo
Stars: ✭ 3,700 (+930.64%)
Mutual labels: material-design, material
Motion Shapeofview
Explain how to use MotionLayout with ShapeOfView
Stars: ✭ 236 (-34.26%)
Mutual labels: material-design, material
Material Bread
Cross Platform React Native Material Design Components
Stars: ✭ 287 (-20.06%)
Mutual labels: material-design, material
Material Components Vue
Material Design styled components for Vue.js
Stars: ✭ 316 (-11.98%)
Mutual labels: material-design, material
react-native-material-ripple
Base component for touchable elements
Features
- Easy to use
- Configurable
- Consistent look and feel on iOS and Android
- Can be used as drop-in replacement for TouchableWithoutFeedback
- Pure javascript implementation
- RTL Support
Installation
npm install --save react-native-material-ripple
Usage
import React, { Component } from 'react';
import { Text } from 'react-native';
import Ripple from 'react-native-material-ripple';
class Example extends Component {
render() {
return (
<Ripple>
<Text>touch me</Text>
</Ripple>
);
}
}
Properties
| name | description | type | default |
|---|---|---|---|
| rippleColor | Ripple color | String | rgb(0, 0, 0) |
| rippleOpacity | Ripple opacity | Number | 0.3 |
| rippleDuration | Ripple duration in ms | Number | 400 |
| rippleSize | Ripple size restriction | Number | 0 |
| rippleContainerBorderRadius | Ripple container border radius | Number | 0 |
| rippleCentered | Ripple always starts from center | Boolean | false |
| rippleSequential | Ripple should start in sequence | Boolean | false |
| rippleFades | Ripple fades out | Boolean | true |
| disabled | Ripple should ignore touches | Boolean | false |
| onPressIn | Touch moved in or started callback | Function | - |
| onPressOut | Touch moved out or terminated callback | Function | - |
| onPress | Touch up inside bounds callback | Function | - |
| onLongPress | Touch delayed after onPressIn callback | Function | - |
| onRippleAnimation | Animation start callback | Function | - |
Other TouchableWithoutFeedback properties will also work
Example
git clone https://github.com/n4kz/react-native-material-ripple
cd react-native-material-ripple/example
npm install
react-native run-ios # or run-android
Copyright and License
BSD License
Copyright 2017-2018 Alexander Nazarov. All rights reserved.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].