react-native-infobox

react-native-infobox

An information box component for react-native. This is still very much a work in progress and only handles the simplest of cases, ideas and contributions are very welcome.

Add it to your project

1. Run npm install react-native-infobox --save

Dependencies

This project uses React Native Vector Icons which uses Ionic fonts. Please follow the proper instructions from their project to use it in iOS or Android.

Usage

'use strict';
 
import React, {Component} from 'react'
import InfoBox from 'react-native-infobox'
 
class App extends Component {
    ...
 
    render() {
        return (
            <InfoBox
                hidden={false}
                onClose={() => {}}
                timeout={5}>
                <Text style={{color: 'white'}}>Hello this is a help box.</Text>
            </InfoBox>
        )
    }
}

Simple Usage

'use strict';
 
import React, {Component} from 'react'
import InfoBox from 'react-native-infobox'
 
class App extends Component {
    ...
 
    render() {
        return (
            <InfoBox>
                <Text style={{color: 'white'}}>Hello this is a help box.</Text>
            </InfoBox>
        )
    }
}

Props

Component accepts several self-descriptive properties:

• hidden (Bool) - if true, the info box will be hidden by default.
• onClose (Function)
• timeout (Number) - set timeout in seconds to define when the infobox closes automatically.
• children (React Component)
• containerStyle (Object) - applies style to the infobox container.
• iconName (String) - Ionicon icon name for the close icon, See ionicon font cheatsheet.
• iconColor (String) - Close icon color.
• iconSize (Number) - Close icon size.

---

MIT Licensed