From 5aac8609cae2a8dfd7d7b3e4e098ef98884ccd2c Mon Sep 17 00:00:00 2001 From: hackerhgl Date: Thu, 26 Mar 2020 17:57:46 +0500 Subject: [PATCH] Updated readme, Fix avatar border bug & Theme switch glitch --- README.md | 11 +++- app/components/Text.js | 28 ++++++++++ app/contexts/Theme/index.js | 6 +-- app/init.js | 37 ++++++------- app/screens/AboutApp/index.js | 3 +- app/screens/AboutDeveloper/index.js | 7 ++- app/screens/AboutDeveloper/styles.js | 52 +++++++++++-------- app/screens/Home/index.js | 3 +- app/screens/Level/LevelSelectOverlay/index.js | 3 +- app/screens/Levels/index.js | 3 +- app/screens/Settings/Player/index.js | 3 +- app/screens/Settings/index.js | 3 +- 12 files changed, 102 insertions(+), 57 deletions(-) create mode 100755 app/components/Text.js diff --git a/README.md b/README.md index 16bdf52..c199daa 100755 --- 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 +
+ + Play Store badge + + + Android badge + +
+ ## License diff --git a/app/components/Text.js b/app/components/Text.js new file mode 100755 index 0000000..9a993d7 --- /dev/null +++ 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 ( + + {children} + + ); +} + +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 index 3a1facb..31b6261 100755 --- 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 ( + + diff --git a/app/screens/AboutDeveloper/styles.js b/app/screens/AboutDeveloper/styles.js index 0bcd737..6ead4c1 100755 --- 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 index e72244c..dece426 100755 --- 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 index 0969acb..b81e2cb 100755 --- 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 index c366fe4..0fb1e6e 100755 --- a/app/screens/Levels/index.js +++ b/app/screens/Levels/index.js @@ -1,5 +1,5 @@ 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'; @@ -7,6 +7,7 @@ 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 index 4aea3c7..1f46b97 100755 --- 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 index 6f269b6..b3d36b0 100755 --- 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';