chagasaway / React Native Fading Slides
Licence: mit
➰ Simple looped fading slides carousel for React Native.
Stars: ✭ 123
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Fading Slides
React Css Component
Injecting CSS via React Components
Stars: ✭ 98 (-20.33%)
Mutual labels: react-component
React Stepper
Well-designed stepper component for react
Stars: ✭ 108 (-12.2%)
Mutual labels: react-component
React Auto Form
Simplifies getting user input from forms via onChange and onSubmit events, using DOM forms APIs
Stars: ✭ 116 (-5.69%)
Mutual labels: react-component
React Textarea Autosize
<textarea /> component for React which grows with content
Stars: ✭ 1,357 (+1003.25%)
Mutual labels: react-component
React Image Fallback
stop displaying broken images, have another image to fallback on.
Stars: ✭ 106 (-13.82%)
Mutual labels: react-component
React Native Interactive Image Gallery
🖼 A React Native component to display a gallery of images.
Stars: ✭ 111 (-9.76%)
Mutual labels: react-component
React Responsive Picture
A future-proof responsive image component that supports latest Picture specification
Stars: ✭ 91 (-26.02%)
Mutual labels: react-component
React Lazy
Universal lazy loader components using IntersectionObserver for React
Stars: ✭ 118 (-4.07%)
Mutual labels: react-component
React Color
🎨 Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
Stars: ✭ 10,287 (+8263.41%)
Mutual labels: react-component
React Contextmenu
Project is no longer maintained
Stars: ✭ 1,361 (+1006.5%)
Mutual labels: react-component
Tagify
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
Stars: ✭ 2,305 (+1773.98%)
Mutual labels: react-component
React Currency Input Field
React component for an input field
Stars: ✭ 111 (-9.76%)
Mutual labels: react-component
React Native Swipeable Parallax Carousel
React Native Swipeable Parallax Carousel
Stars: ✭ 98 (-20.33%)
Mutual labels: react-component
React Router Active Component
Factory function for React components which are active for a particular React Router route
Stars: ✭ 116 (-5.69%)
Mutual labels: react-component
React Cassette Player
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
Stars: ✭ 93 (-24.39%)
Mutual labels: react-component
React Multi Select
A Multi Select component built with and for React
Stars: ✭ 111 (-9.76%)
Mutual labels: react-component
React Structured Data
React Structured Data provides an easy way to add structured data to your React apps
Stars: ✭ 120 (-2.44%)
Mutual labels: react-component
React Audio Recorder
A React Component using the Web Audio API to record, save, and play audio.
Stars: ✭ 118 (-4.07%)
Mutual labels: react-component
React Flow Editor
React component which enables creating flow editors with ease
Stars: ✭ 110 (-10.57%)
Mutual labels: react-component
React Native FadingSlides Component
Simple looped fading slides carousel for React Native.
Installation
npm install --save react-native-fading-slides
Properties
fadeDuration={500} // Milliseconds for slide fade
stillDuration={1000} // Milliseconds for slide still
height={1000} // Set the slides component height
slides={slidesList} // Set the slides list
startAnimation={true} // Start or stops animation
Slides Properties
title={"Title"} // Slide's title
titleColor={"#fff"} // Slide's title color
subtitle={"Subtitle"} // Slide's subtitle
subtitleColor={"#fff"} // Slide's subtitle color
image={require('image!filename')} // Slide's image
imageWidth={1000} // Slide's image width
imageHeight={1000} // Slide's image height
Usage Example
import FadingSlides from 'react-native-fading-slides';
const slides = [
{
image: require('image!squared-image'),
imageWidth: 100,
imageHeight: 100,
title: 'Hello World',
subtitle: 'This is a beautiful world',
titleColor: '#fff',
subtitleColor: '#fff',
},
{
image: require('image!wide-image'),
imageWidth: 200,
imageHeight: 100,
title: 'Bye World',
subtitle: 'This is a see you soon',
titleColor: '#fff',
subtitleColor: '#fff',
}
];
//...
render() {
return (
<View>
<FadingSlides
slides={slides}
fadeDuration={1200}
stillDuration={2000}
height={500}
startAnimation={true}
/>
</View>
);
};
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].