react-native-gifted-chat 2.8.2-alpha.1 → 2.8.2-alpha.3

package/README.md

@@ -26,10 +26,7 @@
 </p>
 
 <p align="center">
-  <a href="https://reverent-bardeen-47c862.netlify.com/" target="_blank">Demo Web 🖥</a>
-</p>
-<p align="center">
-  <a href="https://snack.expo.io/@xcarpentier/giftedchat-playground" target="_blank">Snack GiftedChat playground</a>
+  <a href="https://snack.expo.dev/@kesha-antonov/gifted-chat-playground" target="_blank">Snack GiftedChat playground</a>
   <img height="18" src="https://snack.expo.io/favicon.ico" />
 </p>
 
@@ -85,21 +82,19 @@
 
 ## Features
 
-- 🎉 **_`react-native-web`able_ (since 0.10.0)** [web configuration](#react-native-web)
-- Write with **TypeScript** (since 0.8.0)
 - Fully customizable components
 - Composer actions (to attach photos, etc.)
 - Load earlier messages
 - Copy messages to clipboard
-- Touchable links using [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text)
+- Touchable links using [react-native-autolink](https://github.com/joshswan/react-native-autolink)
 - Avatar as user's initials
 - Localized dates
 - Multi-line TextInput
 - InputToolbar avoiding keyboard
-- Redux support
 - System message
 - Quick Reply messages (bot)
 - Typing indicator
+- react-native-web [web configuration](#react-native-web)
 
 # Getting started
 
@@ -117,18 +112,18 @@ Readme for this version: [2.6.5 readme](https://github.com/FaridSafi/react-nativ
 
 Yarn:
 ```bash
-yarn add react-native-gifted-chat react-native-reanimated react-native-keyboard-controller
+yarn add react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
 ```
 
 Npm:
 
 ```bash
-npm install --save react-native-gifted-chat react-native-reanimated react-native-keyboard-controller
+npm install --save react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
 ```
 
 Expo
 ```bash
-npx expo install react-native-gifted-chat react-native-reanimated react-native-keyboard-controller
+npx expo install react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
 ```
 
 ### Non-expo users
@@ -173,9 +168,15 @@ fireEvent(loadingWrapper, 'layout', {
 ```jsx
 import React, { useState, useCallback, useEffect } from 'react'
 import { GiftedChat } from 'react-native-gifted-chat'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export function Example() {
   const [messages, setMessages] = useState([])
+  const insets = useSafeAreaInsets()
+
+  // If you have a tab bar, include its height
+  const tabbarHeight = 50
+  const keyboardBottomOffset = insets.bottom + tabbarHeight
 
   useEffect(() => {
     setMessages([
@@ -205,6 +206,7 @@ export function Example() {
       user={{
         _id: 1,
       }}
+      keyboardBottomOffset={keyboardBottomOffset}
     />
   )
 }
@@ -212,7 +214,7 @@ export function Example() {
 
 ## Advanced example
 
-See [`App.tsx`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example/App.tsx) for a working demo!
+See [`examples`](example) for a working demo!
 
 ## "Slack" example
 
@@ -353,10 +355,12 @@ interface QuickReplies {
 - **`messageContainerRef`** _(FlatList ref)_ - Ref to the flatlist
 - **`textInputRef`** _(TextInput ref)_ - Ref to the text input
 - **`messages`** _(Array)_ - Messages to display
+- **`messagesContainerStyle`** _(Object)_ - Custom style for the messages container
 - **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.
+- **`keyboardBottomOffset`** _(Integer)_ - Distance between the bottom of the screen and bottom of the `GiftedChat` component. Useful when you have a tab bar or navigation bar; default is `0`. Needed for correct keyboard avoiding behavior. Without it you might see gap between the keyboard and the input toolbar if you have a tab bar, navigation bar, or safe area.
 - **`isKeyboardInternallyHandled`** _(Bool)_ - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true`
-- **`disableKeyboardController`** _(Bool)_ - Completely disable react-native-keyboard-controller. Useful when using react-native-navigation or other conflicting keyboard libraries; default is `false`
 - **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state (e.g. for redux; [see notes below](#notes-for-redux))
+- **`initialText`** _(String)_ - Initial text to display in the input field
 - **`onInputTextChanged`** _(Function)_ - Callback when the input text changes
 - **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to UUID v4, generated by [uuid](https://github.com/kelektiv/node-uuid)
 - **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }`
@@ -366,9 +370,18 @@ interface QuickReplies {
 - **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
 - **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'D MMMM'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
 - **`dateFormatCalendar`** _(Object)_ - Format to use for rendering relative times; default is `{ sameDay: '[Today]' }` (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar))
-- **`loadEarlier`** _(Bool)_ - Enables the "load earlier messages" button, required for `infiniteScroll`
-- **`onLoadEarlier`** _(Function)_ - Callback when loading earlier messages
-- **`isLoadingEarlier`** _(Bool)_ - Display an `ActivityIndicator` when loading earlier messages
+- **`loadEarlierMessagesProps`** _(Object)_ - Props to pass to the LoadEarlierMessages component. The button is only visible when `isAvailable` is `true`. Supports the following props:
+  - `isAvailable` - Controls button visibility (default: false)
+  - `onPress` - Callback when button is pressed
+  - `isLoading` - Display loading indicator (default: false)
+  - `isInfiniteScrollEnabled` - Enable infinite scroll up when reaching the top of messages container, automatically calls `onPress` (not yet supported for web)
+  - `label` - Override the default "Load earlier messages" text
+  - `containerStyle` - Custom style for the button container
+  - `wrapperStyle` - Custom style for the button wrapper
+  - `textStyle` - Custom style for the button text
+  - `activityIndicatorStyle` - Custom style for the loading indicator
+  - `activityIndicatorColor` - Color of the loading indicator (default: 'white')
+  - `activityIndicatorSize` - Size of the loading indicator (default: 'small')
 - **`renderLoading`** _(Function)_ - Render a loading view when initializing
 - **`renderLoadEarlier`** _(Function)_ - Custom "Load earlier messages" button
 - **`renderAvatar`** _(Function)_ - Custom message avatar; set to `null` to not render any avatar for the message
@@ -389,14 +402,17 @@ interface QuickReplies {
 - **`renderMessageText`** _(Function)_ - Custom message text
 - **`renderMessageImage`** _(Function)_ - Custom message image
 - **`renderMessageVideo`** _(Function)_ - Custom message video
+- **`renderMessageAudio`** _(Function)_ - Custom message audio
 - **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image.html) component created by the default `renderMessageImage`
+- **`imageStyle`** _(Object)_ - Custom style for message images
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
-- **`lightboxProps`** _(Object)_ - Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox)
 - **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`
 - **`renderCustomView`** _(Function)_ - Custom view inside the bubble
 - **`renderDay`** _(Function)_ - Custom day above a message
 - **`renderTime`** _(Function)_ - Custom time inside a message
+- **`timeTextStyle`** _(Object)_ - Custom text style for time inside messages (supports left/right styles)
 - **`renderFooter`** _(Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [App.tsx](/example/App.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.
+- **`renderTypingIndicator`** _(Function)_ - Custom typing indicator component
 - **`renderChatEmpty`** _(Function)_ - Custom component to render in the ListView when messages are empty
 - **`renderChatFooter`** _(Function)_ - Custom component to render below the MessageContainer (separate from the ListView)
 - **`renderInputToolbar`** _(Function)_ - Custom message composer container
@@ -405,22 +421,45 @@ interface QuickReplies {
 - **`renderSend`** _(Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
 - **`renderAccessory`** _(Function)_ - Custom second line of actions below the message composer
 - **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
-- **`bottomOffset`** _(Integer)_ - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)
+- **`actionSheet`** _(Function)_ - Custom action sheet interface for showing action options
+- **`actions`** _(Array)_ - Custom action options for the input toolbar action button; array of objects with `title` (string) and `action` (function) properties
+- **`actionSheetOptionTintColor`** _(String)_ - Tint color for action sheet options
 - **`focusOnInputWhenOpeningKeyboard`** _(Bool)_ - Focus on <TextInput> automatically when opening the keyboard; default `true`
 - **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`
 - **`listProps`** _(Object)_ - Extra props to be passed to the messages [`<FlatList>`](https://reactnative.dev/docs/flatlist.html); some props can't be overridden, see the code in `MessageContainer.render()` for details
 - **`textInputProps`** _(Object)_ - props to be passed to the [`<TextInput>`](https://reactnative.dev/docs/textinput.html).
-- **`matchers`** _(Array)_ - Custom matchers for [react-native-autolink](https://github.com/joshswan/react-native-autolink) used to linking message content (like URLs and phone numbers), e.g.:
+- **`messageTextProps`** _(Object)_ - Extra props to be passed to the MessageText component. Useful for customizing link parsing behavior, text styles, and matchers. Supports all [react-native-autolink](https://github.com/joshswan/react-native-autolink) props including:
+  - `matchers` - Custom matchers for linking message content (like URLs, phone numbers, hashtags, mentions)
+  - `linkStyle` - Custom style for links
+  - `email` - Enable/disable email parsing (default: true)
+  - `phone` - Enable/disable phone number parsing (default: true)
+  - `url` - Enable/disable URL parsing (default: true)
+
+Example:
 
 ```js
- <GiftedChat
-   matchers={[
-     { type: 'phone', style: linkStyle, onPress: onPressPhoneNumber },
-     { pattern: /#(\w+)/, style: [linkStyle, styles.hashtag], onPress: onPressHashtag },
-   ]}
- />
+<GiftedChat
+  messageTextProps={{
+    matchers: [
+      {
+        pattern: /#(\w+)/g,
+        style: { color: '#0084ff', fontWeight: 'bold' },
+        onPress: (match) => console.log('Hashtag:', match.getAnchorText()),
+      },
+      {
+        pattern: /(?<![\.\w])@(?!__ELEMENT-)([\w-]+)/g,
+        style: { color: '#0084ff', fontWeight: 'bold' },
+        onPress: (match) => console.log('Mention:', match.getAnchorText()),
+      },
+    ],
+    linkStyle: { left: { color: 'blue' }, right: { color: 'lightblue' } },
+    phone: false,
+  }}
+/>
 ```
 
+- **`matchers`** _(Array)_ - **Deprecated:** Use `messageTextProps.matchers` instead. Custom matchers for [react-native-autolink](https://github.com/joshswan/react-native-autolink) used to linking message content (like URLs and phone numbers).
+
 - **`extraData`** _(Object)_ - Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc.
 - **`minComposerHeight`** _(Object)_ - Custom min-height of the composer.
 - **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.
@@ -433,10 +472,12 @@ interface QuickReplies {
 * **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)
 * **`renderQuickReplies`** _(Function)_ - Custom all quick reply view
 * **`quickReplyStyle`** _(StyleProp<ViewStyle>)_ - Custom quick reply view style
+* **`quickReplyTextStyle`** _(StyleProp<TextStyle>)_ - Custom text style for quick reply buttons
+* **`quickReplyContainerStyle`** _(StyleProp<ViewStyle>)_ - Custom container style for quick replies
 * **`renderQuickReplySend`** _(Function)_ - Custom quick reply **send** view
 * **`shouldUpdateMessage`** _(Function)_ - Lets the message component know when to update outside of normal cases.
-* **`infiniteScroll`** _(Bool)_ - infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web). You need to add `loadEarlier` prop too.
 * **`typingIndicatorStyle`** _(StyleProp<ViewStyle>)_ - Custom style for the TypingIndicator component.
+* **`handleOnScroll`** _(Function)_ - Custom scroll event handler for the message list
 
 ## Notes for [Redux](https://github.com/reactjs/redux)
 
@@ -514,7 +555,7 @@ If you use React Navigation, additional handling may be required to account for
 module.exports = function override(config, env) {
   config.module.rules.push({
     test: /\.js$/,
-    exclude: /node_modules[/\\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text)/,
+    exclude: /node_modules[/\\](?!react-native-gifted-chat)/,
     use: {
       loader: 'babel-loader',
       options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.8.2-alpha.1",
+  "version": "2.8.2-alpha.3",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -53,8 +53,7 @@
     "dayjs": "^1.11.19",
     "lodash.isequal": "^4.5.0",
     "react-native-autolink": "^4.2.0",
-    "react-native-communications": "^2.2.1",
-    "react-native-lightbox-v2": "^0.9.2"
+    "react-native-zoom-reanimated": "^1.4.10"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -80,16 +79,12 @@
     "@typescript-eslint/eslint-plugin": "^8.46.4",
     "@typescript-eslint/parser": "^8.46.4",
     "babel-jest": "^29.7.0",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-config-standard-jsx": "^11.0.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-json": "^4.0.1",
-    "eslint-plugin-n": "^17.23.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-perfectionist": "^4.15.1",
     "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "json": "^11.0.0",
@@ -97,16 +92,20 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-gesture-handler": "^2.29.1",
     "react-native-keyboard-controller": "^1.19.5",
     "react-native-reanimated": "^3.19.4",
+    "react-native-safe-area-context": "^5.6.2",
     "react-test-renderer": "19.1.0",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
     "react-native-keyboard-controller": ">=1.0.0",
-    "react-native-reanimated": ">=3.0.0 || ^4.0.0"
+    "react-native-reanimated": ">=3.0.0 || ^4.0.0",
+    "react-native-safe-area-context": ">=5.0.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "engines": {

package/src/Actions.tsx

@@ -2,20 +2,20 @@ import React, { ReactNode, useCallback } from 'react'
 import {
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
 import Color from './Color'
+import { TouchableOpacity } from './components/TouchableOpacity'
 import { useChatContext } from './GiftedChatContext'
 
 import stylesCommon from './styles'
 
 export interface ActionsProps {
-  options?: { [key: string]: () => void }
-  optionTintColor?: string
+  actions?: Array<{ title: string, action: () => void }>
+  actionSheetOptionTintColor?: string
   icon?: () => ReactNode
   wrapperStyle?: StyleProp<ViewStyle>
   iconTextStyle?: StyleProp<TextStyle>
@@ -24,8 +24,8 @@ export interface ActionsProps {
 }
 
 export function Actions ({
-  options,
-  optionTintColor = Color.optionTintColor,
+  actions,
+  actionSheetOptionTintColor = Color.optionTintColor,
   icon,
   wrapperStyle,
   iconTextStyle,
@@ -35,28 +35,26 @@ export function Actions ({
   const { actionSheet } = useChatContext()
 
   const onActionsPress = useCallback(() => {
-    if (!options)
+    if (!actions?.length)
       return
 
-    const optionKeys = Object.keys(options)
-    const cancelButtonIndex = optionKeys.indexOf('Cancel')
+    const titles = actions.map(item => item.title)
 
     actionSheet().showActionSheetWithOptions(
       {
-        options: optionKeys,
-        cancelButtonIndex,
-        tintColor: optionTintColor,
+        options: titles,
+        cancelButtonIndex: titles.length - 1,
+        tintColor: actionSheetOptionTintColor,
       },
-      (buttonIndex: number | undefined) => {
+      (buttonIndex?: number) => {
         if (buttonIndex === undefined)
           return
 
-        const key = optionKeys[buttonIndex]
-        if (key)
-          options[key]()
+        const item = actions[buttonIndex]
+        item.action?.()
       }
     )
-  }, [actionSheet, options, optionTintColor])
+  }, [actionSheet, actions, actionSheetOptionTintColor])
 
   const renderIcon = useCallback(() => {
     if (icon)

package/src/Avatar.tsx

@@ -7,8 +7,8 @@ import {
   ViewStyle,
 } from 'react-native'
 import { GiftedAvatar } from './GiftedAvatar'
-import { isSameUser, isSameDay } from './utils'
 import { IMessage, LeftRightStyle, User } from './types'
+import { isSameUser, isSameDay } from './utils'
 
 interface Styles {
   left: {

package/src/Bubble/index.tsx

@@ -6,19 +6,19 @@ import {
 } from 'react-native'
 
 import { useChatContext } from '../GiftedChatContext'
-import { QuickReplies } from '../QuickReplies'
-import { MessageText } from '../MessageText'
+import { MessageAudio } from '../MessageAudio'
 import { MessageImage } from '../MessageImage'
+import { MessageText } from '../MessageText'
 import { MessageVideo } from '../MessageVideo'
-import { MessageAudio } from '../MessageAudio'
-import { Time } from '../Time'
+import { QuickReplies } from '../QuickReplies'
+import stylesCommon from '../styles'
 
-import { isSameUser, isSameDay } from '../utils'
+import { Time } from '../Time'
 import { IMessage } from '../types'
-import { BubbleProps } from './types'
+import { isSameUser, isSameDay } from '../utils'
 
-import stylesCommon from '../styles'
 import styles from './styles'
+import { BubbleProps, RenderMessageTextProps } from './types'
 
 export * from './types'
 
@@ -142,14 +142,17 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
         wrapperStyle,
+        messageTextProps,
         /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...messageTextProps
+        ...messageTextPropsRest
       } = props
 
+      const combinedProps = { ...messageTextPropsRest, ...messageTextProps } as RenderMessageTextProps<TMessage>
+
       if (props.renderMessageText)
-        return props.renderMessageText(messageTextProps)
+        return props.renderMessageText(combinedProps)
 
-      return <MessageText {...messageTextProps} />
+      return <MessageText {...combinedProps} />
     }
 
     return null

package/src/Bubble/types.ts

@@ -4,9 +4,9 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import { QuickRepliesProps } from '../QuickReplies'
-import { MessageTextProps, MessageOption } from '../MessageText'
 import { MessageImageProps } from '../MessageImage'
+import { MessageTextProps, MessageOption } from '../MessageText'
+import { QuickRepliesProps } from '../QuickReplies'
 import { TimeProps } from '../Time'
 import {
   User,
@@ -18,7 +18,7 @@ import {
   MessageAudioProps,
 } from '../types'
 
-/* eslint-disable no-use-before-define */
+ 
 export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
   'containerStyle' | 'wrapperStyle'
@@ -42,7 +42,7 @@ export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
   'containerStyle' | 'wrapperStyle' | 'options'
 > &
   MessageTextProps<TMessage>
-/* eslint-enable no-use-before-define */
+ 
 
 export interface BubbleProps<TMessage extends IMessage> {
   user?: User
@@ -66,6 +66,7 @@ export interface BubbleProps<TMessage extends IMessage> {
   quickReplyStyle?: StyleProp<ViewStyle>
   quickReplyTextStyle?: StyleProp<TextStyle>
   quickReplyContainerStyle?: StyleProp<ViewStyle>
+  messageTextProps?: Partial<MessageTextProps<TMessage>>
   onPressMessage?(context?: unknown, message?: unknown): void
   onLongPressMessage?(context?: unknown, message?: unknown): void
   onQuickReply?(replies: Reply[]): void

package/src/Composer.tsx

@@ -8,8 +8,8 @@ import {
   TextInputContentSizeChangeEventData,
   useColorScheme,
 } from 'react-native'
-import { MIN_COMPOSER_HEIGHT } from './Constant'
 import Color from './Color'
+import { MIN_COMPOSER_HEIGHT } from './Constant'
 import stylesCommon from './styles'
 
 export interface ComposerProps {

package/src/Day/index.tsx

@@ -4,15 +4,15 @@ import {
   View,
 } from 'react-native'
 import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
 import calendar from 'dayjs/plugin/calendar'
+import relativeTime from 'dayjs/plugin/relativeTime'
 
 import { DATE_FORMAT } from '../Constant'
-import { DayProps } from './types'
-
 import { useChatContext } from '../GiftedChatContext'
+
 import stylesCommon from '../styles'
 import styles from './styles'
+import { DayProps } from './types'
 
 export * from './types'
 

package/src/GiftedAvatar.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo } from 'react'
 import {
   Image,
   Text,
-  TouchableOpacity,
   View,
   StyleSheet,
   StyleProp,
@@ -10,8 +9,9 @@ import {
   TextStyle,
 } from 'react-native'
 import Color from './Color'
-import { User } from './types'
+import { TouchableOpacity } from './components/TouchableOpacity'
 import stylesCommon from './styles'
+import { User } from './types'
 
 const {
   carrot,