diff --git a/.circleci/config.yml b/.circleci/config.yml index 9b681e2b6..ac5e942a3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -359,7 +359,7 @@ jobs: - run: name: Test command: | - yarn test + yarn test -w 8 - run: name: Codecov diff --git a/__tests__/Storyshots.test.js b/__tests__/Storyshots.test.js index e0d741e1c..1315f9bb5 100644 --- a/__tests__/Storyshots.test.js +++ b/__tests__/Storyshots.test.js @@ -22,18 +22,13 @@ global.Date.now = jest.fn(() => new Date('2019-10-10').getTime()); const converter = new Stories2SnapsConverter(); -// Runner initStoryshots({ - asyncJest: true, - test: ({ story, context, done }) => { + test: ({ story, context }) => { const snapshotFilename = converter.getSnapshotFileName(context); const storyElement = story.render(); const { update, toJSON } = render(storyElement); update(storyElement); - setTimeout(() => { - const json = toJSON(); - expect(JSON.stringify(json)).toMatchSpecificSnapshot(snapshotFilename); - done(); - }, 10); + const json = toJSON(); + expect(JSON.stringify(json)).toMatchSpecificSnapshot(snapshotFilename); } }); diff --git a/app/containers/Avatar/index.tsx b/app/containers/Avatar/index.tsx index 2ce066479..637596410 100644 --- a/app/containers/Avatar/index.tsx +++ b/app/containers/Avatar/index.tsx @@ -1,16 +1,18 @@ import React from 'react'; import { connect } from 'react-redux'; import { Q } from '@nozbe/watermelondb'; +import { Observable, Subscription } from 'rxjs'; import database from '../../lib/database'; import { getUserSelector } from '../../selectors/login'; +import { TSubscriptionModel, TUserModel } from '../../definitions'; import Avatar from './Avatar'; import { IAvatar } from './interfaces'; class AvatarContainer extends React.Component { private mounted: boolean; - private subscription: any; + private subscription?: Subscription; static defaultProps = { text: '', @@ -59,15 +61,17 @@ class AvatarContainer extends React.Component { record = user; } else { const { rid } = this.props; - record = await subsCollection.find(rid); + if (rid) { + record = await subsCollection.find(rid); + } } } catch { // Record not found } if (record) { - const observable = record.observe(); - this.subscription = observable.subscribe((r: any) => { + const observable = record.observe() as Observable; + this.subscription = observable.subscribe(r => { const { avatarETag } = r; if (this.mounted) { this.setState({ avatarETag }); diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx index fc26fe0ab..a485611c0 100644 --- a/app/containers/BackgroundContainer/index.tsx +++ b/app/containers/BackgroundContainer/index.tsx @@ -35,7 +35,7 @@ const styles = StyleSheet.create({ const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => ( - {text ? {text} : null} + {text && !loading ? {text} : null} {loading ? : null} ); diff --git a/app/containers/EmojiPicker/index.tsx b/app/containers/EmojiPicker/index.tsx index 12217cf95..5fc4a5b9b 100644 --- a/app/containers/EmojiPicker/index.tsx +++ b/app/containers/EmojiPicker/index.tsx @@ -36,7 +36,7 @@ interface IEmojiPickerProps { } interface IEmojiPickerState { - frequentlyUsed: []; + frequentlyUsed: (string | { content?: string; extension?: string; isCustom: boolean })[]; customEmojis: any; show: boolean; width: number | null; @@ -114,7 +114,7 @@ class EmojiPicker extends Component { // Do nothing } - await db.action(async () => { + await db.write(async () => { if (freqEmojiRecord) { await freqEmojiRecord.update((f: any) => { f.count += 1; @@ -132,8 +132,8 @@ class EmojiPicker extends Component { updateFrequentlyUsed = async () => { const db = database.active; const frequentlyUsedRecords = await db.get('frequently_used_emojis').query().fetch(); - let frequentlyUsed: any = orderBy(frequentlyUsedRecords, ['count'], ['desc']); - frequentlyUsed = frequentlyUsed.map((item: IEmoji) => { + const frequentlyUsedOrdered = orderBy(frequentlyUsedRecords, ['count'], ['desc']); + const frequentlyUsed = frequentlyUsedOrdered.map(item => { if (item.isCustom) { return { content: item.content, extension: item.extension, isCustom: item.isCustom }; } diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx index ace8d56b7..0c8e07bd8 100644 --- a/app/containers/MessageActions/Header.tsx +++ b/app/containers/MessageActions/Header.tsx @@ -10,6 +10,7 @@ import database from '../../lib/database'; import { Button } from '../ActionSheet'; import { useDimensions } from '../../dimensions'; import sharedStyles from '../../views/Styles'; +import { TFrequentlyUsedEmojiModel } from '../../definitions/IFrequentlyUsedEmoji'; import { IEmoji } from '../EmojiPicker/interfaces'; interface IHeader { @@ -90,14 +91,14 @@ const HeaderFooter = React.memo(({ onReaction, theme }: THeaderFooter) => ( )); const Header = React.memo(({ handleReaction, server, message, isMasterDetail, theme }: IHeader) => { - const [items, setItems] = useState([]); + const [items, setItems] = useState<(TFrequentlyUsedEmojiModel | string)[]>([]); const { width, height }: any = useDimensions(); const setEmojis = async () => { try { const db = database.active; const freqEmojiCollection = db.get('frequently_used_emojis'); - let freqEmojis = await freqEmojiCollection.query().fetch(); + let freqEmojis: (TFrequentlyUsedEmojiModel | string)[] = await freqEmojiCollection.query().fetch(); const isLandscape = width > height; const size = (isLandscape || isMasterDetail ? width / 2 : width) - CONTAINER_MARGIN * 2; diff --git a/app/containers/MessageActions/index.tsx b/app/containers/MessageActions/index.tsx index 4237e2c1e..87a28e74c 100644 --- a/app/containers/MessageActions/index.tsx +++ b/app/containers/MessageActions/index.tsx @@ -15,6 +15,7 @@ import { showConfirmationAlert } from '../../utils/info'; import { useActionSheet } from '../ActionSheet'; import Header, { HEADER_HEIGHT } from './Header'; import events from '../../utils/log/events'; +import { TMessageModel } from '../../definitions/IMessage'; interface IMessageActions { room: { @@ -182,9 +183,9 @@ const MessageActions = React.memo( if (result.success) { const subCollection = db.get('subscriptions'); const subRecord = await subCollection.find(rid); - await db.action(async () => { + await db.write(async () => { try { - await subRecord.update((sub: any) => (sub.lastOpen = ts)); + await subRecord.update(sub => (sub.lastOpen = ts)); } catch { // do nothing } @@ -269,11 +270,11 @@ const MessageActions = React.memo( } }; - const handleToggleTranslation = async (message: any) => { + const handleToggleTranslation = async (message: TMessageModel) => { try { const db = database.active; - await db.action(async () => { - await message.update((m: any) => { + await db.write(async () => { + await message.update(m => { m.autoTranslate = !m.autoTranslate; m._updatedAt = new Date(); }); @@ -320,7 +321,7 @@ const MessageActions = React.memo( }); }; - const getOptions = (message: any) => { + const getOptions = (message: TMessageModel) => { let options: any = []; // Reply @@ -446,7 +447,7 @@ const MessageActions = React.memo( return options; }; - const showMessageActions = async (message: any) => { + const showMessageActions = async (message: TMessageModel) => { logEvent(events.ROOM_SHOW_MSG_ACTIONS); await getPermissions(); showActionSheet({ diff --git a/app/containers/MessageErrorActions.tsx b/app/containers/MessageErrorActions.tsx index 6f56e54db..40b57536e 100644 --- a/app/containers/MessageErrorActions.tsx +++ b/app/containers/MessageErrorActions.tsx @@ -36,7 +36,7 @@ const MessageErrorActions = forwardRef(({ tmid }: any, ref): any => { try { // Find the thread header and update it const msg = await msgCollection.find(tmid); - if (msg.tcount <= 1) { + if (msg?.tcount && msg.tcount <= 1) { deleteBatch.push( msg.prepareUpdate((m: any) => { m.tcount = null; @@ -62,7 +62,7 @@ const MessageErrorActions = forwardRef(({ tmid }: any, ref): any => { // Do nothing: message not found } } - await db.action(async () => { + await db.write(async () => { await db.batch(...deleteBatch); }); } catch (e) { diff --git a/app/containers/SearchHeader.tsx b/app/containers/SearchHeader.tsx index 4b0a49176..f79451355 100644 --- a/app/containers/SearchHeader.tsx +++ b/app/containers/SearchHeader.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; -import { withTheme } from '../theme'; +import I18n from '../i18n'; +import { useTheme } from '../theme'; import sharedStyles from '../views/Styles'; import { themes } from '../constants/colors'; import TextInput from '../presentation/TextInput'; @@ -19,14 +20,13 @@ const styles = StyleSheet.create({ } }); -interface ISearchHeader { - theme?: string; +interface ISearchHeaderProps { onSearchChangeText?: (text: string) => void; + testID: string; } -// TODO: it might be useful to refactor this component for reusage -const SearchHeader = ({ theme, onSearchChangeText }: ISearchHeader) => { - const titleColorStyle = { color: themes[theme!].headerTitleColor }; +const SearchHeader = ({ onSearchChangeText, testID }: ISearchHeaderProps): JSX.Element => { + const { theme } = useTheme(); const isLight = theme === 'light'; const { isLandscape } = useOrientation(); const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1; @@ -36,14 +36,14 @@ const SearchHeader = ({ theme, onSearchChangeText }: ISearchHeader) => { ); }; -export default withTheme(SearchHeader); +export default SearchHeader; diff --git a/app/containers/ThreadDetails.tsx b/app/containers/ThreadDetails.tsx index 90f3faa4b..5dc9fb954 100644 --- a/app/containers/ThreadDetails.tsx +++ b/app/containers/ThreadDetails.tsx @@ -5,7 +5,7 @@ import Touchable from 'react-native-platform-touchable'; import { CustomIcon } from '../lib/Icons'; import { themes } from '../constants/colors'; import sharedStyles from '../views/Styles'; -import { withTheme } from '../theme'; +import { useTheme } from '../theme'; import { TThreadModel } from '../definitions/IThread'; const styles = StyleSheet.create({ @@ -48,12 +48,12 @@ interface IThreadDetails { badgeColor?: string; toggleFollowThread: Function; style: ViewStyle; - theme?: string; } -const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, theme }: IThreadDetails) => { +const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IThreadDetails): JSX.Element => { + const { theme } = useTheme(); let { tcount } = item; - if (tcount! >= 1000) { + if (tcount && tcount >= 1000) { tcount = '+999'; } @@ -81,7 +81,6 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, them - {badgeColor ? : null} toggleFollowThread?.(isFollowing, item.id)}> @@ -96,4 +95,4 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, them ); }; -export default withTheme(ThreadDetails); +export default ThreadDetails; diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx index e8e2ea06b..f11ab6730 100644 --- a/app/containers/markdown/index.tsx +++ b/app/containers/markdown/index.tsx @@ -25,7 +25,7 @@ import { isValidURL } from '../../utils/url'; import NewMarkdown from './new'; interface IMarkdownProps { - msg: string; + msg?: string; md: MarkdownAST; mentions: UserMention[]; getCustomEmoji: Function; diff --git a/app/containers/message/Reply.tsx b/app/containers/message/Reply.tsx index 8d8126050..56fdc6071 100644 --- a/app/containers/message/Reply.tsx +++ b/app/containers/message/Reply.tsx @@ -182,7 +182,7 @@ const Fields = React.memo( {field.title} {/* @ts-ignore*/} { if ((item.tlm || item.tmid) && !isThreadRoom) { this.onThreadPress(); } + + const { onDiscussionPress } = this.props; + + if (onDiscussionPress) { + onDiscussionPress(item); + } }, 300, true diff --git a/app/containers/message/interfaces.ts b/app/containers/message/interfaces.ts index 7d3e14950..0291a55bf 100644 --- a/app/containers/message/interfaces.ts +++ b/app/containers/message/interfaces.ts @@ -1,5 +1,7 @@ import { MarkdownAST } from '@rocket.chat/message-parser'; +export type TMessageType = 'discussion-created' | 'jitsi_call_started'; + export interface IMessageAttachments { attachments: any; timeFormat: string; @@ -101,7 +103,7 @@ export interface IMessageThread { msg: string; tcount: number; theme: string; - tlm: string; + tlm: Date; isThreadRoom: boolean; id: string; } @@ -140,7 +142,7 @@ export interface IMessageInner IMessageThread, IMessageAttachments, IMessageBroadcast { - type: string; + type: TMessageType; blocks: []; } diff --git a/app/containers/message/utils.ts b/app/containers/message/utils.ts index 27d904a5d..70627b108 100644 --- a/app/containers/message/utils.ts +++ b/app/containers/message/utils.ts @@ -1,3 +1,4 @@ +import { TMessageModel } from '../../definitions/IMessage'; import I18n from '../../i18n'; import { DISCUSSION } from './constants'; @@ -149,7 +150,7 @@ export const getInfoMessage = ({ type, role, msg, author }: TInfoMessage) => { return ''; }; -export const getMessageTranslation = (message: { translations: any }, autoTranslateLanguage: string) => { +export const getMessageTranslation = (message: TMessageModel, autoTranslateLanguage: string) => { if (!autoTranslateLanguage) { return null; } diff --git a/app/definitions/IFrequentlyUsedEmoji.ts b/app/definitions/IFrequentlyUsedEmoji.ts index a659e2abd..87e46cf33 100644 --- a/app/definitions/IFrequentlyUsedEmoji.ts +++ b/app/definitions/IFrequentlyUsedEmoji.ts @@ -7,4 +7,4 @@ export interface IFrequentlyUsedEmoji { count: number; } -export type TFrequentlyUsedEmoji = IFrequentlyUsedEmoji & Model; +export type TFrequentlyUsedEmojiModel = IFrequentlyUsedEmoji & Model; diff --git a/app/definitions/ILoggedUser.ts b/app/definitions/ILoggedUser.ts index 487d29c18..380bcd86c 100644 --- a/app/definitions/ILoggedUser.ts +++ b/app/definitions/ILoggedUser.ts @@ -15,4 +15,4 @@ export interface ILoggedUser { enableMessageParserEarlyAdoption?: boolean; } -export type TLoggedUser = ILoggedUser & Model; +export type TLoggedUserModel = ILoggedUser & Model; diff --git a/app/definitions/IServerHistory.ts b/app/definitions/IServerHistory.ts index 296cba4ed..68d25df4f 100644 --- a/app/definitions/IServerHistory.ts +++ b/app/definitions/IServerHistory.ts @@ -7,4 +7,4 @@ export interface IServerHistory { updatedAt: Date; } -export type TServerHistory = IServerHistory & Model; +export type TServerHistoryModel = IServerHistory & Model; diff --git a/app/definitions/ISubscription.ts b/app/definitions/ISubscription.ts index 1f241599a..5f561edfb 100644 --- a/app/definitions/ISubscription.ts +++ b/app/definitions/ISubscription.ts @@ -79,8 +79,6 @@ export interface ISubscription { avatarETag?: string; teamId?: string; teamMain?: boolean; - search?: boolean; - username?: string; // https://nozbe.github.io/WatermelonDB/Relation.html#relation-api messages: Relation; threads: Relation; diff --git a/app/definitions/IThread.ts b/app/definitions/IThread.ts index e97b2348c..3edefbcad 100644 --- a/app/definitions/IThread.ts +++ b/app/definitions/IThread.ts @@ -43,7 +43,7 @@ export interface IThread { id: string; msg?: string; t?: SubscriptionType; - rid?: string; + rid: string; _updatedAt?: Date; ts?: Date; u?: IUserMessage; @@ -61,10 +61,10 @@ export interface IThread { reactions?: IReaction[]; role?: string; drid?: string; - dcount?: number; + dcount?: number | string; dlm?: number; tmid?: string; - tcount: number | string; + tcount?: number | string; tlm?: string; replies?: string[]; mentions?: IUserMention[]; diff --git a/app/definitions/index.ts b/app/definitions/index.ts index 5abdd95c3..e37eae1f4 100644 --- a/app/definitions/index.ts +++ b/app/definitions/index.ts @@ -3,12 +3,23 @@ import { StackNavigationProp } from '@react-navigation/stack'; import { Dispatch } from 'redux'; export * from './IAttachment'; -export * from './IMessage'; export * from './INotification'; -export * from './IRoom'; -export * from './IServer'; -export * from './ISubscription'; export * from './IPreferences'; +export * from './ISubscription'; +export * from './IRoom'; +export * from './IMessage'; +export * from './IThread'; +export * from './IThreadMessage'; +export * from './ICustomEmoji'; +export * from './IFrequentlyUsedEmoji'; +export * from './IUpload'; +export * from './ISettings'; +export * from './IRole'; +export * from './IPermission'; +export * from './ISlashCommand'; +export * from './IUser'; +export * from './IServer'; +export * from './ILoggedUser'; export * from './IServerHistory'; export interface IBaseScreen, S extends string> { diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json index 499a50e7a..43fe78dc0 100644 --- a/app/i18n/locales/en.json +++ b/app/i18n/locales/en.json @@ -775,6 +775,7 @@ "creating_discussion": "creating discussion", "Canned_Responses": "Canned Responses", "No_match_found": "No match found.", + "No_discussions": "No discussions", "Check_canned_responses": "Check on canned responses.", "Searching": "Searching", "Use": "Use", diff --git a/app/lib/database/index.js b/app/lib/database/index.ts similarity index 81% rename from app/lib/database/index.js rename to app/lib/database/index.ts index ee02e6212..1b8df955b 100644 --- a/app/lib/database/index.js +++ b/app/lib/database/index.ts @@ -25,6 +25,7 @@ import serversSchema from './schema/servers'; import appSchema from './schema/app'; import migrations from './model/migrations'; import serversMigrations from './model/servers/migrations'; +import { TAppDatabase, TServerDatabase } from './interfaces'; const appGroupPath = isIOS ? appGroup.path : ''; @@ -32,9 +33,9 @@ if (__DEV__ && isIOS) { console.log(appGroupPath); } -const getDatabasePath = name => `${appGroupPath}${name}${isOfficial ? '' : '-experimental'}.db`; +const getDatabasePath = (name: string) => `${appGroupPath}${name}${isOfficial ? '' : '-experimental'}.db`; -export const getDatabase = (database = '') => { +export const getDatabase = (database = ''): Database => { const path = database.replace(/(^\w+:|^)\/\//, '').replace(/\//g, '.'); const dbName = getDatabasePath(path); @@ -64,8 +65,14 @@ export const getDatabase = (database = '') => { }); }; +interface IDatabases { + shareDB?: TAppDatabase; + serversDB: TServerDatabase; + activeDB?: TAppDatabase; +} + class DB { - databases = { + databases: IDatabases = { serversDB: new Database({ adapter: new SQLiteAdapter({ dbName: getDatabasePath('default'), @@ -73,11 +80,12 @@ class DB { migrations: serversMigrations }), modelClasses: [Server, LoggedUser, ServersHistory] - }) + }) as TServerDatabase }; - get active() { - return this.databases.shareDB || this.databases.activeDB; + // Expected at least one database + get active(): TAppDatabase { + return this.databases.shareDB || this.databases.activeDB!; } get share() { @@ -116,11 +124,11 @@ class DB { Setting, User ] - }); + }) as TAppDatabase; } - setActiveDB(database) { - this.databases.activeDB = getDatabase(database); + setActiveDB(database: string) { + this.databases.activeDB = getDatabase(database) as TAppDatabase; } } diff --git a/app/lib/database/interfaces.ts b/app/lib/database/interfaces.ts new file mode 100644 index 000000000..49c30e068 --- /dev/null +++ b/app/lib/database/interfaces.ts @@ -0,0 +1,72 @@ +import { Database, Collection } from '@nozbe/watermelondb'; + +import * as models from './model'; +import * as definitions from '../../definitions'; + +export type TAppDatabaseNames = + | typeof models.SUBSCRIPTIONS_TABLE + | typeof models.ROOMS_TABLE + | typeof models.MESSAGES_TABLE + | typeof models.THREADS_TABLE + | typeof models.THREAD_MESSAGES_TABLE + | typeof models.CUSTOM_EMOJIS_TABLE + | typeof models.FREQUENTLY_USED_EMOJIS_TABLE + | typeof models.UPLOADS_TABLE + | typeof models.SETTINGS_TABLE + | typeof models.ROLES_TABLE + | typeof models.PERMISSIONS_TABLE + | typeof models.SLASH_COMMANDS_TABLE + | typeof models.USERS_TABLE; + +// Verify if T extends one type from TAppDatabaseNames, and if is truly, +// returns the specific model type. +// https://stackoverflow.com/a/54166010 TypeScript function return type based on input parameter +type ObjectType = T extends typeof models.SUBSCRIPTIONS_TABLE + ? definitions.TSubscriptionModel + : T extends typeof models.ROOMS_TABLE + ? definitions.TRoomModel + : T extends typeof models.MESSAGES_TABLE + ? definitions.TMessageModel + : T extends typeof models.THREADS_TABLE + ? definitions.TThreadModel + : T extends typeof models.THREAD_MESSAGES_TABLE + ? definitions.TThreadMessageModel + : T extends typeof models.CUSTOM_EMOJIS_TABLE + ? definitions.TCustomEmojiModel + : T extends typeof models.FREQUENTLY_USED_EMOJIS_TABLE + ? definitions.TFrequentlyUsedEmojiModel + : T extends typeof models.UPLOADS_TABLE + ? definitions.TUploadModel + : T extends typeof models.SETTINGS_TABLE + ? definitions.TSettingsModel + : T extends typeof models.ROLES_TABLE + ? definitions.TRoleModel + : T extends typeof models.PERMISSIONS_TABLE + ? definitions.TPermissionModel + : T extends typeof models.SLASH_COMMANDS_TABLE + ? definitions.TSlashCommandModel + : T extends typeof models.USERS_TABLE + ? definitions.TUserModel + : never; + +export type TAppDatabase = { + get: (db: T) => Collection>; +} & Database; + +// Migration to server database +export type TServerDatabaseNames = + | typeof models.SERVERS_TABLE + | typeof models.LOGGED_USERS_TABLE + | typeof models.SERVERS_HISTORY_TABLE; + +type ObjectServerType = T extends typeof models.SERVERS_TABLE + ? definitions.TServerModel + : T extends typeof models.LOGGED_USERS_TABLE + ? definitions.TLoggedUserModel + : T extends typeof models.SERVERS_HISTORY_TABLE + ? definitions.TServerHistoryModel + : never; + +export type TServerDatabase = { + get: (db: T) => Collection>; +} & Database; diff --git a/app/lib/database/model/CustomEmoji.js b/app/lib/database/model/CustomEmoji.js index 9f3e1b6a8..c8fdedd05 100644 --- a/app/lib/database/model/CustomEmoji.js +++ b/app/lib/database/model/CustomEmoji.js @@ -3,8 +3,10 @@ import { date, field, json } from '@nozbe/watermelondb/decorators'; import { sanitizer } from '../utils'; +export const CUSTOM_EMOJIS_TABLE = 'custom_emojis'; + export default class CustomEmoji extends Model { - static table = 'custom_emojis'; + static table = CUSTOM_EMOJIS_TABLE; @field('name') name; diff --git a/app/lib/database/model/FrequentlyUsedEmoji.js b/app/lib/database/model/FrequentlyUsedEmoji.js index 9629d3a99..2c6c815ed 100644 --- a/app/lib/database/model/FrequentlyUsedEmoji.js +++ b/app/lib/database/model/FrequentlyUsedEmoji.js @@ -1,8 +1,9 @@ import { Model } from '@nozbe/watermelondb'; import { field } from '@nozbe/watermelondb/decorators'; +export const FREQUENTLY_USED_EMOJIS_TABLE = 'frequently_used_emojis'; export default class FrequentlyUsedEmoji extends Model { - static table = 'frequently_used_emojis'; + static table = FREQUENTLY_USED_EMOJIS_TABLE; @field('content') content; diff --git a/app/lib/database/model/Message.js b/app/lib/database/model/Message.js index 20134733b..392283a63 100644 --- a/app/lib/database/model/Message.js +++ b/app/lib/database/model/Message.js @@ -3,10 +3,10 @@ import { date, field, json, relation } from '@nozbe/watermelondb/decorators'; import { sanitizer } from '../utils'; -export const TABLE_NAME = 'messages'; +export const MESSAGES_TABLE = 'messages'; export default class Message extends Model { - static table = TABLE_NAME; + static table = MESSAGES_TABLE; static associations = { subscriptions: { type: 'belongs_to', key: 'rid' } diff --git a/app/lib/database/model/Permission.js b/app/lib/database/model/Permission.js index 5923f83dc..c397f079a 100644 --- a/app/lib/database/model/Permission.js +++ b/app/lib/database/model/Permission.js @@ -3,8 +3,10 @@ import { date, json } from '@nozbe/watermelondb/decorators'; import { sanitizer } from '../utils'; +export const PERMISSIONS_TABLE = 'permissions'; + export default class Permission extends Model { - static table = 'permissions'; + static table = PERMISSIONS_TABLE; @json('roles', sanitizer) roles; diff --git a/app/lib/database/model/Role.js b/app/lib/database/model/Role.js index ad9256d58..e0633b045 100644 --- a/app/lib/database/model/Role.js +++ b/app/lib/database/model/Role.js @@ -1,8 +1,10 @@ import { Model } from '@nozbe/watermelondb'; import { field } from '@nozbe/watermelondb/decorators'; +export const ROLES_TABLE = 'roles'; + export default class Role extends Model { - static table = 'roles'; + static table = ROLES_TABLE; @field('description') description; } diff --git a/app/lib/database/model/Room.js b/app/lib/database/model/Room.js index 131fbaf0e..e2a1127bf 100644 --- a/app/lib/database/model/Room.js +++ b/app/lib/database/model/Room.js @@ -3,8 +3,10 @@ import { field, json } from '@nozbe/watermelondb/decorators'; import { sanitizer } from '../utils'; +export const ROOMS_TABLE = 'rooms'; + export default class Room extends Model { - static table = 'rooms'; + static table = ROOMS_TABLE; @json('custom_fields', sanitizer) customFields; diff --git a/app/lib/database/model/ServersHistory.js b/app/lib/database/model/ServersHistory.js index 4bbef3e98..168403782 100644 --- a/app/lib/database/model/ServersHistory.js +++ b/app/lib/database/model/ServersHistory.js @@ -1,8 +1,10 @@ import { Model } from '@nozbe/watermelondb'; import { date, field, readonly } from '@nozbe/watermelondb/decorators'; +export const SERVERS_HISTORY_TABLE = 'servers_history'; + export default class ServersHistory extends Model { - static table = 'servers_history'; + static table = SERVERS_HISTORY_TABLE; @field('url') url; diff --git a/app/lib/database/model/Setting.js b/app/lib/database/model/Setting.js index 753d965ba..1597272bd 100644 --- a/app/lib/database/model/Setting.js +++ b/app/lib/database/model/Setting.js @@ -3,8 +3,10 @@ import { date, field, json } from '@nozbe/watermelondb/decorators'; import { sanitizer } from '../utils'; +export const SETTINGS_TABLE = 'settings'; + export default class Setting extends Model { - static table = 'settings'; + static table = SETTINGS_TABLE; @field('value_as_string') valueAsString; diff --git a/app/lib/database/model/SlashCommand.js b/app/lib/database/model/SlashCommand.js index 418e72144..8bcba65f7 100644 --- a/app/lib/database/model/SlashCommand.js +++ b/app/lib/database/model/SlashCommand.js @@ -1,8 +1,10 @@ import { Model } from '@nozbe/watermelondb'; import { field } from '@nozbe/watermelondb/decorators'; +export const SLASH_COMMANDS_TABLE = 'slash_commands'; + export default class SlashCommand extends Model { - static table = 'slash_commands'; + static table = SLASH_COMMANDS_TABLE; @field('params') params; diff --git a/app/lib/database/model/Subscription.js b/app/lib/database/model/Subscription.js index aab0e0bbb..7b177349a 100644 --- a/app/lib/database/model/Subscription.js +++ b/app/lib/database/model/Subscription.js @@ -3,10 +3,10 @@ import { children, date, field, json } from '@nozbe/watermelondb/decorators'; import { sanitizer } from '../utils'; -export const TABLE_NAME = 'subscriptions'; +export const SUBSCRIPTIONS_TABLE = 'subscriptions'; export default class Subscription extends Model { - static table = TABLE_NAME; + static table = SUBSCRIPTIONS_TABLE; static associations = { messages: { type: 'has_many', foreignKey: 'rid' }, diff --git a/app/lib/database/model/Thread.js b/app/lib/database/model/Thread.js index 5d1246af8..1224554b6 100644 --- a/app/lib/database/model/Thread.js +++ b/app/lib/database/model/Thread.js @@ -3,10 +3,10 @@ import { date, field, json, relation } from '@nozbe/watermelondb/decorators'; import { sanitizer } from '../utils'; -export const TABLE_NAME = 'threads'; +export const THREADS_TABLE = 'threads'; export default class Thread extends Model { - static table = TABLE_NAME; + static table = THREADS_TABLE; static associations = { subscriptions: { type: 'belongs_to', key: 'rid' } diff --git a/app/lib/database/model/ThreadMessage.js b/app/lib/database/model/ThreadMessage.js index 27ea0e850..bc5502fd2 100644 --- a/app/lib/database/model/ThreadMessage.js +++ b/app/lib/database/model/ThreadMessage.js @@ -3,10 +3,10 @@ import { date, field, json, relation } from '@nozbe/watermelondb/decorators'; import { sanitizer } from '../utils'; -export const TABLE_NAME = 'thread_messages'; +export const THREAD_MESSAGES_TABLE = 'thread_messages'; export default class ThreadMessage extends Model { - static table = TABLE_NAME; + static table = THREAD_MESSAGES_TABLE; static associations = { subscriptions: { type: 'belongs_to', key: 'subscription_id' } diff --git a/app/lib/database/model/Upload.js b/app/lib/database/model/Upload.js index 810fcd5b7..d03a87729 100644 --- a/app/lib/database/model/Upload.js +++ b/app/lib/database/model/Upload.js @@ -1,8 +1,10 @@ import { Model } from '@nozbe/watermelondb'; import { field, relation } from '@nozbe/watermelondb/decorators'; +export const UPLOADS_TABLE = 'uploads'; + export default class Upload extends Model { - static table = 'uploads'; + static table = UPLOADS_TABLE; static associations = { subscriptions: { type: 'belongs_to', key: 'rid' } diff --git a/app/lib/database/model/User.js b/app/lib/database/model/User.js index 9bc1f2008..23978d1ca 100644 --- a/app/lib/database/model/User.js +++ b/app/lib/database/model/User.js @@ -3,8 +3,10 @@ import { field, json } from '@nozbe/watermelondb/decorators'; import { sanitizer } from '../utils'; +export const USERS_TABLE = 'users'; + export default class User extends Model { - static table = 'users'; + static table = USERS_TABLE; @field('_id') _id; diff --git a/app/lib/database/model/index.ts b/app/lib/database/model/index.ts new file mode 100644 index 000000000..064204244 --- /dev/null +++ b/app/lib/database/model/index.ts @@ -0,0 +1,16 @@ +export * from './CustomEmoji'; +export * from './FrequentlyUsedEmoji'; +export * from './Message'; +export * from './Permission'; +export * from './Role'; +export * from './Room'; +export * from './Setting'; +export * from './SlashCommand'; +export * from './Subscription'; +export * from './Thread'; +export * from './ThreadMessage'; +export * from './Upload'; +export * from './User'; +export * from './ServersHistory'; +export * from './servers/Server'; +export * from './servers/User'; diff --git a/app/lib/database/model/servers/Server.js b/app/lib/database/model/servers/Server.js index 0bff69ffe..e0098075c 100644 --- a/app/lib/database/model/servers/Server.js +++ b/app/lib/database/model/servers/Server.js @@ -1,8 +1,10 @@ import { Model } from '@nozbe/watermelondb'; import { date, field } from '@nozbe/watermelondb/decorators'; +export const SERVERS_TABLE = 'servers'; + export default class Server extends Model { - static table = 'servers'; + static table = SERVERS_TABLE; @field('name') name; diff --git a/app/lib/database/model/servers/User.js b/app/lib/database/model/servers/User.js index 30bd5f57d..5d3438237 100644 --- a/app/lib/database/model/servers/User.js +++ b/app/lib/database/model/servers/User.js @@ -3,8 +3,10 @@ import { field, json } from '@nozbe/watermelondb/decorators'; import { sanitizer } from '../../utils'; +export const LOGGED_USERS_TABLE = 'users'; + export default class User extends Model { - static table = 'users'; + static table = LOGGED_USERS_TABLE; @field('token') token; diff --git a/app/lib/database/services/Message.js b/app/lib/database/services/Message.js index 594513dec..562bf589d 100644 --- a/app/lib/database/services/Message.js +++ b/app/lib/database/services/Message.js @@ -1,7 +1,7 @@ import database from '..'; -import { TABLE_NAME } from '../model/Message'; +import { MESSAGES_TABLE } from '../model/Message'; -const getCollection = db => db.get(TABLE_NAME); +const getCollection = db => db.get(MESSAGES_TABLE); export const getMessageById = async messageId => { const db = database.active; diff --git a/app/lib/database/services/Subscription.js b/app/lib/database/services/Subscription.js index 68bf8ac96..19be6d58f 100644 --- a/app/lib/database/services/Subscription.js +++ b/app/lib/database/services/Subscription.js @@ -1,7 +1,7 @@ import database from '..'; -import { TABLE_NAME } from '../model/Subscription'; +import { SUBSCRIPTIONS_TABLE } from '../model/Subscription'; -const getCollection = db => db.get(TABLE_NAME); +const getCollection = db => db.get(SUBSCRIPTIONS_TABLE); export const getSubscriptionByRoomId = async rid => { const db = database.active; diff --git a/app/lib/database/services/Thread.js b/app/lib/database/services/Thread.js index 9b362dcb1..9d90dc00d 100644 --- a/app/lib/database/services/Thread.js +++ b/app/lib/database/services/Thread.js @@ -1,7 +1,7 @@ import database from '..'; -import { TABLE_NAME } from '../model/Thread'; +import { THREADS_TABLE } from '../model/Thread'; -const getCollection = db => db.get(TABLE_NAME); +const getCollection = db => db.get(THREADS_TABLE); export const getThreadById = async tmid => { const db = database.active; diff --git a/app/lib/database/services/ThreadMessage.js b/app/lib/database/services/ThreadMessage.js index e9509774e..7ac937b2a 100644 --- a/app/lib/database/services/ThreadMessage.js +++ b/app/lib/database/services/ThreadMessage.js @@ -1,7 +1,7 @@ import database from '..'; -import { TABLE_NAME } from '../model/ThreadMessage'; +import { THREAD_MESSAGES_TABLE } from '../model/ThreadMessage'; -const getCollection = db => db.get(TABLE_NAME); +const getCollection = db => db.get(THREAD_MESSAGES_TABLE); export const getThreadMessageById = async messageId => { const db = database.active; diff --git a/app/lib/methods/getPermissions.js b/app/lib/methods/getPermissions.js index b680a9196..889aeaf16 100644 --- a/app/lib/methods/getPermissions.js +++ b/app/lib/methods/getPermissions.js @@ -61,7 +61,7 @@ const PERMISSIONS = [ export async function setPermissions() { const db = database.active; - const permissionsCollection = db.collections.get('permissions'); + const permissionsCollection = db.get('permissions'); const allPermissions = await permissionsCollection.query(Q.where('id', Q.oneOf(PERMISSIONS))).fetch(); const parsed = allPermissions.reduce((acc, item) => ({ ...acc, [item.id]: item.roles }), {}); diff --git a/app/lib/methods/getRoles.js b/app/lib/methods/getRoles.js index d8beb5785..77bc5cf83 100644 --- a/app/lib/methods/getRoles.js +++ b/app/lib/methods/getRoles.js @@ -8,7 +8,7 @@ import protectedFunction from './helpers/protectedFunction'; export async function setRoles() { const db = database.active; - const rolesCollection = db.collections.get('roles'); + const rolesCollection = db.get('roles'); const allRoles = await rolesCollection.query().fetch(); const parsed = allRoles.reduce((acc, item) => ({ ...acc, [item.id]: item.description || item.id }), {}); reduxStore.dispatch(setRolesAction(parsed)); diff --git a/app/lib/rocketchat.js b/app/lib/rocketchat.js index ac923025f..1cb627a41 100644 --- a/app/lib/rocketchat.js +++ b/app/lib/rocketchat.js @@ -811,6 +811,16 @@ const RocketChat = { encrypted }); }, + getDiscussions({ roomId, offset, count, text }) { + const params = { + roomId, + offset, + count, + ...(text && { text }) + }; + // RC 2.4.0 + return this.sdk.get('chat.getDiscussions', params); + }, createTeam({ name, users, type, readOnly, broadcast, encrypted }) { const params = { name, diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx index fce844a4a..ec3ae318e 100644 --- a/app/stacks/InsideStack.tsx +++ b/app/stacks/InsideStack.tsx @@ -66,6 +66,7 @@ import QueueListView from '../ee/omnichannel/views/QueueListView'; import AddChannelTeamView from '../views/AddChannelTeamView'; import AddExistingChannelView from '../views/AddExistingChannelView'; import SelectListView from '../views/SelectListView'; +import DiscussionsView from '../views/DiscussionsView'; import { AdminPanelStackParamList, ChatsStackParamList, @@ -92,7 +93,8 @@ const ChatsStackNavigator = () => { - + + { + { - rid: string; - name: string; - t: SubscriptionType; + search?: boolean; // comes from spotlight + username?: string; } export const goRoom = async ({ @@ -46,7 +45,7 @@ export const goRoom = async ({ navigationMethod?: any; jumpToMessageId?: string; }): Promise => { - if (item.t === 'd' && item.search) { + if (item.t === SubscriptionType.DIRECT && item?.search) { // if user is using the search we need first to join/create room try { const { username } = item; @@ -55,7 +54,7 @@ export const goRoom = async ({ return navigate({ item: { rid: result.room._id, - name: username!, + name: username, t: SubscriptionType.DIRECT }, isMasterDetail, diff --git a/app/views/AddExistingChannelView.tsx b/app/views/AddExistingChannelView.tsx index 98fe4d2ba..2a36734eb 100644 --- a/app/views/AddExistingChannelView.tsx +++ b/app/views/AddExistingChannelView.tsx @@ -22,11 +22,11 @@ import { goRoom } from '../utils/goRoom'; import { showErrorAlert } from '../utils/info'; import debounce from '../utils/debounce'; import { ChatsStackParamList } from '../stacks/types'; -import { IRoom } from '../definitions/IRoom'; +import { TSubscriptionModel, SubscriptionType } from '../definitions'; interface IAddExistingChannelViewState { - search: Array; - channels: Array; + search: TSubscriptionModel[]; + channels: TSubscriptionModel[]; selected: string[]; loading: boolean; } @@ -83,7 +83,7 @@ class AddExistingChannelView extends React.Component) => { + const asyncFilter = async (channelsArray: TSubscriptionModel[]) => { const results = await Promise.all( - channelsArray.map(async (channel: IRoom) => { + channelsArray.map(async channel => { if (channel.prid) { return false; } @@ -173,11 +173,10 @@ class AddExistingChannelView extends React.Component { + renderItem = ({ item }: { item: TSubscriptionModel }) => { const isChecked = this.isChecked(item.rid); // TODO: reuse logic inside RoomTypeIcon - const icon = item.t === 'p' && !item.teamId ? 'channel-private' : 'channel-public'; + const icon = item.t === SubscriptionType.DIRECT && !item?.teamId ? 'channel-private' : 'channel-public'; return ( { - const [channels, setChannels] = useState([]); + const [channels, setChannels] = useState([]); const getChannels = debounce(async (keyword = '') => { try { diff --git a/app/views/CreateDiscussionView/SelectUsers.tsx b/app/views/CreateDiscussionView/SelectUsers.tsx index d63c5ae6a..6ef6e25df 100644 --- a/app/views/CreateDiscussionView/SelectUsers.tsx +++ b/app/views/CreateDiscussionView/SelectUsers.tsx @@ -38,11 +38,11 @@ const SelectUsers = ({ const res = await RocketChat.search({ text: keyword, filterRooms: false }); let items = [ ...users.filter((u: IUser) => selected.includes(u.name)), - ...res.filter((r: IUser) => !users.find((u: IUser) => u.name === r.name)) + ...res.filter(r => !users.find((u: IUser) => u.name === r.name)) ]; const records = await usersCollection.query(Q.where('username', Q.oneOf(items.map(u => u.name)))).fetch(); items = items.map(item => { - const index = records.findIndex((r: IUser) => r.username === item.name); + const index = records.findIndex(r => r.username === item.name); if (index > -1) { const record = records[index]; return { diff --git a/app/views/DiscussionsView/DiscussionDetails.tsx b/app/views/DiscussionsView/DiscussionDetails.tsx new file mode 100644 index 000000000..45635558f --- /dev/null +++ b/app/views/DiscussionsView/DiscussionDetails.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; + +import { TThreadModel } from '../../definitions/IThread'; +import { CustomIcon } from '../../lib/Icons'; +import { themes } from '../../constants/colors'; +import sharedStyles from '../Styles'; +import { useTheme } from '../../theme'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: 8, + flexDirection: 'row', + alignItems: 'center' + }, + detailsContainer: { + flex: 1, + flexDirection: 'row' + }, + detailContainer: { + flexDirection: 'row', + alignItems: 'center', + marginRight: 8 + }, + detailText: { + fontSize: 10, + marginLeft: 2, + ...sharedStyles.textSemibold + } +}); + +interface IDiscussionDetails { + item: TThreadModel; + date: string; +} + +const DiscussionDetails = ({ item, date }: IDiscussionDetails): JSX.Element => { + const { theme } = useTheme(); + let { dcount } = item; + + if (dcount && dcount >= 1000) { + dcount = '+999'; + } + + return ( + + + + + + {dcount} + + + + + + + {date} + + + + + ); +}; + +export default DiscussionDetails; diff --git a/app/views/DiscussionsView/Item.stories.js b/app/views/DiscussionsView/Item.stories.js new file mode 100644 index 000000000..f909600db --- /dev/null +++ b/app/views/DiscussionsView/Item.stories.js @@ -0,0 +1,96 @@ +/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */ +import React from 'react'; +import { storiesOf } from '@storybook/react-native'; +import { ScrollView } from 'react-native'; +import { Provider } from 'react-redux'; + +import * as List from '../../containers/List'; +import { themes } from '../../constants/colors'; +import { ThemeContext } from '../../theme'; +import { store } from '../../../storybook/stories'; +import Item from './Item'; + +const author = { + _id: 'userid', + username: 'rocket.cat', + name: 'Rocket Cat' +}; +const baseUrl = 'https://open.rocket.chat'; +const date = new Date(2020, 10, 10, 10); +const longText = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'; +const defaultItem = { + msg: 'Message content', + tcount: 1, + replies: [1], + ts: date, + tlm: date, + u: author, + attachments: [] +}; + +const BaseItem = ({ item, ...props }) => ( + alert('pressed')} + {...props} + /> +); + +const listDecorator = story => ( + + + {story()} + + +); + +const stories = storiesOf('Discussions.Item', module) + .addDecorator(listDecorator) + .addDecorator(story => {story()}); + +stories.add('content', () => ( + <> + + + + + + + + + + +)); + +const ThemeStory = ({ theme }) => ( + + + +); + +stories.add('themes', () => ( + <> + + + + +)); diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx new file mode 100644 index 000000000..c88395823 --- /dev/null +++ b/app/views/DiscussionsView/Item.tsx @@ -0,0 +1,105 @@ +import React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import Touchable from 'react-native-platform-touchable'; +import moment from 'moment'; + +import { useTheme } from '../../theme'; +import Avatar from '../../containers/Avatar'; +import sharedStyles from '../Styles'; +import { themes } from '../../constants/colors'; +import Markdown from '../../containers/markdown'; +import { formatDateThreads, makeThreadName } from '../../utils/room'; +import DiscussionDetails from './DiscussionDetails'; +import { TThreadModel } from '../../definitions/IThread'; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + padding: 16 + }, + contentContainer: { + flexDirection: 'column', + flex: 1 + }, + titleContainer: { + flexDirection: 'row', + marginBottom: 2, + justifyContent: 'space-between' + }, + title: { + flexShrink: 1, + fontSize: 18, + ...sharedStyles.textMedium + }, + time: { + fontSize: 14, + marginLeft: 4, + ...sharedStyles.textRegular + }, + avatar: { + marginRight: 8 + }, + messageContainer: { + flexDirection: 'row' + }, + markdown: { + flex: 1 + } +}); + +interface IItem { + item: TThreadModel; + baseUrl: string; + onPress: { + (...args: any[]): void; + stop(): void; + }; +} + +const Item = ({ item, baseUrl, onPress }: IItem): JSX.Element => { + const { theme } = useTheme(); + const username = item?.u?.username; + let messageTime = ''; + let messageDate = ''; + + if (item?.ts) { + messageTime = moment(item.ts).format('LT'); + messageDate = formatDateThreads(item.ts); + } + + return ( + onPress(item)} + testID={`discussions-view-${item.msg}`} + style={{ backgroundColor: themes[theme].backgroundColor }}> + + + + + + {username} + + {messageTime ? {messageTime} : null} + + + {username ? ( + /* @ts-ignore */ + + ) : null} + + {messageDate ? : null} + + + + ); +}; + +export default Item; diff --git a/app/views/DiscussionsView/__snapshots__/Item.stories.storyshot b/app/views/DiscussionsView/__snapshots__/Item.stories.storyshot new file mode 100644 index 000000000..d871ffbeb --- /dev/null +++ b/app/views/DiscussionsView/__snapshots__/Item.stories.storyshot @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Discussions.Item content 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"discussions-view-Message content\\",\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginRight\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"column\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"marginBottom\\":2,\\"justifyContent\\":\\"space-between\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":18,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message content\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},{\\"flex\\":1}],\\"numberOfLines\\":2},\\"children\\":[\\"Message content\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginTop\\":8,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"November 10, 2020\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"discussions-view-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\",\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginRight\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"column\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"marginBottom\\":2,\\"justifyContent\\":\\"space-between\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":18,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},{\\"flex\\":1}],\\"numberOfLines\\":2},\\"children\\":[\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginTop\\":8,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"November 10, 2020\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"discussions-view-Message content\\",\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginRight\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"column\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"marginBottom\\":2,\\"justifyContent\\":\\"space-between\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":18,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message content\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},{\\"flex\\":1}],\\"numberOfLines\\":2},\\"children\\":[\\"Message content\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginTop\\":8,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"+999\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"November 10, 2020\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"discussions-view-\\",\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginRight\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"column\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"marginBottom\\":2,\\"justifyContent\\":\\"space-between\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":18,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Attachment title\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},{\\"flex\\":1}],\\"numberOfLines\\":2},\\"children\\":[\\"Attachment title\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginTop\\":8,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"November 10, 2020\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"discussions-view-Message content\\",\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginRight\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"column\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"marginBottom\\":2,\\"justifyContent\\":\\"space-between\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":18,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message content\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},{\\"flex\\":1}],\\"numberOfLines\\":2},\\"children\\":[\\"Message content\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginTop\\":8,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"November 10, 2020\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]}]}"`; + +exports[`Storyshots Discussions.Item themes 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"discussions-view-Message content\\",\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginRight\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"column\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"marginBottom\\":2,\\"justifyContent\\":\\"space-between\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":18,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message content\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},{\\"flex\\":1}],\\"numberOfLines\\":2},\\"children\\":[\\"Message content\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginTop\\":8,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"November 10, 2020\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"discussions-view-Message content\\",\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":\\"#030b1b\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginRight\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"column\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"marginBottom\\":2,\\"justifyContent\\":\\"space-between\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":18,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9297a2\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message content\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#cbced1\\"},{\\"flex\\":1}],\\"numberOfLines\\":2},\\"children\\":[\\"Message content\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginTop\\":8,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9297a2\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9297a2\\"}],\\"numberOfLines\\":1},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#9297a2\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#9297a2\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"November 10, 2020\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"discussions-view-Message content\\",\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":\\"#000000\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginRight\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"column\\",\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"marginBottom\\":2,\\"justifyContent\\":\\"space-between\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":18,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#b2b8c6\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message content\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#cbced1\\"},{\\"flex\\":1}],\\"numberOfLines\\":2},\\"children\\":[\\"Message content\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginTop\\":8,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#b2b8c6\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#b2b8c6\\"}],\\"numberOfLines\\":1},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#b2b8c6\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":10,\\"marginLeft\\":2,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#b2b8c6\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"November 10, 2020\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]}]}"`; diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx new file mode 100644 index 000000000..01282095b --- /dev/null +++ b/app/views/DiscussionsView/index.tsx @@ -0,0 +1,208 @@ +import React, { useEffect, useLayoutEffect, useState } from 'react'; +import { FlatList, StyleSheet } from 'react-native'; +import { useSelector } from 'react-redux'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; +import { RouteProp } from '@react-navigation/core'; + +import { IApplicationState } from '../../definitions'; +import { ChatsStackParamList } from '../../stacks/types'; +import ActivityIndicator from '../../containers/ActivityIndicator'; +import I18n from '../../i18n'; +import StatusBar from '../../containers/StatusBar'; +import log from '../../utils/log'; +import debounce from '../../utils/debounce'; +import { themes } from '../../constants/colors'; +import SafeAreaView from '../../containers/SafeAreaView'; +import * as HeaderButton from '../../containers/HeaderButton'; +import * as List from '../../containers/List'; +import BackgroundContainer from '../../containers/BackgroundContainer'; +import { isIOS } from '../../utils/deviceInfo'; +import { getHeaderTitlePosition } from '../../containers/Header'; +import { useTheme } from '../../theme'; +import RocketChat from '../../lib/rocketchat'; +import SearchHeader from '../../containers/SearchHeader'; +import { TThreadModel } from '../../definitions/IThread'; +import Item from './Item'; + +const API_FETCH_COUNT = 50; + +const styles = StyleSheet.create({ + contentContainer: { + marginBottom: 30 + } +}); + +interface IDiscussionsViewProps { + navigation: StackNavigationProp; + route: RouteProp; + item: TThreadModel; +} + +const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Element => { + const rid = route.params?.rid; + const t = route.params?.t; + + const baseUrl = useSelector((state: IApplicationState) => state.server?.server); + const isMasterDetail = useSelector((state: IApplicationState) => state.app?.isMasterDetail); + + const [loading, setLoading] = useState(false); + const [discussions, setDiscussions] = useState([]); + const [search, setSearch] = useState([]); + const [isSearching, setIsSearching] = useState(false); + const [total, setTotal] = useState(0); + const [searchTotal, setSearchTotal] = useState(0); + + const { theme } = useTheme(); + const insets = useSafeAreaInsets(); + + const load = async (text = '') => { + if (loading) { + return; + } + + setLoading(true); + try { + const result = await RocketChat.getDiscussions({ + roomId: rid, + offset: isSearching ? search.length : discussions.length, + count: API_FETCH_COUNT, + text + }); + + if (result.success) { + if (isSearching) { + setSearch(result.messages); + setSearchTotal(result.total); + } else { + setDiscussions(result.messages); + setTotal(result.total); + } + } + setLoading(false); + } catch (e) { + log(e); + setLoading(false); + } + }; + + const onSearchChangeText = debounce(async (text: string) => { + setIsSearching(true); + await load(text); + }, 300); + + const onCancelSearchPress = () => { + setIsSearching(false); + setSearch([]); + setSearchTotal(0); + }; + + const onSearchPress = () => { + setIsSearching(true); + }; + + const setHeader = () => { + let options: Partial; + if (isSearching) { + const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 1 }); + options = { + headerTitleAlign: 'left', + headerLeft: () => ( + + + + ), + headerTitle: () => ( + + ), + headerTitleContainerStyle: { + left: headerTitlePosition.left, + right: headerTitlePosition.right + }, + headerRight: () => null + }; + return options; + } + + options = { + headerLeft: () => ( + navigation.pop()} tintColor={themes[theme].headerTintColor} /> + ), + headerTitleAlign: 'center', + headerTitle: I18n.t('Discussions'), + headerTitleContainerStyle: { + left: null, + right: null + }, + headerRight: () => ( + + + + ) + }; + + if (isMasterDetail) { + options.headerLeft = () => ; + } + return options; + }; + + useEffect(() => { + load(); + }, []); + + useLayoutEffect(() => { + const options = setHeader(); + navigation.setOptions(options); + }, [navigation, isSearching]); + + const onDiscussionPress = debounce( + (item: TThreadModel) => { + if (item.drid && item.t) { + navigation.push('RoomView', { + rid: item.drid, + prid: item.rid, + name: item.msg, + t + }); + } + }, + 1000, + true + ); + + const renderItem = ({ item }: { item: TThreadModel }) => ( + + ); + + if (!discussions?.length) { + return ; + } + + return ( + + + item.msg} + style={{ backgroundColor: themes[theme].backgroundColor }} + contentContainerStyle={styles.contentContainer} + onEndReachedThreshold={0.5} + removeClippedSubviews={isIOS} + onEndReached={() => (isSearching ? searchTotal : total) > API_FETCH_COUNT ?? load()} + ItemSeparatorComponent={List.Separator} + ListFooterComponent={loading ? : null} + scrollIndicatorInsets={{ right: 1 }} + /> + + ); +}; + +export default DiscussionsView; diff --git a/app/views/NewMessageView.tsx b/app/views/NewMessageView.tsx index cd1822513..25df26684 100644 --- a/app/views/NewMessageView.tsx +++ b/app/views/NewMessageView.tsx @@ -24,6 +24,7 @@ import { createChannelRequest } from '../actions/createChannel'; import { goRoom } from '../utils/goRoom'; import SafeAreaView from '../containers/SafeAreaView'; import { compareServerVersion, methods } from '../lib/utils'; +import { TSubscriptionModel } from '../definitions'; import sharedStyles from './Styles'; const QUERY_SIZE = 50; @@ -68,9 +69,8 @@ interface ISearch { } interface INewMessageViewState { - search: ISearch[]; - // TODO: Refactor when migrate room - chats: any[]; + search: (ISearch | TSubscriptionModel)[]; + chats: TSubscriptionModel[]; permissions: boolean[]; } @@ -108,7 +108,7 @@ class NewMessageView extends React.Component { try { const db = database.active; - const chats = await db.collections + const chats = await db .get('subscriptions') .query(Q.where('t', 'd'), Q.experimentalTake(QUERY_SIZE), Q.experimentalSortBy('room_updated_at', Q.desc)) .fetch(); @@ -153,7 +153,7 @@ class NewMessageView extends React.Component { - const result = await RocketChat.search({ text, filterRooms: false }); + const result: ISearch[] | TSubscriptionModel[] = await RocketChat.search({ text, filterRooms: false }); this.setState({ search: result }); @@ -280,8 +280,7 @@ class NewMessageView extends React.Component { + renderItem = ({ item, index }: { item: ISearch | TSubscriptionModel; index: number }) => { const { search, chats } = this.state; const { theme } = this.props; @@ -295,10 +294,14 @@ class NewMessageView extends React.Component this.goRoom(item)} testID={`new-message-view-item-${item.name}`} style={style} diff --git a/app/views/NewServerView/ServerInput/Item.tsx b/app/views/NewServerView/ServerInput/Item.tsx index cc8a9e3a7..a73f455a0 100644 --- a/app/views/NewServerView/ServerInput/Item.tsx +++ b/app/views/NewServerView/ServerInput/Item.tsx @@ -6,7 +6,7 @@ import { themes } from '../../../constants/colors'; import { CustomIcon } from '../../../lib/Icons'; import sharedStyles from '../../Styles'; import Touch from '../../../utils/touch'; -import { TServerHistory } from '../../../definitions/IServerHistory'; +import { TServerHistoryModel } from '../../../definitions/IServerHistory'; const styles = StyleSheet.create({ container: { @@ -28,10 +28,10 @@ const styles = StyleSheet.create({ }); interface IItem { - item: TServerHistory; + item: TServerHistoryModel; theme: string; onPress(url: string): void; - onDelete(item: TServerHistory): void; + onDelete(item: TServerHistoryModel): void; } const Item = ({ item, theme, onPress, onDelete }: IItem): JSX.Element => ( diff --git a/app/views/NewServerView/ServerInput/index.tsx b/app/views/NewServerView/ServerInput/index.tsx index e2b14fd69..7868754f3 100644 --- a/app/views/NewServerView/ServerInput/index.tsx +++ b/app/views/NewServerView/ServerInput/index.tsx @@ -5,7 +5,7 @@ import TextInput from '../../../containers/TextInput'; import * as List from '../../../containers/List'; import { themes } from '../../../constants/colors'; import I18n from '../../../i18n'; -import { TServerHistory } from '../../../definitions/IServerHistory'; +import { TServerHistoryModel } from '../../../definitions/IServerHistory'; import Item from './Item'; const styles = StyleSheet.create({ @@ -33,8 +33,8 @@ interface IServerInput extends TextInputProps { theme: string; serversHistory: any[]; onSubmit(): void; - onDelete(item: TServerHistory): void; - onPressServerHistory(serverHistory: TServerHistory): void; + onDelete(item: TServerHistoryModel): void; + onPressServerHistory(serverHistory: TServerHistoryModel): void; } const ServerInput = ({ diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx index 191895ceb..06d562803 100644 --- a/app/views/NewServerView/index.tsx +++ b/app/views/NewServerView/index.tsx @@ -14,7 +14,7 @@ import Button from '../../containers/Button'; import FormContainer, { FormContainerInner } from '../../containers/FormContainer'; import * as HeaderButton from '../../containers/HeaderButton'; import OrSeparator from '../../containers/OrSeparator'; -import { IBaseScreen, TServerHistory } from '../../definitions'; +import { IBaseScreen, TServerHistoryModel } from '../../definitions'; import { withDimensions } from '../../dimensions'; import I18n from '../../i18n'; import database from '../../lib/database'; @@ -77,7 +77,7 @@ interface INewServerViewState { text: string; connectingOpen: boolean; certificate: any; - serversHistory: TServerHistory[]; + serversHistory: TServerHistoryModel[]; } interface ISubmitParams { @@ -153,7 +153,7 @@ class NewServerView extends React.Component { + onPressServerHistory = (serverHistory: TServerHistoryModel) => { this.setState({ text: serverHistory.url }, () => this.submit({ fromServerHistory: true, username: serverHistory?.username })); }; @@ -269,14 +269,14 @@ class NewServerView extends React.Component { + deleteServerHistory = async (item: TServerHistoryModel) => { const db = database.servers; try { await db.write(async () => { await item.destroyPermanently(); }); this.setState((prevstate: INewServerViewState) => ({ - serversHistory: prevstate.serversHistory.filter((server: TServerHistory) => server.id !== item.id) + serversHistory: prevstate.serversHistory.filter(server => server.id !== item.id) })); } catch { // Nothing diff --git a/app/views/NotificationPreferencesView/index.tsx b/app/views/NotificationPreferencesView/index.tsx index 5e33cec49..2c0c6295f 100644 --- a/app/views/NotificationPreferencesView/index.tsx +++ b/app/views/NotificationPreferencesView/index.tsx @@ -80,7 +80,7 @@ class NotificationPreferencesView extends React.Component { + await db.write(async () => { await room.update( protectedFunction((r: any) => { r[key] = value; @@ -97,7 +97,7 @@ class NotificationPreferencesView extends React.Component { + await db.write(async () => { await room.update( protectedFunction((r: any) => { r[key] = room[key]; diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js index cb034bf3d..7721936a6 100644 --- a/app/views/RoomActionsView/index.js +++ b/app/views/RoomActionsView/index.js @@ -643,7 +643,7 @@ class RoomActionsView extends React.Component { const { addTeamChannelPermission, createTeamPermission } = this.props; const QUERY_SIZE = 50; const db = database.active; - const teams = await db.collections + const teams = await db .get('subscriptions') .query( Q.where('team_main', true), @@ -941,7 +941,7 @@ class RoomActionsView extends React.Component { canReturnQueue, canViewCannedResponse } = this.state; - const { rid, t } = room; + const { rid, t, prid } = room; const isGroupChat = RocketChat.isGroupChat(room); return ( @@ -1009,6 +1009,27 @@ class RoomActionsView extends React.Component { ) : null} + {['c', 'p', 'd'].includes(t) && !prid ? ( + <> + + this.onPressTouchable({ + route: 'DiscussionsView', + params: { + rid, + t + } + }) + } + testID='room-actions-discussions' + left={() => } + showActionIndicator + /> + + + ) : null} + {['c', 'p', 'd'].includes(t) ? ( <> { if (this.mounted) { diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 241cd1902..2517cc175 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -459,7 +459,7 @@ class RoomView extends React.Component { } }); } else { - navigation.navigate('RoomActionsView', { + navigation.push('RoomActionsView', { rid: this.rid, t: this.t, room, @@ -690,7 +690,7 @@ class RoomView extends React.Component { // eslint-disable-next-line react/sort-comp updateUnreadCount = async () => { const db = database.active; - const observable = await db.collections + const observable = await db .get('subscriptions') .query(Q.where('archived', false), Q.where('open', true), Q.where('rid', Q.notEq(this.rid))) .observeWithColumns(['unread']); diff --git a/app/views/RoomsListView/ServerDropdown.js b/app/views/RoomsListView/ServerDropdown.js index 8dd42ee92..94232accc 100644 --- a/app/views/RoomsListView/ServerDropdown.js +++ b/app/views/RoomsListView/ServerDropdown.js @@ -47,7 +47,7 @@ class ServerDropdown extends Component { async componentDidMount() { const serversDB = database.servers; - const observable = await serversDB.collections.get('servers').query().observeWithColumns(['name']); + const observable = await serversDB.get('servers').query().observeWithColumns(['name']); this.subscription = observable.subscribe(data => { this.setState({ servers: data }); diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index 1ee94cee6..45065b907 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -450,7 +450,7 @@ class RoomsListView extends React.Component { // When we're grouping by something if (this.isGrouping) { - observable = await db.collections + observable = await db .get('subscriptions') .query(...defaultWhereClause) .observeWithColumns(['alert']); @@ -458,7 +458,7 @@ class RoomsListView extends React.Component { // When we're NOT grouping } else { this.count += QUERY_SIZE; - observable = await db.collections + observable = await db .get('subscriptions') .query(...defaultWhereClause, Q.experimentalSkip(0), Q.experimentalTake(this.count)) .observe(); diff --git a/app/views/ScreenLockConfigView.tsx b/app/views/ScreenLockConfigView.tsx index 76f0d0957..626f88cab 100644 --- a/app/views/ScreenLockConfigView.tsx +++ b/app/views/ScreenLockConfigView.tsx @@ -92,7 +92,7 @@ class ScreenLockConfigView extends React.Component { this.observable = this.serverRecord?.observe()?.subscribe(({ biometry }) => { - this.setState({ biometry }); + this.setState({ biometry: !!biometry }); }); }; diff --git a/app/views/SelectedUsersView.tsx b/app/views/SelectedUsersView.tsx index 85311154e..531b96987 100644 --- a/app/views/SelectedUsersView.tsx +++ b/app/views/SelectedUsersView.tsx @@ -109,10 +109,7 @@ class SelectedUsersView extends React.Component { try { const db = database.active; - const observable = await db.collections - .get('subscriptions') - .query(Q.where('t', 'd')) - .observeWithColumns(['room_updated_at']); + const observable = await db.get('subscriptions').query(Q.where('t', 'd')).observeWithColumns(['room_updated_at']); // TODO: Refactor when migrate room this.querySubscription = observable.subscribe((data: any) => { @@ -129,7 +126,9 @@ class SelectedUsersView extends React.Component { - const result = await RocketChat.search({ text, filterRooms: false }); + // TODO: When migrate rocketchat.js pass the param IUser to there and the return should be + // IUser | TSubscriptionModel, this because we do a local search too + const result = (await RocketChat.search({ text, filterRooms: false })) as ISelectedUser[]; this.setState({ search: result }); diff --git a/app/views/TeamChannelsView.tsx b/app/views/TeamChannelsView.tsx index 160c28ff5..1c901eb1b 100644 --- a/app/views/TeamChannelsView.tsx +++ b/app/views/TeamChannelsView.tsx @@ -218,7 +218,9 @@ class TeamChannelsView extends React.Component ), - headerTitle: () => , + headerTitle: () => ( + + ), headerTitleContainerStyle: { left: headerTitlePosition.left, right: headerTitlePosition.right diff --git a/app/views/ThreadMessagesView/Item.stories.js b/app/views/ThreadMessagesView/Item.stories.js index d829d92d0..b213f4d7c 100644 --- a/app/views/ThreadMessagesView/Item.stories.js +++ b/app/views/ThreadMessagesView/Item.stories.js @@ -2,12 +2,12 @@ import React from 'react'; import { storiesOf } from '@storybook/react-native'; import { ScrollView } from 'react-native'; -import { combineReducers, createStore } from 'redux'; import { Provider } from 'react-redux'; import * as List from '../../containers/List'; import { themes } from '../../constants/colors'; import { ThemeContext } from '../../theme'; +import { store } from '../../../storybook/stories'; import Item from './Item'; const author = { @@ -49,28 +49,6 @@ const listDecorator = story => ( ); -const reducers = combineReducers({ - login: () => ({ - user: { - id: 'abc', - username: 'rocket.cat', - name: 'Rocket Cat' - } - }), - server: () => ({ - server: 'https://open.rocket.chat', - version: '3.7.0' - }), - share: () => ({ - server: 'https://open.rocket.chat', - version: '3.7.0' - }), - settings: () => ({ - blockUnauthenticatedAccess: false - }) -}); -const store = createStore(reducers); - const stories = storiesOf('Thread Messages.Item', module) .addDecorator(listDecorator) .addDecorator(story => {story()}); diff --git a/app/views/ThreadMessagesView/Item.tsx b/app/views/ThreadMessagesView/Item.tsx index 688e95229..3cd556ed1 100644 --- a/app/views/ThreadMessagesView/Item.tsx +++ b/app/views/ThreadMessagesView/Item.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import Touchable from 'react-native-platform-touchable'; -import { withTheme } from '../../theme'; +import { useTheme } from '../../theme'; import Avatar from '../../containers/Avatar'; import sharedStyles from '../Styles'; import { themes } from '../../constants/colors'; @@ -59,7 +59,6 @@ const styles = StyleSheet.create({ interface IItem { item: TThreadModel; baseUrl: string; - theme?: string; useRealName: boolean; user: any; badgeColor?: string; @@ -67,7 +66,8 @@ interface IItem { toggleFollowThread: (isFollowing: boolean, id: string) => void; } -const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, toggleFollowThread }: IItem) => { +const Item = ({ item, baseUrl, useRealName, user, badgeColor, onPress, toggleFollowThread }: IItem) => { + const { theme } = useTheme(); const username = (useRealName && item?.u?.name) || item?.u?.username; let time; if (item?.ts) { @@ -89,16 +89,18 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to {time} - + {makeThreadName(item) && username ? ( + /* @ts-ignore */ + + ) : null} {badgeColor ? : null} @@ -108,4 +110,4 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to ); }; -export default withTheme(Item); +export default Item; diff --git a/app/views/ThreadMessagesView/index.tsx b/app/views/ThreadMessagesView/index.tsx index 2b53159bf..adda3e803 100644 --- a/app/views/ThreadMessagesView/index.tsx +++ b/app/views/ThreadMessagesView/index.tsx @@ -7,7 +7,6 @@ import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context'; import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; import { RouteProp } from '@react-navigation/native'; import { Observable, Subscription } from 'rxjs'; -import Model from '@nozbe/watermelondb/Model'; import Database from '@nozbe/watermelondb/Database'; import ActivityIndicator from '../../containers/ActivityIndicator'; @@ -86,7 +85,7 @@ class ThreadMessagesView extends React.Component; + private messagesObservable?: Observable; constructor(props: IThreadMessagesViewProps) { super(props); @@ -144,7 +143,9 @@ class ThreadMessagesView extends React.Component ), - headerTitle: () => , + headerTitle: () => ( + + ), headerTitleContainerStyle: { left: headerTitlePosition.left, right: headerTitlePosition.right @@ -188,7 +189,7 @@ class ThreadMessagesView extends React.Component { this.setState({ subscription: data }); @@ -214,15 +215,15 @@ class ThreadMessagesView extends React.Component { + this.messagesSubscription = this.messagesObservable.subscribe(messages => { const { currentFilter } = this.state; - const displayingThreads = this.getFilteredThreads(messages, subscription!, currentFilter); + const displayingThreads = this.getFilteredThreads(messages, subscription, currentFilter); if (this.mounted) { this.setState({ messages, displayingThreads }); } else { @@ -419,14 +420,14 @@ class ThreadMessagesView extends React.Component { + getFilteredThreads = (messages: TThreadModel[], subscription?: TSubscriptionModel, currentFilter?: Filter): TThreadModel[] => { // const { currentFilter } = this.state; const { user } = this.props; if (currentFilter === Filter.Following) { - return messages?.filter((item: { replies: any[] }) => item?.replies?.find(u => u === user.id)); + return messages?.filter(item => item?.replies?.find(u => u === user.id)); } if (currentFilter === Filter.Unread) { - return messages?.filter((item: { id: string }) => subscription?.tunread?.includes(item?.id)); + return messages?.filter(item => subscription?.tunread?.includes(item?.id)); } return messages; }; diff --git a/e2e/tests/room/04-discussion.spec.js b/e2e/tests/room/04-discussion.spec.js index 80fbdb4d2..74956e8d1 100644 --- a/e2e/tests/room/04-discussion.spec.js +++ b/e2e/tests/room/04-discussion.spec.js @@ -107,7 +107,7 @@ describe('Discussion', () => { }); describe('Check RoomActionsView render', () => { - it('should navigete to RoomActionsView', async () => { + it('should navigate to RoomActionsView', async () => { await waitFor(element(by.id('room-header'))) .toBeVisible() .withTimeout(5000); @@ -173,4 +173,51 @@ describe('Discussion', () => { await expect(element(by.id('room-info-view-edit-button'))).toBeVisible(); }); }); + + describe('Open Discussion from DiscussionsView', () => { + const discussionName = `${data.random}message`; + it('should go back to main room', async () => { + await tapBack(); + await waitFor(element(by.id('room-actions-view'))) + .toBeVisible() + .withTimeout(5000); + await tapBack(); + await waitFor(element(by.id(`room-view-title-${discussionName}`))) + .toExist() + .withTimeout(5000); + await tapBack(); + await navigateToRoom(); + }); + + it('should navigate to DiscussionsView', async () => { + await waitFor(element(by.id(`room-view-title-${channel}`))) + .toExist() + .withTimeout(5000); + await waitFor(element(by.id('room-header'))) + .toBeVisible() + .withTimeout(5000); + await element(by.id('room-header')).tap(); + await waitFor(element(by.id('room-actions-discussions'))) + .toBeVisible() + .withTimeout(5000); + await element(by.id('room-actions-discussions')).tap(); + await waitFor(element(by.id('discussions-view'))) + .toBeVisible() + .withTimeout(5000); + }); + + it('should navigate to discussion', async () => { + const discussionName = `${data.random} Discussion NewMessageView`; + await waitFor(element(by.label(discussionName)).atIndex(0)) + .toExist() + .withTimeout(5000); + await element(by.label(discussionName)).atIndex(0).tap(); + await waitFor(element(by.id(`room-view-title-${discussionName}`))) + .toExist() + .withTimeout(5000); + await waitFor(element(by.id('messagebox'))) + .toBeVisible() + .withTimeout(60000); + }); + }); }); diff --git a/storybook/stories/__snapshots__/Message.storyshot b/storybook/stories/__snapshots__/Message.storyshot index b7fdc5e8d..be6309b02 100644 --- a/storybook/stories/__snapshots__/Message.storyshot +++ b/storybook/stories/__snapshots__/Message.storyshot @@ -68,7 +68,7 @@ exports[`Storyshots Message URL 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props exports[`Storyshots Message With alias 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Diego Mello\\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\" @\\",\\"diego.mello\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":0},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]],\\"numberOfLines\\":0},\\"children\\":[\\"Message\\"]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Diego Mello\\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\" @\\",\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":0},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]],\\"numberOfLines\\":0},\\"children\\":[\\"Message\\"]}]}]}]}]}]}]}]}]}]}"`; -exports[`Storyshots Message With audio 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":6},{\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":12,\\"right\\":12,\\"bottom\\":12,\\"left\\":12},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":36,\\"color\\":\\"#1d74f5\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]},{\\"type\\":\\"RNCSlider\\",\\"props\\":{\\"style\\":[{\\"height\\":40},{\\"flex\\":1}],\\"value\\":0,\\"maximumValue\\":0,\\"minimumValue\\":0,\\"animateTransitions\\":true,\\"animationConfig\\":{\\"duration\\":250,\\"delay\\":0},\\"thumbTintColor\\":false,\\"minimumTrackTintColor\\":\\"#1d74f5\\",\\"maximumTrackTintColor\\":\\"#9ca2a8\\",\\"thumbImage\\":{\\"uri\\":\\"audio_thumb\\",\\"scale\\":2},\\"disabled\\":false,\\"step\\":0,\\"inverted\\":false,\\"onRNCSliderSlidingStart\\":null,\\"onRNCSliderSlidingComplete\\":null,\\"enabled\\":true},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginHorizontal\\":12,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"00:00\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20},{}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":0},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"First message\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]],\\"numberOfLines\\":0},\\"children\\":[\\"First message\\"]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":6},{\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":12,\\"right\\":12,\\"bottom\\":12,\\"left\\":12},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":36,\\"color\\":\\"#1d74f5\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]},{\\"type\\":\\"RNCSlider\\",\\"props\\":{\\"style\\":[{\\"height\\":40},{\\"flex\\":1}],\\"value\\":0,\\"maximumValue\\":0,\\"minimumValue\\":0,\\"animateTransitions\\":true,\\"animationConfig\\":{\\"duration\\":250,\\"delay\\":0},\\"thumbTintColor\\":false,\\"minimumTrackTintColor\\":\\"#1d74f5\\",\\"maximumTrackTintColor\\":\\"#9ca2a8\\",\\"thumbImage\\":{\\"uri\\":\\"audio_thumb\\",\\"scale\\":2},\\"disabled\\":false,\\"step\\":0,\\"inverted\\":false,\\"onRNCSliderSlidingStart\\":null,\\"onRNCSliderSlidingComplete\\":null,\\"enabled\\":true},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginHorizontal\\":12,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"00:00\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":6},{\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":12,\\"right\\":12,\\"bottom\\":12,\\"left\\":12},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":36,\\"color\\":\\"#1d74f5\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]},{\\"type\\":\\"RNCSlider\\",\\"props\\":{\\"style\\":[{\\"height\\":40},{\\"flex\\":1}],\\"value\\":0,\\"maximumValue\\":0,\\"minimumValue\\":0,\\"animateTransitions\\":true,\\"animationConfig\\":{\\"duration\\":250,\\"delay\\":0},\\"thumbTintColor\\":false,\\"minimumTrackTintColor\\":\\"#1d74f5\\",\\"maximumTrackTintColor\\":\\"#9ca2a8\\",\\"thumbImage\\":{\\"uri\\":\\"audio_thumb\\",\\"scale\\":2},\\"disabled\\":false,\\"step\\":0,\\"inverted\\":false,\\"onRNCSliderSlidingStart\\":null,\\"onRNCSliderSlidingComplete\\":null,\\"enabled\\":true},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginHorizontal\\":12,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"00:00\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":6},{\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":12,\\"right\\":12,\\"bottom\\":12,\\"left\\":12},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":36,\\"color\\":\\"#1d74f5\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]},{\\"type\\":\\"RNCSlider\\",\\"props\\":{\\"style\\":[{\\"height\\":40},{\\"flex\\":1}],\\"value\\":0,\\"maximumValue\\":0,\\"minimumValue\\":0,\\"animateTransitions\\":true,\\"animationConfig\\":{\\"duration\\":250,\\"delay\\":0},\\"thumbTintColor\\":false,\\"minimumTrackTintColor\\":\\"#1d74f5\\",\\"maximumTrackTintColor\\":\\"#9ca2a8\\",\\"thumbImage\\":{\\"uri\\":\\"audio_thumb\\",\\"scale\\":2},\\"disabled\\":false,\\"step\\":0,\\"inverted\\":false,\\"onRNCSliderSlidingStart\\":null,\\"onRNCSliderSlidingComplete\\":null,\\"enabled\\":true},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginHorizontal\\":12,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"00:00\\"]}]}]}]}]}]}]}]}]}"`; +exports[`Storyshots Message With audio 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":6},{\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":12,\\"right\\":12,\\"bottom\\":12,\\"left\\":12},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"animating\\":true,\\"color\\":\\"#9ca2a8\\",\\"hidesWhenStopped\\":true,\\"size\\":\\"small\\",\\"style\\":[{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\"},{\\"marginHorizontal\\":8}]},\\"children\\":null}]},{\\"type\\":\\"RNCSlider\\",\\"props\\":{\\"style\\":[{\\"height\\":40},{\\"flex\\":1}],\\"value\\":0,\\"maximumValue\\":0,\\"minimumValue\\":0,\\"animateTransitions\\":true,\\"animationConfig\\":{\\"duration\\":250,\\"delay\\":0},\\"thumbTintColor\\":false,\\"minimumTrackTintColor\\":\\"#1d74f5\\",\\"maximumTrackTintColor\\":\\"#9ca2a8\\",\\"thumbImage\\":{\\"uri\\":\\"audio_thumb\\",\\"scale\\":2},\\"disabled\\":false,\\"step\\":0,\\"inverted\\":false,\\"onRNCSliderSlidingStart\\":null,\\"onRNCSliderSlidingComplete\\":null,\\"enabled\\":true},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginHorizontal\\":12,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"00:00\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20},{}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":0},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"First message\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]],\\"numberOfLines\\":0},\\"children\\":[\\"First message\\"]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":6},{\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":12,\\"right\\":12,\\"bottom\\":12,\\"left\\":12},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"animating\\":true,\\"color\\":\\"#9ca2a8\\",\\"hidesWhenStopped\\":true,\\"size\\":\\"small\\",\\"style\\":[{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\"},{\\"marginHorizontal\\":8}]},\\"children\\":null}]},{\\"type\\":\\"RNCSlider\\",\\"props\\":{\\"style\\":[{\\"height\\":40},{\\"flex\\":1}],\\"value\\":0,\\"maximumValue\\":0,\\"minimumValue\\":0,\\"animateTransitions\\":true,\\"animationConfig\\":{\\"duration\\":250,\\"delay\\":0},\\"thumbTintColor\\":false,\\"minimumTrackTintColor\\":\\"#1d74f5\\",\\"maximumTrackTintColor\\":\\"#9ca2a8\\",\\"thumbImage\\":{\\"uri\\":\\"audio_thumb\\",\\"scale\\":2},\\"disabled\\":false,\\"step\\":0,\\"inverted\\":false,\\"onRNCSliderSlidingStart\\":null,\\"onRNCSliderSlidingComplete\\":null,\\"enabled\\":true},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginHorizontal\\":12,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"00:00\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":6},{\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":12,\\"right\\":12,\\"bottom\\":12,\\"left\\":12},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"animating\\":true,\\"color\\":\\"#9ca2a8\\",\\"hidesWhenStopped\\":true,\\"size\\":\\"small\\",\\"style\\":[{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\"},{\\"marginHorizontal\\":8}]},\\"children\\":null}]},{\\"type\\":\\"RNCSlider\\",\\"props\\":{\\"style\\":[{\\"height\\":40},{\\"flex\\":1}],\\"value\\":0,\\"maximumValue\\":0,\\"minimumValue\\":0,\\"animateTransitions\\":true,\\"animationConfig\\":{\\"duration\\":250,\\"delay\\":0},\\"thumbTintColor\\":false,\\"minimumTrackTintColor\\":\\"#1d74f5\\",\\"maximumTrackTintColor\\":\\"#9ca2a8\\",\\"thumbImage\\":{\\"uri\\":\\"audio_thumb\\",\\"scale\\":2},\\"disabled\\":false,\\"step\\":0,\\"inverted\\":false,\\"onRNCSliderSlidingStart\\":null,\\"onRNCSliderSlidingComplete\\":null,\\"enabled\\":true},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginHorizontal\\":12,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"00:00\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"height\\":56,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":6},{\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":12,\\"right\\":12,\\"bottom\\":12,\\"left\\":12},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"animating\\":true,\\"color\\":\\"#9ca2a8\\",\\"hidesWhenStopped\\":true,\\"size\\":\\"small\\",\\"style\\":[{\\"marginHorizontal\\":10,\\"alignItems\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\"},{\\"marginHorizontal\\":8}]},\\"children\\":null}]},{\\"type\\":\\"RNCSlider\\",\\"props\\":{\\"style\\":[{\\"height\\":40},{\\"flex\\":1}],\\"value\\":0,\\"maximumValue\\":0,\\"minimumValue\\":0,\\"animateTransitions\\":true,\\"animationConfig\\":{\\"duration\\":250,\\"delay\\":0},\\"thumbTintColor\\":false,\\"minimumTrackTintColor\\":\\"#1d74f5\\",\\"maximumTrackTintColor\\":\\"#9ca2a8\\",\\"thumbImage\\":{\\"uri\\":\\"audio_thumb\\",\\"scale\\":2},\\"disabled\\":false,\\"step\\":0,\\"inverted\\":false,\\"onRNCSliderSlidingStart\\":null,\\"onRNCSliderSlidingComplete\\":null,\\"enabled\\":true},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginHorizontal\\":12,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"00:00\\"]}]}]}]}]}]}]}]}]}"`; exports[`Storyshots Message With file 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"alignSelf\\":\\"flex-start\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":4,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"flexDirection\\":\\"column\\",\\"padding\\":15}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"File.pdf\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"File.pdf\\"]}]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20},{}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"backgroundColor\\":null,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},false]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"alignSelf\\":\\"flex-start\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"marginBottom\\":4,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderColor\\":\\"#e1e5e8\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"flexDirection\\":\\"column\\",\\"padding\\":15}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"File.pdf\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"File.pdf\\"]}]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"This is a description \\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"This is a description \\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":20,\\"height\\":20},{}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}]}]}]}]}]}]}]}"`; diff --git a/storybook/stories/index.js b/storybook/stories/index.js index c8209d6f6..da4d1c7dd 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -11,6 +11,7 @@ import './Markdown'; import './HeaderButtons'; import './UnreadBadge'; import '../../app/views/ThreadMessagesView/Item.stories.js'; +import '../../app/views/DiscussionsView/Item.stories.js'; import './Avatar'; import './NewMarkdown'; import '../../app/containers/BackgroundContainer/index.stories.js';