senderrand-shared-components v0.31.0

senderrand-shared-components

WIP: intented collection of similar components used across out applications

Installation

npm install senderrand-shared-components

UI Components

• Header
• Header2
• Footer
• Success Modal 1
• Success Modal 2
• Custom Modal
• TextBox Component
• VoiceNote Component
• ImageBox Component
• VideoBox Component
• FooterOptions Component
• LocationBox Component
• FleetFooter
• FleetBox
• StatusBox
• NewRunner
• InvoiceBox
• TrackBox
• SwipeUp
• LoadingModal
• InvoiceModal
• ReasonSwipe Component
• LocationSwipe Component
• Exported Libraries

Rigid Chat & Functionalities

• Chat
• getInvoiceMessage
• getTrackerMessage
• getStatusMessage
• getNewRunnerMessage
• createTable
• sendMessage
• getMessages
• updateMessage
• deleteMessage
• XmppClient
• xmppSend
• sendTyping
• sendRecording
• sendRead
• formatURLMsg
• getMsg
• currencyFormat
• Interfaces

Header Component Usage

import { Header } from 'senderrand-shared-components';
import { Entypo } from '@expo/vector-icons';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => (
 <Header
   lang={'ar'}
   detail={'Typing..'}
   title={'SendErrand'}
   family={family}
   entypo={Entypo}
   options={['History', 'Locations', 'Profile', 'FAQs']}
/>
)

Features

• Styled Header with logo, title, detail & options

Tech

The Header component uses a number of open source projects to work properly:

• styled-components - For styling.
• expo-constant - To get status bar height

props

Below are the listed props that can be passed to the header component

Header2 Component Usage

import { Header2 } from 'senderrand-shared-components';
import { Entypo, MaterialIcons } from '@expo/vector-icons';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => (
  <Header2
    lang={'en'}
    entypo={Entypo}
    title={'Earnings'}
    family={family}
    back={() => props.navigation.goBack()}
    options={['One', 'Two']}
    materialIcons={MaterialIcons}
  />
)

Features

• Styled Header with title, detail & options

Tech

The Header2 component uses a number of open source projects to work properly:

• styled-components - For styling.
• expo-constant - To get status bar height

props

Below are the listed props that can be passed to the header2 component

Footer Component Usage

import { Footer } from 'senderrand-shared-components';

let fontFamily = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => (
 <Footer
   send={send}
   family={family}
   ionicons={Ionicons}
   antDesign={AntDesign}
   materialCommunityIcons={MaterialCommunityIcons}
   onSelectOption={(index: number) => console.log(index)}
   footerOnPressLaunchIcon={() => {}}
   onError={(message: string) => Alert.alert('Failed', message)}
 />
);

Features

• Camera.
• Image Picker.
• Audio Recorder.
• Text Input

Tech

The Footer component uses a number of open source projects to work properly:

• expo-av - For Audio Recording.
• expo-image-picker - To take picture from camera or select from library.
• react-native-actionsheet - To display Footer options.
• expo-file-system - To get the URI of the recorded audio.

props

Below are the listed props that can be passed to the footer component

Success Modal 1

import { SuccessModal } from 'senderrand-shared-components';
import { useState } from 'react';
import { Entypo } from '@expo/vector-icons';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {
  let [visible, setVisible] = useState(true)

  return (
    <SuccessModal
      family={family}
      visible={visible}
      title={'Congratulations'}
      close={() => setVisible(false)}
      btnTitle={'Close Modal'}
      entypo={Entypo}
      content={'We are exited to have you join our team!'}
    />
  )
}

Features

• A styled success modal to be displayed after successful action

props

Below are the listed props that can be passed to the header component

Success Modal 2

import { SuccessModal2 } from 'senderrand-shared-components';
import { useState } from 'react';
import { Entypo } from '@expo/vector-icons';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {
  let [visible, setVisible] = useState(true)

  return (
    <SuccessModal2
      entypo={Entypo}
      family={family}
      visible={visible}
      text={'Verified Successfully'}
      press={() => setVisible(false)}
      btnTitle={'Continue'}
    />
  )
}

Features

• A styled success modal to be displayed after successful action

props

Below are the listed props that can be passed to the header component

Custom Modal

import { CustomModal } from 'senderrand-shared-components';
import { useState } from 'react';
import { AntDesign } from '@expo/vector-icons';

const Example = () => {
  let [visible, setVisible] = useState(true)

  return (
    <CustomModal
      visible={visible}
      close={() => setVisible(false)}
      antdesign={AntDesign}
    >
      <Text>Hello, here is a sample modal content</Text>
    </CustomModal>
  )
}

