f0rr0 / React Native Rating
Licence: mit
🌟 cross-platform rating for react-native built with Animated and native driver 🌟
Stars: ✭ 90
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Rating
Gradientify
Create beautiful, animated gradients with ease. This JS library provides you with an easy-to-use API to create and put animated gradients wherever you want on your website.
Stars: ✭ 16 (-82.22%)
Mutual labels: animated
Animricheditor
rich text editor which enables users to insert/delete bitmaps and text into edit-view with animations.
Stars: ✭ 967 (+974.44%)
Mutual labels: animated
Aiflatswitch
Nicely animated flat design switch alternative to UISwitch
Stars: ✭ 904 (+904.44%)
Mutual labels: animated
Sjfluidsegmentedcontrol
A segmented control with custom appearance and interactive animations. Written in Swift 3.0.
Stars: ✭ 862 (+857.78%)
Mutual labels: animated
Paperview
A high performance X11 animated wallpaper setter
Stars: ✭ 999 (+1010%)
Mutual labels: animated
Jeelizweboji
JavaScript/WebGL real-time face tracking and expression detection library. Build your own emoticons animated in real time in the browser! SVG and THREE.js integration demos are provided.
Stars: ✭ 835 (+827.78%)
Mutual labels: animated
React Awesome Button
React button component. Awesome button is a 3D UI, progress, social and share enabled, animated at 60fps, light weight, performant, production ready react UI button component. 🖥️ 📱
Stars: ✭ 943 (+947.78%)
Mutual labels: animated
React Native Animated Numbers
🎰 Library showing animation of number changes in react-native
Stars: ✭ 55 (-38.89%)
Mutual labels: animated
Christmas Tree
ASCII christmas-tree with animations for 256 colored terminals
Stars: ✭ 23 (-74.44%)
Mutual labels: animated
React Native Scrollable Tab View
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar
Stars: ✭ 6,784 (+7437.78%)
Mutual labels: animated
Vue Slicksort
A set of vue mixins to turn any list into an animated, touch-friendly, sortable list ✌️
Stars: ✭ 1,010 (+1022.22%)
Mutual labels: animated
React Native Animated Tabbar
A 60FPS animated tab bar with a variety of cool animation presets 😎
Stars: ✭ 890 (+888.89%)
Mutual labels: animated
React Native Hole View
✂️ React-Native component to cut a touch-through holes anywhere you want. Perfect solution for tutorial overlay
Stars: ✭ 61 (-32.22%)
Mutual labels: animated
Numericaltextentry
An iOS library for beautiful number entry fields. iPad friendly. Written in Swift.
Stars: ✭ 16 (-82.22%)
Mutual labels: animated
React Native Really Awesome Button
React Native button component. Awesome Button is a 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. 📱
Stars: ✭ 988 (+997.78%)
Mutual labels: animated
Animated Stars Android
Draw animated stars on Android view canvas - written in Kotlin
Stars: ✭ 85 (-5.56%)
Mutual labels: animated
Animateddropdownmenu
A clean interface dropdown menu, appears underneath navigation bar to display a list of related items when you click on the navigation title.
Stars: ✭ 70 (-22.22%)
Mutual labels: animated
Spalert
Native alert from Apple Music & Feedback. Contains Done, Heart & Message and other presets.
Stars: ✭ 1,014 (+1026.67%)
Mutual labels: animated
react-native-rating
Display ratings in your react-native app like a pro. Works on both iOS and Android.
Install
npm i -S react-native-rating
or
yarn add react-native-rating
Usage
import Rating from 'react-native-rating'
import { Easing } from 'react-native'
const images = {
starFilled: require('./assets/star_filled.png'),
starUnfilled: require('./assets/star_unfilled.png')
}
const myRandoComponent = () => (
<Rating
onChange={rating => console.log(rating)}
selectedStar={images.starFilled}
unselectedStar={images.starUnfilled}
config={{
easing: Easing.inOut(Easing.ease),
duration: 350
}}
stagger={80}
maxScale={1.4}
starStyle={{
width: 40,
height: 40
}}
/>
)
Customization
Refer to the propTypes
and defaultProps
definition below:
static propTypes = {
max: PropTypes.number,
initial: PropTypes.number,
onChange: PropTypes.func,
config: PropTypes.shape({
easing: PropTypes.func.isRequired,
duration: PropTypes.number.isRequired
}),
editable: PropTypes.bool,
stagger: PropTypes.number,
maxScale: PropTypes.number,
starStyle: ViewPropTypes.style,
containerStyle: ViewPropTypes.style,
selectedStar: PropTypes.number.isRequired,
unselectedStar: PropTypes.number.isRequired,
onAnimationComplete: PropTypes.func
}
static defaultProps = {
max: 5,
initial: 0,
onChange: () => {},
config: {
easing: Easing.elastic(1),
duration: 400
},
stagger: 100,
maxScale: 1.1,
starStyle: {
width: 36,
height: 36
},
editable: true,
containerStyle: { flexDirection: 'row' },
onAnimationComplete: () => {}
}
License
MIT
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].