index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import Composer from 'react-native-message-composer';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

export default class Fundue extends Component {
  state = { msg: 'Hello....' };
  handleWelcome = () => {
    Composer.messagingSupported(supported => {
        // do something like change the view based on whether or not messaging is supported
        // for example you could use this in componentWill/DidMount and show/hide components based on result
        // you could also use this to set state within app which would make showing/hiding components easier
    });

    // inside your code where you would like to send a message
    Composer.composeMessageWithArgs(
        {
            'messageText':'My sample message body text',
            'subject':'My Sample Subject',
            'recipients':['0987654321', '0123456789'],
            'presentAnimated': true,
            'dismissAnimated': false
        },
        (result) => {
            switch(result) {
                case Composer.Sent:
                    this.setState({ msg: 'the message has been sent' });
                    break;
                case Composer.Cancelled:
                    this.setState({ msg: 'user cancelled sending the message' });
                    break;
                case Composer.Failed:
                    this.setState({ msg: 'failed to send the message' });
                    break;
                case Composer.NotSupported:
                    this.setState({ msg: 'this device does not support sending texts' });
                    break;
                default:
                    this.setState({ msg: 'something unexpected happened' });
                    break;
            }
        }
    );
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {this.state.msg}
        </Text>
        <TouchableHighlight onPress={this.handleWelcome}><Text>Touch THIS!</Text></TouchableHighlight>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Fundue', () => Fundue);

package.json

{
  "name": "Fundue",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "15.3.2",
    "react-native": "0.36.0",
    "react-native-message-composer": "^0.1.0"
  },
  "jest": {
    "preset": "jest-react-native"
  },
  "devDependencies": {
    "babel-jest": "16.0.0",
    "babel-preset-react-native": "1.9.0",
    "jest": "16.0.2",
    "jest-react-native": "16.0.0",
    "react-test-renderer": "15.3.2"
  }
}