StyleSheet.create and other refactors

.eslintrc.yaml

@@ -158,6 +158,7 @@ rules:
   - error
   - patterns: ['**/__tests__/**']
   import/no-cycle: off  # This would be nice to fix; but isn't easy.
+  import/export: off  # This is redundant with Flow, and buggy.
 
   # Jest
   # This rule could be useful if it fired only on new instances; but we

src/account-info/AccountDetails.js

@@ -1,18 +1,18 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 
 import type { UserOrBot, Dispatch } from '../types';
+import styles, { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
 import { UserAvatar, ComponentList, RawLabel } from '../common';
 import { getCurrentRealm, getUserStatusTextForUser } from '../selectors';
 import PresenceStatusIndicator from '../common/PresenceStatusIndicator';
 import ActivityText from '../title/ActivityText';
 import { getAvatarFromUser } from '../utils/avatar';
 import { nowInTimeZone } from '../utils/date';
-import styles from '../styles';
 
-const componentStyles = StyleSheet.create({
+const componentStyles = createStyleSheet({
   componentListItem: {
     alignItems: 'center',
   },

src/account-info/AccountDetailsScreen.js

@@ -1,9 +1,9 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { StyleSheet } from 'react-native';
 
 import type { NavigationScreenProp } from 'react-navigation';
 import type { Dispatch, UserOrBot } from '../types';
+import { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
 import { Screen, ZulipButton, Label } from '../common';
 import { IconPrivateChat } from '../common/Icons';
@@ -12,7 +12,7 @@ import AccountDetails from './AccountDetails';
 import { doNarrow } from '../actions';
 import { getUserIsActive, getUserForId } from '../users/userSelectors';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   pmButton: {
     marginHorizontal: 16,
   },

src/account-info/ProfileCard.js

@@ -1,8 +1,9 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 
 import type { Dispatch, User } from '../types';
+import { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
 import { getSelfUserDetail } from '../selectors';
 import { ZulipButton } from '../common';
@@ -15,7 +16,7 @@ import {
 import AccountDetails from './AccountDetails';
 import AwayStatusSwitch from './AwayStatusSwitch';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   buttonRow: {
     flexDirection: 'row',
     marginHorizontal: 8,

src/account/AccountItem.js

@@ -1,12 +1,12 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 
-import { BRAND_COLOR } from '../styles';
+import { BRAND_COLOR, createStyleSheet } from '../styles';
 import { RawLabel, Touchable } from '../common';
 import { IconDone, IconTrash } from '../common/Icons';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   wrapper: {
     justifyContent: 'space-between',
   },

src/autocomplete/TopicAutocomplete.js

@@ -1,15 +1,16 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { FlatList, StyleSheet } from 'react-native';
+import { FlatList } from 'react-native';
 
 import type { Dispatch, Narrow } from '../types';
+import { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
 import { getTopicsForNarrow } from '../selectors';
 import { Popup, RawLabel, Touchable } from '../common';
 import AnimatedScaleComponent from '../animation/AnimatedScaleComponent';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   topic: {
     padding: 10,
   },

src/boot/AppEventHandlers.js

@@ -1,13 +1,14 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { AppState, View, StyleSheet, Platform, NativeModules } from 'react-native';
+import { AppState, View, Platform, NativeModules } from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
 import SafeArea from 'react-native-safe-area';
 import * as ScreenOrientation from 'expo-screen-orientation';
 
 import type { Node as React$Node } from 'react';
 import type { Dispatch, Orientation as OrientationT } from '../types';
+import { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
 import { getUnreadByHuddlesMentionsAndPMs } from '../selectors';
 import {
@@ -56,7 +57,7 @@ type NetInfoState = {
   details: null | NetInfoConnectedDetails,
 };
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   wrapper: {
     flex: 1,
     flexDirection: 'column',

src/chat/MarkUnreadButton.js

@@ -1,16 +1,16 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { StyleSheet } from 'react-native';
 
 import type { Auth, Narrow, Stream, Dispatch } from '../types';
+import { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
 import { ZulipButton } from '../common';
 import * as api from '../api';
 import { getAuth, getStreams } from '../selectors';
 import { isHomeNarrow, isStreamNarrow, isTopicNarrow } from '../utils/narrow';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   button: {
     borderRadius: 16,
     height: 32,

src/chat/UnreadNotice.js

@@ -1,16 +1,17 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 
 import type { Narrow, Dispatch } from '../types';
+import { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
 import { getUnreadCountForNarrow } from '../selectors';
 import { Label, RawLabel } from '../common';
 import MarkUnreadButton from './MarkUnreadButton';
 import AnimatedScaleComponent from '../animation/AnimatedScaleComponent';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   unreadContainer: {
     paddingHorizontal: 8,
     paddingVertical: 4,

src/common/Centerer.js

@@ -1,12 +1,12 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 import type { Node as React$Node } from 'react';
-import styles from '../styles';
+import styles, { createStyleSheet } from '../styles';
 
-const componentStyles = StyleSheet.create({
+const componentStyles = createStyleSheet({
   centerer: {
     flex: 1,
     flexDirection: 'row',

src/common/ComponentWithOverlay.js

@@ -1,11 +1,12 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
-
 import type { Node as React$Node } from 'react';
 
-const styles = StyleSheet.create({
+import { createStyleSheet } from '../styles';
+
+const styles = createStyleSheet({
   wrapper: {
     justifyContent: 'center',
     alignItems: 'center',

src/common/CountOverlay.js

@@ -1,12 +1,12 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 
 import { ComponentWithOverlay, UnreadCount } from '.';
-import { BRAND_COLOR } from '../styles';
+import { BRAND_COLOR, createStyleSheet } from '../styles';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   button: {
     flex: 1,
   },

src/common/ErrorMsg.js

@@ -1,10 +1,11 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 
 import Label from './Label';
+import { createStyleSheet } from '../styles';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   field: {
     flexDirection: 'row',
     marginTop: 5,

src/common/FloatingActionButton.js

@@ -1,13 +1,13 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 import type { SpecificIconType } from './Icons';
-import { BRAND_COLOR } from '../styles';
+import { BRAND_COLOR, createStyleSheet } from '../styles';
 import Touchable from './Touchable';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   wrapper: {
     justifyContent: 'center',
     alignItems: 'center',

src/common/GroupAvatar.js

@@ -1,12 +1,13 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { Text, StyleSheet, View } from 'react-native';
+import { Text, View } from 'react-native';
 
 import type { Node as React$Node } from 'react';
 import Touchable from './Touchable';
+import { createStyleSheet } from '../styles';
 import { colorHashFromString, foregroundColorFromBackground } from '../utils/color';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   frame: {
     justifyContent: 'center',
     alignItems: 'center',

src/common/InputWithClearButton.js

@@ -1,13 +1,13 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
+import { View, TextInput } from 'react-native';
 
 import Input from './Input';
 import type { Props as InputProps } from './Input';
-import styles, { BRAND_COLOR } from '../styles';
+import styles, { createStyleSheet, BRAND_COLOR } from '../styles';
 import { Icon } from './Icons';
 
-const componentStyles = StyleSheet.create({
+const componentStyles = createStyleSheet({
   clearButtonIcon: {
     color: BRAND_COLOR,
     paddingRight: 16,

src/common/LoadingBanner.js

@@ -1,18 +1,18 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 
 import type { Dispatch } from '../types';
 import { connect } from '../react-redux';
 import { getLoading } from '../selectors';
 import { Label, LoadingIndicator } from '.';
 import type { ThemeData } from '../styles';
-import { ThemeContext } from '../styles';
+import { ThemeContext, createStyleSheet } from '../styles';
 
 const key = 'LoadingBanner';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   block: {
     flexDirection: 'row',
     justifyContent: 'center',

src/common/LoadingIndicator.js

@@ -1,11 +1,12 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, View } from 'react-native';
 
 import SpinningProgress from './SpinningProgress';
+import { createStyleSheet } from '../styles';
 import messageLoadingImg from '../../static/img/message-loading.png';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   wrapper: {
     flex: 1,
     padding: 4,

src/common/Logo.js

@@ -1,10 +1,11 @@
 /* @flow strict-local */
 import React from 'react';
-import { Image, StyleSheet } from 'react-native';
+import { Image } from 'react-native';
 
 import logoImg from '../../static/img/logo.png';
+import { createStyleSheet } from '../styles';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   logo: {
     width: 40,
     height: 40,

src/common/OfflineNotice.js

@@ -1,16 +1,17 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 
 import type { Dispatch } from '../types';
+import { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
 import { getSession } from '../selectors';
 import Label from './Label';
 
 const key = 'OfflineNotice';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   block: {
     flexDirection: 'row',
     justifyContent: 'center',

src/common/PasswordInput.js

@@ -1,14 +1,14 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
+import { View, TextInput } from 'react-native';
 
 import Input from './Input';
 import type { Props as InputProps } from './Input';
-import { BRAND_COLOR } from '../styles';
+import { BRAND_COLOR, createStyleSheet } from '../styles';
 import Label from './Label';
 import Touchable from './Touchable';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   showPasswordButton: {
     position: 'absolute',
     right: 0,

src/common/Popup.js

@@ -1,12 +1,12 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
 import type { Node as React$Node } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 
 import type { ThemeData } from '../styles';
-import { ThemeContext } from '../styles';
+import { ThemeContext, createStyleSheet } from '../styles';
 
-const styles = StyleSheet.create({
+const styles = createStyleSheet({
   popup: {
     marginHorizontal: 16,
     marginVertical: 8,