React Native Socket Module

Currently browsers does not support connecting to TCP Socket using Javascript. React Native Socket Module is a light weight library that provides feasibility to establish a connection with the socket and allows communication to the application using javascript running on a browser. This is an independent package.

This package exposes a method sendDataToSocket to allow communication with the socket.

Setup

Installation

$ npm install react-native-tcp-socket-mroads --save

or

$ yarn add react-native-tcp-socket-mroads

Usage

On importing the above package, React NativeModules comes up with a TcpSocket module. This TcpSocket module provides a method sendDataToSocket.

sendDataToSocket takes the below parameters for implementation.

Params	Default	Mandatory	Type	Description
Ip Address		Yes	String	Ip address which is required for connection establishment
Port		Yes	String	Port number on which server is listening
Data		Yes	String	Data which needs to be passed on
Callback		Yes	Function	Callback function that needs to be executed in success or failure scenarios.The first parameter of callback indicates the error and second parameter indicates successful connection.

Example

import React from 'react';
import {View, Text, StyleSheet, TextInput} from 'react-native';
import SocketModuleWrapper from './SocketModuleWrapper';
import ButtonWrapper from 'react-native-button-wrapper';
import { NativeModules } from 'react-native';

const styles = StyleSheet.create({
  //styles for the screen
});

class MainApp extends React.Component {

    donePressed = () => {
        const { printerIpAddress, printerPort, data } = this.state;
        NativeModules.TcpSocket.sendDataToSocket(
          printerIpAddress,
          +printerPort,
          data,
          (error, response) => {
            const endTime = new Date().getTime();
            if ((endTime - startTime) / 1000 > 4) {
              return;
            }
            if (response) {
              onSuccess && onSuccess(response);
            } else if (error) {
              onError && onError(error);
            }
          },
        );
    }

  render() {
    return (
        <View style={styles.container}>
            <ButtonWrapper
            style={styles.button}
            onPress={() => this.donePressed()}
            >
                <Text style={styles.text}>DONE</Text>
            </ButtonWrapper>
        </View>
    );
  }
}

export default MainApp;