diff --git a/App.tsx b/App.tsx
index 5b9974c..425cce7 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,115 +1,13 @@
-/**
- * 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 { RecoilRoot } from 'recoil';
+import Layout from './src/components/NowPlayingLayout';
- import React from 'react';
- import {
- SafeAreaView,
- ScrollView,
- StatusBar,
- StyleSheet,
- Text,
- useColorScheme,
- View,
- } from 'react-native';
+const App = () => {
+ return (
+
+
+
+ );
+}
- import {
- Colors,
- DebugInstructions,
- Header,
- LearnMoreLinks,
- ReloadInstructions,
- } from 'react-native/Libraries/NewAppScreen';
-
- const Section: React.FC<{
- title: string;
- }> = ({children, title}) => {
- const isDarkMode = useColorScheme() === 'dark';
- return (
-
-
- {title}
-
-
- {children}
-
-
- );
- };
-
- const App = () => {
- const isDarkMode = useColorScheme() === 'dark';
-
- const backgroundStyle = {
- backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
- };
-
- return (
-
-
-
-
-
-
- Edit App.js to change this
- screen and then come back to see your edits.
-
-
-
-
- Read the docs to discover what to do next:
-
-
-
-
-
- );
- };
-
- 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;
+export default App;
diff --git a/index.js b/index.js
index a850d03..8f869d4 100644
--- a/index.js
+++ b/index.js
@@ -1,9 +1,11 @@
-/**
- * @format
- */
+import { AppRegistry, LogBox } from 'react-native';
+
+// 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);
diff --git a/package-lock.json b/package-lock.json
index 275290d..f08a670 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ebd01b8..9e52bbd 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/NowPlayingLayout.tsx b/src/components/NowPlayingLayout.tsx
new file mode 100644
index 0000000..fc6648a
--- /dev/null
+++ b/src/components/NowPlayingLayout.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+
+const NowPlayingLayout = () => {
+ return (
+
+
+
+ {/* top bar */}
+
+
+
+
+ Playing from Your Library
+ Songs
+
+
+
+
+
+
+ {/* album art */}
+
+
+
+
+
+
+
+ {/* song/album/artist title */}
+
+ Name of the Song
+ Cool Artist
+
+
+
+ {/* seek bar */}
+
+
+
+
+
+
+ 00:00
+
+ 00:00
+
+
+
+
+
+
+
+ {/* main player controls */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* extra controls */}
+
+
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ text: {
+ color: 'white',
+ fontWeight: 'bold',
+ },
+});
+
+export default NowPlayingLayout;