From a6bcf74955289a53d9df5a4c71db5cba0aa70a77 Mon Sep 17 00:00:00 2001 From: "Bhajneet S.K" Date: Mon, 2 May 2022 10:10:54 -0400 Subject: [PATCH] feat: add tablet support (#300) * feat: support ipad in xcode * feat: hide BottomBar * feat: add search and collections buttons to navbar * refactor: remove unused code * fix: center logo better * fix: include import for Platform * fix: visually align backbutton with the same padding as gurbaniscreen buttons * fix: only apply margin fix to outer icons (not every child in a group of icons) * refactor: create isTablet in helpers * feat: add iPad emulator to package.json * feat: add split view support for iPad * feat: hide title in logo when narrow width * feat: widen range of bottom drawers * fix: use correct edge for width in landscape test * fix: nit * refactor: remove unused style * style: mega-nit * fix: logic in isTablet * refactor: remove duplicate assignment * refactor: use theme constant for negative margin fix * style: nit * refactor: simplify code * style: write negative values with preceding hyphen * refactor: use name for breakpoint --- ios/Mobile.xcodeproj/project.pbxproj | 2 ++ ios/Mobile/Info.plist | 1 + package.json | 1 + src/components/BackButton.tsx | 2 +- src/components/IconHeaderButton.tsx | 13 +------ src/components/Logo.tsx | 36 +++++++++++++++++++ src/components/ModalSheet.tsx | 2 +- src/components/use-landscape.spec.tsx | 4 +-- src/components/use-landscape.tsx | 2 +- src/helpers/isTablet.ts | 7 ++++ src/screens/Gurbani/index.tsx | 3 +- src/screens/GurbaniNavigator.tsx | 52 ++++++++++++++------------- src/themes/units.ts | 1 + 13 files changed, 84 insertions(+), 42 deletions(-) create mode 100644 src/components/Logo.tsx create mode 100644 src/helpers/isTablet.ts diff --git a/ios/Mobile.xcodeproj/project.pbxproj b/ios/Mobile.xcodeproj/project.pbxproj index 83c0d5d3..679d8cda 100644 --- a/ios/Mobile.xcodeproj/project.pbxproj +++ b/ios/Mobile.xcodeproj/project.pbxproj @@ -616,6 +616,7 @@ PROVISIONING_PROFILE_SPECIFIER = "match AppStore com.shabados.app"; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; + TARGETED_DEVICE_FAMILY = "1,2"; VERSIONING_SYSTEM = "apple-generic"; }; name = Debug; @@ -646,6 +647,7 @@ PRODUCT_NAME = "Shabad OS"; PROVISIONING_PROFILE_SPECIFIER = "match AppStore com.shabados.app"; SWIFT_VERSION = 5.0; + TARGETED_DEVICE_FAMILY = "1,2"; VERSIONING_SYSTEM = "apple-generic"; }; name = Release; diff --git a/ios/Mobile/Info.plist b/ios/Mobile/Info.plist index 78a48b2c..ee17b694 100644 --- a/ios/Mobile/Info.plist +++ b/ios/Mobile/Info.plist @@ -81,6 +81,7 @@ UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight + UIInterfaceOrientationPortraitUpsideDown UIViewControllerBasedStatusBarAppearance diff --git a/package.json b/package.json index f2092f19..db0e4882 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "test": "cross-env ENVFILE=config/.env.local jest --color", "start:android": "cross-env ENVFILE=config/.env.local react-native run-android", "start:ios": "cross-env ENVFILE=config/.env.local react-native run-ios --simulator='iPhone 12'", + "start:ios:ipad": "cross-env ENVFILE=config/.env.local react-native run-ios --simulator='iPad (9th generation)'", "build:android": "bundle exec fastlane android build", "build:ios": "bundle exec fastlane ios build", "clean:android": "bundle exec fastlane android clean", diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx index 4fd3e87b..05a20d8e 100644 --- a/src/components/BackButton.tsx +++ b/src/components/BackButton.tsx @@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native' const styles = StyleSheet.create( { native: { - margin: -16, + marginLeft: -8, }, } ) diff --git a/src/components/IconHeaderButton.tsx b/src/components/IconHeaderButton.tsx index 963d962c..7153dd9a 100644 --- a/src/components/IconHeaderButton.tsx +++ b/src/components/IconHeaderButton.tsx @@ -1,26 +1,15 @@ -import { StyleSheet } from 'react-native' import Icon from 'react-native-vector-icons/Ionicons' import { HeaderButton } from 'react-navigation-header-buttons' import Colors from '../themes/colors' -const styles = StyleSheet.create( { - native: { - margin: -16, - }, -} ) - export type IconHeaderButtonProps = { title: string, disabled?: boolean, - // To fix https://github.com/react-navigation/react-navigation/issues/10058 - // Native Stack Navigators + HeaderBackButton has funky margin otherwise - native?: boolean, } -const IconHeaderButton = ( { disabled, native = true, ...props }: IconHeaderButtonProps ) => ( +const IconHeaderButton = ( { disabled, ...props }: IconHeaderButtonProps ) => ( { + const { width } = useWindowDimensions() + + return ( + + + {width > Units.ThinSplitViewWidth + && Shabad OS} + + ) +} + +export default Logo diff --git a/src/components/ModalSheet.tsx b/src/components/ModalSheet.tsx index e0d4c163..d155cf7d 100644 --- a/src/components/ModalSheet.tsx +++ b/src/components/ModalSheet.tsx @@ -56,7 +56,7 @@ const ModalSheet = ( { children, }: ModalSheetProps ) => { const { isLandscape, landscapeStyle } = useLandscape() - const snapPoints = isLandscape ? [ '70%', '90%' ] : [ '40%', '70%' ] + const snapPoints = isLandscape ? [ '75%', '98%' ] : [ '40%', '75%' ] const sheetRef = useRef( null ) diff --git a/src/components/use-landscape.spec.tsx b/src/components/use-landscape.spec.tsx index 80b73017..293a203c 100644 --- a/src/components/use-landscape.spec.tsx +++ b/src/components/use-landscape.spec.tsx @@ -31,8 +31,8 @@ describe( 'useLandscape()', () => { const { result: { current } } = setup( true ) expect( current.landscapeStyle ).toMatchObject( { - marginRight: SHORTER_EDGE / 2, - marginLeft: SHORTER_EDGE / 2, + marginRight: LONGER_EDGE / 6, + marginLeft: LONGER_EDGE / 6, } ) } ) } ) diff --git a/src/components/use-landscape.tsx b/src/components/use-landscape.tsx index 86f32aa1..ec210489 100644 --- a/src/components/use-landscape.tsx +++ b/src/components/use-landscape.tsx @@ -5,7 +5,7 @@ const useLandscape = () => { const isLandscape = width > height const landscapeStyle: StyleProp = isLandscape - ? { marginLeft: height / 2, marginRight: height / 2 } + ? { marginLeft: width / 6, marginRight: width / 6 } : {} return { isLandscape, landscapeStyle } diff --git a/src/helpers/isTablet.ts b/src/helpers/isTablet.ts new file mode 100644 index 00000000..a70d0442 --- /dev/null +++ b/src/helpers/isTablet.ts @@ -0,0 +1,7 @@ +import { Dimensions, Platform } from 'react-native' + +const window = Dimensions.get( 'window' ) +const { width, height } = window +const isTablet = ( Platform.OS === 'ios' && Platform.isPad ) || ( Platform.OS === 'android' && ( ( width >= 960 && height >= 720 ) || ( width >= 720 && height >= 960 ) ) ) + +export default isTablet diff --git a/src/screens/Gurbani/index.tsx b/src/screens/Gurbani/index.tsx index a5450f0c..00eaf516 100644 --- a/src/screens/Gurbani/index.tsx +++ b/src/screens/Gurbani/index.tsx @@ -1,6 +1,7 @@ import { useQuery } from 'react-query' import Container from '../../components/Container' +import isTablet from '../../helpers/isTablet' import { getBookmark, getShabad } from '../../services/data' import { settings, useSetting } from '../../services/settings' import { ContentType, LineData } from '../../types/data' @@ -34,7 +35,7 @@ const GurbaniScreen = ( { {data && } - + {!isTablet && } ) } diff --git a/src/screens/GurbaniNavigator.tsx b/src/screens/GurbaniNavigator.tsx index 452637c3..f34fa950 100644 --- a/src/screens/GurbaniNavigator.tsx +++ b/src/screens/GurbaniNavigator.tsx @@ -1,12 +1,11 @@ import { createNativeStackNavigator, NativeStackNavigationOptions } from '@react-navigation/native-stack' -import { Image, StyleSheet, View } from 'react-native' +import { StyleSheet } from 'react-native' import { HeaderButtons, Item } from 'react-navigation-header-buttons' -import logo from '../../assets/images/logo.png' import IconHeaderButton from '../components/IconHeaderButton' -import Typography from '../components/Typography' -import Colors from '../themes/colors' -import { px } from '../themes/utils' +import Logo from '../components/Logo' +import isTablet from '../helpers/isTablet' +import Units from '../themes/units' import { ContentType } from '../types/data' import { GurbaniStackParams, GurbaniStackScreenProps } from '../types/navigation' import GurbaniScreen from './Gurbani' @@ -14,23 +13,15 @@ import GurbaniScreen from './Gurbani' const { Navigator, Screen } = createNativeStackNavigator() const styles = StyleSheet.create( { - headerIcon: { - color: Colors.PrimaryText, - fontSize: 28, - ...px( 10 ), - }, headerTitle: { flexDirection: 'row', alignItems: 'center', }, - logoIcon: { - width: 28, - height: 28, - marginRight: 10, + left: { + marginLeft: -Units.HorizontalLayoutMargin, }, - logoText: { - fontSize: 20, - fontWeight: '300', + right: { + marginRight: -Units.HorizontalLayoutMargin, }, } ) @@ -45,25 +36,38 @@ const getOptions = ( { iconName="menu" testID="navbar-menu" disabled + style={styles.left} /> ), headerRight: () => ( + {isTablet && ( + <> + navigation.navigate( 'Root.Search' )} + /> + navigation.navigate( 'Root.Collections' )} + /> + + )} navigation.navigate( 'Home.Tab.Settings', { screen: 'Settings.View' } )} + style={styles.right} /> ), - headerTitle: () => ( - - - Shabad OS - - ), + headerTitle: Logo, } ) const GurbaniNavigator = () => ( diff --git a/src/themes/units.ts b/src/themes/units.ts index c042e2e8..164d0563 100644 --- a/src/themes/units.ts +++ b/src/themes/units.ts @@ -14,6 +14,7 @@ enum Units { ThumbFingerRatio = 1.5, Separator = StyleSheet.hairlineWidth, BorderRadius = 25, + ThinSplitViewWidth = 350, } export default Units