Features

• A styled custom modal, that takes in a JSX Element as children to be displayed in the modal container.

props

Below are the listed props that can be passed to the custom modal component

TextBox Component

import { TextBox } from 'senderrand-shared-components';
import { Ionicons } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <TextBox
          family={family}
          ionicons={Ionicons}
          reply={item.reply}
          status={item.status} // 0: not sent, 1: sent, 2: received, 3:read
          text={item.text}
          date={item.date}
          sender={item.sender.id === 1}
          toReply={() => scrollToMsg(item.reply)}
          onSelectOption={() => {}}
        />
      )}
    />
  )
}

Features

• A chat text box component

props

Below are the listed props that can be passed to the TextBox

VoiceNote Component

import { VoiceNote } from 'senderrand-shared-components';
import { Ionicons, Entypo } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <VoiceNote
          image={'http//jpg'}
          entypo={Entypo}
          ionicons={Ionicons}
          status={item.status}
          date={item.date}
          audio={item.file && item.file.uri}
          sender={item.sender.id === 1}
          onSelectOption={() => {}}
        />
      )}
    />
  )
}

Features

• A chat voice note component

props

Below are the listed props that can be passed to the VoiceNote

ImageBox Component

import { ImageBox } from 'senderrand-shared-components';
import { Ionicons } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <VoiceNote
          image={'http//jpg'}
          entypo={Entypo}
          ionicons={Ionicons}
          status={item.status}
          date={item.date}
          audio={item.file && item.file.uri}
          sender={item.sender.id === 1}
          onSelectOption={() => {}}
        />
      )}
    />
  )
}

Features

• A chat image box component

props

Below are the listed props that can be passed to the ImageBox

VideoBox Component

import { ImageBox } from 'senderrand-shared-components';
import { Ionicons } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <VideoBox
          lang={'en'}
          ionicons={Ionicons}
          status={item.status}
          date={item.date}
          video={item.file && item.file.uri}
          sender={item.sender.id === 1}
          onSelectOption={() => {}}
        />
      )}
    />
  )
}

Features

• A chat video box component

props

Below are the listed props that can be passed to the VideoBox

FooterOptions Component

import { FooterOptions } from 'senderrand-shared-components';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FooterOptions
      family={family}
      press={(index: number) => console.log(index)}
      options={['Purchase', 'Pick Up']}
    />
  )
}

Features

• A UI component that display an array of buttons

props

Below are the listed props that can be passed to the FooterOptions

LocationBox Component

import { LocationBox } from 'senderrand-shared-components';
import { Ionicons, Entypo, MaterialIcons } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <LocationBox
          lang={'en'}
          family={family}
          ionicons={Ionicons}
          entypo={Entypo}
          materialIcons={MaterialIcons}
          status={item.status} // 0: not sent, 1: sent, 2: received, 3:read
          text={item.data && item.data.address && item.data.address}
          date={item.date}
          sender={true}
          options={['Option 1', 'Option 2']}
          onSelectOption={() => {}}
          location_type={item.data && item.data.location_type}
        />
      )}
    />
  )
}

Features

• A component to display selected location in a chat text box

props

Below are the listed props that can be passed to the LocationBox

FleetFooter Component

import { FleetFooter } from 'senderrand-shared-components';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FleetFooter select={(index: number) => {}} />
  )
}

Features

• A UI component that display the fleet options to selection

props

Below are the listed props that can be passed to the FleetFooter

FleetBox Component

import { FleetBox } from 'senderrand-shared-components';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <FleetBox
          lang={'en'}
          date={item.date}
          index={1}
          sender={true}
          family={family}
          options={['Edit', 'Delete']}
          onSelectOption={() => {}}
        />
      )}
    />
  )
}

Features

• A component to displays the selected fleet

props

Below are the listed props that can be passed to the FleetBox

StatusBox Component

import { StatusBox } from 'senderrand-shared-components';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <StatusBox
          family={family}
          text={item.text}
          color={item.data && item.data.color && item.data.color}
          loading={false}
        />
      )}
    />
  )
}

Features

• A component to displays the errand status within the chat

props

Below are the listed props that can be passed to the StatusBox

NewRunner Component

import { NewRunner } from 'senderrand-shared-components';
import { AntDesign } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <NewRunner
          lang={'ar'}
          antDesign={AntDesign}
          family={family}
          text={'Runner YINKA joined the chat'}
          name={'Runner Yinka'}
          runs={'90+ Runs'}
          rate={4}
          image={
            'https://media.istockphoto.com/photos/portrait-of-a-girl-picture-id938709362?s=612x612'
          }
        />
      )}
    />
  )
}

