diff --git a/Group 58.svg b/Group 58.svg new file mode 100644 index 0000000..2874d4a --- /dev/null +++ b/Group 58.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/flash-circle.svg b/flash-circle.svg new file mode 100644 index 0000000..a346954 --- /dev/null +++ b/flash-circle.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/QRCodeScanner/QRCodeScanner.tsx b/src/components/QRCodeScanner/QRCodeScanner.tsx index b71c4de..1b78cc0 100644 --- a/src/components/QRCodeScanner/QRCodeScanner.tsx +++ b/src/components/QRCodeScanner/QRCodeScanner.tsx @@ -6,6 +6,9 @@ import { useCameraPermissions, } from 'expo-camera'; import { NativeStackScreenProps } from '@react-navigation/native-stack'; +import SvgFlash from '@/icons/Flash'; +import SvgFlashCircle from '@/icons/FlashCircle'; +import SvgXButton from '@/icons/XButton'; import { HomeStackParamList } from '@/types/navigation'; import styles from './styles'; @@ -58,10 +61,10 @@ export default function QRCodeScanner({ navigation }: QRCodeScannerProps) { setFlashEnabled(!flashEnabled)}> - Flash + navigation.goBack()}> - X + diff --git a/src/components/QRCodeScanner/styles.ts b/src/components/QRCodeScanner/styles.ts index 48f768d..9351d2c 100644 --- a/src/components/QRCodeScanner/styles.ts +++ b/src/components/QRCodeScanner/styles.ts @@ -14,7 +14,7 @@ export default StyleSheet.create({ iconFlex: { flex: 0, width: '100%', - paddingHorizontal: 44, + paddingHorizontal: 27, flexDirection: 'row', justifyContent: 'space-between', }, diff --git a/src/icons/BackArrow.tsx b/src/icons/BackArrow.tsx new file mode 100644 index 0000000..958c21a --- /dev/null +++ b/src/icons/BackArrow.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Svg, { Circle, Path, SvgProps } from 'react-native-svg'; + +const SvgBackArrow = (props: SvgProps) => ( + + + + +); +export default SvgBackArrow; diff --git a/src/icons/FlashCircle.tsx b/src/icons/FlashCircle.tsx new file mode 100644 index 0000000..29be0d0 --- /dev/null +++ b/src/icons/FlashCircle.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import Svg, { G, Path, SvgProps } from 'react-native-svg'; + +const SvgFlashCircle = (props: SvgProps) => ( + + + + + + +); +export default SvgFlashCircle; diff --git a/src/icons/ScanBarcode.tsx b/src/icons/ScanBarcode.tsx new file mode 100644 index 0000000..f29b43e --- /dev/null +++ b/src/icons/ScanBarcode.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Svg, { G, Path, SvgProps } from 'react-native-svg'; + +const SvgScanBarcode = (props: SvgProps) => ( + + + + + + +); +export default SvgScanBarcode; diff --git a/src/icons/XButton.tsx b/src/icons/XButton.tsx new file mode 100644 index 0000000..d412dfc --- /dev/null +++ b/src/icons/XButton.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Svg, { Circle, G, Path, SvgProps } from 'react-native-svg'; + +const SvgXButton = (props: SvgProps) => ( + + + + + + +); +export default SvgXButton; diff --git a/src/screens/SpeciesInfo/SpeciesInfo.tsx b/src/screens/SpeciesInfo/SpeciesInfo.tsx index 3ff09cb..7e075ef 100644 --- a/src/screens/SpeciesInfo/SpeciesInfo.tsx +++ b/src/screens/SpeciesInfo/SpeciesInfo.tsx @@ -7,15 +7,14 @@ import { Text, View, } from 'react-native'; +import { TouchableOpacity } from 'react-native-gesture-handler'; import { NativeStackScreenProps } from '@react-navigation/native-stack'; import TreeBg from '@/../assets/tree-info-bg.png'; import SpeciesDisplay from '@/components/SpeciesDisplay/SpeciesDisplay'; -import ToggleSwitch from '@/components/ToggleSwitch/ToggleSwitch'; -import TreeDisplay from '@/components/TreeDisplay/TreeDisplay'; -import TreeEdit from '@/components/TreeEdit/TreeEdit'; +import SvgBackArrow from '@/icons/BackArrow'; +import SvgScanBarcode from '@/icons/ScanBarcode'; import colors from '@/styles/colors'; import { getAllTreesForSpecies, getSpecies } from '@/supabase/queries/species'; -import { getTreeInfo } from '@/supabase/queries/trees'; import { HomeStackParamList } from '@/types/navigation'; import { Species } from '@/types/species'; import { Tree } from '@/types/tree'; @@ -26,7 +25,10 @@ type SpeciesInfoScreenProps = NativeStackScreenProps< 'SpeciesInfo' >; -export default function SpeciesInfoScreen({ route }: SpeciesInfoScreenProps) { +export default function SpeciesInfoScreen({ + route, + navigation, +}: SpeciesInfoScreenProps) { const speciesName = route.params?.speciesName ?? 'California Buckwheat'; const [speciesData, setSpeciesData] = useState>({ name: speciesName, @@ -58,6 +60,16 @@ export default function SpeciesInfoScreen({ route }: SpeciesInfoScreenProps) { source={treeBgImage ? { uri: treeBgImage } : TreeBg} style={styles.imageBg} > + + + + + navigation.push('QRCodeScanner')} + > + + + {treeData.length} left diff --git a/src/screens/SpeciesInfo/styles.ts b/src/screens/SpeciesInfo/styles.ts index fd8066b..33012a9 100644 --- a/src/screens/SpeciesInfo/styles.ts +++ b/src/screens/SpeciesInfo/styles.ts @@ -6,6 +6,13 @@ export default StyleSheet.create({ paddingBottom: 40, backgroundColor: colors.white, }, + topBar: { + flex: 1, + flexDirection: 'row', + marginTop: 40, + marginHorizontal: 27, + justifyContent: 'space-between', + }, imageBg: { flex: 1, height: 292, @@ -73,7 +80,7 @@ export default StyleSheet.create({ // Main body body: { paddingHorizontal: 42, - paddingTop: 20, + paddingTop: 64, marginBottom: 10, marginTop: -16, borderRadius: 20,