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
Property | Type | Required | Description |
---|---|---|---|
containerStyle |
Style |
false |
The style passed to the header container |
image |
string |
false |
The image url passed to the header logo, defaults to senderrand logo |
title |
string |
false |
The text string to be displayed in the title |
titleStyle |
Style |
false |
The style passed to the header title |
detail |
string |
false |
The text string to be displayed in the detail below the title |
detailStyle |
Style |
false |
The style passed to the header detail |
options |
array |
false |
An string array of options passed to the header menu options |
entypo |
@expo/vector-icons |
true |
It takes in Entypo component to represent the menu icon |
optionTxtStyle |
Style |
false |
The style passed to the option text component |
onPressOption |
Function |
false |
This function call when each menu option is tapped. It returns the index of the tapped option as parameter |
family |
object |
true |
An object that contains the font family used for the text elements in the header component. An example is shown above. |
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
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
Property | Type | Required | Description |
---|---|---|---|
containerStyle |
Style |
false |
The style passed to the header container |
title |
string |
false |
The text string to be displayed in the title |
left |
React.Component |
false |
A component displayed on the left part of the header. |
right |
React.Component |
false |
A component displayed on the right part of the header. |
back |
function |
false |
A function called when back button is pressed. When passed the back button displays. |
options |
array |
false |
An string array of options passed to the header menu options |
entypo |
@expo/vector-icons |
true |
It takes in Entypo component to represent the menu icon |
optionTxtStyle |
Style |
false |
The style passed to the option text component |
onPressOption |
Function |
false |
This function call when each menu option is tapped. It returns the index of the tapped option as parameter |
family |
object |
true |
An object that contains the font family used for the text elements in the header component. An example is shown above. |
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
inputRef |
function |
false |
Takes the ref of the footer input as parameter. |
keyboardType |
string |
false |
Takes the keyboard type of the footer input. |
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
Property | Type | Required | Description |
---|---|---|---|
defaultOptions |
array |
false |
This array is passed to the footer options to display. Defaults to ['Camera', 'Photo Library']
|
cancetTxt |
string |
false |
The string to replace the cancel text. Defaults to Cancel
|
options |
array |
false |
Additional options passed to the footer to display. |
reply |
object |
false |
A message object passed to the footer to display when replying a message. |
send |
function |
false |
A functions that returns the message object as a parameter. |
onError |
function |
false |
A function that returns error message as a parameter. |
onSelectOption |
function |
false |
The function returns the index of the selected option as parameter. |
footerOnPressLaunchIcon |
function |
false |
When specified, the function is executed when the Plus or Location Icon is pressed instead of showing the Action Sheet. |
onSelectDefaultOption |
function |
false |
The function returns the index of the selected option as parameter. |
ionicons |
@expo/vector-icons |
true |
It takes in Ionicons component to display icons in the footer component |
family |
object |
true |
An object that contains the font family used for the text elements in the footer component. An example is shown above. |
multiline |
boolean |
false |
The multiline props for the footer text input. |
placeholder |
string |
false |
The placeholder props for the footer text input. |
keyboardType |
string |
false |
The keyboardType props for the footer text input. |
antDesign |
@expo/vector-icons |
true |
It takes in AntDesign component to display icons in the footer component |
loading |
boolean |
false |
To disable all footer functionalities and display the loading component. |
materialCommunityIcons |
@expo/vector-icons |
true |
It takes in MaterialCommunityIcons component to display icons in the footer component |
sheetOneTitle |
string |
false |
The title of the first action sheet, defaults to Options . |
sheetTwoTitle |
string |
false |
The title of the second action sheet, defaults to Options . |
onChangeText |
function |
false |
Handles text input change, returns text string as parameter. |
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
setTyping |
function |
false |
This function property lets know when user is typing by sending true when typing and false when not. |
setRecording |
function |
false |
This function property lets know when user is recording by sending true when recording and false when not. |
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
Property | Type | Required | Description |
---|---|---|---|
animationType |
string |
false |
Default animationType options for react native modal. Defaults to slide
|
visible |
boolean |
true |
Set the visibility of the modal to true or false |
entypo |
@expo/vector-icons |
true |
It takes in Entypo component to display icons in the component |
family |
object |
true |
An object containing the app font family, example above |
title |
string |
false |
The text string to be displayed as title ex: 'Congrats' |
content |
string |
false |
The details string displayed below the title |
close |
function |
false |
A function called after the button is pressed |
btnTitle |
string |
false |
The title of the button displayed |
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
Property | Type | Required | Description |
---|---|---|---|
blue |
boolean |
false |
Pass blue to display the blue version, defaults to green |
visible |
boolean |
true |
Set the visibility of the modal to true or false |
entypo |
@expo/vector-icons |
true |
It takes in Entypo component to display icons in the component |
family |
object |
true |
An object containing the app font family, example above |
text |
string |
false |
The text string to be displayed as title ex: 'Verified Successfully' |
press |
function |
false |
A function called after the button is pressed |
btnTitle |
string |
false |
The title of the button displayed |
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
Property | Type | Required | Description |
---|---|---|---|
visible |
boolean |
true |
Set the visibility of the modal to true or false |
antdesign |
@expo/vector-icons |
true |
It takes in AntDesign component to display icons in the component |
close |
function |
true |
A function called after the close button is pressed |
children |
JSX.Element |
true |
Children element that is displayed in the modal |
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
Property | Type | Required | Description |
---|---|---|---|
options |
array |
false |
Options displayed on long press of the chat text box. |
cancetTxt |
string |
false |
The string to replace the cancel text. Defaults to Cancel
|
ionicons |
@expo/vector-icons |
true |
It takes in ionicons component to display icons in the component |
family |
object |
true |
An object containing the app font family, example above |
onSelectOption |
function |
false |
The function returns the index of the selected option as parameter. |
sender |
boolean |
true |
The boolean that denotes the sender of the message |
reply |
object |
false |
A message object passed to display the message replied to |
toReply |
function |
true |
The function that calls when the reply component in the chat box in tapped. |
text |
string |
false |
The text message displayed in the text box. |
date |
Date |
false |
A date object to be displayed in the text box. |
status |
number |
false |
The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. |
optionTitle |
string |
false |
The title of the displayed options, defaults to Options
|
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
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
Property | Type | Required | Description |
---|---|---|---|
options |
array |
false |
Options displayed on long press of the chat text box. |
cancetTxt |
string |
false |
The string to replace the cancel text. Defaults to Cancel
|
audio |
string |
true |
The audio url. |
ionicons |
@expo/vector-icons |
true |
It takes in Ionicons component to display icons in the component |
entypo |
@expo/vector-icons |
true |
It takes in Entypo component to display icons in the component |
family |
object |
true |
An object containing the app font family, example above |
onSelectOption |
function |
false |
The function returns the index of the selected option as parameter. |
sender |
boolean |
true |
The boolean that denotes the sender of the message |
date |
Date |
false |
A date object to be displayed in the text box. |
status |
number |
false |
The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. |
optionTitle |
string |
false |
The title of the displayed options, defaults to 'Options' |
image |
string |
false |
The image of the voice note sender. |
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
Property | Type | Required | Description |
---|---|---|---|
image |
string |
false |
The image url to be displayed. |
options |
array |
false |
Options displayed on long press of the chat text box. |
cancetTxt |
string |
false |
The string to replace the cancel text. Defaults to Cancel
|
ionicons |
@expo/vector-icons |
true |
It takes in ionicons component to display icons in the component |
family |
object |
true |
An object containing the app font family, example above |
onSelectOption |
function |
false |
The function returns the index of the selected option as parameter. |
sender |
boolean |
true |
The boolean that denotes the sender of the message |
date |
Date |
false |
A date object to be displayed in the text box. |
status |
number |
false |
The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. |
optionTitle |
string |
false |
The title of the displayed options, defaults to 'Options' |
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
Property | Type | Required | Description |
---|---|---|---|
video |
string |
false |
The video url. |
ionicons |
@expo/vector-icons |
true |
It takes in ionicons component to display icons in the component |
family |
object |
true |
An object containing the app font family, example above |
sender |
boolean |
true |
The boolean that denotes the sender of the message |
date |
Date |
false |
A date object to be displayed in the text box. |
status |
number |
false |
The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. |
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
Property | Type | Required | Description |
---|---|---|---|
options |
array |
true |
The string array representing each button to be displayed. Each button displays the string passed. |
family |
object |
true |
An object containing the app font family, example above |
press |
function |
true |
The function called when a button is pressed, with the index of the particular button pressed. |
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
Property | Type | Required | Description |
---|---|---|---|
options |
array |
false |
Options displayed on long press of the chat text box. |
cancetTxt |
string |
false |
The string to replace the cancel text. Defaults to Cancel
|
ionicons |
@expo/vector-icons |
true |
It takes in ionicons component to display icons in the component |
entypo |
@expo/vector-icons |
true |
It takes in entypo component to display icons in the component |
materialIcons |
@expo/vector-icons |
true |
It takes in materialIcons component to display icons in the component |
family |
object |
true |
An object containing the app font family, example above |
onSelectOption |
function |
false |
The function returns the index of the selected option as parameter. |
sender |
boolean |
true |
The boolean that denotes the sender of the message |
reply |
object |
false |
A message object passed to display the message replied to |
toReply |
function |
true |
The function that calls when the reply component in the chat box in tapped. |
text |
string |
false |
The text message displayed in the text box. |
date |
Date |
false |
A date object to be displayed in the text box. |
status |
number |
false |
The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. |
optionTitle |
string |
false |
The title of the displayed options, defaults to Options
|
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
location_type |
string |
false |
If it has store as it's value, it uses a store icon, otherwise it uses a location pin icon. |
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
Property | Type | Required | Description |
---|---|---|---|
select |
function |
true |
The function called when a fleet is selected, returning the index of the selected fleet as parameter. |
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
Property | Type | Required | Description |
---|---|---|---|
index |
number |
true |
The index of the selected fleet. |
options |
array |
false |
Options displayed on long press of the chat text box. |
cancetTxt |
string |
false |
The string to replace the cancel text. Defaults to Cancel
|
family |
object |
true |
An object containing the app font family, example above |
onSelectOption |
function |
false |
The function returns the index of the selected option as parameter. |
sender |
boolean |
true |
The boolean that denotes the sender of the message |
date |
Date |
false |
A date object to be displayed in the FleetBox. |
status |
number |
false |
The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. |
optionTitle |
string |
false |
The title of the displayed options, defaults to Options
|
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
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
Property | Type | Required | Description |
---|---|---|---|
family |
object |
true |
An object containing the app font family, example above |
text |
string |
false |
The text to be displayed. |
color |
string |
false |
The text color |
loading |
boolean |
false |
Displays loading spinner when set to true. |
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
Property | Type | Required | Description |
---|---|---|---|
family |
object |
true |
An object containing the app font family, example above |
text |
string |
false |
The status text to be displayed. |
name |
string |
false |
The name of the runner. |
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
runs |
string |
false |
The amount of runs text. |
rate |
number |
false |
The runners rating ranges from 0 - 5. |
image |
string |
false |
Displays the image url passed as the runners photo. |
antDesign |
@expo/vector-icons |
true |
It takes in antDesign component to display icons in the component |
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
Property | Type | Required | Description |
---|---|---|---|
family |
object |
true |
An object containing the app font family, example above |
txt1 |
string |
false |
Defaults to Invoice . |
txt2 |
string |
false |
Defaults to Grand Total: . |
txt2 |
string |
false |
Defaults to View Invoice . |
press |
function |
false |
The function called when the component is pressed. |
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
invoiceID |
string |
false |
Displays the invoice ID passed to it. |
price |
string |
false |
Displays the string passed as price. |
date |
Date |
false |
A date object to be displayed in 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
Property | Type | Required | Description |
---|---|---|---|
family |
object |
true |
An object containing the app font family, example above |
text |
string |
false |
Defaults to Track Delivery . |
press |
function |
false |
The function called when the component is pressed. |
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
date |
Date |
false |
A date object to be displayed in the InvoiceBox. |
region |
object |
true |
An object containing longitude and latitude. |
position |
object |
true |
An object containing longitude and latitude. |
Feather |
@expo/vector-icons |
true |
It takes in Feather component to display icons in the component |
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
Property | Type | Required | Description |
---|---|---|---|
containerHeight |
number |
false |
The default height of the swipe box. |
close |
funciton |
false |
Set swipe visibility to false when called. |
disableSwipe |
boolean |
false |
To disable the swipe up and down if it's not required. |
containerStyle |
style |
false |
Style passed to the container. |
avoid |
boolean |
false |
Add avoid prop if keyboard is present in the swipe children. |
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
Property | Type | Required | Description |
---|---|---|---|
text |
string |
false |
The value to the text displayed in the loader. |
visible |
boolean |
true |
Set the visibility of the modal to true or false |
family |
object |
true |
An object containing the app font family, example above |
close |
function |
false |
Toggle visibility to close modal when user taps the modal. |
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
Property | Type | Required | Description |
---|---|---|---|
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
currency |
string |
true |
The currency to be displayed in the invoice. |
visible |
boolean |
true |
Set the visibility of the modal to true or false |
family |
object |
true |
An object containing the app font family, example above |
close |
function |
false |
Toggle visibility to close modal when user taps the modal. |
totalItems |
array |
true |
An array including the subtotal, discount, tax, etc. |
titles |
array |
false |
An array of string titles, defaults to ['DESCRIPTION', 'RATE', 'QTY', 'SUBTOTAL'] . |
txt1 |
string |
false |
Defaults to You’ve received an invoice . |
txt2 |
string |
false |
Defaults to Runner . |
txt3 |
string |
false |
Invoice ID should be passed here. Empty if nothing is passed. |
nameKey |
string |
false |
The key of the item name within the invoice object. |
qtyKey |
string |
false |
The key of the quantity name within the invoice object. |
rateKey |
string |
false |
The key of the price within the invoice object. |
grandTotal |
string |
false |
The invoice total. |
grandTotalTxt |
string |
false |
Defaults to GRAND TOTAL . |
press |
function |
false |
When the press prop is passed, the accept and decline CTA button displays. It returns the index of the button pressed as parameter 1 for accept, 2 for decline . |
acceptTxt |
string |
false |
Defaults to Accept . |
declineTxt |
string |
false |
Defaults to Decline . |
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
Property | Type | Required | Description |
---|---|---|---|
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
data |
array |
true |
An array or reasons passed to the component, example above. |
onSelect |
funciton |
true |
The function called when a reason is selected returning she selected reason as parameter. |
textKey |
string |
true |
The key to the reason string in the object. |
othersTxt |
string |
false |
Defaults to Others: . |
onSend |
function |
true |
The function returns the custom reason entered in the input field. |
family |
object |
true |
An object containing the app font family, example above |
ionicons |
@expo/vector-icons |
true |
It takes in Ionicons component to display icons in the component |
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
Property | Type | Required | Description |
---|---|---|---|
lang |
string |
false |
The language that should be used for the default text in the component. Defaults to en . |
data |
array |
true |
An array or locations passed to the component, example above. |
onSelect |
funciton |
true |
The function called when a location is selected returning she selected location as parameter. |
chooseTxt |
string |
false |
Defaults to Choose from Map . |
savedTxt |
string |
false |
Defaults to Saved Locations . |
onPressSaved |
function |
true |
The function called when saved location is tapped. |
onPressChoose |
function |
true |
The function called when choose from map is tapped. |
family |
object |
true |
An object containing the app font family, example above |
ionicons |
@expo/vector-icons |
true |
It takes in Ionicons component to display icons in the component |
materialIcons |
@expo/vector-icons |
true |
It takes in MaterialIcons component to display icons in the component |
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
Property | Type | Required | Description |
---|---|---|---|
lang |
string |
false |
The language code for the chat. Defaults to en . |
user |
userData |
true |
This is the currently logged in user. It's an object that should consist of id , name and image . image is not compulsory. |
send |
function |
true |
Takes in the message data as parameter. See example above. |
textBoxOnSelectOption |
function |
false |
Takes the index and the item selected from the text box options. |
mediaOnSelectOption |
function |
false |
Takes the index and the item selected from the media box options. |
locationBoxOnSelectOption |
function |
false |
Takes the index and the item selected from the location box options. |
fleetBoxOnSelectOption |
function |
false |
Takes the index and the item selected from the fleet box options. |
footerOnSelectOption |
function |
false |
Takes the index of the selected option from the footer options. |
footerOnSelectDefaultOption |
function |
false |
Takes the index of the selected option from the default footer options. |
headerOnSelectOption |
function |
false |
Takes the index of the selected option from the header options. |
family |
object |
true |
An object that contains the font family used for the text elements in the component. An example is shown above. |
messages |
array |
true |
An array of messages. |
entypo |
@expo/vector-icons |
true |
It takes in Entypo component to display icons in the component. Example above. |
ionicons |
@expo/vector-icons |
true |
It takes in Ionicons component to display icons in the component. Example above. |
materialIcons |
@expo/vector-icons |
true |
It takes in MaterialIcons component to display icons in the component. Example above. |
antDesign |
@expo/vector-icons |
true |
It takes in AntDesign component to display icons in the component. Example above. |
feather |
@expo/vector-icons |
true |
It takes in Feather component to display icons in the component. Example above. |
materialCommunityIcons |
@expo/vector-icons |
true |
It takes in MaterialCommunityIcons component to display icons in the component. Example above. |
textBoxOptions |
array |
false |
An array of string passed as the text box options. |
voiceNoteOptions |
array |
false |
An array of string passed as the voice note options. |
imageBoxOptions |
array |
false |
An array of string passed as the image box options. |
errandLocationOptions |
array |
false |
An array of string passed as the errand location box options. |
fleetBoxOptions |
array |
false |
An array of string passed as the fleet box options. |
footerOptions |
array |
false |
An array of string passed as the footer options. |
footerDefaultOptions |
array |
false |
An array of string passed as the footer default options. Defaults to ['Camera', 'Library']
|
headerOptions |
array |
false |
An array of string passed as the header options. |
textBoxBtnPress |
function |
false |
The property called when the button in the text box is pressed. It returns the message item as parameter. |
invoiceBoxPress |
function |
false |
The prop called when the invoice box is pressed. It returns the message item as parameter. |
trackBoxPress |
function |
false |
The props called when the tracker box is pressed. It returns the message item as parameter. |
loading |
boolean |
false |
To disable actions in the component and show loading. |
footerOnError |
function |
true |
The function called to return the error parameter when there is an error to report in the component. |
footerOnChangeText |
function |
false |
Handles the onChangeText for the footer TextInput. |
footerOptionsPress |
function |
false |
The prop called when a button is pressed from the footer button options. It returns the index and item as parameter. |
footerType |
string |
false |
To change the footer type. The available types are fleet, options, footer . Defaults to footer. |
headerTitle |
string |
false |
The string title passed to the header. |
headerDetail |
string |
false |
The text shown below the header title. |
newRunnerPress |
function |
false |
The prop called when the new runner component is tapped. |
footerSetTyping |
function |
false |
The prop called when user starts and stops typing. It take in a boolean as parameter. True for typing, False for not typing. |
footerSetRecording |
function |
false |
The prop called when user starts and stops recording. It take in a boolean as parameter. True for recording, False for not recording. |
footerInputRef |
function |
false |
Takes the ref of the footer input as parameter. |
footerKeyboardType |
string |
false |
Takes the keyboard type of the footer input. |
clear |
boolean |
false |
To trigger the clearing of the input field. |
removeFooter |
boolean |
false |
Hides the footer, defaults to false. |
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
Property | Type | Required | Description |
---|---|---|---|
orderID |
string or number |
true |
The order ID |
price |
string |
true |
The total price to be displayed. EX '120 Naira'
|
invoiceID |
string |
true |
When invoiceID is passed, it means invoice has been computed. If not passed, it means there is only total price. |
senderData |
senderInterface |
true |
The senders data which includes id , name , and image where image image is not compulsory. |
location |
string |
false |
The invoice location, which is the point of purchase. Example above. |
lang |
string |
false |
The language that should be used for the default text. Defaults to en . |
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
Property | Type | Required | Description |
---|---|---|---|
orderID |
string or number |
true |
The order ID |
region |
coordinateInterface |
true |
The coordinate of the region where the user is. |
position |
coordinateInterface |
true |
The coordinate of the current user position. |
senderData |
senderInterface |
true |
The senders data which includes id , name , and image where image image is not compulsory. |
lang |
string |
false |
The language that should be used for the default text. Defaults to en . |
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
Property | Type | Required | Description |
---|---|---|---|
orderID |
string or number |
true |
The order ID |
status |
string |
true |
The status to be sent. |
loading |
boolean |
false |
To add loading indicator to the status. |
senderData |
senderInterface |
true |
The senders data which includes id , name , and image where image image is not compulsory. |
color |
string |
false |
To change the color of the status text. |
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
Property | Type | Required | Description |
---|---|---|---|
orderID |
string / number |
true |
The order ID |
runner |
runnerInterface |
true |
The runners data which includes id , name , image , rate , runs . |
lang |
string |
false |
The language that should be used for the default text. Defaults to en . |
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
Property | Type | Required | Description |
---|---|---|---|
message |
messageInterface |
true |
The message to be sent to the chat. Example above |
callback |
function |
true |
Callback when the promise completes. The response is false if sending fails, but returns an array of messages when it succeeds. |
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
Property | Type | Required | Description |
---|---|---|---|
orderID |
string |
true |
The order id of the messages to be retrieved. |
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
Property | Type | Required | Description |
---|---|---|---|
primaryKey |
string |
true |
The key of the item to be updated ex: status , file . |
primaryValue |
string / number |
true |
The value to be updated with. Stringify it if the value is neither string nor number. |
secondaryKey |
string |
true |
A key in the particular row to be updated. ex id , orderID
|
secondaryValue |
`string | number` | true |
callback |
function |
true |
Callback when the promise completes. The response is false if update fails, but returns an array of messages when it succeeds. |
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
Property | Type | Required | Description |
---|---|---|---|
key |
string |
true |
A key in the object to be deleted. |
value |
string / number |
true |
The value to be deleted. Stringify it if the value is neither string nor number. |
callback |
function |
true |
Callback when the promise completes. The response is false if delete fails, but returns an array of messages when it succeeds. |
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
Property | Type | Required | Description |
---|---|---|---|
user |
object |
true |
The user object containing the user id jabber_id and phone number. |
service |
string |
true |
The server url. |
domain |
string |
true |
The service domain. |
change |
function |
true |
When there is an update on the xmpp. |
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
Property | Type | Required | Description |
---|---|---|---|
from |
string |
true |
The senders jabber id. |
to |
string |
true |
The receivers jabber id. |
data |
object |
true |
The data to be sent through xmpp. |
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
Property | Type | Required | Description |
---|---|---|---|
typing |
boolean |
true |
Weather typing is true or false. |
orderID |
string |
true |
The orderID of the current conversation. |
from |
string |
true |
The senders jabber id. |
to |
string |
true |
The receivers jabber id. |
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
Property | Type | Required | Description |
---|---|---|---|
recording |
boolean |
true |
Weather recording is true or false. |
orderID |
string |
true |
The orderID of the current conversation. |
from |
string |
true |
The senders jabber id. |
to |
string |
true |
The receivers jabber id. |
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
Property | Type | Required | Description |
---|---|---|---|
orderID |
string |
true |
The orderID of the current conversation. |
from |
string |
true |
The senders jabber id. |
to |
string |
true |
The receivers jabber id. |
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