Skip to content
This repository was archived by the owner on Nov 20, 2024. It is now read-only.

Commit 5aac860

Browse files
hmziqrshmziqrs
committed
Updated readme, Fix avatar border bug & Theme switch glitch
1 parent eb19e01 commit 5aac860

File tree

12 files changed

+102
-57
lines changed

12 files changed

+102
-57
lines changed

‎README.md

+10-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
## Getting started with code
2929

30-
> 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.
30+
> 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.
3131
3232
- `init.js` initialize default settings like styles, theme & API.
3333

@@ -44,6 +44,15 @@
4444

4545
## Download
4646

47+
<div id="downloads">
48+
<a href="https://play.google.com/store/apps/details?id=com.onemdev.rnloop">
49+
<img src="https://raw.githubusercontent.com/hackerhgl/react-native-loop-game/master/.github/assets/google-play.png" alt="Play Store badge" width="200" />
50+
</a>
51+
<a href="https://github.com/hackerhgl/react-native-loop-game/releases/latest/download/app-release.apk">
52+
<img src="https://raw.githubusercontent.com/hackerhgl/react-native-loop-game/master/.github/assets/android.png" alt="Android badge" width="200" />
53+
</a>
54+
</div>
55+
4756

4857
## License
4958

‎app/components/Text.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { useContext } from 'react';
2+
import { Text } from 'react-native';
3+
import PropTypes from 'prop-types';
4+
5+
import { ThemeContext } from 'contexts/Theme';
6+
import { colors } from 'rn-hgl';
7+
8+
export function NativeText({ children, style, ...props }) {
9+
const { isDark } = useContext(ThemeContext);
10+
11+
const themeStyle = { color: isDark ? colors.white : colors.dark };
12+
13+
return (
14+
<Text {...props} style={[themeStyle].concat(style)}>
15+
{children}
16+
</Text>
17+
);
18+
}
19+
20+
NativeText.propTypes = {
21+
children: PropTypes.any.isRequired,
22+
style: PropTypes.any,
23+
};
24+
NativeText.defaultProps = {
25+
style: {},
26+
};
27+
28+
export default NativeText;

‎app/contexts/Theme/index.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React, { createContext, useState } from 'react';
2-
import { StatusBar, Text } from 'react-native';
2+
import { StatusBar } from 'react-native';
33
import PropTypes from 'prop-types';
44
import AsyncStorage from '@react-native-community/async-storage';
55
import { useDarkMode, DarkModeProvider } from 'react-native-dark-mode';
66

7-
import { setText } from 'init';
8-
97
export const ThemeContext = createContext();
108