Features

• A component to displays the newly added runner

props

Below are the listed props that can be passed to the NewRunner

InvoiceBox Component

import { InvoiceBox } from 'senderrand-shared-components';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <InvoiceBox
          lang={'ar'}
          txt1={item.text}
          txt2={item.text}
          txt3={item.text}
          date={item.date}
          family={family}
          invoiceID={item.id}
          price={'100 AED'}
        />
      )}
    />
  )
}

Features

• An invoice UI component

props

Below are the listed props that can be passed to the InvoiceBox

TrackBox Component

import { TrackBox } from 'senderrand-shared-components';
import { Feather } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <TrackBox
          lang={'en'}
          feather={Feather}
          text={item.text}
          date={item.date}
          family={family}
          region={item.data && item.data.region && item.data.region}
          position={item.data && item.data.position && item.data.position}
        />
      )}
    />
  )
}

Features

• An location tracking UI component

props

Below are the listed props that can be passed to the TrackBox

SwipeUp Component

import { SwipeUp } from 'senderrand-shared-components';

const Example = () => (
  <SwipeUp>
    // ... children
  </SwipeUp>
);

Features

• An component for swiping up and down

props

Below are the listed props that can be passed to the SwipeUp

LoadingModal

import { LoadingModal } from 'senderrand-shared-components';
import { useState } from 'react';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {
  let [visible, setVisible] = useState(true)

  return (
    <LoadingModal
      visible={loading}
      family={family}
      text={'Processing Payment..'}
    />
  )
}

Features

• A modal to display loading UI

props

Below are the listed props that can be passed to the loading component

InvoiceModal

import { InvoiceModal } from 'senderrand-shared-components';
import { useState } from 'react';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {
  let [visible, setVisible] = useState(true)

  let invoice = [
    {
      item: 'Brake pads for Honda accord 2009 Front and Rear',
      quantity: 1,
      price: 200,
    },
    {
      item: 'Brake discs for Honda accord 2009. Front and Rear',
      quantity: 2,
      price: 400,
    },
    {
      item: 'Brake Oil',
      quantity: 2,
      price: 20,
    },
    {
      item: 'Errand cost',
      quantity: 1,
      price: 100,
    },
  ];

  let totals = [
    { title: 'SUBTOTAL', value: '720 NGN' },
    { title: 'DISCOUNT', value: '110 NGN', discount: '3%' },
    { title: 'TAX', value: '10 NGN' },
  ];

  return (
    <InvoiceModal
      lang={'en'}
      currency={'NGN'}
      visible={visible}
      family={family}
      totalItems={totals}
      items={invoice}
      nameKey={'item'}
      qtyKey={'quantity'}
      rateKey={'price'}
      grandTotal={'610 NGN'}
      txt2={"Runner's Name: YINKA"}
      txt3={'#12345673'}
      close={() => setInvoice(false)}
      press={(index: number) => console.log(index)}
    />
  )
}

Features

• A modal to display invoice UI

props

Below are the listed props that can be passed to the invoice component

ReasonSwipe Component

import { ReasonSwipe } from 'senderrand-shared-components';
import { Ionicons } from '@expo/vector-icons';

let reasons = [
  { reason: 'Runner took too long to respond' },
  { reason: 'Wrong pickup location' },
  { reason: 'I don’t need the service anymore' },
  { reason: 'Have to attend to an Emergency' },
];

const Example = () => (
  <ReasonSwipe
    lang={'en'}
    ionicons={Ionicons}
    family={family}
    data={reasons}
    textKey={'reason'}
    onSend={(item) => console.log(item)}
    onSelect={(item) => console.log(item)}
  />
);

Features

• A component for displaying the array of reasons

props

Below are the listed props that can be passed to the ReasonSwipe

LocationSwipe Component

import { LocationSwipe } from 'senderrand-shared-components';
import { Ionicons, MaterialIcons } from '@expo/vector-icons';

let locations = [
  {
    distance: '1.3km',
    timing: 'Deira',
    address: 'Dubai Deira International Market',
  },
  {
    distance: '400m',
    timing: '10am - 10:30pm',
    status: 1,
    address: 'Auto Pro, Silicon Oasis, Dubai',
  },
  {
    distance: '2km',
    timing: '10am - 2:30pm',
    status: 2,
    address: 'Zoom Enoc, Silicon Oasis, Dubai',
  },
];

