heineiuo / React Native Animated Linear Gradient
Animated linear gradient as background animation or something else.
Stars: β 153
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Animated Linear Gradient
Tagger
Zero Dependency, Vanilla JavaScript Tag Editor
Stars: β 135 (-11.76%)
Mutual labels: component
Fluentvalidation.blazor
Fluent Validation-powered Blazor component for validating standard <EditForm> π β
Stars: β 140 (-8.5%)
Mutual labels: component
React Svg Map
A set of React.js components to display an interactive SVG map
Stars: β 150 (-1.96%)
Mutual labels: component
React Osx Dock
React component that is magnifiable like the Mac OS X dock.
Stars: β 136 (-11.11%)
Mutual labels: component
Bekcurvetabbar
Full Customizable Tabbar with IBInspectables
Stars: β 144 (-5.88%)
Mutual labels: component
React Step Progress Bar
A library to create stunning progress bars and steps in React π‘
Stars: β 140 (-8.5%)
Mutual labels: component
React Use Clipboard
React hook that provides copy to clipboard functionality.
Stars: β 149 (-2.61%)
Mutual labels: component
React Native Modalize
A highly customizable modal/bottom sheet that loves scrolling content.
Stars: β 2,119 (+1284.97%)
Mutual labels: component
Esp Azure
SDK to connect ESP8266 and ESP32 to Microsoft Azure IoT services
Stars: β 137 (-10.46%)
Mutual labels: component
Vue Plain Slider
A simple slider component for Vue.js
Stars: β 146 (-4.58%)
Mutual labels: component
React Intense
A React component for viewing large images up close π
Stars: β 152 (-0.65%)
Mutual labels: component
Aura.filter
Validate and sanitize arrays and objects.
Stars: β 134 (-12.42%)
Mutual labels: component
React Native Wormhole
βοΈ π Inter-dimensional Portals for React Native. π½ π
Stars: β 133 (-13.07%)
Mutual labels: component
React Axios
Axios Components for React with child function callback
Stars: β 153 (+0%)
Mutual labels: component
Vue Table
data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.
Stars: β 1,833 (+1098.04%)
Mutual labels: component
Scrollprogress
πΈ Light weight library to observe the viewport scroll position
Stars: β 148 (-3.27%)
Mutual labels: component
react-native-animated-linear-gradient
Animated linear gradient as background animation or other.
Example
Install
- install react-native-linear-gradient, run
npm install react-native-linear-gradient --save
- run
react-native link react-native-linear-gradient
- run
npm install react-native-animated-linear-gradient --save
Use
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
import AnimatedLinearGradient, {presetColors} from 'react-native-animated-linear-gradient'
class HelloWorldApp extends Component {
render() {
return (
<AnimatedLinearGradient customColors={presetColors.instagram} speed={4000}/>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Props
-
customColors
A colorsarray
. This package has include some preset colors, default ispresetColors.instagram
:
export presetColors = {
instagram: [
'rgb(106, 57, 171)',
'rgb(151, 52, 160)',
'rgb(197, 57, 92)',
'rgb(231, 166, 73)',
'rgb(181, 70, 92)'
],
firefox: [
'rgb(236, 190, 55)',
'rgb(215, 110, 51)',
'rgb(181, 63, 49)',
'rgb(192, 71, 45)',
],
sunrise: [
'rgb(92, 160, 186)',
'rgb(106, 166, 186)',
'rgb(142, 191, 186)',
'rgb(172, 211, 186)',
'rgb(239, 235, 186)',
'rgb(212, 222, 206)',
'rgb(187, 216, 200)',
'rgb(152, 197, 190)',
'rgb(100, 173, 186)',
]
};
-
speed
The speed of the animation. default is 4000. -
points
(experimental) Describe the direction of linear gradient with start point and end point see more
Default:
const DEFAULT_POINTS = {
start: {x: 0, y: 0.4},
end: {x: 1, y: 0.6}
}
Example:
vertical:
<AnimatedLinearGradient points={{start: {x: 0.5, y: 0}, end: {x: 0.5, y: 1}}}/>
You can find out it is static values, no animate here :( . This points is going to be animateable soon :) .
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].