react-native-mobile-browser/StatusBar.js

A cross-platform (iOS / Android), full-featured in-app web browser component for React Native that is highly customizable. Suitable with latest RN

'use strict';

import React, {Component} from 'react';
import {
  TextInput,
  View,
} from 'react-native';

import BaseComponent from './BaseComponent'
import styles from './styles'

class StatusBar extends BaseComponent {

    constructor(props) {
        super(props);

        this.inputText = '';
        this.state = {
            status: this.props.status
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            status: nextProps.status
        });
    }

    render() {
        return (
            <View style={styles.statusBar}>
                <TextInput
                    value={this.state.status}
                    style={[styles.statusBarText, this.props.foregroundColor && {color:this.props.foregroundColor}]}
                    editable={false}
                    numberOfLines={1}
                />

            </View>
        );
    }
}

StatusBar.propTypes = {
    status: React.PropTypes.string,
    foregroundColor: React.PropTypes.string
};

StatusBar.defaultProps = {
    status: '',
};

module.exports = StatusBar;