const Example = () => (
  <LocationSwipe
    lang={'en'}
    family={family}
    data={locations}
    ionicons={Ionicons}
    materialIcons={MaterialIcons}
    onSelect={(item) => console.log(item)}
  />
);

Features

• A component displaying locations

props

Below are the listed props that can be passed to the LocationSwipe

Exported Libraries

• react-native-webview
• react-native-remote-svg
• expo-asset
• expo-av
• expo-constants
• expo-document-picker
• expo-file-system
• expo-font
• expo-image-manipulator
• expo-image-picker
• moment
• react-native-actionsheet
• react-native-animatable
• react-native-maps
• react-native-size-matters
• react-native-sliders
• react-native-svg
• react-native-zigzag-lines
• react-swipeable-views-native
• styled-components

Contributing

Rigid Chat

import Errand from "senderrand-shared-components";
import {
  Ionicons,
  AntDesign,
  Feather,
  MaterialIcons,
  MaterialCommunityIcons,
  Entypo,
} from '@expo/vector-icons';
import Chat, {
  getInvoiceMessage,
  getStatusMessage,
  getNewRunnerMessage,
  xmppSend,
  runnerInterface,
  getTrackerMessage, // @ts-ignore
} from 'senderrand-shared-components';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

let sender = { id: 1, name: 'Ollan Monsur' };
let sender2 = { id: 2, name: 'Yinka Azeez' };
let msg = getInvoiceMessage(
  '1',
  '#1223342',
  '20 AED',
  sender2,
  'Mirdif City Center',
  'ar'
);
let msg2 = getTrackerMessage(
  '1',
  { longitude: 55.3863, latitude: 25.1279 },
  { longitude: 55.3775, latitude: 25.1218 },
  sender2,
  'en'
);
let msg3 = getStatusMessage(
  '1',
  'Yinka is arriving somewhere currently',
  sender2
);
let runner: runnerInterface = {
  ...sender2,
  image:
    'url.png',
  rate: 4,
  runs: 110,
};
let msg4 = getNewRunnerMessage('1', runner, 'ar');

// ...

export default () => {
  let [messages, setMessages] = useState([...data, msg, msg2, msg3, msg4]);
  let send = (message: any) => {
    setMessages([...messages, message]);
    xmppSend('from jabber id', 'to jabber id', message);
  };

  return (
    <Wrap>
      <Errand
        orderID={1}
        headerOptions={['History', 'Locations', 'Settings', 'FAQ']}
        headerOnSelectOption={(index) => console.log(index)}
        family={family}
        user={sender}
        send={send}
        messages={messages}
        ionicons={Ionicons}
        entypo={Entypo}
        materialIcons={MaterialIcons}
        antDesign={AntDesign}
        invoiceBoxPress={(item) => console.log(item)}
        trackBoxPress={(item) => console.log(item)}
        feather={Feather}
        loading={false}
        footerOnError={(error: string) => Alert.alert('Failed', error)}
        materialCommunityIcons={MaterialCommunityIcons}
      />
    </Wrap>
  );
};

props

Below are the listed props that can be passed to the header component

Get Invoice Message

import { getInvoiceMessage } from 'senderrand-shared-components';

let sender2 = { id: 2, name: 'Abdul Mumin' };
let msg = getInvoiceMessage(
  '1',
  '#1223342',
  '20 AED',
  sender2,
  'Mirdif City Center',
  'ar'
);

Details

A function call to get the message data structure of an invoice message. The message is then sent to the chat. NOTE: Pass invoiceID when there is a full invoice and don't pass it when there is only total price.

parameters

Below are the listed parameter to be passed to the function

Get Tracker Message

import { getTrackerMessage } from 'senderrand-shared-components';

let sender2 = { id: 2, name: 'Abdul Mumin' };
let msg = getTrackerMessage(
  '1',
  { longitude: 55.3863, latitude: 25.1279 },
  { longitude: 55.3775, latitude: 25.1218 },
  sender2,
  'en'
);

Details

A function call to get the message data structure of a tracking message. The message is then sent to the chat.

parameters

Below are the listed parameter to be passed to the function

Get Status Message

import { getStatusMessage } from 'senderrand-shared-components';

let sender2 = { id: 2, name: 'Abdul Mumin' };
let msg =  getStatusMessage(
  '1',
  'Yinka is arriving somewhere currently',
  sender2
);

Details

A function call to get the message data structure of a status message. The message is then sent to the chat.

parameters

Below are the listed parameter to be passed to the function

Get New Runner Message

import { getNewRunnerMessage, runnerInterface } from 'senderrand-shared-components';

