forked from cemaden-educacao/WPD-MobileApp
analuizaff
4 years ago
3 changed files with 133 additions and 0 deletions
@ -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; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue