RN Picker

Input.js

import React, {Component} from 'react';
import {
    View,
    TextInput,
    StyleSheet,
    Platform,
} from 'react-native';

export default (props) => {
    const {styleWrapper, style, ...rest} = {...props};

    const typeNumeric = props.keyboardType === 'numeric';
    return (
        <View style={[styles.inputWrapper, styleWrapper]}>
            <TextInput
                style={[styles.form__input, typeNumeric ? styles.form__input_numeric : null, styles.textInput, style]}
                autoCorrect={false}
                placeholderTextColor="#999999"
                underlineColorAndroid='transparent'
                {...rest}/>
        </View>
    );
}

const isIOS = Platform.OS === 'ios';

export const fontFamilyRegular = isIOS ? 'Helvetica Neue' :'Roboto';
export const fontFamilyLight = isIOS ? 'HelveticaNeue-Light' :'Roboto';
export const fontFamilyBold = isIOS ? 'HelveticaNeue-Bold' :'Roboto';

const styles = StyleSheet.create({
    inputWrapper: {
        borderWidth: 0,
        flexDirection: 'row',
        alignItems: 'center'
    },
    textInput: {
        flex: 1,
        backgroundColor: '#e7e7e7',
        height: 35,
        paddingHorizontal: 10,
        paddingVertical: 0
    },
    form__input: {
        fontSize: 17,
        fontFamily: fontFamilyLight,
        color: 'black',
    },
    form__input_numeric: {
        fontFamily: fontFamilyBold,
        fontWeight: isIOS ? '500' : '400',
    },
});

Picker.js

import React, {Component, PropTypes} from 'react';
import {
    Modal,
    View,
    Alert,
    TouchableOpacity,
} from 'react-native';

import {Input} from './index';

export default class Picker extends Component {
    static propTypes = {
        isEmpty: PropTypes.bool,
        onPick: PropTypes.func,
        placeholder: PropTypes.string,
        value: PropTypes.string,
    };

    static defaultProps = {
        isEmpty: false,
    };

    constructor(props) {
        super(props);

        this.state = {
            modalVisible: false,
        };

        this.handleItem = this.handleItem.bind(this);
    }

    setModalVisible(visible) {
        if (this.props.isEmpty) {
            Alert.alert(`Attention`, `La liste est vide`);
        } else {
            this.setState({modalVisible: visible});
        }
    }

    handleItem(item) {
        this.setModalVisible(false);
        this.props.onPick(item);
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={() => {
                    this.setModalVisible(true);
                }}>
                    <Input placeholder={this.props.placeholder}
                           editable={false}
                           returnKeyType='next'
                           value={this.props.value}/>
                </TouchableOpacity>
                <Modal
                    animationType="slide"
                    transparent={false}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {
                        this.setModalVisible(false);
                    }}
                >
                    {
                        React.cloneElement(
                            this.props.children, {
                                onClose: () => {
                                    this.setModalVisible(false);
                                },
                                onPick: this.handleItem
                            }
                        )
                    }
                </Modal>
            </View>
        );
    }
}