Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Made series of changes to incorporate dynamic passing of titles to Gl…
…obalSearch SearchBarComponent and rewrote styles for Global Search and General Principles to base off of device dimensions, implemented grid structure using Pressables with precise Figma measurements
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,69 @@ | ||
| import * as Font from "expo-font"; | ||
| import React, { useEffect, useState } from "react"; | ||
| import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"; | ||
|
|
||
| import SearchBarComponent from "./GlobalSearch"; | ||
| import styles from "./generalPrinciplesMainStyles"; | ||
|
|
||
| const GeneralPrinciplesMain = () => { | ||
| const [fontsLoaded, setFontsLoaded] = useState<boolean>(false); | ||
|
|
||
| useEffect(() => { | ||
| async function loadFont() { | ||
| try { | ||
| await Font.loadAsync({ | ||
| // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment | ||
| "Roboto-Regular": require("../assets/fonts/Roboto-Regular.ttf"), | ||
| // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment | ||
| "Roboto-Bold": require("../assets/fonts/Roboto-Bold.ttf"), | ||
| }); | ||
| setFontsLoaded(true); | ||
| } catch (error) { | ||
| console.error("Error loading fonts:", error); | ||
| } | ||
| } | ||
|
|
||
| void loadFont(); | ||
| }, []); | ||
|
|
||
| if (!fontsLoaded) { | ||
| return <Text>Loading...</Text>; | ||
| } | ||
|
|
||
| const renderPressables = () => { | ||
| const pressableData = [ | ||
| ["Emergency Action Plan", "Trauma Centers"], | ||
| ["Burn Centers", "Stroke Centers"], | ||
| ["Inclement Weather", "Serious On-Field Injury"], | ||
| ["Catastrophic Incident", "Administering Medication"], | ||
| ["Muscle Injuries", "Ligament Injuries"], | ||
| ["Dislocations/Subluxations", "Fractures"], | ||
| ]; | ||
|
|
||
| return pressableData.map((row, index) => ( | ||
| <View key={index} style={styles.row}> | ||
| {row.map((label, colIndex) => ( | ||
| <Pressable key={`${index}-${colIndex}`} style={styles.pressable}> | ||
| <Text style={styles.pressableText}>{label}</Text> | ||
| </Pressable> | ||
| ))} | ||
| </View> | ||
| )); | ||
| }; | ||
|
|
||
| return ( | ||
| <SafeAreaView> | ||
| <SearchBarComponent title="General Principles" /> | ||
| <ScrollView alwaysBounceHorizontal={false} contentContainerStyle={{ flexGrow: 1 }}> | ||
| <View style={styles.container}> | ||
| <View style={styles.subheader}> | ||
| <Text style={styles.subheaderText}>Browse by Category</Text> | ||
| </View> | ||
| <View style={styles.grid}>{renderPressables()}</View> | ||
| </View> | ||
| </ScrollView> | ||
| </SafeAreaView> | ||
| ); | ||
| }; | ||
|
|
||
| export default GeneralPrinciplesMain; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,81 @@ | ||
| import { Dimensions, StyleSheet } from "react-native"; | ||
|
|
||
| const { width, height } = Dimensions.get("screen"); | ||
| const minDimension = Math.min(width, height); | ||
| let pressableRatio = 0; | ||
|
|
||
| // Calculate border radius and padding based on device dimensions | ||
| //const borderRadius = (10.75 / 130) * Math.min(width, height); | ||
| // const padding = 0.025 * Math.min(width, height); | ||
| // | ||
| //iPad = 0.3 | ||
| //phone=0.45 | ||
|
|
||
| //if (deviceWidth < deviceHeight): then ratio = 0.45 | ||
| //if (deviceHeight < deviceWidth): then ratio = 0.3 | ||
| const borderRadius = 0.035 * minDimension; | ||
|
|
||
| if (width > height) { | ||
| pressableRatio = 0.3; | ||
| } else { | ||
| pressableRatio = 0.45; | ||
| } | ||
|
|
||
| // Get the width of the device screen | ||
| // const screenWidth = Dimensions.get("window").width; | ||
|
|
||
| // // Calculate the number of columns based on the screen width | ||
| // const numColumns = Math.floor(screenWidth / 140); // Adjust the width of Pressable components | ||
|
|
||
| // // Calculate the width of each Pressable component | ||
| // const pressableWidth = screenWidth / numColumns; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flexDirection: "column", | ||
| paddingBottom: 0.42 * height, //Give user leeway for optimal scroll space | ||
| // padding - We should not apply padding here as per Figma specification | ||
| }, | ||
| subheader: { | ||
| justifyContent: "center", // Center the text vertically | ||
| // alignItems: "center", // Center the text horizontally | ||
| paddingLeft: (16 / 390) * width, | ||
| paddingVertical: (10 / 930.25) * height, | ||
| }, | ||
| subheaderText: { | ||
| fontFamily: "Roboto-Regular", | ||
| fontSize: 0.05 * minDimension, | ||
| }, | ||
| grid: { | ||
| flexDirection: "column", | ||
| // alignItems: "space-evenly", | ||
| justifyContent: "space-between", // Adjust this as per your spacing requirements | ||
| }, | ||
| row: { | ||
| flexDirection: "row", | ||
| // alignItems: "flex-start", | ||
| justifyContent: "space-evenly", // Adjust this as per your spacing requirements | ||
| marginBottom: (10 / 930.25) * height, // Add margin to separate rows | ||
| }, | ||
| pressable: { | ||
| backgroundColor: "#00629b", | ||
| borderColor: "#00000033", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| borderRadius, | ||
| width: (170 / 390.0) * width, //uses Figma measurements to set a width | ||
| height: pressableRatio * (170 / 390.0) * width, //aspect ratio applied to width to set a height | ||
|
|
||
| //width: pressableWidth, | ||
| }, | ||
| pressableText: { | ||
| fontFamily: "Roboto-Bold", | ||
| fontSize: 0.049 * minDimension, | ||
| // textAlign: "left", | ||
| color: "#ffffff", | ||
| paddingHorizontal: (13.98 / (2 * 390)) * width, //Figma measurements for padding horizontal | ||
| paddingVertical: (15.06 / (2 * 930.25)) * height, //Figma measurements for padding vertical | ||
| }, | ||
| }); | ||
|
|
||
| export default styles; |