[FIX] Use List.Separator in all places (#2931)

* [FIX] Use List.Separator in all places

* add List.Separator

* change List.Separator

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/views/CreateChannelView.js

@@ -5,6 +5,7 @@ import {
 	View, Text, Switch, ScrollView, StyleSheet, FlatList
 } from 'react-native';
 import { dequal } from 'dequal';
+import * as List from '../containers/List';
 
 import TextInput from '../presentation/TextInput';
 import Loading from '../containers/Loading';
@@ -31,12 +32,6 @@ const styles = StyleSheet.create({
 	list: {
 		width: '100%'
 	},
-	separator: {
-		marginLeft: 60
-	},
-	formSeparator: {
-		marginLeft: 15
-	},
 	input: {
 		height: 54,
 		paddingHorizontal: 18,
@@ -264,13 +259,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 }]} />;
-	}
-
 	renderItem = ({ item }) => {
 		const { baseUrl, user, theme } = this.props;
 
@@ -305,7 +293,7 @@ class CreateChannelView extends React.Component {
 					}
 				]}
 				renderItem={this.renderItem}
-				ItemSeparatorComponent={this.renderSeparator}
+				ItemSeparatorComponent={List.Separator}
 				enableEmptySections
 				keyboardShouldPersistTaps='always'
 			/>
@@ -341,13 +329,13 @@ class CreateChannelView extends React.Component {
 								theme={theme}
 								underlineColorAndroid='transparent'
 							/>
-							{this.renderFormSeparator()}
+							<List.Separator />
 							{this.renderType()}
-							{this.renderFormSeparator()}
+							<List.Separator />
 							{this.renderReadOnly()}
-							{this.renderFormSeparator()}
+							<List.Separator />
 							{this.renderEncrypted()}
-							{this.renderFormSeparator()}
+							<List.Separator />
 							{this.renderBroadcast()}
 						</View>
 						<View style={styles.invitedHeader}>

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

@@ -6,6 +6,7 @@ import {
 import { connect } from 'react-redux';
 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';
@@ -27,9 +28,6 @@ import { goRoom } from '../utils/goRoom';
 import SafeAreaView from '../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
-	separator: {
-		marginLeft: 60
-	},
 	button: {
 		height: 46,
 		flexDirection: 'row',
@@ -195,10 +193,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;
@@ -238,7 +232,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 { dequal } from 'dequal';
 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';
@@ -419,11 +420,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;
 
@@ -453,7 +449,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

@@ -5,6 +5,7 @@ import {
 import PropTypes from 'prop-types';
 import { connect, batch } from 'react-redux';
 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';
@@ -174,11 +175,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;
 
@@ -247,7 +243,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,9 +1,10 @@
 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 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';
@@ -27,12 +28,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,
@@ -225,11 +220,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;
@@ -275,7 +265,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