HomeOur TeamContact

Fading Slides

By Prajakta Kumbhar
Published in UI
October 04, 2022
1 min read
Fading Slides

Table Of Contents

01
Introduction
02
Installation
03
Usage

Introduction

A simple looped fading slides whirler for React Native with the below properties.

Properties:
fadeDuration= Milliseconds for slide fade
stillDuration= Milliseconds for slide still
height= Set the slides component height
slides= Set the slides list
startAnimation= Start/stops animation

Slide properties:
title= title of slide
titleColor=Slide's title color
subtitle= subtitle of the slide
subtitleColor=  color of slide's subtitle
image= Slide's image
imageWidth= Slide's image width
imageHeight= Slide's image height

Installation

npm install --save react-native-fading-slides

Usage

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>
  );
};

Previous Article
Sliding Up Panel
Next Article
Blur View
Prajakta Kumbhar

Prajakta Kumbhar

Prajakta Kumbhar

Related Posts

Vertical Step indicator
Vertical Step indicator
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media