Basic config screen layout

.eslintrc.js

@@ -3,4 +3,9 @@ module.exports = {
   extends: '@react-native-community',
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
+  rules: {
+    semi: ['error', 'never'],
+    'sort-keys': ['warn'],
+    'sort-imports': ['warn', { ignoreDeclarationSort: true }],
+  }
 };

.prettierrc.js

@@ -1,6 +1,7 @@
 module.exports = {
-  bracketSpacing: false,
-  jsxBracketSameLine: true,
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  semi: false,
   singleQuote: true,
   trailingComma: 'all',
 };

App.tsx

@@ -1,118 +1,96 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * Generated with the TypeScript template
- * https://github.com/react-native-community/react-native-template-typescript
- *
- * @format
- */
-
-import React from 'react';
+import React, { Component } from 'react'
 import {
-  SafeAreaView,
-  StyleSheet,
+  Alert,
+  Picker,
   ScrollView,
-  View,
-  Text,
   StatusBar,
-} from 'react-native';
-
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-declare var global: {HermesInternal: null | {}};
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+} from 'react-native'
+import _ from 'lodash'
 
-const App = () => {
-  return (
-    <>
-      <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}>
-          <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-                screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
+class App extends Component {
+  state = { duration: '60' }
+  render() {
+    return (
+      <>
+        <StatusBar barStyle="light-content" />
+        <ScrollView style={s.scrollView}>
+          <Text style={s.title}>S.N Goenka Meditation Timer</Text>
+          <Text style={s.text}>How long would you like to sit?</Text>
+          <Picker
+            selectedValue={this.state.duration}
+            style={s.durationPicker}
+            itemStyle={s.durationItem}
+            onValueChange={itemValue => this.setState({ duration: itemValue })}
+          >
+            {_.range(1, 301)
+              .map(String)
+              .map((num: string) => (
+                <Picker.Item label={`${num} min`} value={num} key={num} />
+              ))}
+          </Picker>
+          <TouchableHighlight
+            style={s.startBtn}
+            onPress={() =>
+              Alert.alert(`Starting ${this.state.duration} min meditation`)
+            }
+          >
+            <Text style={s.startText}>Start</Text>
+          </TouchableHighlight>
         </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-};
+      </>
+    )
+  }
+}
 
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
+// Shared vars
+const bodyTextColor = '#f2f2f2'
+const btnSize = 80
+
+const s = StyleSheet.create({
+  durationItem: {
+    color: bodyTextColor,
   },
-  body: {
-    backgroundColor: Colors.white,
+  durationPicker: {
+    backgroundColor: 'hsla(0, 0%, 100%, .05)',
+    borderRadius: 10,
+    marginTop: 15,
   },
-  sectionContainer: {
-    marginTop: 32,
+  scrollView: {
+    backgroundColor: '#001709',
     paddingHorizontal: 24,
   },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
+  startBtn: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    borderColor: '#008000',
+    borderRadius: btnSize,
+    borderWidth: 1,
+    height: btnSize,
+    justifyContent: 'center',
+    marginTop: 60,
+    width: btnSize,
   },
-  sectionDescription: {
-    marginTop: 8,
+  startText: {
+    color: '#73d45d',
     fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
     fontWeight: '700',
   },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
+  text: {
+    color: bodyTextColor,
+    fontSize: 18,
+    fontWeight: '400',
+    marginTop: 40,
+  },
+  title: {
+    alignSelf: 'center',
+    color: bodyTextColor,
+    fontSize: 24,
     fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
+    marginTop: 40,
   },
-});
+})
 
-export default App;
+export default App

__tests__/App-test.tsx

@@ -2,13 +2,13 @@
  * @format
  */
 
-import 'react-native';
-import React from 'react';
-import App from '../App';
+import 'react-native'
+import React from 'react'
+import App from '../App'
 
 // Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
+import renderer from 'react-test-renderer'
 
 it('renders correctly', () => {
-  renderer.create(<App />);
-});
+  renderer.create(<App />)
+})

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-};
+}

index.js

@@ -2,8 +2,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import App from './App';
-import {name as appName} from './app.json';
+import { AppRegistry } from 'react-native'
+import App from './App'
+import { name as appName } from './app.json'
 
-AppRegistry.registerComponent(appName, () => App);
+AppRegistry.registerComponent(appName, () => App)

metro.config.js

@@ -14,4 +14,4 @@ module.exports = {
       },
     }),
   },
-};
+}