Skip to content

Commit

Permalink
Merge pull request #32 from poojan010/statusbar_and_android_build_issue
Browse files Browse the repository at this point in the history
Fixed Android Build issue and iPhone 14 pro UI issue
  • Loading branch information
minhtc authored Feb 3, 2023
2 parents 86f9b78 + 55614ec commit 01c47f4
Showing 2 changed files with 99 additions and 95 deletions.
75 changes: 37 additions & 38 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,39 +1,38 @@
{
"name": "audiobookapp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@homielab/react-recontext": "^4.1.2",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"react": "17.0.2",
"react-native": "0.66.4",
"react-native-gesture-handler": "^1.9.0",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-sound": "^0.11.0",
"react-native-vector-icons": "^9.0.0",
"react-recontext": "^0.0.3"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
"name": "audiobookapp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"react": "17.0.2",
"react-native": "0.66.5",
"react-native-gesture-handler": "^1.9.0",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-sound": "^0.11.0",
"react-native-vector-icons": "^9.0.0",
"react-recontext": "^0.0.3"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
119 changes: 62 additions & 57 deletions src/utils/themes.js
Original file line number Diff line number Diff line change
@@ -1,68 +1,73 @@
import {Dimensions, Platform, StatusBar} from 'react-native';
import { Dimensions, Platform, StatusBar } from 'react-native';

const {height, width} = Dimensions.get('window');
const { height, width } = Dimensions.get('window');
const isIphoneXGen =
Platform.OS === 'ios' &&
(height === 812 ||
width === 812 ||
height === 896 ||
width === 896 ||
height === 844 ||
width === 844 ||
height === 926 ||
width === 926);
Platform.OS === 'ios' &&
(height === 812 ||
width === 812 ||
height === 896 ||
width === 896 ||
height === 844 ||
width === 844 ||
height === 926 ||
width === 926);

const isIphone14Pro = (Platform.OS === 'ios' && (height === 852 || height === 932));

const statusBarHeight = Platform.select({
ios: isIphoneXGen ? 44 : 24,
android: StatusBar.currentHeight,
ios: isIphone14Pro ? 50 : isIphoneXGen ? 44 : 24,
android: StatusBar.currentHeight,
});
const headerHeight = isIphoneXGen ? 130 - statusBarHeight : 84;
const headerHeight = isIphone14Pro
? 145 - statusBarHeight
: isIphoneXGen ? 130 - statusBarHeight : 84;

const metrics = {
padding: 15,
lessPadding: 10,
extraPadding: 20,
radius: 8,
screenWidth: width,
screenHeight: height,
coverWidth: 126,
coverHeight: 168,
statusBarHeight: statusBarHeight,
headerHeightHalf: headerHeight / 2,
headerHeight: headerHeight,
headerHeightX2: headerHeight * 2,
headerHeightX3: headerHeight * 3,
tabbarHeight: 49,
bottomSpaceHeight: isIphoneXGen ? 34 : 0,
padding: 15,
lessPadding: 10,
extraPadding: 20,
radius: 8,
screenWidth: width,
screenHeight: height,
coverWidth: 126,
coverHeight: 168,
statusBarHeight: statusBarHeight,
headerHeightHalf: headerHeight / 2,
headerHeight: headerHeight,
headerHeightX2: headerHeight * 2,
headerHeightX3: headerHeight * 3,
tabbarHeight: 49,
bottomSpaceHeight: isIphoneXGen ? 34 : 0,
};

const colors = {
primary: '#1c86f4',
primaryDark: '#1e5bef',
primaryLight: '#1ba1f7',
accent: '#3497FD',
text: '#000000',
textSecondary: '#8D8D92',
divider: '#BDBDBD',
white: '#ffffff',
lightOpacity: 'rgba(255,255,255,0.8)',
darkOpacity: 'rgba(0, 0, 0, 0.1)',
black: '#000000',
background: '#f1f1f1',
star: '#fe8302',
transparent: 'transparent',
shadow: {
...Platform.select({
ios: {
shadowColor: 'rgba(0, 0, 0, 0.9)',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.15,
shadowRadius: 15,
},
android: {
elevation: 1,
},
}),
},
primary: '#1c86f4',
primaryDark: '#1e5bef',
primaryLight: '#1ba1f7',
accent: '#3497FD',
text: '#000000',
textSecondary: '#8D8D92',
divider: '#BDBDBD',
white: '#ffffff',
lightOpacity: 'rgba(255,255,255,0.8)',
darkOpacity: 'rgba(0, 0, 0, 0.1)',
black: '#000000',
background: '#f1f1f1',
star: '#fe8302',
transparent: 'transparent',
shadow: {
...Platform.select({
ios: {
shadowColor: 'rgba(0, 0, 0, 0.9)',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.15,
shadowRadius: 15,
},
android: {
elevation: 1,
},
}),
},
};

export {metrics, colors};
export { metrics, colors };

0 comments on commit 01c47f4

Please sign in to comment.