let sender2 = { id: 2, name: 'Abdul Mumin' };
let runner: runnerInterface = {
  ...sender2,
  image: 'oseni.png',
  rate: 4,
  runs: 110,
};
let msg = getNewRunnerMessage('1', runner, 'ar');

Details

A function call to get the message data structure of a new runner message. The message is then sent to the chat.

parameters

Below are the listed parameter to be passed to the function

Create Table

import { createTable } from 'senderrand-shared-components';

createTable()

Details

The function is to be called to create the sql table if it doesn't exist, when the application opens.

Send Message

import { sendMessage, messageInterface } from 'senderrand-shared-components';

let message: messageInterface = {
  sender: { id: 2, name: 'The sender' },
  id: 76,
  status: 3,
  date: new Date(),
  text: 'The sender has accepted the Invoice, Proceed to make payment.',
  file: null,
  type: 'text',
  reply: null,
  orderID: 1,
  data: { btnTitle: 'PAY' },
} // Pass required data
sendMessage(
  message,
  (res) => res && console.log(res)
);

Details

The function is called to send message into the device, after sending you can call the getMessages to get updates. The response is false if it fails to send.

parameters

Below are the listed parameter to be passed to the function

Get Messages

import { getMessages } from 'senderrand-shared-components';

getMessages('order ID')

Details

The function is called to get the messages on the device,

parameters

Below are the listed parameter to be passed to the function

Update Message

import { updateMessage } from 'senderrand-shared-components';

updateMessage(
  'status',
  3,
  'orderID',
  orderID,
  (res) => res && callback({ type: 'messages' })
);

Details

The function is called to update messages on the device,

parameters

Below are the listed parameter to be passed to the function

Delete Message

import { deleteMessage } from 'senderrand-shared-components';

deleteMessage(
  'id',
  3,
  (res) => res && callback({ type: 'messages' })
);

Details

The function is called to delete messages on the device,

parameters

Below are the listed parameter to be passed to the function

XMPP Client

import { XmppClient } from 'senderrand-shared-components';

const App = () => (
  <XmppClient
    user={{
      id: 1,
      jabber_id: '',
      phone: '',
    }}
    service={''}
    domain={''}
    change={(res: any) => console.log(res, 'hello there')}
  />
)

Details

The component is used globally in the app to handle xmpp request and response.,

props

Below are the listed properties to be passed to the component

XMPP Send

import { xmppSend } from 'senderrand-shared-components';

xmppSend('from', 'to', {/* data */})

Details

The function is called to send request to xmpp,

parameters

Below are the listed parameter to be passed to the function

Send Typing

import { sendTyping } from 'senderrand-shared-components';

sendTyping(true, 'orderID', 'from', 'to')

Details

The function is called to denote that user is currently typing.

parameters

Below are the listed parameter to be passed to the function

Send Recording

import { sendRecording } from 'senderrand-shared-components';

sendRecording(true, 'orderID', 'from', 'to')

Details

The function is called to denote that user is currently recording voice note.

parameters

Below are the listed parameter to be passed to the function

Get Msg

import { getMsg } from 'senderrand-shared-components';

getMsg() // messageInterface parameters
// sender
// orderID
// type
// status
// text
// file
// data
// reply
// duration

Details

The function is called to format message data, It takes in messageInterface parameters where sender, orderID and type are compulsory.

Format URL Msg

import { formatURLMsg } from 'senderrand-shared-components';

formatURLMsg({}, 'http//') // messageInterface parameters
// messageInterface
// url

Details

The function is called when replacing uri with url. Pass the message data and the url, then get new message format.

Send Read

import { sendRead } from 'senderrand-shared-components';

sendRead('orderID', 'from', 'to')

Details

The function is called to denote that user has read received messages.

parameters

Below are the listed parameter to be passed to the function

Currency Format

import { currencyFormat } from 'senderrand-shared-components';

currencyFormat(10000) // call function passing in integer value and it returns 10,000

Details

The function is called to format a number into currency value ex 10000 to 10,000.

Interfaces

export interface runnerInterface {
  id: string | number;
  name: string;
  image: string;
  rate: number;
  runs: number;
}

export interface coordinateInterface {
  longitude: number;
  latitude: number;
  longitudeDelta?: number;
  latitudeDelta?: number;
}

export interface senderInterface {
  id: string | number;
  name?: string;
  image?: string;
}
export interface messageInterface {
  id: string | number;
  text: string;
  date: Date | number;
  file: any;
  duration?: number;
  sender: senderInterface;
  reply?: messageInterface | null;
  data?: any;
  type: string;
  status: number;
  orderID: string | number;
}

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT