Added: custom style for DropDownPicker, added icons for DropDownPicker, in style.js added new color for placeholder; Edited: Component for button, where you can now define background, border, ... by class

This commit is contained in:
Matěj Kevin Nechodom 2024-05-12 21:26:44 +02:00
parent 114ab257b2
commit 2d06e0fb12
8 changed files with 221 additions and 14 deletions

View File

@ -1,9 +1,12 @@
import { StyleSheet, TextInput, View, Image } from "react-native"; import { StyleSheet, TextInput, View, Image } from "react-native";
import { useState } from "react"; import { useState } from "react";
import Button from "@components/Button"; import Button from "@components/Button";
import Text from "@components/Text";
import { colors } from "@components/style"; import { colors } from "@components/style";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import DropDownPicker from "react-native-dropdown-picker"; import DropDownPicker from "react-native-dropdown-picker";
/* import DropdownTheme from "@components/DropdownTheme"; */
const DropdownTheme = require("@components/DropdownTheme");
export default function BeerAdd() { export default function BeerAdd() {
const [b_name, setBName] = useState(""); const [b_name, setBName] = useState("");
@ -16,13 +19,16 @@ export default function BeerAdd() {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [value, setValue] = useState(null); const [value, setValue] = useState(null);
const [items, setItems] = useState([ const [items, setItems] = useState([
{ label: "Can", value: "can" }, { label: "Tank beer", value: "tank" },
{ label: "Cask beer", value: "cask" },
{ label: "Glass bottle", value: "glass" }, { label: "Glass bottle", value: "glass" },
{ label: "Oddel barrel", value: "barrel" }, { label: "Can", value: "can" },
{ label: "Tank", value: "tank" }, { label: "PET bottle", value: "pet" },
{ label: "PET bottle", value: "PET" },
]); ]);
DropDownPicker.addTheme("DropdownTheme", DropdownTheme);
DropDownPicker.setTheme("DropdownTheme");
ImagePicker.getCameraPermissionsAsync(); //check if the user has granted permission to access the camera ImagePicker.getCameraPermissionsAsync(); //check if the user has granted permission to access the camera
const pickImage = async () => { const pickImage = async () => {
const permissionResult = const permissionResult =
@ -96,6 +102,9 @@ export default function BeerAdd() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.form}> <View style={styles.form}>
<Text style={styles.text}>
Spill your thoughts about the beer you just sipped!
</Text>
<TextInput <TextInput
style={styles.input} style={styles.input}
placeholder="Name" placeholder="Name"
@ -132,20 +141,26 @@ export default function BeerAdd() {
setValue={setValue} setValue={setValue}
setItems={setItems} setItems={setItems}
placeholder={"What are you drinking from?"} placeholder={"What are you drinking from?"}
theme="DARK" theme="DropdownTheme"
/> />
<View style={styles.imageContainer}> <View style={styles.imageContainer}>
<Button <Button
style={styles.imageButton} title="Open gallery"
title="Pick an image from gallery"
onPress={pickImage} onPress={pickImage}
buttonStyle={styles.imageButton}
textStyle={styles.imageTextButton}
/> />
<Button onPress={openCamera} title="Open camera" /> <Button
onPress={openCamera}
title="Open camera"
buttonStyle={styles.imageButton}
textStyle={styles.imageTextButton}
/>
{image && <Image source={{ uri: image }} style={styles.image} />} {image && <Image source={{ uri: image }} style={styles.image} />}
</View> </View>
<Button title="Add beer" color={colors.green} onPress={addBeer} /> <Button title="Add beer" color={colors.gold} onPress={addBeer} />
</View> </View>
</View> </View>
); );
@ -162,6 +177,7 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
paddingTop: "10%", paddingTop: "10%",
gap: 15, gap: 15,
width: "80%",
}, },
input: { input: {
height: "auto", height: "auto",
@ -172,16 +188,31 @@ const styles = StyleSheet.create({
padding: 13, padding: 13,
color: "#fff", color: "#fff",
}, },
imageButton: {
width: "100%",
backgroundColor: "#FFD700",
},
imageContainer: { imageContainer: {
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
display: "flex",
flexDirection: "row",
gap: 10,
},
imageButton: {
backgroundColor: colors.dark,
borderColor: "gray",
borderWidth: 1,
borderRadius: 10,
},
imageTextButton: {
color: colors.white,
}, },
image: { image: {
width: 150, width: 150,
height: 150, height: 150,
}, },
text: {
color: colors.white,
fontSize: 24,
textAlign: "center",
paddingTop: "3%",
paddingBottom: "3%",
},
}); });

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 807 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -7,6 +7,8 @@ export default function Button(props) {
title = "Button", title = "Button",
color = "black", color = "black",
textColor = "white", textColor = "white",
buttonStyle,
textStyle,
} = props; } = props;
return ( return (
<Pressable <Pressable
@ -19,10 +21,13 @@ export default function Button(props) {
: "black", : "black",
}, },
styles.button, styles.button,
buttonStyle,
]} ]}
onPress={onPress} onPress={onPress}
> >
<Text style={[styles.text, { color: textColor }]}>{title}</Text> <Text style={[styles.text, { color: textColor }, textStyle]}>
{title}
</Text>
</Pressable> </Pressable>
); );
} }

