Browse Source

school picker for pluviometer register screen

master
analuizaff 4 years ago
parent
commit
4b41b8ad3b
  1. 127
      src/app/components/SchoolPicker.js
  2. 5
      src/package-lock.json
  3. 1
      src/package.json

127
src/app/components/SchoolPicker.js

@ -0,0 +1,127 @@
import React, { useContext, useState, Component, Fragment } from "react";
import { StyleSheet, Text, View, PixelRatio, Picker } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import { FontAwesome5 } from '@expo/vector-icons';
import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import Screen from "./Screen";
import SearchableDropdown from 'react-native-searchable-dropdown';
const items = [
{
id: 1,
name: 'JavaScript',
},
{
id: 2,
name: 'Java',
},
{
id: 3,
name: 'Ruby',
},
{
id: 4,
name: 'React Native',
},
{
id: 5,
name: 'PHP',
},
{
id: 6,
name: 'Python',
},
];
function SchoolPicker() {
const [selectedItems, setSelectedItems] = useState(null);
console.log(selectedItems);
return (
<View style={{ flex: 1, width: "100%" }}>
<View style={styles.location}>
<View style={styles.mapIcon}>
<FontAwesome5
name="university"
size={28}
color="white"
alignItems="center"
alignContent="center"
/>
</View>
<View style={styles.adressText}>
<Fragment>
<SearchableDropdown
multi={false}
selectedItems={selectedItems}
onItemSelect={(item) => {
setSelectedItems(item)
}}
containerStyle={{ padding: 5 }}
itemStyle={{
padding: 10,
marginTop: 2,
backgroundColor: '#ddd',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 5,
}} itemTextStyle={{ color: '#222' }}
itemsContainerStyle={{ maxHeight: 140 }}
items={items}
chip={true}
resetValue={false}
textInputProps={
{
placeholder: "Escola onde você estuda...",
underlineColorAndroid: "transparent",
style: {
padding: 12,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
},
onTextChange: text => console.log(text)
}
}
listProps={
{
nestedScrollEnabled: false,
}
}
/>
</Fragment>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
location: {
flex: 1,
width: "100%",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
// backgroundColor: colors.secondary,
},
adressText: {
flex: 1,
textAlign: "center",
},
mapIcon: {
backgroundColor: colors.primary,
padding: 8,
width: 20,
alignItems: "center",
borderRadius: 5,
flex: 0.10,
},
});
export default SchoolPicker;

5
src/package-lock.json

@ -14844,6 +14844,11 @@
"resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.10.1.tgz", "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.10.1.tgz",
"integrity": "sha512-Z2kKSk4AwWRQNCBmTjViuBQK0/Lx0jc25TZptn/2gKYUCOuVRvCekoA26u0Tsb3BIQ8tWDsZW14OwDlFUXW1aw==" "integrity": "sha512-Z2kKSk4AwWRQNCBmTjViuBQK0/Lx0jc25TZptn/2gKYUCOuVRvCekoA26u0Tsb3BIQ8tWDsZW14OwDlFUXW1aw=="
}, },
"react-native-searchable-dropdown": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/react-native-searchable-dropdown/-/react-native-searchable-dropdown-1.1.3.tgz",
"integrity": "sha512-ip6YwjKED/h27oRQGN3f62usFMj5IfS6tr/zZWfQItCAV/XAq5E9P0Exvg/86gSlcGJnnZdoixK+PS1sElxcyA=="
},
"react-native-simple-dialogs": { "react-native-simple-dialogs": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/react-native-simple-dialogs/-/react-native-simple-dialogs-1.4.0.tgz", "resolved": "https://registry.npmjs.org/react-native-simple-dialogs/-/react-native-simple-dialogs-1.4.0.tgz",

1
src/package.json

@ -45,6 +45,7 @@
"react-native-reanimated": "~1.13.0", "react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4", "react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1", "react-native-screens": "~2.10.1",
"react-native-searchable-dropdown": "^1.1.3",
"react-native-simple-dialogs": "^1.4.0", "react-native-simple-dialogs": "^1.4.0",
"react-native-svg": "^12.1.0", "react-native-svg": "^12.1.0",
"react-native-svg-uri": "^1.2.3", "react-native-svg-uri": "^1.2.3",

Loading…
Cancel
Save