Skip to content
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
Objective-C Java JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android
ios
screencasts init commit Nov 4, 2015
.gitignore move to remobile Dec 8, 2015
.npmignore move to remobile Dec 8, 2015
LICENSE init commit Nov 4, 2015
README.md Update README.md Dec 11, 2016
index.js eslint code Mar 30, 2017
package.json

README.md

React Native MarqueeLabel (remobile)

A marquee label for react-native

Installation

npm install @remobile/react-native-marquee-label --save

Installation (iOS)

  • Drag RCTMarqueeLabel.xcodeproj to your project on Xcode.
  • Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTMarqueeLabel.a from the Products folder inside the RCTMarqueeLabel.xcodeproj.
  • Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

Installation (Android)

...
include ':react-native-marquee-label'
project(':react-native-marquee-label').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-marquee-label/android/RCTMarqueeLabel')
  • In android/app/build.gradle
...
dependencies {
    ...
    compile project(':react-native-marquee-label')
}
  • register module (in MainApplication.java)
......
import com.remobile.marqueeLabel.RCTMarqueeLabelPackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTMarqueeLabelPackage(),            // <------ add here
   ......
}

Usage

Example

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View
} = ReactNative;

var MarqueeLabel = require('@remobile/react-native-marquee-label');

module.exports = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <MarqueeLabel style={styles.marqueeLabel}
                    scrollDuration={3.0}
                    >
                    fangyunjiang is a good developer
                </MarqueeLabel>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    marqueeLabel: {
        backgroundColor: 'blue',
        width:260,
        height:200,
        fontSize:30,
        fontWeight:'800',
        color:'white',
    }
});

Screencasts

loading

Props

  • text : PropTypes.string.isRequired
  • scrollDuration : PropTypes.number //seconds
  • marqueeType : PropTypes.string //ios
  • fadeLength : PropTypes.number //ios
  • leadingBuffer : PropTypes.number //ios
  • trailingBuffer : PropTypes.number //ios
  • isRepeat : PropTypes.bool //android
  • startPoint : PropTypes.number //android
  • direction : PropTypes.number //android

see detail use

You can’t perform that action at this time.