ItemInfo

app/containers/ItemInfo.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+import sharedStyles from '../views/Styles';
+import { themes } from '../constants/colors';
+
+const styles = StyleSheet.create({
+	listPadding: {
+		paddingVertical: 36
+	},
+	infoContainer: {
+		padding: 15
+	},
+	infoText: {
+		fontSize: 14,
+		...sharedStyles.textRegular
+	}
+});
+
+const ItemInfo = React.memo(({ info, theme }) => (
+	<View style={[styles.infoContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+		<Text style={[styles.infoText, { color: themes[theme].infoText }]}>{info}</Text>
+	</View>
+));
+
+ItemInfo.propTypes = {
+	info: PropTypes.string,
+	theme: PropTypes.string
+};
+
+export default ItemInfo;

app/views/ScreenLockConfigView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	StyleSheet, View, Switch, ScrollView, Text
+	StyleSheet, View, Switch, ScrollView
 } from 'react-native';
 import { SafeAreaView } from 'react-navigation';
 import { connect } from 'react-redux';
@@ -15,6 +15,7 @@ import sharedStyles from './Styles';
 import StatusBar from '../containers/StatusBar';
 import Separator from '../containers/Separator';
 import ListItem from '../containers/ListItem';
+import ItemInfo from '../containers/ItemInfo';
 import { CustomIcon } from '../lib/Icons';
 import database from '../lib/database';
 import { supportedBiometryLabel } from '../utils/localAuthentication';
@@ -47,26 +48,9 @@ const DEFAULT_AUTO_LOCK = [
 const styles = StyleSheet.create({
 	listPadding: {
 		paddingVertical: 36
-	},
-	infoContainer: {
-		padding: 15
-	},
-	infoText: {
-		fontSize: 14,
-		...sharedStyles.textRegular
 	}
 });
 
-const ItemInfo = React.memo(({ info, theme }) => (
-	<View style={[styles.infoContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
-		<Text style={[styles.infoText, { color: themes[theme].infoText }]}>{info}</Text>
-	</View>
-));
-ItemInfo.propTypes = {
-	info: PropTypes.string,
-	theme: PropTypes.string
-};
-
 class ScreenLockConfigView extends React.Component {
 	static navigationOptions = ({ screenProps }) => ({
 		title: I18n.t('Screen_lock'),

app/views/SettingsView/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-	View, Linking, ScrollView, Switch, Text, Share, Clipboard
+	View, Linking, ScrollView, Switch, Share, Clipboard
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -14,6 +14,7 @@ import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors';
 import { DrawerButton, CloseModalButton } from '../../containers/HeaderButton';
 import StatusBar from '../../containers/StatusBar';
 import ListItem from '../../containers/ListItem';
+import ItemInfo from '../../containers/ItemInfo';
 import { DisclosureImage } from '../../containers/DisclosureIndicator';
 import Separator from '../../containers/Separator';
 import I18n from '../../i18n';
@@ -54,16 +55,6 @@ SectionSeparator.propTypes = {
 	theme: PropTypes.string
 };
 
-const ItemInfo = React.memo(({ info, theme }) => (
-	<View style={[styles.infoContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
-		<Text style={[styles.infoText, { color: themes[theme].infoText }]}>{info}</Text>
-	</View>
-));
-ItemInfo.propTypes = {
-	info: PropTypes.string,
-	theme: PropTypes.string
-};
-
 class SettingsView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => ({
 		...themedHeader(screenProps.theme),

app/views/SettingsView/styles.js

@@ -9,12 +9,5 @@ export default StyleSheet.create({
 	},
 	listPadding: {
 		paddingVertical: 36
-	},
-	infoContainer: {
-		padding: 15
-	},
-	infoText: {
-		fontSize: 14,
-		...sharedStyles.textRegular
 	}
 });