feat: Send native calculated keyboard and tracking view height to TS (#5514)

app/containers/MessageComposer/MessageComposer.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useRef, useImperativeHandle, useCallback } from 'react';
-import { View, StyleSheet, NativeModules } from 'react-native';
+import { View, StyleSheet, NativeModules, NativeSyntheticEvent, TextInputProps } from 'react-native';
 import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
 import { useBackHandler } from '@react-native-community/hooks';
 import { Q } from '@nozbe/watermelondb';
@@ -16,8 +16,8 @@ import {
 	useShowEmojiKeyboard,
 	useShowEmojiSearchbar
 } from './context';
-import { IComposerInput, ITrackingView } from './interfaces';
+import { IComposerInput, ITrackingView, ITrackingViewHeightEvent } from './interfaces';
-import { isIOS } from '../../lib/methods/helpers';
+import { isAndroid, isIOS } from '../../lib/methods/helpers';
 import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
 import { useTheme } from '../../theme';
 import { EventTypes } from '../EmojiPicker/interfaces';
@@ -29,7 +29,6 @@ import { Services } from '../../lib/services';
 import log from '../../lib/methods/helpers/log';
 import { prepareQuoteMessage } from './helpers';
 import { RecordAudio } from './components/RecordAudio';
-import { useKeyboardListener } from './hooks';
 
 const styles = StyleSheet.create({
 	container: {
@@ -59,15 +58,14 @@ export const MessageComposer = ({
 		setInput: () => {},
 		onAutocompleteItemSelected: () => {}
 	});
-	const trackingViewRef = useRef<ITrackingView>({ resetTracking: () => {}, getNativeProps: () => ({ trackingViewHeight: 0 }) });
+	const trackingViewRef = useRef<ITrackingView>({ resetTracking: () => {} });
 	const { colors, theme } = useTheme();
 	const { rid, tmid, action, selectedMessages, sharing, editRequest, onSendMessage } = useRoomContext();
 	const showEmojiKeyboard = useShowEmojiKeyboard();
 	const showEmojiSearchbar = useShowEmojiSearchbar();
 	const alsoSendThreadToChannel = useAlsoSendThreadToChannel();
-	const { openSearchEmojiKeyboard, closeEmojiKeyboard, closeSearchEmojiKeyboard } = useMessageComposerApi();
+	const { openSearchEmojiKeyboard, closeEmojiKeyboard, closeSearchEmojiKeyboard, setHeight } = useMessageComposerApi();
 	const recordingAudio = useRecordingAudio();
-	useKeyboardListener(trackingViewRef);
 
 	useFocusEffect(
 		useCallback(() => {
@@ -190,6 +188,14 @@ export const MessageComposer = ({
 		}
 	};
 
+	const onHeightChange = (event: NativeSyntheticEvent<ITrackingViewHeightEvent>) => {
+		setHeight(event.nativeEvent.keyboardHeight, event.nativeEvent.height);
+	};
+
+	const handleLayout: TextInputProps['onLayout'] = e => {
+		setHeight(0, e.nativeEvent.layout.height);
+	};
+
 	const backgroundColor = action === 'edit' ? colors.statusBackgroundWarning2 : colors.surfaceLight;
 
 	const renderContent = () => {
@@ -214,22 +220,25 @@ export const MessageComposer = ({
 	};
 
 	return (
-		<MessageInnerContext.Provider value={{ sendMessage: handleSendMessage, onEmojiSelected, closeEmojiKeyboardAndAction }}>
+		<View onLayout={isAndroid ? handleLayout : undefined}>
-			<KeyboardAccessoryView
+			<MessageInnerContext.Provider value={{ sendMessage: handleSendMessage, onEmojiSelected, closeEmojiKeyboardAndAction }}>
-				ref={(ref: ITrackingView) => (trackingViewRef.current = ref)}
+				<KeyboardAccessoryView
-				renderContent={renderContent}
+					ref={(ref: ITrackingView) => (trackingViewRef.current = ref)}
-				kbInputRef={composerInputRef}
+					renderContent={renderContent}
-				kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
+					kbInputRef={composerInputRef}
-				kbInitialProps={{ theme }}
+					kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
-				onKeyboardResigned={onKeyboardResigned}
+					kbInitialProps={{ theme }}
-				onItemSelected={onKeyboardItemSelected}
+					onKeyboardResigned={onKeyboardResigned}
-				trackInteractive
+					onItemSelected={onKeyboardItemSelected}
-				requiresSameParentToManageScrollView
+					trackInteractive
-				addBottomView
+					requiresSameParentToManageScrollView
-				bottomViewColor={backgroundColor}
+					addBottomView
-				iOSScrollBehavior={NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset}
+					bottomViewColor={backgroundColor}
-			/>
+					iOSScrollBehavior={NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset}
-			<Autocomplete onPress={item => composerInputComponentRef.current.onAutocompleteItemSelected(item)} />
+					onHeightChange={onHeightChange}
-		</MessageInnerContext.Provider>
+				/>
+				<Autocomplete onPress={item => composerInputComponentRef.current.onAutocompleteItemSelected(item)} />
+			</MessageInnerContext.Provider>
+		</View>
 	);
 };

app/containers/MessageComposer/components/Autocomplete/Autocomplete.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import { View, FlatList } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useAutocompleteParams, useKeyboardHeight, useTrackingViewHeight } from '../../context';
 import { AutocompleteItem } from './AutocompleteItem';
@@ -13,6 +14,7 @@ export const Autocomplete = ({ onPress }: { onPress: IAutocompleteItemProps['onP
 	const { rid } = useRoomContext();
 	const trackingViewHeight = useTrackingViewHeight();
 	const keyboardHeight = useKeyboardHeight();
+	const { bottom } = useSafeAreaInsets();
 	const { text, type, params } = useAutocompleteParams();
 	const items = useAutocomplete({
 		rid,
@@ -26,13 +28,15 @@ export const Autocomplete = ({ onPress }: { onPress: IAutocompleteItemProps['onP
 		return null;
 	}
 
+	const viewBottom = getBottom(trackingViewHeight, keyboardHeight, bottom);
+
 	if (type !== '/preview') {
 		return (
 			<View
 				style={[
 					styles.root,
 					{
-						bottom: getBottom(trackingViewHeight, keyboardHeight)
+						bottom: viewBottom
 					}
 				]}
 			>
@@ -49,9 +53,7 @@ export const Autocomplete = ({ onPress }: { onPress: IAutocompleteItemProps['onP
 
 	if (type === '/preview') {
 		return (
-			<View
+			<View style={[styles.root, { backgroundColor: colors.surfaceLight, bottom: viewBottom }]}>
-				style={[styles.root, { backgroundColor: colors.surfaceLight, bottom: getBottom(trackingViewHeight, keyboardHeight) }]}
-			>
 				<FlatList
 					contentContainerStyle={styles.listContentContainer}
 					style={styles.list}

app/containers/MessageComposer/components/Autocomplete/styles.ts

@@ -2,7 +2,8 @@ import sharedStyles from '../../../../views/Styles';
 import { useTheme } from '../../../../theme';
 
 const MAX_HEIGHT = 216;
-export const getBottom = (trackingViewHeight: number, keyboardHeight: number): number => trackingViewHeight + keyboardHeight + 50;
+export const getBottom = (trackingViewHeight: number, keyboardHeight: number, bottomSafeArea: number): number =>
+	trackingViewHeight + keyboardHeight + (keyboardHeight > 0 ? 0 : bottomSafeArea) - 4;
 
 export const useStyle = () => {
 	const { colors } = useTheme();

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -32,7 +32,7 @@ export const ComposerInput = memo(
 		const { colors, theme } = useTheme();
 		const { rid, tmid, sharing, action, selectedMessages } = useRoomContext();
 		const focused = useFocused();
-		const { setFocused, setTrackingViewHeight, setMicOrSend, setAutocompleteParams } = useMessageComposerApi();
+		const { setFocused, setMicOrSend, setAutocompleteParams } = useMessageComposerApi();
 		const autocompleteType = useAutocompleteParams()?.type;
 		const textRef = React.useRef('');
 		const selectionRef = React.useRef<IInputSelection>(defaultSelection);
@@ -180,10 +180,6 @@ export const ComposerInput = memo(
 			stopAutocomplete();
 		};
 
-		const handleLayout: TextInputProps['onLayout'] = e => {
-			setTrackingViewHeight(e.nativeEvent.layout.height);
-		};
-
 		const onAutocompleteItemSelected: IAutocompleteItemProps['onPress'] = async item => {
 			if (item.type === 'loading') {
 				return null;
@@ -330,7 +326,6 @@ export const ComposerInput = memo(
 
 		return (
 			<TextInput
-				onLayout={handleLayout}
 				style={[styles.textInput, { color: colors.fontDefault }]}
 				placeholder={placeholder}
 				placeholderTextColor={colors.fontAnnotation}

app/containers/MessageComposer/context.tsx

@@ -5,8 +5,7 @@ import { IAutocompleteBase, TMicOrSend } from './interfaces';
 import { animateNextTransition } from '../../lib/methods/helpers';
 
 type TMessageComposerContextApi = {
-	setKeyboardHeight: (height: number) => void;
+	setHeight: (keyboardHeight: number, trackingViewHeight: number) => void;
-	setTrackingViewHeight: (height: number) => void;
 	openEmojiKeyboard(): void;
 	closeEmojiKeyboard(): void;
 	openSearchEmojiKeyboard(): void;
@@ -75,8 +74,7 @@ type Actions =
 	| { type: 'updateEmojiKeyboard'; showEmojiKeyboard: boolean }
 	| { type: 'updateEmojiSearchbar'; showEmojiSearchbar: boolean }
 	| { type: 'updateFocused'; focused: boolean }
-	| { type: 'updateTrackingViewHeight'; trackingViewHeight: number }
+	| { type: 'updateHeight'; trackingViewHeight: number; keyboardHeight: number }
-	| { type: 'updateKeyboardHeight'; keyboardHeight: number }
 	| { type: 'openEmojiKeyboard' }
 	| { type: 'closeEmojiKeyboard' }
 	| { type: 'openSearchEmojiKeyboard' }
@@ -96,10 +94,8 @@ const reducer = (state: State, action: Actions): State => {
 		case 'updateFocused':
 			animateNextTransition();
 			return { ...state, focused: action.focused };
-		case 'updateTrackingViewHeight':
+		case 'updateHeight':
-			return { ...state, trackingViewHeight: action.trackingViewHeight };
+			return { ...state, trackingViewHeight: action.trackingViewHeight, keyboardHeight: action.keyboardHeight };
-		case 'updateKeyboardHeight':
-			return { ...state, keyboardHeight: action.keyboardHeight };
 		case 'openEmojiKeyboard':
 			return { ...state, showEmojiKeyboard: true, showEmojiSearchbar: false };
 		case 'openSearchEmojiKeyboard':
@@ -127,12 +123,10 @@ export const MessageComposerProvider = ({ children }: { children: ReactElement }
 	const [state, dispatch] = useReducer(reducer, { keyboardHeight: 0, autocompleteParams: { text: '', type: null } } as State);
 
 	const api = useMemo(() => {
-		const setFocused = (focused: boolean) => dispatch({ type: 'updateFocused', focused });
+		const setFocused: TMessageComposerContextApi['setFocused'] = focused => dispatch({ type: 'updateFocused', focused });
 
-		const setKeyboardHeight = (keyboardHeight: number) => dispatch({ type: 'updateKeyboardHeight', keyboardHeight });
+		const setHeight: TMessageComposerContextApi['setHeight'] = (keyboardHeight, trackingViewHeight) =>
-
+			dispatch({ type: 'updateHeight', keyboardHeight, trackingViewHeight });
-		const setTrackingViewHeight = (trackingViewHeight: number) =>
-			dispatch({ type: 'updateTrackingViewHeight', trackingViewHeight });
 
 		const openEmojiKeyboard = () => dispatch({ type: 'openEmojiKeyboard' });
 
@@ -142,21 +136,23 @@ export const MessageComposerProvider = ({ children }: { children: ReactElement }
 
 		const closeSearchEmojiKeyboard = () => dispatch({ type: 'closeSearchEmojiKeyboard' });
 
-		const setMicOrSend = (micOrSend: TMicOrSend) => dispatch({ type: 'setMicOrSend', micOrSend });
+		const setMicOrSend: TMessageComposerContextApi['setMicOrSend'] = micOrSend => dispatch({ type: 'setMicOrSend', micOrSend });
 
-		const setMarkdownToolbar = (showMarkdownToolbar: boolean) => dispatch({ type: 'setMarkdownToolbar', showMarkdownToolbar });
+		const setMarkdownToolbar: TMessageComposerContextApi['setMarkdownToolbar'] = showMarkdownToolbar =>
+			dispatch({ type: 'setMarkdownToolbar', showMarkdownToolbar });
 
-		const setAlsoSendThreadToChannel = (alsoSendThreadToChannel: boolean) =>
+		const setAlsoSendThreadToChannel: TMessageComposerContextApi['setAlsoSendThreadToChannel'] = alsoSendThreadToChannel =>
 			dispatch({ type: 'setAlsoSendThreadToChannel', alsoSendThreadToChannel });
 
-		const setRecordingAudio = (recordingAudio: boolean) => dispatch({ type: 'setRecordingAudio', recordingAudio });
+		const setRecordingAudio: TMessageComposerContextApi['setRecordingAudio'] = recordingAudio =>
+			dispatch({ type: 'setRecordingAudio', recordingAudio });
 
-		const setAutocompleteParams = (params: IAutocompleteBase) => dispatch({ type: 'setAutocompleteParams', params });
+		const setAutocompleteParams: TMessageComposerContextApi['setAutocompleteParams'] = params =>
+			dispatch({ type: 'setAutocompleteParams', params });
 
 		return {
 			setFocused,
-			setKeyboardHeight,
+			setHeight,
-			setTrackingViewHeight,
 			openEmojiKeyboard,
 			closeEmojiKeyboard,
 			openSearchEmojiKeyboard,

app/containers/MessageComposer/hooks/index.ts

@@ -1,6 +1,5 @@
 export * from './useAutocomplete';
 export * from './useCanUploadFile';
 export * from './useChooseMedia';
-export * from './useKeyboardListener';
 export * from './useSubscription';
 export * from './useMessage';

app/containers/MessageComposer/hooks/useKeyboardListener.ts

@@ -1,26 +0,0 @@
-import { MutableRefObject, useEffect } from 'react';
-import { Keyboard } from 'react-native';
-
-import { useMessageComposerApi } from '../context';
-import { ITrackingView } from '../interfaces';
-
-export const useKeyboardListener = (ref: MutableRefObject<ITrackingView>) => {
-	const { setKeyboardHeight } = useMessageComposerApi();
-	useEffect(() => {
-		const showListener = Keyboard.addListener('keyboardWillShow', async () => {
-			if (ref?.current) {
-				const props = await ref.current.getNativeProps();
-				setKeyboardHeight(props.keyboardHeight);
-			}
-		});
-
-		const hideListener = Keyboard.addListener('keyboardWillHide', () => {
-			setKeyboardHeight(0);
-		});
-
-		return () => {
-			showListener.remove();
-			hideListener.remove();
-		};
-	}, [ref, setKeyboardHeight]);
-};

app/containers/MessageComposer/interfaces.ts

@@ -37,7 +37,11 @@ export type TMarkdownStyle = 'bold' | 'italic' | 'strike' | 'code' | 'code-block
 
 export interface ITrackingView {
 	resetTracking: () => void;
-	getNativeProps: () => any;
+}
+
+export interface ITrackingViewHeightEvent {
+	height: number;
+	keyboardHeight: number;
 }
 
 export type TAutocompleteType = '@' | '#' | '!' | ':' | '/' | '/preview' | 'loading' | null;

package.json

@@ -122,7 +122,7 @@
 		"react-native-scrollable-tab-view": "ptomasroos/react-native-scrollable-tab-view",
 		"react-native-simple-crypto": "RocketChat/react-native-simple-crypto#0.5.2",
 		"react-native-skeleton-placeholder": "^5.2.3",
-		"react-native-slowlog": "^1.0.2",
+		"react-native-slowlog": "1.0.2",
 		"react-native-svg": "13.8.0",
 		"react-native-ui-lib": "RocketChat/react-native-ui-lib#ef50151b8d9c1627ef527c620a1472868f9f4df8",
 		"react-native-url-polyfill": "2.0.0",

patches/react-native-ui-lib+7.0.0.patch

@@ -1,8 +1,56 @@
+diff --git a/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js b/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js
+index cfe1d35..a191c82 100644
+--- a/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js
++++ b/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js
+@@ -123,7 +123,12 @@ class KeyboardAccessoryView extends Component {
+      * Whether or not to handle SafeArea
+      * default: true
+      */
+-    useSafeArea: PropTypes.bool
++    useSafeArea: PropTypes.bool,
++
++    onHeightChange: PropTypes.shape({
++      height: PropTypes.number,
++      keyboardHeight: PropTypes.number
++    })
+   };
+ 
+   static iosScrollBehaviors = IOS_SCROLL_BEHAVIORS;
+@@ -271,6 +276,7 @@ class KeyboardAccessoryView extends Component {
+         addBottomView={addBottomView}
+         bottomViewColor={this.props.bottomViewColor}
+         allowHitsOutsideBounds={allowHitsOutsideBounds}
++        onHeightChange={this.props.onHeightChange}
+       >
+         {renderContent && renderContent()}
+         <CustomKeyboardView
+diff --git a/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView.ios.js b/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView.ios.js
+index 60e3fe6..cad78a6 100644
+--- a/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView.ios.js
++++ b/node_modules/react-native-ui-lib/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView.ios.js
+@@ -33,7 +33,8 @@ class KeyboardTrackingView extends PureComponent {
+     /**
+      * Allow control safe area
+      */
+-    useSafeArea: PropTypes.bool
++    useSafeArea: PropTypes.bool,
++    onHeightChange: PropTypes.func,
+   };
+ 
+   /** V6 should be change to default false */
 diff --git a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m b/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m
-index 97255d2..4e0fe05 100644
+index 97255d2..3e5537c 100644
 --- a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m
 +++ b/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m
-@@ -364,6 +364,7 @@ - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(N
+@@ -54,6 +54,7 @@ @interface KeyboardTrackingViewTemp : UIView
+ @property (nonatomic) BOOL useSafeArea;
+ @property (nonatomic) BOOL scrollToFocusedInput;
+ @property (nonatomic) BOOL allowHitsOutsideBounds;
++@property (nonatomic, copy) RCTBubblingEventBlock onHeightChange;
+ 
+ @end
+ 
+@@ -364,6 +365,7 @@ - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(N
  - (void)ObservingInputAccessoryViewTempKeyboardWillDisappear:(ObservingInputAccessoryViewTemp *)ObservingInputAccessoryViewTemp
  {
      _bottomViewHeight = kBottomViewHeightTemp;
@@ -10,6 +58,28 @@ index 97255d2..4e0fe05 100644
      [self updateBottomViewFrame];
  }
  
+@@ -554,6 +556,11 @@ -(void)updateTransformAndInsets
+     
+     self.transform = CGAffineTransformMakeTranslation(0, accessoryTranslation);
+     [self _updateScrollViewInsets];
++    
++    if (self.onHeightChange) {
++        self.onHeightChange(@{ @"height": @(self.bounds.size.height), @"keyboardHeight": @(_ObservingInputAccessoryViewTemp.keyboardHeight) });
++    }
++    
+ }
+ 
+ - (void)performScrollToFocusedInput
+@@ -673,6 +680,9 @@ @implementation KeyboardTrackingViewTempManager
+ RCT_REMAP_VIEW_PROPERTY(scrollToFocusedInput, scrollToFocusedInput, BOOL)
+ RCT_REMAP_VIEW_PROPERTY(allowHitsOutsideBounds, allowHitsOutsideBounds, BOOL)
+ 
++RCT_EXPORT_VIEW_PROPERTY(onHeightChange, RCTBubblingEventBlock)
++
++
+ + (BOOL)requiresMainQueueSetup
+ {
+     return YES;
 diff --git a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/ObservingInputAccessoryViewTemp.m b/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/ObservingInputAccessoryViewTemp.m
 index 1ca52e8..69ac77a 100644
 --- a/node_modules/react-native-ui-lib/lib/ios/reactnativeuilib/keyboardtrackingview/ObservingInputAccessoryViewTemp.m
@@ -56,10 +126,10 @@ index 1ca52e8..69ac77a 100644
 -    _keyboardState = KeyboardStateWillHide;
 +    if (_keyboardState == KeyboardStateShown) {
 +        _keyboardState = KeyboardStateWillHide;
-         
+     
 -    [self invalidateIntrinsicContentSize];
 +        [self invalidateIntrinsicContentSize];
-         
+     
 -    if([_delegate respondsToSelector:@selector(ObservingInputAccessoryViewTempKeyboardWillDisappear:)])
 -    {
 -        [_delegate ObservingInputAccessoryViewTempKeyboardWillDisappear:self];
@@ -77,7 +147,7 @@ index 1ca52e8..69ac77a 100644
 -    _keyboardState = KeyboardStateHidden;
 +    if (_keyboardState == KeyboardStateWillHide) {
 +        _keyboardState = KeyboardStateHidden;
-         
+     
 -    [self invalidateIntrinsicContentSize];
 +        [self invalidateIntrinsicContentSize];
 +        

yarn.lock

@@ -17959,10 +17959,10 @@ react-native-skeleton-placeholder@^5.2.3:
   resolved "https://registry.yarnpkg.com/react-native-skeleton-placeholder/-/react-native-skeleton-placeholder-5.2.3.tgz#2dddf1f84d43110b90c22f715b2dbbe2c54732e1"
   integrity sha512-nikmTfex3oydnZ4prV62KxibMvcu2l2NegsHGtXhsWwFIX5QaKneBohP7etinUq/c2PkSr3ZlfqooDG2yIHRdg==
 
-react-native-slowlog@^1.0.2:
+react-native-slowlog@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-native-slowlog/-/react-native-slowlog-1.0.2.tgz#5520979e3ef9d5273495d431ff3be34f02e35c89"
-  integrity sha1-VSCXnj751Sc0ldQx/zvjTwLjXIk=
+  integrity sha512-pUiKi045MS4K+eCiqk/OB8w0V0M1nxa1pWidydHyKB6VordefOl6yO68kqiw+AWn90GgsjGdovThVlOC0dXH1A==
 
 react-native-svg@13.8.0:
   version "13.8.0"