From 724128251e83a5561cac0f78a98052ef4a544724 Mon Sep 17 00:00:00 2001
From: Jonathan Ruddell <jonathan.ruddell@gmail.com>
Date: Mon, 16 Sep 2019 16:57:41 -0700
Subject: [PATCH] fix inline-style usage

---
 boilerplate/.eslintrc.js                      |  1 -
 .../app/modules/entities/entities-screen.js   |  2 +-
 .../entities/entities-screen.styles.js        |  3 +++
 .../app/modules/login/login-screen.js.ejs     |  2 +-
 .../app/modules/login/login-screen.styles.js  |  3 +++
 .../navigation/drawer/drawer-button.story.js  | 20 +++++++--------
 .../alert-message/alert-message.story.js      | 25 ++++++-------------
 .../full-button/full-button.story.js          | 17 +++++--------
 .../components/search-bar/search-bar.story.js | 21 +++++++---------
 .../alert-message/alert-message.spec.js       | 11 +++++---
 10 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/boilerplate/.eslintrc.js b/boilerplate/.eslintrc.js
index 2dc2e14de..7ce91fde0 100644
--- a/boilerplate/.eslintrc.js
+++ b/boilerplate/.eslintrc.js
@@ -5,7 +5,6 @@ module.exports = {
     semi: [2, 'never'],
     quotes: [2, 'single', { avoidEscape: true }],
     //todo remove the next two rules
-    'react-native/no-inline-styles': 0,
     'react/no-string-refs': 0,
   },
   globals: {
diff --git a/boilerplate/app/modules/entities/entities-screen.js b/boilerplate/app/modules/entities/entities-screen.js
index f150a763b..b95f02955 100644
--- a/boilerplate/app/modules/entities/entities-screen.js
+++ b/boilerplate/app/modules/entities/entities-screen.js
@@ -16,7 +16,7 @@ class EntitiesScreen extends React.Component {
   render () {
     return (
       <ScrollView style={styles.container}>
-        <Text style={{ textAlign: 'center' }}>JHipster Entities will appear below</Text>
+        <Text style={styles.centerText}>JHipster Entities will appear below</Text>
         {/* ignite-jhipster-entity-screen-needle */}
       </ScrollView>
     )
diff --git a/boilerplate/app/modules/entities/entities-screen.styles.js b/boilerplate/app/modules/entities/entities-screen.styles.js
index a1545f236..34d03732f 100644
--- a/boilerplate/app/modules/entities/entities-screen.styles.js
+++ b/boilerplate/app/modules/entities/entities-screen.styles.js
@@ -8,6 +8,9 @@ export default StyleSheet.create({
     flex: 1,
     padding: 20
   },
+  centerText: {
+    textAlign: 'center',
+  },
   buttonText: {
     fontSize: 18,
     color: 'white',
diff --git a/boilerplate/app/modules/login/login-screen.js.ejs b/boilerplate/app/modules/login/login-screen.js.ejs
index c17a54da2..92f45edb4 100644
--- a/boilerplate/app/modules/login/login-screen.js.ejs
+++ b/boilerplate/app/modules/login/login-screen.js.ejs
@@ -63,7 +63,7 @@ class LoginScreen extends React.Component {
     const editable = !fetching
     const textInputStyle = editable ? styles.textInput : styles.textInputReadonly
     return (
-      <ScrollView contentContainerStyle={{ justifyContent: 'center' }} style={[styles.container, { height: this.state.visibleHeight }]} keyboardShouldPersistTaps='always'>
+      <ScrollView contentContainerStyle={styles.contentContainer} style={[styles.container, { height: this.state.visibleHeight }]} keyboardShouldPersistTaps='always'>
         <Image source={Images.logoLogin} style={[styles.topLogo, this.state.topLogo]} />
         <View style={styles.form}>
           <View style={styles.row}>
diff --git a/boilerplate/app/modules/login/login-screen.styles.js b/boilerplate/app/modules/login/login-screen.styles.js
index 1036e1e6b..c0a95acad 100755
--- a/boilerplate/app/modules/login/login-screen.styles.js
+++ b/boilerplate/app/modules/login/login-screen.styles.js
@@ -3,6 +3,9 @@ import { StyleSheet } from 'react-native'
 import { Colors, Metrics } from '../../shared/themes'
 
 export default StyleSheet.create({
+  contentContainer: {
+    justifyContent: 'center',
+  },
   container: {
     paddingTop: 70,
     backgroundColor: Colors.jhipsterBlue
diff --git a/boilerplate/app/navigation/drawer/drawer-button.story.js b/boilerplate/app/navigation/drawer/drawer-button.story.js
index f3c218e5e..474c9661a 100644
--- a/boilerplate/app/navigation/drawer/drawer-button.story.js
+++ b/boilerplate/app/navigation/drawer/drawer-button.story.js
@@ -1,15 +1,15 @@
 import React from 'react'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { storiesOf } from '@storybook/react-native'
 
 import DrawerButton from '../../../app/navigation/drawer/drawer-button'
 
-storiesOf('DrawerButton', module)
-  .add('Default', () => (
-    <View style={{ backgroundColor: 'black' }}>
-      <DrawerButton
-        text='Drawer Button'
-        onPress={() => { }}
-      />
-    </View>
-  ))
+const styles = StyleSheet.create({
+  container: { backgroundColor: 'black' },
+})
+
+storiesOf('DrawerButton', module).add('Default', () => (
+  <View style={styles.container}>
+    <DrawerButton text="Drawer Button" onPress={() => {}} />
+  </View>
+))
diff --git a/boilerplate/app/shared/components/alert-message/alert-message.story.js b/boilerplate/app/shared/components/alert-message/alert-message.story.js
index edd5c12df..4d04d986f 100644
--- a/boilerplate/app/shared/components/alert-message/alert-message.story.js
+++ b/boilerplate/app/shared/components/alert-message/alert-message.story.js
@@ -1,23 +1,14 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react-native'
+import { StyleSheet } from 'react-native'
 
 import AlertMessage from './alert-message'
 
+const styles = StyleSheet.create({
+  container: { backgroundColor: 'red' },
+})
+
 storiesOf('AlertMessage', module)
-  .add('Default', () => (
-    <AlertMessage
-      title='ALERT ALERT'
-    />
-  ))
-  .add('Hidden', () => (
-    <AlertMessage
-      title='ALERT ALERT'
-      show={false}
-    />
-  ))
-  .add('Custom Style', () => (
-    <AlertMessage
-      title='ALERT ALERT'
-      style={{ backgroundColor: 'red' }}
-    />
-  ))
+  .add('Default', () => <AlertMessage title="ALERT ALERT" />)
+  .add('Hidden', () => <AlertMessage title="ALERT ALERT" show={false} />)
+  .add('Custom Style', () => <AlertMessage title="ALERT ALERT" style={styles.container} />)
diff --git a/boilerplate/app/shared/components/full-button/full-button.story.js b/boilerplate/app/shared/components/full-button/full-button.story.js
index 047487ad4..8f5858408 100644
--- a/boilerplate/app/shared/components/full-button/full-button.story.js
+++ b/boilerplate/app/shared/components/full-button/full-button.story.js
@@ -1,17 +1,12 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react-native'
+import { StyleSheet } from 'react-native'
 
 import FullButton from './full-button'
 
+const styles = StyleSheet.create({
+  container: { backgroundColor: 'blue' },
+})
 storiesOf('FullButton', module)
-  .add('Default', () => (
-    <FullButton
-      text='A simple button'
-    />
-  ))
-  .add('Custom Style', () => (
-    <FullButton
-      text='Style Me Up!'
-      styles={{ backgroundColor: 'blue' }}
-    />
-  ))
+  .add('Default', () => <FullButton text="A simple button" />)
+  .add('Custom Style', () => <FullButton text="Style Me Up!" styles={styles.container} />)
diff --git a/boilerplate/app/shared/components/search-bar/search-bar.story.js b/boilerplate/app/shared/components/search-bar/search-bar.story.js
index e6f217bd6..7b7d278d3 100644
--- a/boilerplate/app/shared/components/search-bar/search-bar.story.js
+++ b/boilerplate/app/shared/components/search-bar/search-bar.story.js
@@ -1,24 +1,21 @@
 import React from 'react'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { storiesOf } from '@storybook/react-native'
 
 import SearchBar from './search-bar'
 
+const styles = StyleSheet.create({
+  container: { backgroundColor: 'black', height: 50 },
+})
+
 storiesOf('SearchBar', module)
   .add('Default', () => (
-    <View style={{ backgroundColor: 'black', height: 50 }}>
-      <SearchBar
-        onSearch={() => {}}
-        onCancel={() => {}}
-      />
+    <View style={styles.container}>
+      <SearchBar onSearch={() => {}} onCancel={() => {}} />
     </View>
   ))
   .add('With Search Term', () => (
-    <View style={{ backgroundColor: 'black', height: 50 }}>
-      <SearchBar
-        onSearch={() => {}}
-        onCancel={() => {}}
-        searchTerm='HELLO!!'
-      />
+    <View style={styles.container}>
+      <SearchBar onSearch={() => {}} onCancel={() => {}} searchTerm="HELLO!!" />
     </View>
   ))
diff --git a/boilerplate/test/spec/shared/components/alert-message/alert-message.spec.js b/boilerplate/test/spec/shared/components/alert-message/alert-message.spec.js
index 73307bf44..f501ff91c 100644
--- a/boilerplate/test/spec/shared/components/alert-message/alert-message.spec.js
+++ b/boilerplate/test/spec/shared/components/alert-message/alert-message.spec.js
@@ -1,20 +1,25 @@
 import 'react-native'
 import React from 'react'
 import renderer from 'react-test-renderer'
+import { StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  container: { backgroundColor: 'red' },
+})
 
 import AlertMessage from '../../../../../app/shared/components/alert-message/alert-message'
 
 test('AlertMessage component renders correctly if show is true', () => {
-  const tree = renderer.create(<AlertMessage title='howdy' />).toJSON()
+  const tree = renderer.create(<AlertMessage title="howdy" />).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
 test('AlertMessage component does not render if show is false', () => {
-  const tree = renderer.create(<AlertMessage title='howdy' show={false} />).toJSON()
+  const tree = renderer.create(<AlertMessage title="howdy" show={false} />).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
 test('AlertMessage component renders correctly if backgroundColor prop is set', () => {
-  const tree = renderer.create(<AlertMessage title='howdy' style={{ backgroundColor: 'red' }} />).toJSON()
+  const tree = renderer.create(<AlertMessage title="howdy" style={styles.container} />).toJSON()
   expect(tree).toMatchSnapshot()
 })