From e9183b523b692139f6be8ee5b4e2da5dc40b08dc Mon Sep 17 00:00:00 2001
From: pranavpandey1998official
<44601530+pranavpandey1998official@users.noreply.github.com>
Date: Tue, 26 Mar 2019 01:50:24 +0530
Subject: [PATCH] [NEW] Scrollable room name feature (#756)
---
app/containers/HeaderButton.js | 3 ++-
app/views/RoomView/Header/index.js | 16 ++++++++++++----
2 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/app/containers/HeaderButton.js b/app/containers/HeaderButton.js
index af11f1084..6a9c23c3a 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 94e81b149..c6a3f1589 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>
--
GitLab