react-native-FadeableNavBar

FadeableNavBar.js

// @flow
'use strict'

import React, {PropTypes, Component} from 'react';
import {View, Image, TouchableOpacity, StyleSheet, Text, Dimensions} from 'react-native';
import NavBar from 'react-native-navbar'

var {height, width} = Dimensions.get('window')

const propTypes = {
    statusBarStyle: PropTypes.oneOf(['light-content', 'default' ]),
    alpha: PropTypes.number,
    title: PropTypes.string,
    rightButton: PropTypes.object
};

export default class FadeableNavBar extends Component {

    constructor(props) {
        super(props);
        this.state = {
            alpha: this.props.alpha?this.props.alpha:0
        }
    }

    componentWillReceiveProps(props) {
        if(props.alpha != this.state.alpha){
            let alpha = props.alpha;
            if (alpha < 0) {
                alpha = 0
            }
            if (alpha > 1) {
                alpha = 1
            }
            this.setState({
                alpha: alpha
            });
        }
    }

    changeAlpha(alpha) {
        if (alpha < 0) {
            alpha = 0
        }
        if (alpha > 1) {
            alpha = 1
        }
        if (this.state.alpha != alpha) {
            this.setState({
                alpha: alpha
            })
        }
    }

    getAlpha() {
        return this.state.alpha
    }

    render() {
        return (
            <NavBar
                statusBar={{style: this.props.statusBarStyle}}
                style={ [this.props.style, { height:44, flex:1 }] }
                title={
                    this.renderTitle()
                }
                tintColor={`rgba(20, 185, 200, ${this.state.alpha})`}
                rightButton={this.props.rightButton}
                leftButton={this.renderLeftNavButton()}>
                
            </NavBar>
        );
    }

    renderTitle() {
        let titleColor = `rgba(255, 255, 255, ${this.state.alpha})`
        return(
            <Text 
                numberOfLines={1}
                style={{
                    maxWidth: width - 160,
                    color: titleColor,
                    fontSize: 18,
                    marginBottom: 3
                }}>
                {this.props.title}
            </Text>
        )
    }

    renderLeftNavButton() {
        return (
            <TouchableOpacity style={styles.navLeftBtnContainer} onPress={()=>this.props.navigator.pop()}>
                <Image style={styles.navLeftBtnImg} source={require('./img/back_w.png')} />
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    navLeftBtnContainer: {
        height: 44,
        flexDirection: 'row',
        alignItems: 'center'
    },
    navLeftBtnImg: {
        width: 44,
        height: 44
    },
    navBarTitleContainer: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center'
    },
    navBarTitleText: {
        fontSize: 17,
        letterSpacing: 0.5,
        color: '#333',
        fontWeight: '500'
    }
});

FadeableNavBar.propTypes = propTypes;
FadeableNavBar.defaultProps = {
    statusBarStyle: 'light-content',
    title: ''
};