Updated readme, Fix avatar border bug & Theme switch glitch

hmziqrs · Mar 26, 2020 · 5aac860 · 5aac860
1 parent eb19e01
commit 5aac860
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@
 
 ## 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.
+> Please note that this project's code is not meant for beginners! If you're just getting started with React Native 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.
 
@@ -44,6 +44,15 @@
 
 ## Download
 
+<div id="downloads">
+  <a href="https://play.google.com/store/apps/details?id=com.onemdev.rnloop">
+    <img src="https://raw.githubusercontent.com/hackerhgl/react-native-loop-game/master/.github/assets/google-play.png" alt="Play Store badge" width="200" />
+  </a>
+  <a href="https://github.com/hackerhgl/react-native-loop-game/releases/latest/download/app-release.apk">
+    <img src="https://raw.githubusercontent.com/hackerhgl/react-native-loop-game/master/.github/assets/android.png" alt="Android badge" width="200" />
+  </a>
+</div>
+
 
 ## License
 

diff --git a/app/components/Text.js b/app/components/Text.js
@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { Text } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { ThemeContext } from 'contexts/Theme';
+import { colors } from 'rn-hgl';
+
+export function NativeText({ children, style, ...props }) {
+  const { isDark } = useContext(ThemeContext);
+
+  const themeStyle = { color: isDark ? colors.white : colors.dark };
+
+  return (
+    <Text {...props} style={[themeStyle].concat(style)}>
+      {children}
+    </Text>
+  );
+}
+
+NativeText.propTypes = {
+  children: PropTypes.any.isRequired,
+  style: PropTypes.any,
+};
+NativeText.defaultProps = {
+  style: {},
+};
+
+export default NativeText;
diff --git a/app/contexts/Theme/index.js b/app/contexts/Theme/index.js
@@ -1,11 +1,9 @@
 import React, { createContext, useState } from 'react';
