[FIX] Use List.Separator in all places

app/views/CreateChannelView.js

@@ -5,6 +5,7 @@ import {
 	View, Text, Switch, ScrollView, StyleSheet, FlatList
 } from 'react-native';
 import equal from 'deep-equal';
+import * as List from '../containers/List';
 
 import TextInput from '../presentation/TextInput';
 import Loading from '../containers/Loading';
@@ -31,9 +32,6 @@ const styles = StyleSheet.create({
 	list: {
 		width: '100%'
 	},
-	separator: {
-		marginLeft: 60
-	},
 	formSeparator: {
 		marginLeft: 15
 	},
@@ -264,8 +262,6 @@ class CreateChannelView extends React.Component {
 		});
 	}
 
-	renderSeparator = () => <View style={[sharedStyles.separator, styles.separator]} />
-
 	renderFormSeparator = () => {
 		const { theme } = this.props;
 		return <View style={[sharedStyles.separator, styles.formSeparator, { backgroundColor: themes[theme].separatorColor }]} />;
@@ -305,7 +301,7 @@ class CreateChannelView extends React.Component {
 					}
 				]}
 				renderItem={this.renderItem}
-				ItemSeparatorComponent={this.renderSeparator}
+				ItemSeparatorComponent={List.Separator}
 				enableEmptySections
 				keyboardShouldPersistTaps='always'
 			/>

app/views/DirectoryView/index.js

@@ -4,6 +4,7 @@ import {
 	View, FlatList, Text
 } from 'react-native';
 import { connect } from 'react-redux';
+import * as List from '../../containers/List';
 
 import Touch from '../../utils/touch';
 import RocketChat from '../../lib/rocketchat';
@@ -182,11 +183,6 @@ class DirectoryView extends React.Component {
 		);
 	}
 
