@lichens-innovation/react-native-common 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,5 +11,6 @@ export type DropDownSelectorProps = {
11
11
  options: SelectOption[];
12
12
  placeholder?: string;
13
13
  searchPlaceholder?: string;
14
+ disabled?: boolean;
14
15
  };
15
16
  export declare const DropDownSelector: FunctionComponent<DropDownSelectorProps>;
@@ -4,46 +4,55 @@ import { StyleSheet, View } from 'react-native';
4
4
  import { Dropdown } from 'react-native-element-dropdown';
5
5
  import { Text } from 'react-native-paper';
6
6
  import { useAppTheme } from '../../theme/theme';
7
- export const DropDownSelector = ({ label, value, onChange, isError, options, placeholder, searchPlaceholder, }) => {
8
- const theme = useAppTheme();
9
- const { primary, error } = theme.colors;
10
- const [isFocus, setIsFocus] = useState(false);
7
+ import { getBorderColor, getLabelColor, getTextColor } from './drop-down-selector.utils';
8
+ export const DropDownSelector = ({ label, value, onChange, isError, options, placeholder, searchPlaceholder, disabled, }) => {
9
+ const [isFocused, setIsFocused] = useState(false);
11
10
  const hasLabel = !!label;
12
- const styles = useStyles({ isFocus, hasLabel });
13
- return (_jsxs(View, { children: [hasLabel && (_jsx(Text, { variant: 'bodySmall', style: [styles.dropdownTitle, isFocus && { color: primary }, isError && { color: error }], children: label })), _jsx(Dropdown, { style: [styles.dropdown, isFocus && { borderColor: primary }, isError && { borderColor: error }], autoScroll: false, placeholderStyle: styles.placeholderStyle, selectedTextStyle: styles.selectedTextStyle, inputSearchStyle: styles.inputSearchStyle, iconStyle: styles.iconStyle, data: options, search: false, maxHeight: 300, labelField: "label", valueField: "value", placeholder: isFocus ? '' : placeholder, searchPlaceholder: searchPlaceholder, value: value, onFocus: () => setIsFocus(true), onBlur: () => setIsFocus(false), onChange: ({ value }) => {
11
+ const styles = useStyles({ isFocused, disabled, isError });
12
+ return (_jsxs(View, { children: [hasLabel && (_jsx(Text, { variant: 'bodySmall', style: styles.dropdownTitle, children: label })), _jsx(Dropdown, { style: styles.dropdown, autoScroll: false, placeholderStyle: styles.placeholderStyle, selectedTextStyle: styles.selectedTextStyle, inputSearchStyle: styles.inputSearchStyle, iconStyle: styles.iconStyle, data: options, search: false, maxHeight: 300, labelField: "label", valueField: "value", placeholder: isFocused ? '' : placeholder, searchPlaceholder: searchPlaceholder, value: value, disable: disabled, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onChange: ({ value }) => {
14
13
  onChange(value);
15
- setIsFocus(false);
14
+ setIsFocused(false);
16
15
  } })] }));
17
16
  };
18
- const useStyles = ({ isFocus, hasLabel }) => {
17
+ const useStyles = ({ isFocused, disabled, isError }) => {
19
18
  const theme = useAppTheme();
19
+ const { surface, surfaceDisabled } = theme.colors;
20
+ const isDisabled = disabled === true;
21
+ const isFocusedAndEnabled = isFocused && !isDisabled;
22
+ // Priority: error > disabled > focus > normal
23
+ const labelColor = getLabelColor({ theme, isError: !!isError, isDisabled, isFocusedAndEnabled });
24
+ const borderColor = getBorderColor({ theme, isError: !!isError, isDisabled, isFocused });
25
+ const borderWidth = isFocusedAndEnabled ? 2 : 1;
26
+ const backgroundColor = isDisabled ? surfaceDisabled : 'transparent';
27
+ const textColor = getTextColor({ theme, isFocused, isDisabled });
20
28
  return StyleSheet.create({
21
29
  dropdownTitle: {
22
30
  position: 'absolute',
23
31
  top: -theme.spacing(1),
24
32
  left: theme.spacing(1),
25
- backgroundColor: theme.colors.surface,
33
+ backgroundColor: surface,
26
34
  paddingHorizontal: theme.spacing(0.75),
27
- color: theme.colors.onSurface,
35
+ color: labelColor,
28
36
  zIndex: 1,
29
37
  },
30
38
  dropdown: {
31
39
  height: 50,
32
- borderColor: isFocus ? theme.colors.primary : theme.colors.outline,
33
- borderWidth: isFocus ? 2 : 1,
40
+ borderColor,
41
+ borderWidth,
34
42
  borderRadius: theme.roundness,
35
43
  paddingHorizontal: theme.spacing(1),
44
+ backgroundColor,
36
45
  },
37
46
  icon: {
38
47
  marginRight: 5,
39
48
  },
40
49
  placeholderStyle: {
41
50
  fontSize: 16,
42
- color: isFocus ? theme.colors.primary : theme.colors.secondary,
51
+ color: textColor,
43
52
  },
44
53
  selectedTextStyle: {
45
54
  fontSize: 16,
46
- color: isFocus ? theme.colors.primary : theme.colors.secondary,
55
+ color: textColor,
47
56
  paddingLeft: theme.spacing(1),
48
57
  },
49
58
  iconStyle: {
@@ -1 +1 @@
1
- {"version":3,"file":"drop-down-selector.js","sourceRoot":"","sources":["../../../src/components/drop-down-selector/drop-down-selector.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"drop-down-selector.js","sourceRoot":"","sources":["../../../src/components/drop-down-selector/drop-down-selector.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,22 @@
1
+ import { AppTheme } from '~/theme';
2
+ interface GetTextColorArgs {
3
+ theme: AppTheme;
4
+ isFocused: boolean;
5
+ isDisabled: boolean;
6
+ }
7
+ export declare const getTextColor: ({ theme, isFocused, isDisabled }: GetTextColorArgs) => string;
8
+ interface GetLabelColorArgs {
9
+ theme: AppTheme;
10
+ isError: boolean;
11
+ isDisabled: boolean;
12
+ isFocusedAndEnabled: boolean;
13
+ }
14
+ export declare const getLabelColor: ({ theme, isError, isDisabled, isFocusedAndEnabled }: GetLabelColorArgs) => string;
15
+ interface GetBorderColorArgs {
16
+ theme: AppTheme;
17
+ isError: boolean;
18
+ isDisabled: boolean;
19
+ isFocused: boolean;
20
+ }
21
+ export declare const getBorderColor: ({ theme, isError, isDisabled, isFocused }: GetBorderColorArgs) => string;
22
+ export {};
@@ -0,0 +1,37 @@
1
+ export const getTextColor = ({ theme, isFocused, isDisabled }) => {
2
+ const { onSurfaceDisabled, primary, secondary } = theme.colors;
3
+ if (isDisabled) {
4
+ return onSurfaceDisabled;
5
+ }
6
+ if (isFocused) {
7
+ return primary;
8
+ }
9
+ return secondary;
10
+ };
11
+ export const getLabelColor = ({ theme, isError, isDisabled, isFocusedAndEnabled }) => {
12
+ const { error, onSurfaceDisabled, primary, onSurface } = theme.colors;
13
+ if (isError) {
14
+ return error;
15
+ }
16
+ if (isDisabled) {
17
+ return onSurfaceDisabled;
18
+ }
19
+ if (isFocusedAndEnabled) {
20
+ return primary;
21
+ }
22
+ return onSurface;
23
+ };
24
+ export const getBorderColor = ({ theme, isError, isDisabled, isFocused }) => {
25
+ const { error, surfaceDisabled, primary, outline } = theme.colors;
26
+ if (isError) {
27
+ return error;
28
+ }
29
+ if (isDisabled) {
30
+ return surfaceDisabled;
31
+ }
32
+ if (isFocused) {
33
+ return primary;
34
+ }
35
+ return outline;
36
+ };
37
+ //# sourceMappingURL=drop-down-selector.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"drop-down-selector.utils.js","sourceRoot":"","sources":["../../../src/components/drop-down-selector/drop-down-selector.utils.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAoB,EAAE,EAAE;IACjF,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;IAE/D,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAqB,EAAE,EAAE;IACtG,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;IAEtE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IAED,IAAI,mBAAmB,EAAE,CAAC;QACxB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAsB,EAAE,EAAE;IAC9F,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;IAElE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,eAAe,CAAC;IACzB,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
@@ -14,3 +14,4 @@ export * from './snack-bar';
14
14
  export * from './spinner';
15
15
  export * from './syntax';
16
16
  export * from './tab-bar-icon';
17
+ export * from './voice-recognition';
@@ -14,4 +14,5 @@ export * from './snack-bar';
14
14
  export * from './spinner';
15
15
  export * from './syntax';
16
16
  export * from './tab-bar-icon';
17
+ export * from './voice-recognition';
17
18
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './voice-recognition-text-input';
2
+ export * from './voice-recognition.utils';
@@ -0,0 +1,3 @@
1
+ export * from './voice-recognition-text-input';
2
+ export * from './voice-recognition.utils';
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/voice-recognition/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { TextInputProps } from 'react-native-paper';
3
+ interface VoiceRecognitionTextInputProps extends TextInputProps {
4
+ label: string;
5
+ value: string;
6
+ onValueChange: (value: string) => void;
7
+ onValueSubmit: (value: string) => void;
8
+ }
9
+ export declare const VoiceRecognitionTextInput: FunctionComponent<VoiceRecognitionTextInputProps>;
10
+ export {};
@@ -0,0 +1,104 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import { isBlank, isNotBlank } from '@lichens-innovation/ts-common';
14
+ import { ExpoSpeechRecognitionModule, useSpeechRecognitionEvent } from 'expo-speech-recognition';
15
+ import { useState } from 'react';
16
+ import { useTranslation } from 'react-i18next';
17
+ import { Keyboard, StyleSheet, View } from 'react-native';
18
+ import { IconButton, TextInput } from 'react-native-paper';
19
+ import { logger } from '../../logger/logger';
20
+ import { useAppTheme } from '../../theme/theme';
21
+ import { buildFinalValue, ensureVoiceRecognitionPermissions } from './voice-recognition.utils';
22
+ export const VoiceRecognitionTextInput = (_a) => {
23
+ var { label, value, onValueChange, onValueSubmit } = _a, rest = __rest(_a, ["label", "value", "onValueChange", "onValueSubmit"]);
24
+ const styles = useStyles();
25
+ const [isRecording, setIsRecording] = useState(false);
26
+ const [recordingValue, setRecordingValue] = useState('');
27
+ const { t } = useTranslation();
28
+ const speechToTextLanguageCode = t('common:speechToTextLanguageCode');
29
+ const finalValue = buildFinalValue({ query: value, recordingValue });
30
+ const triggerOnSearch = () => {
31
+ Keyboard.dismiss();
32
+ onValueSubmit(finalValue.trim());
33
+ setIsRecording(false);
34
+ setRecordingValue('');
35
+ };
36
+ useSpeechRecognitionEvent('result', (event) => {
37
+ if (!isRecording)
38
+ return;
39
+ const transcript = event.results[0].transcript;
40
+ if (isNotBlank(transcript)) {
41
+ setRecordingValue(transcript);
42
+ }
43
+ });
44
+ useSpeechRecognitionEvent('error', (event) => {
45
+ const { error, message } = event;
46
+ logger.error(`[useSpeechRecognitionEvent] error: ${error} - ${message}`);
47
+ setIsRecording(false);
48
+ setRecordingValue('');
49
+ });
50
+ const handleStartRecording = async () => {
51
+ const hasPermissions = await ensureVoiceRecognitionPermissions();
52
+ if (!hasPermissions)
53
+ return;
54
+ setIsRecording(true);
55
+ setRecordingValue('');
56
+ Keyboard.dismiss();
57
+ ExpoSpeechRecognitionModule.start({
58
+ lang: speechToTextLanguageCode,
59
+ interimResults: true,
60
+ continuous: true,
61
+ });
62
+ };
63
+ const handleStopRecording = async () => {
64
+ if (!isRecording)
65
+ return;
66
+ setIsRecording(false);
67
+ ExpoSpeechRecognitionModule.stop();
68
+ if (isNotBlank(recordingValue)) {
69
+ onValueChange(buildFinalValue({ query: value, recordingValue }));
70
+ }
71
+ setRecordingValue('');
72
+ };
73
+ const toggleRecording = () => {
74
+ if (isRecording) {
75
+ handleStopRecording();
76
+ }
77
+ else {
78
+ handleStartRecording();
79
+ }
80
+ };
81
+ const clearValue = () => {
82
+ onValueChange('');
83
+ setRecordingValue('');
84
+ };
85
+ return (_jsxs(View, { style: styles.container, children: [_jsx(TextInput, Object.assign({}, rest, { style: styles.textInput, label: label, value: finalValue, readOnly: isRecording, onChangeText: onValueChange, multiline: true, numberOfLines: 4, left: _jsx(TextInput.Icon, { icon: isRecording ? 'stop' : 'microphone-outline', onPress: toggleRecording }), right: _jsx(TextInput.Icon, { icon: "close", onPress: clearValue, disabled: isBlank(finalValue) }) })), _jsx(View, { style: styles.actionsContainer, children: _jsx(IconButton, { icon: "send", onPress: triggerOnSearch, disabled: isBlank(finalValue), iconColor: styles.sendIcon.color }) })] }));
86
+ };
87
+ const useStyles = () => {
88
+ const theme = useAppTheme();
89
+ return StyleSheet.create({
90
+ container: {
91
+ flexDirection: 'row',
92
+ },
93
+ textInput: {
94
+ flex: 1,
95
+ },
96
+ actionsContainer: {
97
+ flexDirection: 'row',
98
+ },
99
+ sendIcon: {
100
+ color: theme.colors.primary,
101
+ },
102
+ });
103
+ };
104
+ //# sourceMappingURL=voice-recognition-text-input.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"voice-recognition-text-input.js","sourceRoot":"","sources":["../../../src/components/voice-recognition/voice-recognition-text-input.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,7 @@
1
+ interface BuildFinalValueArgs {
2
+ query: string;
3
+ recordingValue: string;
4
+ }
5
+ export declare const buildFinalValue: ({ query, recordingValue }: BuildFinalValueArgs) => string;
6
+ export declare const ensureVoiceRecognitionPermissions: () => Promise<boolean>;
7
+ export {};
@@ -0,0 +1,24 @@
1
+ import { isNotBlank } from '@lichens-innovation/ts-common';
2
+ import { ExpoSpeechRecognitionModule } from 'expo-speech-recognition';
3
+ import { logger } from '../../logger/logger';
4
+ export const buildFinalValue = ({ query, recordingValue }) => {
5
+ return [query, recordingValue].filter(isNotBlank).join(' ');
6
+ };
7
+ export const ensureVoiceRecognitionPermissions = async () => {
8
+ try {
9
+ const permissions = await ExpoSpeechRecognitionModule.getPermissionsAsync();
10
+ if (!permissions.granted) {
11
+ const result = await ExpoSpeechRecognitionModule.requestPermissionsAsync();
12
+ if (!result.granted) {
13
+ logger.info('[ensureVoiceRecognitionPermissions] Permissions not granted', result);
14
+ return false;
15
+ }
16
+ }
17
+ return true;
18
+ }
19
+ catch (e) {
20
+ logger.error('[ensureVoiceRecognitionPermissions] Error getting permissions', e);
21
+ return false;
22
+ }
23
+ };
24
+ //# sourceMappingURL=voice-recognition.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"voice-recognition.utils.js","sourceRoot":"","sources":["../../../src/components/voice-recognition/voice-recognition.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAM7C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,cAAc,EAAuB,EAAU,EAAE;IACxF,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAAG,KAAK,IAAsB,EAAE;IAC5E,IAAI,CAAC;QACH,MAAM,WAAW,GAAG,MAAM,2BAA2B,CAAC,mBAAmB,EAAE,CAAC;QAC5E,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YACzB,MAAM,MAAM,GAAG,MAAM,2BAA2B,CAAC,uBAAuB,EAAE,CAAC;YAE3E,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gBACpB,MAAM,CAAC,IAAI,CAAC,6DAA6D,EAAE,MAAM,CAAC,CAAC;gBACnF,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,OAAO,CAAU,EAAE,CAAC;QACpB,MAAM,CAAC,KAAK,CAAC,+DAA+D,EAAE,CAAC,CAAC,CAAC;QACjF,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC"}
@@ -158,6 +158,7 @@
158
158
  "share": "Share",
159
159
  "showMore": "Show more",
160
160
  "sort": "Sort",
161
+ "speechToTextLanguageCode": "en-CA",
161
162
  "start": "Start",
162
163
  "startDate": "Start Date",
163
164
  "status": "Status",
@@ -158,6 +158,7 @@
158
158
  "share": "Partager",
159
159
  "showMore": "Afficher plus",
160
160
  "sort": "Trier",
161
+ "speechToTextLanguageCode": "fr-CA",
161
162
  "start": "Démarrer",
162
163
  "startDate": "Date de début",
163
164
  "status": "Statut",
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Lichens Innovation React Native Expo shared components, utilities, hooks and services",
4
4
  "repository": "https://github.com/Lichens-Innovation/react-native-common",
5
5
  "author": "Lichens Innovation",
6
- "version": "3.1.0",
6
+ "version": "3.2.0",
7
7
  "private": false,
8
8
  "main": "dist/index.js",
9
9
  "types": "dist/index.d.ts",
@@ -82,6 +82,7 @@
82
82
  "expo-router": "~6.0.10",
83
83
  "expo-secure-store": "~15.0.7",
84
84
  "expo-sharing": "~14.0.7",
85
+ "expo-speech-recognition": "~3.0.1",
85
86
  "expo-splash-screen": "~31.0.10",
86
87
  "expo-sqlite": "~16.0.8",
87
88
  "expo-status-bar": "~3.0.8",
@@ -143,6 +144,7 @@
143
144
  "expo-router": ">=6.0.10",
144
145
  "expo-secure-store": ">=15.0.7",
145
146
  "expo-sharing": ">=14.0.7",
147
+ "expo-speech-recognition": ">=3.0.1",
146
148
  "expo-splash-screen": ">=31.0.10",
147
149
  "expo-sqlite": ">=16.0.8",
148
150
  "expo-status-bar": ">=3.0.8",