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 { useState } from "react";
import Button from "@components/Button";
import Text from "@components/Text";
import { colors } from "@components/style";
import * as ImagePicker from "expo-image-picker";
import DropDownPicker from "react-native-dropdown-picker";
/* import DropdownTheme from "@components/DropdownTheme"; */
const DropdownTheme = require("@components/DropdownTheme");
export default function BeerAdd() {
const [b_name, setBName] = useState("");
@ -16,13 +19,16 @@ export default function BeerAdd() {
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [items, setItems] = useState([
{ label: "Can", value: "can" },
{ label: "Tank beer", value: "tank" },
{ label: "Cask beer", value: "cask" },
{ label: "Glass bottle", value: "glass" },
{ label: "Oddel barrel", value: "barrel" },
{ label: "Tank", value: "tank" },
{ label: "PET bottle", value: "PET" },
{ label: "Can", value: "can" },
{ 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
const pickImage = async () => {
const permissionResult =
@ -96,6 +102,9 @@ export default function BeerAdd() {
return (
<View style={styles.container}>
<View style={styles.form}>
<Text style={styles.text}>
Spill your thoughts about the beer you just sipped!
</Text>
<TextInput
style={styles.input}
placeholder="Name"
@ -132,20 +141,26 @@ export default function BeerAdd() {
setValue={setValue}
setItems={setItems}
placeholder={"What are you drinking from?"}
theme="DARK"
theme="DropdownTheme"
/>
<View style={styles.imageContainer}>
<Button
style={styles.imageButton}
title="Pick an image from gallery"
title="Open gallery"
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} />}
</View>
<Button title="Add beer" color={colors.green} onPress={addBeer} />
<Button title="Add beer" color={colors.gold} onPress={addBeer} />
</View>
</View>
);
@ -162,6 +177,7 @@ const styles = StyleSheet.create({
alignItems: "center",
paddingTop: "10%",
gap: 15,
width: "80%",
},
input: {
height: "auto",
@ -172,16 +188,31 @@ const styles = StyleSheet.create({
padding: 13,
color: "#fff",
},
imageButton: {
width: "100%",
backgroundColor: "#FFD700",
},
imageContainer: {
alignItems: "center",
justifyContent: "center",
display: "flex",
flexDirection: "row",
gap: 10,
},
imageButton: {
backgroundColor: colors.dark,
borderColor: "gray",
borderWidth: 1,
borderRadius: 10,
},
imageTextButton: {
color: colors.white,
},
image: {
width: 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",
color = "black",
textColor = "white",
buttonStyle,
textStyle,
} = props;
return (
<Pressable
@ -19,10 +21,13 @@ export default function Button(props) {
: "black",
},
styles.button,
buttonStyle,
]}
onPress={onPress}
>
<Text style={[styles.text, { color: textColor }]}>{title}</Text>
<Text style={[styles.text, { color: textColor }, textStyle]}>
{title}
</Text>
</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",
darkSecondary: "#0D1117",
white: "#FFFFFF",
placeholder: "#aaaaaa",
};