now playing layout mock-up

App.tsx

@@ -1,115 +1,13 @@
-/**
+import React from 'react';
- * Sample React Native App
+import { RecoilRoot } from 'recoil';
- * https://github.com/facebook/react-native
+import Layout from './src/components/NowPlayingLayout';
- *
- * Generated with the TypeScript template
- * https://github.com/react-native-community/react-native-template-typescript
- *
- * @format
- */
 
- import React from 'react';
+const App = () => {
- import {
+  return (
-   SafeAreaView,
+    <RecoilRoot>
-   ScrollView,
+      <Layout />
-   StatusBar,
+    </RecoilRoot>
-   StyleSheet,
+  );
-   Text,
+}
-   useColorScheme,
-   View,
- } from 'react-native';
 
- import {
+export default App;
-   Colors,
-   DebugInstructions,
-   Header,
-   LearnMoreLinks,
-   ReloadInstructions,
- } from 'react-native/Libraries/NewAppScreen';
-
- const Section: React.FC<{
-   title: string;
- }> = ({children, title}) => {
-   const isDarkMode = useColorScheme() === 'dark';
-   return (
-     <View style={styles.sectionContainer}>
-       <Text
-         style={[
-           styles.sectionTitle,
-           {
-             color: isDarkMode ? Colors.white : Colors.black,
-           },
-         ]}>
-         {title}
-       </Text>
-       <Text
-         style={[
-           styles.sectionDescription,
-           {
-             color: isDarkMode ? Colors.light : Colors.dark,
-           },
-         ]}>
-         {children}
-       </Text>
-     </View>
-   );
- };
-
- const App = () => {
-   const isDarkMode = useColorScheme() === 'dark';
-
-   const backgroundStyle = {
-     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-   };
-
-   return (
-     <SafeAreaView style={backgroundStyle}>
-       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-       <ScrollView
-         contentInsetAdjustmentBehavior="automatic"
-         style={backgroundStyle}>
-         <Header />
-         <View
-           style={{
-             backgroundColor: isDarkMode ? Colors.black : Colors.white,
-           }}>
-           <Section title="Step One">
-             Edit <Text style={styles.highlight}>App.js</Text> to change this
-             screen and then come back to see your edits.
-           </Section>
-           <Section title="See Your Changes">
-             <ReloadInstructions />
-           </Section>
-           <Section title="Debug">
-             <DebugInstructions />
-           </Section>
-           <Section title="Learn More">
-             Read the docs to discover what to do next:
-           </Section>
-           <LearnMoreLinks />
-         </View>
-       </ScrollView>
-     </SafeAreaView>
-   );
- };
-
- const styles = StyleSheet.create({
-   sectionContainer: {
-     marginTop: 32,
-     paddingHorizontal: 24,
-   },
-   sectionTitle: {
-     fontSize: 24,
-     fontWeight: '600',
-   },
-   sectionDescription: {
-     marginTop: 8,
-     fontSize: 18,
-     fontWeight: '400',
-   },
-   highlight: {
-     fontWeight: '700',
-   },
- });
-
- export default App;

index.js

@@ -1,9 +1,11 @@
-/**
+import { AppRegistry, LogBox } from 'react-native';
- * @format
+
- */
+// ignore recoil's timer warning on android:
+// https://github.com/facebookexperimental/Recoil/issues/1030
+LogBox.ignoreLogs(["timer"]);
 
-import {AppRegistry} from 'react-native';
 import App from './App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
+
 
 AppRegistry.registerComponent(appName, () => App);

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.1",
       "dependencies": {
         "react": "17.0.1",
-        "react-native": "0.64.1"
+        "react-native": "0.64.1",
+        "recoil": "^0.3.1"
       },
       "devDependencies": {
         "@babel/core": "^7.12.9",
@@ -6279,6 +6280,11 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha1-4hwlKWjH4zsg9qGwlM2FeHomVgE="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -10748,6 +10754,25 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/recoil": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.3.1.tgz",
+      "integrity": "sha512-KNA3DRqgxX4rRC8E7fc6uIw7BACmMPuraIYy+ejhE8tsw7w32CetMm8w7AMZa34wzanKKkev3vl3H7Z4s0QSiA==",
+      "dependencies": {
+        "hamt_plus": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -17989,6 +18014,11 @@
       "dev": true,
       "optional": true
     },
+    "hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha1-4hwlKWjH4zsg9qGwlM2FeHomVgE="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -21426,6 +21456,14 @@
         "resolve": "^1.1.6"
       }
     },