View File

@ -0,0 +1,170 @@
import { StyleSheet } from "react-native";
import { colors } from "@components/style";
export const ICONS = {
ARROW_DOWN: require("@assets/DropdownIcons/arrow-down.png"),
ARROW_UP: require("@assets/DropdownIcons/arrow-up.png"),
TICK: require("@assets/DropdownIcons/tick.png"),
CLOSE: require("../assets/DropdownIcons/close.png"),
};
export default StyleSheet.create({
container: {
width: "100%",
},
style: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
minHeight: 50,
borderRadius: 8,
borderWidth: 1,
borderColor: "gray",
paddingHorizontal: 10,
paddingVertical: 3,
backgroundColor: colors.dark,
},
label: {
flex: 1,
color: colors.placeholder,
},
labelContainer: {
flex: 1,
flexDirection: "row",
},
arrowIcon: {
width: 20,
height: 20,
},
tickIcon: {
width: 20,
height: 20,
},
closeIcon: {
width: 30,
height: 30,
},
badgeStyle: {
flexDirection: "row",
alignItems: "center",
borderRadius: 15,
backgroundColor: colors.white,
paddingHorizontal: 10,
paddingVertical: 5,
},
badgeDotStyle: {
width: 10,
height: 10,
borderRadius: 10 / 2,
marginRight: 8,
backgroundColor: colors.white,
},
badgeSeparator: {
width: 5,
},
listBody: {
height: "100%",
},
listBodyContainer: {
flexGrow: 1,
alignItems: "center",
},
dropDownContainer: {
position: "absolute",
backgroundColor: colors.darkSecondary,
borderRadius: 10,
borderColor: colors.black,
borderWidth: 1,
width: "100%",
overflow: "hidden",
zIndex: 1000,
},
modalContentContainer: {
flexGrow: 1,
backgroundColor: colors.white,
},
listItemContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingHorizontal: 10,
height: 40,
},
listItemLabel: {
flex: 1,
color: colors.placeholder,
},
iconContainer: {
marginRight: 10,
},
arrowIconContainer: {
marginLeft: 10,
},
tickIconContainer: {
marginLeft: 10,
},
closeIconContainer: {
marginLeft: 10,
},
listParentLabel: {},
listChildLabel: {},
listParentContainer: {},
listChildContainer: {
paddingLeft: 40,
},
searchContainer: {
flexDirection: "row",
alignItems: "center",
padding: 10,
borderBottomColor: colors.darkSecondary,
borderBottomWidth: 1,
},
searchTextInput: {
flexGrow: 1,
flexShrink: 1,
margin: 0,
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 8,
borderColor: colors.darkSecondary,
borderWidth: 1,
color: colors.white,
},
itemSeparator: {
height: 1,
backgroundColor: colors.darkSecondary,
},
flatListContentContainer: {
flexGrow: 1,
},
customItemContainer: {},
customItemLabel: {
fontStyle: "italic",
},
listMessageContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: 10,
},
listMessageText: {
color: colors.gold,
},
selectedItemContainer: {},
selectedItemLabel: {},
modalTitle: {
fontSize: 18,
color: colors.gold,
},
extendableBadgeContainer: {
flexDirection: "row",
flexWrap: "wrap",
flex: 1,
},
extendableBadgeItemContainer: {
marginVertical: 3,
marginEnd: 7,
},
});

View File

@ -8,4 +8,5 @@ export const colors = {
dark: "#010409", dark: "#010409",
darkSecondary: "#0D1117", darkSecondary: "#0D1117",
white: "#FFFFFF", white: "#FFFFFF",
placeholder: "#aaaaaa",
}; };