-import { StatusBar, Text } from 'react-native';
+import { StatusBar } 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 = {
@@ -67,8 +65,6 @@ export default function ThemeContextProvider({ children }) {
     props.mode = state.theme;
   }
 
-  setText(isDark);
-
   return (
     <DarkModeProvider {...props}>
       <ThemeContext.Provider

diff --git a/app/init.js b/app/init.js
@@ -9,30 +9,25 @@ import 'react-native-gesture-handler';
 
 import { getFont } from 'utils/fonts';
 
-import { colors, typography } from 'configs';
+import { typography } from 'configs';
 
 const sourceRender = Text.render;
 
-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();
+Text.render = function render(props, ref) {
+  return sourceRender.apply(this, [
+    {
+      ...props,
+      style: [
+        {
+          ...getFont(),
+          fontSize: typography.label1,
+        },
+        props.style,
+      ],
+    },
+    ref,
+  ]);
+};
 
 enableScreens();
 analytics().setAnalyticsCollectionEnabled(true);
diff --git a/app/screens/AboutApp/index.js b/app/screens/AboutApp/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import { View, Text, Linking } from 'react-native';
+import { View, Linking } from 'react-native';
 import PropTypes from 'prop-types';
 import { useDynamicStyleSheet } from 'react-native-dark-mode';
 import { TouchNative } from 'rn-hgl';
 
 import PageView from 'components/PageView';
+import Text from 'components/Text';
 import Icon from 'components/Icon';
 
 import rawStyles from './styles';

diff --git a/app/screens/AboutDeveloper/index.js b/app/screens/AboutDeveloper/index.js
@@ -1,14 +1,15 @@
 import React from 'react';
-import { View, Text, Image, Linking } from 'react-native';
+import { View, Image, Linking } from 'react-native';
 import PropTypes from 'prop-types';
 import { TouchNative } from 'rn-hgl';
 
 import avatarImage from 'assets/hamza.jpg';
 
 import * as utils from 'utils';
 
-import PageView from 'components/PageView';
 import pageViewStyles from 'components/PageView/styles';
+import PageView from 'components/PageView';
+import Text from 'components/Text';
 import Icon from 'components/Icon';
 
 import * as data from './data';
@@ -75,6 +76,8 @@ function AboutDeveloperScreen({ navigation }) {
         </View>
       </View>
       <View style={styles.avatarBase}>
+        <View style={styles.avatarBgDark}></View>
+        <View style={styles.avatarBgPrimary}></View>
         <Image source={avatarImage} style={styles.avatarImage} resizeMode="cover" />
       </View>
     </PageView>

diff --git a/app/screens/AboutDeveloper/styles.js b/app/screens/AboutDeveloper/styles.js
@@ -1,14 +1,15 @@
 import { StyleSheet } from 'react-native';
-import { scaling, dimensions } from 'rn-hgl';
+import { scaling, dimensions, platform } from 'rn-hgl';
 
 import { typography, colors } from 'configs';
 import { getFont } from 'utils/fonts';
 
-const AVATAR_SIZE = scaling(30);
+const AVATAR_BASE_SIZE = scaling(30);
 const RED_SECTION_HEIGHT = scaling(32);
-const AVATAR_BORDER_WIDTH = scaling(1.5);
-const AVATAR_TOP_OFFSET = RED_SECTION_HEIGHT - AVATAR_BORDER_WIDTH - AVATAR_SIZE / 2;
-const AVATAR_LEFT_OFFSET = dimensions.width / 2 - AVATAR_SIZE / 2;
+const AVATAR_BORDER_WIDTH = scaling(1.8);
+const AVATAR_TOP_OFFSET = RED_SECTION_HEIGHT - AVATAR_BASE_SIZE / 2;
+const AVATAR_LEFT_OFFSET = dimensions.width / 2 - AVATAR_BASE_SIZE / 2;
+const AVATAR_SIZE = AVATAR_BASE_SIZE - AVATAR_BORDER_WIDTH * 2;
 
 const styles = StyleSheet.create({
   page: {
@@ -24,30 +25,36 @@ const styles = StyleSheet.create({
   backButtonIcon: {
     fontSize: scaling(8),
   },
+  avatarBgDark: {
+    top: 0,
+    position: 'absolute',
+    width: AVATAR_BASE_SIZE,
+    backgroundColor: colors.darkBackground,
+    height: (AVATAR_BASE_SIZE + AVATAR_BORDER_WIDTH * 2) / 2,
+  },
+  avatarBgPrimary: {
+    position: 'absolute',
+    width: AVATAR_BASE_SIZE,
+    backgroundColor: colors.primary,
+    top: AVATAR_BASE_SIZE / 2,
+    height: AVATAR_BASE_SIZE / 2,
+  },
   avatarBase: {
-    borderRadius: 100,
+    overflow: 'hidden',
     position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: AVATAR_BASE_SIZE,
+    height: AVATAR_BASE_SIZE,
     top: AVATAR_TOP_OFFSET,
-    borderWidth: scaling(1.5),
     left: AVATAR_LEFT_OFFSET,
-    borderColor: colors.primary,
-    borderTopColor: colors.darkBackground,
-    borderRightColor: colors.darkBackground,
-    transform: [
-      {
-        rotate: '-45deg',
-      },
-    ],
+    backgroundColor: colors.reddit,
+    borderRadius: AVATAR_BASE_SIZE / 2,
   },
   avatarImage: {
-    borderRadius: 100,
     width: AVATAR_SIZE,
     height: AVATAR_SIZE,
-    transform: [
-      {
-        rotate: '45deg',
-      },
-    ],
+    borderRadius: AVATAR_SIZE / 2,
   },
   body: {
     paddingTop: AVATAR_TOP_OFFSET,
@@ -72,6 +79,7 @@ const styles = StyleSheet.create({
   skillsHolder: {
     flexWrap: 'wrap',
     flexDirection: 'row',
+    alignItems: 'flex-start',
     paddingHorizontal: scaling(1.5),
   },
   skill: {
@@ -107,7 +115,7 @@ const styles = StyleSheet.create({
   supportHolder: {
     marginTop: scaling(2),
     marginHorizontal: scaling(1.5),
-    paddingBottom: scaling(3),
+    paddingBottom: scaling(platform.isAndroid ? 10 : 3),
   },
   supportBase: {
     padding: scaling(1.5),

diff --git a/app/screens/Home/index.js b/app/screens/Home/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useContext } from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 import { useDynamicStyleSheet } from 'react-native-dark-mode';
 import { useIsFocused } from 'react-navigation-hooks';
 import PropTypes from 'prop-types';
@@ -8,6 +8,7 @@ import { TouchNative } from 'rn-hgl';
 import { SettingsContext } from 'contexts/Settings';
 
 import PageView from 'components/PageView';
+import Text from 'components/Text';
 
 import rawStyles from './styles';
 

diff --git a/app/screens/Level/LevelSelectOverlay/index.js b/app/screens/Level/LevelSelectOverlay/index.js
@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
-import { View, Text, Animated } from 'react-native';
+import { View, Animated } from 'react-native';
 import PropTypes from 'prop-types';
 import { TouchNative, scaling } from 'rn-hgl';
 
 import { initLayout } from 'utils/ui';
 
+import Text from 'components/Text';
 import Icon from 'components/Icon';
 
 import styles from './styles';

diff --git a/app/screens/Levels/index.js b/app/screens/Levels/index.js
@@ -1,12 +1,13 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import { useDynamicStyleSheet } from 'react-native-dark-mode';
 import { TouchNative } from 'rn-hgl';
 
 import levels from 'engine/levels';
 
 import PageView from 'components/PageView';
+import Text from 'components/Text';
 
 import rawStyles from './styles';
 

diff --git a/app/screens/Settings/Player/index.js b/app/screens/Settings/Player/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import { useDynamicStyleSheet, useDarkMode } from 'react-native-dark-mode';
 import * as Animatable from 'react-native-animatable';
@@ -12,6 +12,7 @@ import { colors } from 'configs';
 import { useDidMount } from 'utils';
 
 import Icon from 'components/Icon';
+import Text from 'components/Text';
 
 import rawStyles from './styles';
 

diff --git a/app/screens/Settings/index.js b/app/screens/Settings/index.js
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import { useDynamicStyleSheet } from 'react-native-dark-mode';
 import RadioButton from 'react-native-radio-button';
@@ -12,6 +12,7 @@ import { SettingsContext, MP3S } from 'contexts/Settings';
 import { ThemeContext, THEMES } from 'contexts/Theme';
 
 import PageView from 'components/PageView';
+import Text from 'components/Text';
 
 import rawStyles from './styles';
 import Player from './Player';