+    "recoil": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.3.1.tgz",
+      "integrity": "sha512-KNA3DRqgxX4rRC8E7fc6uIw7BACmMPuraIYy+ejhE8tsw7w32CetMm8w7AMZa34wzanKKkev3vl3H7Z4s0QSiA==",
+      "requires": {
+        "hamt_plus": "1.0.2"
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "17.0.1",
-    "react-native": "0.64.1"
+    "react-native": "0.64.1",
+    "recoil": "^0.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

src/components/NowPlayingLayout.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+
+const NowPlayingLayout = () => {
+  return (
+    <View style={{ // background
+      backgroundColor: 'darkblue',
+      flex: 1,
+    }}>
+
+
+      {/* top bar */}
+      <View style={{
+        height: 70,
+        flexDirection: 'row',
+      }}>
+        <View style={{ width: 70, height: 70, backgroundColor: 'grey' }}></View>
+        <View style={{ flex: 1, alignItems: 'center', height: 70, }}>
+          <View style={{ flex: 1 }}></View>
+          <Text style={styles.text}>Playing from Your Library</Text>
+          <Text style={styles.text}>Songs</Text>
+          <View style={{ flex: 1 }}></View>
+        </View>
+        <View style={{ width: 70, height: 70, backgroundColor: 'grey' }}></View>
+      </View>
+
+
+      {/* album art */}
+      <View style={{
+        flex: 5, 
+        // backgroundColor: 'darkorange',
+        alignItems: 'center',
+      }}>
+        <View style={{ flex: 1 }}></View>
+        <View style={{
+          width: 320,
+          height: 320,
+          backgroundColor: 'grey',
+        }}></View>
+        <View style={{ flex: 1 }}></View>
+      </View>
+
+
+      {/* song/album/artist title */}
+      <View style={{ 
+        flex: 1, 
+        // backgroundColor: 'green',
+        alignItems: 'center',
+      }}>
+        <Text style={{ ...styles.text, fontSize: 26, }}>Name of the Song</Text>
+        <Text style={{ ...styles.text, fontSize: 20, fontWeight: 'normal' }}>Cool Artist</Text>
+      </View>
+
+
+      {/* seek bar */}
+      <View style={{ 
+        flex: 0.7, 
+        // backgroundColor: 'red',
+        flexDirection: 'row',
+        alignItems: 'center'
+      }}>
+        <View style={{ width: 20 }}></View>
+        <View style={{
+          flex: 1,
+        }}>
+          <View>
+            <View style={{
+              backgroundColor: 'grey',
+              height: 3,
+              marginBottom: 3,
+              // flex: 1,
+            }} />
+            <View style={{
+              flexDirection: 'row'
+            }}>
+              <Text style={{ ...styles.text, fontWeight: 'normal' }}>00:00</Text>
+              <View style={{ flex: 1 }} />
+              <Text style={{ ...styles.text, fontWeight: 'normal' }}>00:00</Text>
+            </View>
+          </View>
+        </View>
+        <View style={{ width: 20 }}></View>
+      </View>
+
+
+      {/* main player controls */}
+      <View style={{ 
+        height: 90,
+        // backgroundColor: 'darkorange',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}>
+        <View style={{ width: 14 }} />
+        <View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
+        <View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
+        <View style={{ width: 90, height: 90, backgroundColor: 'grey' }} />
+        <View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
+        <View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
+        <View style={{ width: 14 }} />
+      </View>
+
+      
+      {/* extra controls */}
+      <View style={{ 
+        flex: 1,
+        // backgroundColor: 'green',
+        flexDirection: 'row',
+      }}>
+        <View style={{ width: 14 }} />
+        <View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
+        <View style={{ flex: 1 }} />
+        <View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
+        <View style={{ width: 14 }} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+});
+
+export default NowPlayingLayout;