Skip to content

Instantly share code, notes, and snippets.

@MoOx
Last active January 7, 2019 16:36
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MoOx/96169e8af11894d3e74a2aa29b2ccac5 to your computer and use it in GitHub Desktop.
Save MoOx/96169e8af11894d3e74a2aa29b2ccac5 to your computer and use it in GitHub Desktop.
react-native-web partial Picker implementation (using react-native-web@0.0.44) https://github.com/necolas/react-native-web/issues/195
// @flow
// partial dirty implementation of react-native Picker
// should match http://facebook.github.io/react-native/docs/picker.html
// https://github.com/necolas/react-native-web/issues/184
import createDOMElement from "react-native-web/dist/modules/createDOMElement"
import PickerItem from "./item.web.js"
type PropsType = {
selectedValue: string,
onValueChange: Function,
children?: Array<React$Element<any>>,
}
const handleValueChange = (
children: ?Array<React$Element<any>>,
cb: Function,
) => (event: SyntheticEvent) => {
if (children && event.target && event.target.value !== undefined) {
const value = event.target.value
return children.some((child, index) => {
return (
child.props.value === value &&
cb(value, index)
)
})
}
return null
}
const Picker = (props: PropsType) => {
const { selectedValue, onValueChange, children, ...otherProps } = props
return (
createDOMElement("select", {
value: selectedValue,
onChange: handleValueChange(children, onValueChange),
...otherProps,
children,
})
)
}
Picker.Item = PickerItem
export default Picker
// @flow
import React from "react"
type PropsType = {
value: string,
label: string,
}
const PickerItem = (props: PropsType) => {
return (
<option value={ props.value }>
{ props.label }
</option>
)
}
export default PickerItem
{
<Picker
selectedValue={ getLocale() }
onValueChange={ props.onLocaleChange }
style={ styles.localePicker }
>
{
Object.keys(availableLocales).map((locale) => (
<Picker.Item
key={ locale }
label={ availableLocales[locale] }
value={ locale }
/>
))
}
</Picker>
}
@cassmtnr
Copy link

cassmtnr commented Jan 3, 2019

I need to install PropTypes or it is already present in react-native-web?

What about this error:
Module not found: Can't resolve 'react-native-web/dist/modules/createDOMElement' in '/Users/project/path/pickerComponent'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment