rnc

react-native-callout

Simple Callout View for react-native which can be used on both iOS/Android

Showing:

Popularity

Downloads/wk

17

GitHub Stars

10

Maintenance

Last Commit

5yrs ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-callout

Simple Callout View for react-native which can be used on both iOS/Android

Content

Installation

npm install react-native-callout

Usage example

var MJCallout = require('react-native-callout');

var Application = React.createClass({
  render: function() {
    return (
      <View>
        <Text>
          MJCallout Example
        </Text>
        <View style={{position:'absolute', top:100, left:100}}>
          <MJCallout width={200} visibility={1} calloutText={"Sample Callout Text"} arrowDirection={'up'}>
          </MJCallout>
        </View>
      </View>
    );
  }
});

Properties

  • width (Number) - Width of the Callout (default is 200)
  • arrowDirection (Enum) - Directions for the arrow of the callout, namely: up, down, left & right
  • visibility (Number) - Set 0 for hiding the callout and 1 to show the callout
  • calloutText (String) - Text to be shown inside the callout,

Live example

git clone https://github.com/mayuur/react-native-callout.git
cd react-native-callout/examples
npm install
react-native run-ios
OR
react-native run-android

Additionally, you can open the iOS or Android Project and debug it accordingly

License

MIT License

Questions?

Feel free to create an issue or Talk to me @mayuur

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100