119
const KEYS = {
@@ -67,8 +65,6 @@ export default function ThemeContextProvider({ children }) {
6765
props.mode = state.theme;
6866
}
6967

70-
setText(isDark);
71-
7268
return (
7369
<DarkModeProvider {...props}>
7470
<ThemeContext.Provider

‎app/init.js

+16-21
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,25 @@ import 'react-native-gesture-handler';
99

1010
import { getFont } from 'utils/fonts';
1111

12-
import { colors, typography } from 'configs';
12+
import { typography } from 'configs';
1313

1414
const sourceRender = Text.render;
1515

16-
export function setText(isDark = false) {
17-
Text.render = function render(props, ref) {
18-
return sourceRender.apply(this, [
19-
{
20-
...props,
21-
style: [
22-
{
23-
...getFont(),
24-
color: isDark ? colors.white : colors.dark,
25-
fontSize: typography.label1,
26-
},
27-
props.style,
28-
],
29-
},
30-
ref,
31-
]);
32-
};
33-
}
34-
35-
setText();
16+
Text.render = function render(props, ref) {
17+
return sourceRender.apply(this, [
18+
{
19+
...props,
20+
style: [
21+
{
22+
...getFont(),
23+
fontSize: typography.label1,
24+
},
25+
props.style,
26+
],
27+
},
28+
ref,
29+
]);
30+
};
3631

3732
enableScreens();
3833
analytics().setAnalyticsCollectionEnabled(true);

‎app/screens/AboutApp/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
2-
import { View, Text, Linking } from 'react-native';
2+
import { View, Linking } from 'react-native';
33
import PropTypes from 'prop-types';
44
import { useDynamicStyleSheet } from 'react-native-dark-mode';
55
import { TouchNative } from 'rn-hgl';
66

77
import PageView from 'components/PageView';
8+
import Text from 'components/Text';
89
import Icon from 'components/Icon';
910

1011
import rawStyles from './styles';

‎app/screens/AboutDeveloper/index.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
2-
import { View, Text, Image, Linking } from 'react-native';
2+
import { View, Image, Linking } from 'react-native';
33
import PropTypes from 'prop-types';
44
import { TouchNative } from 'rn-hgl';
55

66
import avatarImage from 'assets/hamza.jpg';
77

88
import * as utils from 'utils';
99

10-
import PageView from 'components/PageView';
1110
import pageViewStyles from 'components/PageView/styles';
11+
import PageView from 'components/PageView';
12+
import Text from 'components/Text';
1213
import Icon from 'components/Icon';
1314

1415
import * as data from './data';
@@ -75,6 +76,8 @@ function AboutDeveloperScreen({ navigation }) {
7576
</View>
7677
</View>
7778
<View style={styles.avatarBase}>
79+
<View style={styles.avatarBgDark}></View>
80+
<View style={styles.avatarBgPrimary}></View>
7881
<Image source={avatarImage} style={styles.avatarImage} resizeMode="cover" />
7982
</View>
8083
</PageView>

‎app/screens/AboutDeveloper/styles.js

+30-22
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { StyleSheet } from 'react-native';
2-
import { scaling, dimensions } from 'rn-hgl';
2+
import { scaling, dimensions, platform } from 'rn-hgl';
33

44
import { typography, colors } from 'configs';
55
import { getFont } from 'utils/fonts';
66

7-
const AVATAR_SIZE = scaling(30);
7+
const AVATAR_BASE_SIZE = scaling(30);
88
const RED_SECTION_HEIGHT = scaling(32);
9-
const AVATAR_BORDER_WIDTH = scaling(1.5);
10-
const AVATAR_TOP_OFFSET = RED_SECTION_HEIGHT - AVATAR_BORDER_WIDTH - AVATAR_SIZE / 2;
11-
const AVATAR_LEFT_OFFSET = dimensions.width / 2 - AVATAR_SIZE / 2;
9+
const AVATAR_BORDER_WIDTH = scaling(1.8);
10+
const AVATAR_TOP_OFFSET = RED_SECTION_HEIGHT - AVATAR_BASE_SIZE / 2;
11+
const AVATAR_LEFT_OFFSET = dimensions.width / 2 - AVATAR_BASE_SIZE / 2;
12+
const AVATAR_SIZE = AVATAR_BASE_SIZE - AVATAR_BORDER_WIDTH * 2;
1213

1314
const styles = StyleSheet.create({
1415
page: {
@@ -24,30 +25,36 @@ const styles = StyleSheet.create({
2425
backButtonIcon: {
2526
fontSize: scaling(8),
2627
},
28+
avatarBgDark: {
29+
top: 0,
30+
position: 'absolute',
31+
width: AVATAR_BASE_SIZE,
32+
backgroundColor: colors.darkBackground,
33+
height: (AVATAR_BASE_SIZE + AVATAR_BORDER_WIDTH * 2) / 2,
34+
},
35+
avatarBgPrimary: {
36+
position: 'absolute',
37+
width: AVATAR_BASE_SIZE,
38+
backgroundColor: colors.primary,
39+
top: AVATAR_BASE_SIZE / 2,
40+
height: AVATAR_BASE_SIZE / 2,
41+
},
2742
avatarBase: {
28-
borderRadius: 100,
43+
overflow: 'hidden',
2944
position: 'absolute',
45+
alignItems: 'center',
46+
justifyContent: 'center',
47+
width: AVATAR_BASE_SIZE,
48+
height: AVATAR_BASE_SIZE,
3049
top: AVATAR_TOP_OFFSET,
31-
borderWidth: scaling(1.5),
3250
left: AVATAR_LEFT_OFFSET,
33-
borderColor: colors.primary,
34-
borderTopColor: colors.darkBackground,
35-
borderRightColor: colors.darkBackground,
36-
transform: [
37-
{
38-
rotate: '-45deg',
39-
},
40-
],
51+
backgroundColor: colors.reddit,
52+
borderRadius: AVATAR_BASE_SIZE / 2,
4153
},
4254
avatarImage: {
43-
borderRadius: 100,
4455
width: AVATAR_SIZE,
4556
height: AVATAR_SIZE,
46-
transform: [
47-
{
48-
rotate: '45deg',
49-
},
50-
],
57+
borderRadius: AVATAR_SIZE / 2,
5158
},
5259
body: {
5360
paddingTop: AVATAR_TOP_OFFSET,
@@ -72,6 +79,7 @@ const styles = StyleSheet.create({
7279
skillsHolder: {
7380
flexWrap: 'wrap',
7481
flexDirection: 'row',
82+
alignItems: 'flex-start',
7583
paddingHorizontal: scaling(1.5),
7684
},
7785
skill: {
@@ -107,7 +115,7 @@ const styles = StyleSheet.create({
107115
supportHolder: {
108116
marginTop: scaling(2),
109117
marginHorizontal: scaling(1.5),
110-
paddingBottom: scaling(3),
118+
paddingBottom: scaling(platform.isAndroid ? 10 : 3),
111119
},
112120
supportBase: {
113121
padding: scaling(1.5),

‎app/screens/Home/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useContext } from 'react';
2-
import { View, Text } from 'react-native';
2+
import { View } from 'react-native';
33
import { useDynamicStyleSheet } from 'react-native-dark-mode';
44
import { useIsFocused } from 'react-navigation-hooks';
55
import PropTypes from 'prop-types';
@@ -8,6 +8,7 @@ import { TouchNative } from 'rn-hgl';
88
import { SettingsContext } from 'contexts/Settings';
99

1010
import PageView from 'components/PageView';
11+
import Text from 'components/Text';
1112

1213
import rawStyles from './styles';
1314

‎app/screens/Level/LevelSelectOverlay/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React, { useEffect } from 'react';
2-
import { View, Text, Animated } from 'react-native';
2+
import { View, Animated } from 'react-native';
33
import PropTypes from 'prop-types';
44
import { TouchNative, scaling } from 'rn-hgl';
55

66
import { initLayout } from 'utils/ui';
77

8+
import Text from 'components/Text';
89
import Icon from 'components/Icon';
910

1011
import styles from './styles';

‎app/screens/Levels/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react';
2-
import { View, Text } from 'react-native';
2+
import { View } from 'react-native';
33
import PropTypes from 'prop-types';
44
import { useDynamicStyleSheet } from 'react-native-dark-mode';
55
import { TouchNative } from 'rn-hgl';
66

77
import levels from 'engine/levels';
88

99
import PageView from 'components/PageView';
10+
import Text from 'components/Text';
1011

1112
import rawStyles from './styles';
1213

‎app/screens/Settings/Player/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from 'react';
2-
import { Text, View } from 'react-native';
2+
import { View } from 'react-native';
33
import PropTypes from 'prop-types';
44
import { useDynamicStyleSheet, useDarkMode } from 'react-native-dark-mode';
55
import * as Animatable from 'react-native-animatable';
@@ -12,6 +12,7 @@ import { colors } from 'configs';
1212
import { useDidMount } from 'utils';
1313

1414
import Icon from 'components/Icon';
15+
import Text from 'components/Text';
1516

1617
import rawStyles from './styles';
1718

‎app/screens/Settings/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useContext, useEffect, useState } from 'react';
2-
import { Text, View } from 'react-native';
2+
import { View } from 'react-native';
33
import PropTypes from 'prop-types';
44
import { useDynamicStyleSheet } from 'react-native-dark-mode';
55
import RadioButton from 'react-native-radio-button';
@@ -12,6 +12,7 @@ import { SettingsContext, MP3S } from 'contexts/Settings';
1212
import { ThemeContext, THEMES } from 'contexts/Theme';
1313

1414
import PageView from 'components/PageView';
15+
import Text from 'components/Text';
1516

1617
import rawStyles from './styles';
1718
import Player from './Player';

0 commit comments

Comments
 (0)