-	renderSeparator = () => {
-		const { theme } = this.props;
-		return <View style={[sharedStyles.separator, styles.separator, { backgroundColor: themes[theme].separatorColor }]} />;
-	}
-
 	renderItem = ({ item, index }) => {
 		const { data, type } = this.state;
 		const { baseUrl, user, theme } = this.props;
@@ -251,7 +247,7 @@ class DirectoryView extends React.Component {
 					keyExtractor={item => item._id}
 					ListHeaderComponent={this.renderHeader}
 					renderItem={this.renderItem}
-					ItemSeparatorComponent={this.renderSeparator}
+					ItemSeparatorComponent={List.Separator}
 					keyboardShouldPersistTaps='always'
 					ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
 					onEndReached={() => this.load({})}

app/views/NewMessageView.js

@@ -7,6 +7,7 @@ import { connect } from 'react-redux';
 import equal from 'deep-equal';
 import orderBy from 'lodash/orderBy';
 import { Q } from '@nozbe/watermelondb';
+import * as List from '../containers/List';
 
 import Touch from '../utils/touch';
 import database from '../lib/database';
@@ -28,9 +29,6 @@ import { goRoom } from '../utils/goRoom';
 import SafeAreaView from '../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
-	separator: {
-		marginLeft: 60
-	},
 	button: {
 		height: 46,
 		flexDirection: 'row',
@@ -211,10 +209,6 @@ class NewMessageView extends React.Component {
 		);
 	}
 
-	renderSeparator = () => {
-		const { theme } = this.props;
-		return <View style={[sharedStyles.separator, styles.separator, { backgroundColor: themes[theme].separatorColor }]} />;
-	}
 
 	renderItem = ({ item, index }) => {
 		const { search, chats } = this.state;
@@ -254,7 +248,7 @@ class NewMessageView extends React.Component {
 				keyExtractor={item => item._id}
 				ListHeaderComponent={this.renderHeader}
 				renderItem={this.renderItem}
-				ItemSeparatorComponent={this.renderSeparator}
+				ItemSeparatorComponent={List.Separator}
 				contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
 				keyboardShouldPersistTaps='always'
 			/>

app/views/ReadReceiptView/index.js

@@ -4,6 +4,7 @@ import { FlatList, View, Text } from 'react-native';
 import equal from 'deep-equal';
 import moment from 'moment';
 import { connect } from 'react-redux';
+import * as List from '../../containers/List';
 
 import Avatar from '../../containers/Avatar';
 import styles from './styles';
@@ -121,11 +122,6 @@ class ReadReceiptView extends React.Component {
 		);
 	}
 
-	renderSeparator = () => {
-		const { theme } = this.props;
-		return <View style={[styles.separator, { backgroundColor: themes[theme].separatorColor }]} />;
-	}
-
 	render() {
 		const { receipts, loading } = this.state;
 		const { theme } = this.props;
@@ -143,7 +139,7 @@ class ReadReceiptView extends React.Component {
 						<FlatList
 							data={receipts}
 							renderItem={this.renderItem}
-							ItemSeparatorComponent={this.renderSeparator}
+							ItemSeparatorComponent={List.Separator}
 							style={[
 								styles.list,
 								{

app/views/RoomMembersView/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, View } from 'react-native';
+import { FlatList } from 'react-native';
 import { connect } from 'react-redux';
 import { Q } from '@nozbe/watermelondb';
+import * as List from '../../containers/List';
 
 import styles from './styles';
 import UserItem from '../../presentation/UserItem';
@@ -395,11 +396,6 @@ class RoomMembersView extends React.Component {
 		<SearchBox onChangeText={text => this.onSearchChangeText(text)} testID='room-members-view-search' />
 	)
 
-	renderSeparator = () => {
-		const { theme } = this.props;
-		return <View style={[styles.separator, { backgroundColor: themes[theme].separatorColor }]} />;
-	}
-
 	renderItem = ({ item }) => {
 		const { baseUrl, user, theme } = this.props;
 
@@ -429,7 +425,7 @@ class RoomMembersView extends React.Component {
 					renderItem={this.renderItem}
 					style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
 					keyExtractor={item => item._id}
-					ItemSeparatorComponent={this.renderSeparator}
+					ItemSeparatorComponent={List.Separator}
 					ListHeaderComponent={this.renderSearchBar}
 					ListFooterComponent={() => {
 						if (isLoading) {

app/views/RoomsListView/ServerDropdown.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { connect, batch } from 'react-redux';
 import equal from 'deep-equal';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
+import * as List from '../../containers/List';
 
 import { toggleServerDropdown as toggleServerDropdownAction } from '../../actions/rooms';
 import { selectServerRequest as selectServerRequestAction, serverInitAdd as serverInitAddAction } from '../../actions/server';
@@ -193,11 +194,6 @@ class ServerDropdown extends Component {
 		}
 	}
 
-	renderSeparator = () => {
-		const { theme } = this.props;
-		return <View style={[styles.serverSeparator, { backgroundColor: themes[theme].separatorColor }]} />;
-	}
-
 	renderServer = ({ item }) => {
 		const { server, theme } = this.props;
 
@@ -266,7 +262,7 @@ class ServerDropdown extends Component {
 						data={servers}
 						keyExtractor={item => item.id}
 						renderItem={this.renderServer}
-						ItemSeparatorComponent={this.renderSeparator}
+						ItemSeparatorComponent={List.Separator}
 						keyboardShouldPersistTaps='always'
 					/>
 				</Animated.View>

app/views/SelectedUsersView.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, StyleSheet, FlatList } from 'react-native';
+import { View, FlatList } from 'react-native';
 import { connect } from 'react-redux';
 import equal from 'deep-equal';
 import orderBy from 'lodash/orderBy';
 import { Q } from '@nozbe/watermelondb';
+import * as List from '../containers/List';
 
 import database from '../lib/database';
 import RocketChat from '../lib/rocketchat';
@@ -28,12 +29,6 @@ import {
 import { showErrorAlert } from '../utils/info';
 import SafeAreaView from '../containers/SafeAreaView';
 
-const styles = StyleSheet.create({
-	separator: {
-		marginLeft: 60
-	}
-});
-
 class SelectedUsersView extends React.Component {
 	static propTypes = {
 		baseUrl: PropTypes.string,
@@ -247,11 +242,6 @@ class SelectedUsersView extends React.Component {
 		);
 	}
 
-	renderSeparator = () => {
-		const { theme } = this.props;
-		return <View style={[sharedStyles.separator, styles.separator, { backgroundColor: themes[theme].separatorColor }]} />;
-	}
-
 	renderItem = ({ item, index }) => {
 		const { search, chats } = this.state;
 		const { baseUrl, user, theme } = this.props;
@@ -297,7 +287,7 @@ class SelectedUsersView extends React.Component {
 				extraData={this.props}
 				keyExtractor={item => item._id}
 				renderItem={this.renderItem}
-				ItemSeparatorComponent={this.renderSeparator}
+				ItemSeparatorComponent={List.Separator}
 				ListHeaderComponent={this.renderHeader}
 				contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
 				enableEmptySections