diff --git a/app/containers/HeaderButton.js b/app/containers/HeaderButton.js index af11f10848e7e17f33a2730c8b7f03fa99158658..6a9c23c3aedca222c61c7c0d9e4e269bf46d3244 100644 --- a/app/containers/HeaderButton.js +++ b/app/containers/HeaderButton.js @@ -7,9 +7,10 @@ import { CustomIcon } from '../lib/Icons'; import { isIOS } from '../utils/deviceInfo'; const color = isIOS ? '#1D74F5' : '#FFF'; +export const headerIconSize = 23; const CustomHeaderButton = React.memo(props => ( - <HeaderButton {...props} IconComponent={CustomIcon} iconSize={23} color={color} /> + <HeaderButton {...props} IconComponent={CustomIcon} iconSize={headerIconSize} color={color} /> )); export const CustomHeaderButtons = React.memo(props => ( diff --git a/app/views/RoomView/Header/index.js b/app/views/RoomView/Header/index.js index 94e81b149dffadd9a213100b3af003009f1be204..c6a3f1589c55cc0115106130c1427baf5de5c844 100644 --- a/app/views/RoomView/Header/index.js +++ b/app/views/RoomView/Header/index.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { - View, Text, StyleSheet, LayoutAnimation + View, Text, StyleSheet, LayoutAnimation, ScrollView } from 'react-native'; import { connect } from 'react-redux'; import { responsive } from 'react-native-responsive-ui'; @@ -13,6 +13,7 @@ import sharedStyles from '../../Styles'; import { isIOS } from '../../../utils/deviceInfo'; import { CustomIcon } from '../../../lib/Icons'; import Status from '../../../containers/Status/Status'; +import { headerIconSize } from '../../../containers/HeaderButton'; const TITLE_SIZE = 18; const ICON_SIZE = 18; @@ -173,6 +174,7 @@ export default class RoomHeaderView extends Component { window, title, usersTyping } = this.props; const portrait = window.height > window.width; + const widthScrollView = window.width - 6.5 * headerIconSize; let scale = 1; if (!portrait) { @@ -183,9 +185,15 @@ export default class RoomHeaderView extends Component { return ( <View style={styles.container}> - <View style={styles.titleContainer}> - {this.renderIcon()} - <Text style={[styles.title, { fontSize: TITLE_SIZE * scale }]} numberOfLines={1}>{title}</Text> + <View style={[styles.titleContainer, { width: widthScrollView }]}> + <ScrollView + showsHorizontalScrollIndicator={false} + horizontal + bounces={false} + > + {this.renderIcon()} + <Text style={[styles.title, { fontSize: TITLE_SIZE * scale }]} numberOfLines={1}>{title}</Text> + </ScrollView> </View> {this.typing} </View>