fix inline-style usage

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: {

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>
     )

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',

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}>

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

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>
+))

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} />)

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} />)

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>
   ))

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()
 })