Select
The <Select />
component gives your a easy-to-use cross platform select-like input leveraging this library ModalDialog and cross-platform Picker using an unified API.
- Can easily be built upon.
- Provides a simple API
{show, hide, toggle}
to control.
Preview
iOS | Android |
---|---|
Sources
You can check the source code directly on GitHub.
Usage
Setup dependencies
Since this components uses a backdrop, you need to wrap your application with a <BackdropProvider />
component. You usually want to wrap it as high as possible in your tree so that the backdrop properly covers the whole screen.
// App.jsx
import React from 'react';
import {BackdropProvider} from 'react-native-propel-kit';
const App: FunctionComponent = () => {
return (
<BackdropProvider>
<RootNavigator />
</BackdropProvider>
);
};
export default App;
Basic example
// MyComponent.jsx
import React from 'react';
import {Button} from 'react-native';
import {ModalDialog, ModalDialogHandle} from 'react-native-propel-kit';
const MyComponent = () => {
const modalDialogRef = useRef<ModalDialogHandle>(null);
return (
<Select placeholder="Nationalité">
{NATIONALITY_SELECT_ITEMS.map(({value, label}) => (
<Select.Item key={value} value={value} label={label} />
))}
</Select>
);
};
export default MyComponent;
Reference Handle
This component does forward the ref from its ModalDialog.
export type Handle = {
show: () => void;
hide: () => void;
toggle: () => void;
};
Props
export type Props = Pick<ModalDialogProps, 'title' | 'confirmTitle' | 'cancelTitle'> & {
children?: ReactNode;
initialValue?: SelectValue;
InputButtonComponent?: ElementType<InputButtonProps>;
onChange?: (value: SelectValue) => void;
onEndEditing?: () => void;
onSubmitEditing?: (value: SelectValue) => void;
placeholder?: string;
style?: StyleProp<TextStyle>;
value?: SelectValue;
[s: string]: unknown; // unknown otherProps for InputButtonComponent
};
Defaults
export const defaultProps = {
InputButtonComponent: InputButton
};