Generate: container & component with Lang

app/containers/Welcome/index.js

@@ -7,6 +7,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import PropTypes from 'prop-types';
+import I18n from 'localization';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { compose } from 'redux';
@@ -23,7 +24,7 @@ export function Welcome() {
 
   return (
     <View>
-      <Text>Hello Welcome</Text>
+      <Text>{I18n.t('firstMessage.hello')} Welcome Container!</Text>
     </View>
   );
 }
@@ -42,8 +43,9 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
 
-export default compose(
-  withConnect,
-)(Welcome);
+export default compose(withConnect)(Welcome);

app/containers/Welcome/selectors.js

@@ -16,7 +16,10 @@ const selectWelcomeDomain = state => state.welcome || initialState;
  */
 
 const makeSelectWelcome = () =>
-  createSelector(selectWelcomeDomain, substate => substate);
+  createSelector(
+    selectWelcomeDomain,
+    substate => substate,
+  );
 
 export default makeSelectWelcome;
 export { selectWelcomeDomain };

app/containers/Welcome/tests/index.test.js

@@ -2,7 +2,7 @@
  *
  * Tests for Welcome
  *
- * @see https://github.com/react-boilerplate/react-boilerplate/tree/master/docs/testing
+ * @see https://github.com/keremcubuk/react-native-boilerplate/tree/master/docs/testing
  *
  */
 
@@ -16,6 +16,7 @@ describe('<Welcome />', () => {
   it('Expect to not log errors in console', () => {
     const spy = jest.spyOn(global.console, 'error');
     const dispatch = jest.fn();
+
     render(<Welcome dispatch={dispatch} />);
     expect(spy).not.toHaveBeenCalled();
   });
@@ -33,6 +34,7 @@ describe('<Welcome />', () => {
     const {
       container: { firstChild },
     } = render(<Welcome />);
+
     expect(firstChild).toMatchSnapshot();
   });
 });

app/localization/en.js

@@ -2,8 +2,8 @@ const en = {
   localization: {
     deviceLanguage: 'en-US',
   },
-  component: {
-    welcome: 'Welcome',
+  firstMessage: {
+    hello: 'Hello from',
   },
 };
 

app/localization/fr.js

@@ -2,8 +2,8 @@ const fr = {
   localization: {
     deviceLanguage: 'fr',
   },
-  component: {
-    welcome: 'Bienvenue',
+  firstMessage: {
+    hello: 'Bonjour de',
   },
 };
 

internals/generators/component/index.js.hbs

@@ -17,7 +17,7 @@ function {{ properCase name }}() {
   return (
     <View>
     {{#if wantMessages}}
-      <Text>{I18n.t('component.welcome')} {{ properCase name }} Component!</Text>
+      <Text>{I18n.t('firstMessage.hello')} {{ properCase name }} Component!</Text>
     {{else}}
         <Text>{{ properCase name }} Component!</Text>
     {{/if}}

internals/generators/container/index.js

@@ -34,6 +34,12 @@ module.exports = {
       default: true,
       message: 'Do you want sagas for asynchronous flows? (e.g. fetching data)',
     },
+    {
+      type: 'confirm',
+      name: 'wantMessages',
+      default: true,
+      message: 'Do you want i18n messages (i.e. will this component use text)?',
+    },
   ],
   actions: data => {
     // Generate index.js and index.test.js

internals/generators/container/index.js.hbs

@@ -7,6 +7,9 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import PropTypes from 'prop-types';
+{{#if wantMessages}}
+import I18n from 'localization';
+{{/if}}
 import { connect } from 'react-redux';
 {{#if wantActionsAndReducer}}
 import { createStructuredSelector } from 'reselect';
@@ -35,7 +38,11 @@ export function {{ properCase name }}() {
 
   return (
     <View>
-      <Text>{{ properCase name }} Container!</Text>
+      {{#if wantMessages}}
+        <Text>{I18n.t('firstMessage.hello')} {{ properCase name }} Container!</Text>
+      {{else}}
+          <Text>{{ properCase name }} Container!</Text>
+      {{/if}}
     </View>
   );
 }

internals/generators/container/test.js.hbs

@@ -2,35 +2,22 @@
  *
  * Tests for {{ properCase name }}
  *
- * @see https://github.com/react-boilerplate/react-boilerplate/tree/master/docs/testing
+ * @see https://github.com/keremcubuk/react-native-boilerplate/tree/master/docs/testing
  *
  */
 
 import React from 'react';
 import { render } from 'react-testing-library';
-{{#if wantMessages}}
-import { IntlProvider } from 'react-intl';
-{{/if}}
 // import 'jest-dom/extend-expect'; // add some helpful assertions
 
 import { {{ properCase name }} } from '../index';
-{{#if wantMessages}}
-import { DEFAULT_LOCALE } from '../../../i18n';
-{{/if}}
 
 describe('<{{ properCase name }} />', () => {
   it('Expect to not log errors in console', () => {
     const spy = jest.spyOn(global.console, 'error');
     const dispatch = jest.fn();
-{{#if wantMessages}}
-    render(
-      <IntlProvider locale={DEFAULT_LOCALE}>
-        <{{ properCase name }} dispatch={dispatch} />
-      </IntlProvider>,
-    );
-{{else}}
+
     render(<{{ properCase name }} dispatch={dispatch} />);
-{{/if}}
     expect(spy).not.toHaveBeenCalled();
   });
 
@@ -44,19 +31,11 @@ describe('<{{ properCase name }} />', () => {
    * @see {@link https://jestjs.io/docs/en/api#testskipname-fn}
    */
   it.skip('Should render and match the snapshot', () => {
-{{#if wantMessages}}
-    const {
-      container: { firstChild },
-    } = render(
-      <IntlProvider locale={DEFAULT_LOCALE}>
-        <{{ properCase name }} />
-      </IntlProvider>,
-    );
-{{else}}
+
     const {
       container: { firstChild },
     } = render(<{{ properCase name }} />);
-{{/if}}
+
     expect(firstChild).toMatchSnapshot();
   });
 });