Initial

Author: chagasaway

.gitignore

@@ -0,0 +1 @@
+node_modules

CHANGELOG.md

@@ -0,0 +1,2 @@
+### 0.1.0
+- Initial component

README.md

@@ -1,2 +1,73 @@
-# react-native-fading-slides
+## React Native FadingSlides Component
+
 Simple looped fading slides carousel for React Native.
+
+### Installation
+
+```bash
+npm install 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
+```
+
+### 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
+
+```javascript
+'use strict';
+
+var FadingSlides = require('react-native-fading-slides');
+
+var 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: function() {
+  return (
+    <View>
+      <FadingSlides
+      slides={slides}
+      fadeDuration={1200}
+      stillDuration={2000}
+      height={500}/>
+    </View>
+  );
+};
+```

fading-slides.component.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var React = require('react-native');
+var TimerMixin = require('react-timer-mixin');
+var tweenState = require('react-tween-state');
+
+var {
+  Animated,
+  StyleSheet,
+  View,
+  Text
+} = React;
+
+let MINIMUM_DELAY = 100;
+
+var FadingSlides = React.createClass({
+  mixins: [TimerMixin, tweenState.Mixin],
+
+  getInitialState: function () {
+    return {
+      opacity: 0,
+      currentIndex: 0
+    };
+  },
+
+  componentDidMount: function () {
+    this._fadeOpacity();
+  },
+
+  _fadeOpacity: function () {
+    this.tweenState('opacity', {
+      easing: tweenState.easingTypes.easeInCirc,
+      duration: this.props.fadeDuration,
+      beginValue: this.state.opacity === 0 ? 0 : 1,
+      onEnd: this._getNextSlide,
+      endValue: this.state.opacity === 0 ? 1 : 0
+    });
+  },
+
+  _getNextSlide: function () {
+    if (this.state.opacity === 0) {
+      var index = this.state.currentIndex + 1;
+      index = index < this.props.slides.length ? index: 0;
+      this.setState({ currentIndex: index });
+      this.setTimeout(() => { this._fadeOpacity(); }, MINIMUM_DELAY);
+    } else {
+      this.setTimeout(() => { this._fadeOpacity(); },
+      this.props.stillDuration || MINIMUM_DELAY);
+    }
+  },
+
+  render: function () {
+    var slide = this.props.slides[this.state.currentIndex];
+    return (
+      <View style={[styles.slide, { height: this.props.height, opacity: this.getTweeningValue('opacity') }]}>
+        <View style={styles.info} />
+        <Animated.Image
+          style={{ width: slide.imageWidth, height: slide.imageHeight }}
+          source={slide.image}
+        />
+        <View style={styles.info}>
+          <Text style={[styles.title, { color: slide.titleColor }]}>
+            {slide.title}
+          </Text>
+          <Text style={[styles.subtitle, { color: slide.subtitleColor }]}>
+            {slide.subtitle}
+          </Text>
+        </View>
+      </View>
+    );
+  },
+});
+
+
+var styles = StyleSheet.create({
+  slide: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  info: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '700',
+  },
+  subtitle: {
+    fontSize: 20,
+    paddingBottom: 30
+  }
+});
+
+module.exports = FadingSlides;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-native-fading-slides",
+  "version": "0.1.0",
+  "description": "Simple looped fading slides carousel for React Native",
+  "main": "fading-slides.component.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chagasaway/react-native-fading-slides.git"
+  },
+  "keywords": [
+    "react-native",
+    "slides",
+    "intro",
+    "carousel"
+  ],
+  "author": "Fellipe Chagas <chagas.0@gmail.com> (https://github.com/chagasaway)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/chagasaway/react-native-fading-slides/issues"
+  },
+  "homepage": "https://github.com/chagasaway/react-native-fading-slides",
+  "peerDependencies": {
+    "react-native": ">=0.4 <1.0"
+  }
+}