Code clean, Added readme & DarkMode

Author: hmziqrs

README.md

@@ -0,0 +1,75 @@
+# React Native Loop
+
+## Features
+
+<dl>
+  <dt>UI Scaling</dt>
+  <dd>Scales UI on any size of device wether it be tablet, small screen mobile or phablet.</dd>
+
+  <dt>Offline-first</dt>
+  <dd>Run app without an internet connection. All assets are saved locally.</dd>
+  
+  <dt>Simple UI</dt>
+  <dd>Just simple and straight forward UI.</dd>
+
+  <dt>Modularized Structure</dt>
+  <dd>Helps maintain a readable code, easy to fix and more room to add new features.</dd>
+
+  <dt>Open Source</dt>
+  <dd>Any piece of code is free to use anywhere except UI Designs you've to ask permission from relevant designers. Designer's information can be found in app.</dd>
+</dl>
+
+## Requirements to run locally
+
+> Just in case if you ran into errors make sure you're using correct react-native & nodejs version.
+
+- Run `npm run setup` to install required global npm packages with correct versions
+
+## Getting started with code
+
+> Please note that this project's code is not meant for beginners! If you're just getting started with flutter I recommend you to explore some ToDo and basic setState apps and get yourself familiar with react eco-system becuase in this project intermediate and advance implementations are use which will confuse you and won't help much in terms of learning.
+
+- `init.js` initialize default settings like styles, theme & API.
+- `UI.dart` provides constant for building responsive UI.
+- `blocs/` Intially I was going to implement Rest APIs but that seemed unnecessary & a lot of work So I'll probably remove `blocs/` in futrue.
+- `configs/AppDimensions.dart` this is the magical file. It provides the app with:
+  - My custom size unit based on device's width, height & pixel density.
+  - Responsive containers.
+  - Padding multiplier unit (I learned it with experience instead of using 1,2,3px should use multiplier. it helps maintain constancy around the app).
+- `Widgets/Screen.dart` This widget is necessary when building a new screen.
+  - configure theme & font style.
+  - You can show popUps. `final screenKey = GlobalKey<ScreenState>();` & `this.screenKey.showPopUp(message: "your message");`
+  - It also recieve a `belowBuilder` parameter which builds custom background (This enables us to build Parallax, Animated background & Any thing you could imagine in background). you can find an example in `Screens/Download/Download.dart`
+- Code structure is pretty much simple.
+  - Don't import anything form ScreenA in ScreenB.
+  - Don't import anthing from Screen/Widget in universal files.
+  - Don't import anthing from ScreenA specific Widget in universal files.
+  - Each Screen will have `Dimensions.dart` where you can write Screen's responsive logic.
+  - I didn't use snake_case in naming convention just becuase I don't prefer it.
+  - I use `this` for class's properties & methods I helps keep track of vriables & functions.
+
+
+## Show support
+
+> **If you like the project and want to appreciate my effort. Then please perform any of these steps :)**
+
+- Star this repository.
+- Rate the app on <a href="https://play.google.com/store/apps/details?id=com.onemdev.flutter_ui_challenges" target="_playstore">Play Store</a>.
+- Endorse my skills on my <a href="https://www.linkedin.com/in/hackerhgl" target="linkedin">linkedin Profile</a>.
+- Favorite my gigs on <a href="https://www.fiverr.com/hackerhgl" target="fiver">Fiverr</a>.
+- Give a recommendation on <a href="https://www.freelancer.com/u/hackerhgl" target="freelance">Freelancer</a>.
+
+## Download
+
+<div id="downloads">
+  <a href="https://play.google.com/store/apps/details?id=com.onemdev.flutter_ui_challenges">
+    <img src="https://raw.githubusercontent.com/hackerhgl/flutter-ui-designs/master/.github/assets/google-play.png" alt="Play Store badge" width="200" />
+  </a>
+  <a href="https://github.com/hackerhgl/flutter-ui-designs/releases/latest/download/app-release.apk">
+    <img src="https://raw.githubusercontent.com/hackerhgl/flutter-ui-designs/master/.github/assets/android.png" alt="Android badge" width="200" />
+  </a>
+</div>
+
+## License
+
+This project is licensed under the MIT license, Copyright (c) 2020 Hamza Iqbal. For more information see `LICENSE.md`.

android/app/src/main/AndroidManifest.xml

@@ -26,7 +26,7 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
         android:screenOrientation="portrait"
         android:windowSoftInputMode="adjustResize">
         <intent-filter>

app/configs/index.js

@@ -9,7 +9,7 @@ export const colors = {
   ...defaultColors,
   accent: Color('#1565C0'),
   primary: Color('#cc2f2c'),
-  darkBackground: Color('#1b1b1a'),
+  darkBackground: Color('#1c1c1e'),
   textColor: Color('#1b1b1a'),
 };
 

app/contexts/Theme/index.js

@@ -0,0 +1,89 @@
+import React, { createContext, useState } from 'react';
+import { StatusBar, Text } from 'react-native';
+import PropTypes from 'prop-types';
+import AsyncStorage from '@react-native-community/async-storage';
+import { useDarkMode, DarkModeProvider } from 'react-native-dark-mode';
+
+import { setText } from 'init';
+
+export const ThemeContext = createContext();
+
+const KEYS = {
+  THEME: 'theme',
+};
+
+export const THEMES = {
+  default: 'default',
+  light: 'light',
+  dark: 'dark',
+};
+
+export default function ThemeContextProvider({ children }) {
+  const [state, setState] = useState({
+    init: false,
+    theme: THEMES.default,
+  });
+  const safeSetState = (newState) => setState({ ...state, ...newState });
+  const isDarkMode = useDarkMode();
+  const isDark = state.theme === THEMES.dark || (state.theme === THEMES.default && isDarkMode);
+  const props = {};
+
+  function setDefaultStatusBar() {
+    StatusBar.setBarStyle(isDark ? 'light-content' : 'dark-content', true);
+  }
+
+  setDefaultStatusBar();
+
+  async function setTheme(theme) {
+    if (theme === state.theme) {
+      return;
+    }
+    try {
+      safeSetState({ theme });
+      AsyncStorage.setItem(KEYS.THEME, theme);
+    } catch (e) {
+      //
+    }
+  }
+
+  async function initApp() {
+    try {
+      const cache = await AsyncStorage.getItem(KEYS.THEME);
+      if (cache && cache !== state.mp3) {
+        safeSetState({ init: true, theme: cache });
+      } else {
+        safeSetState({ init: true });
+      }
+    } catch (e) {
+      // e
+    }
+  }
+
+  if (!state.init) {
+    initApp();
+  }
+
+  if (state.theme !== THEMES.default) {
+    props.mode = state.theme;
+  }
+
+  setText(isDark);
+
+  return (
+    <DarkModeProvider {...props}>
+      <ThemeContext.Provider
+        value={{
+          ...state,
+          setTheme,
+          setDefaultStatusBar,
+        }}
+      >
+        {children}
+      </ThemeContext.Provider>
+    </DarkModeProvider>
+  );
+}
+
+ThemeContextProvider.propTypes = {
+  children: PropTypes.any.isRequired,
+};

app/engine/index.js

@@ -69,14 +69,9 @@ export default function useEngine(forceLevel, player) {
         url: `data:image/jpeg;base64,${base64}`,
         filename: `rn-loop-game-${new Date().getTime()}`,
       });
-
-      // await sleep(4000);
       player.play();
     } catch (e) {
-      console.log(e);
-
       player.play();
-      // e
     }
   }
 
@@ -125,7 +120,6 @@ export default function useEngine(forceLevel, player) {
     grid,
     level,
     theme,
-    // theme: levels[level].theme.dark,
     success,
     capture,
     setRotate,

app/index.js

@@ -11,16 +11,15 @@ import { isIOS } from 'rn-hgl/platform';
 import { colors } from 'configs';
 
 import SettingsContextProvider from 'contexts/Settings';
+import ThemeContextProvider from 'contexts/Theme';
 
 import Navigator from './Navigator';
-import routesMap from './routes.map';
 
 function onRouteChange(prevState, currentState) {
   const currentScreen = getActiveRouteName(currentState);
   const prevScreen = getActiveRouteName(prevState);
   if (prevScreen !== currentScreen) {
     analytics().setCurrentScreen(currentScreen, currentScreen);
-    StatusBar.setBarStyle(routesMap[currentScreen].statusBar);
   }
 }
 
@@ -32,21 +31,24 @@ function initStatusbar() {
 }
 
 function App() {
+  const timeout = setTimeout(initStatusbar, 100);
+
   if (UIManager.setLayoutAnimationEnabledExperimental) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
   }
 
-  const timeout = setTimeout(initStatusbar, 100);
-
   initStatusbar();
+
   useEffect(() => () => {
     clearTimeout(timeout);
   });
 
   return (
-    <SettingsContextProvider>
-      <Navigator onNavigationStateChange={onRouteChange} />
-    </SettingsContextProvider>
+    <ThemeContextProvider>
+      <SettingsContextProvider>
+        <Navigator onNavigationStateChange={onRouteChange} />
+      </SettingsContextProvider>
+    </ThemeContextProvider>
   );
 }
 

app/index.old.text

@@ -12,18 +12,27 @@ import { getFont } from 'utils/fonts';
 import { colors, typography } from 'configs';
 
 const sourceRender = Text.render;
-Text.render = function render(props, ref) {
-  return sourceRender.apply(this, [
-    {
-      ...props,
-      style: [
-        { ...getFont(), color: colors.dark.string(), fontSize: typography.label1 },
-        props.style,
-      ],
-    },
-    ref,
-  ]);
-};
+
+export function setText(isDark = false) {
+  Text.render = function render(props, ref) {
+    return sourceRender.apply(this, [
+      {
+        ...props,
+        style: [
+          {
+            ...getFont(),
+            color: isDark ? colors.white : colors.dark,
+            fontSize: typography.label1,
+          },
+          props.style,
+        ],
+      },
+      ref,
+    ]);
+  };
+}
+
+setText();
 
 enableScreens();
 analytics().setAnalyticsCollectionEnabled(true);

app/init.js

@@ -0,0 +1,22 @@
+export const links = [
+  {
+    label: 'Github',
+    icon: 'github-circle',
+    url: 'https://github.com/hackerhgl/react-native-loop-clone',
+  },
+  {
+    icon: 'google-play',
+    label: 'Original App',
+    url: 'https://play.google.com/store/apps/details?id=com.balysv.loop',
+  },
+  {
+    icon: 'apple',
+    label: 'Original App',
+    url: 'https://apps.apple.com/us/app/infinity-loop-endless-zen/id977028266',
+  },
+  {
+    icon: 'web',
+    label: 'Orange Free Sounds',
+    url: 'http://www.orangefreesounds.com/',
+  },
+];