callstack / callstack/react-native-paper
Autocomplete text input component
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
**Is your feature request related to a problem? Please describe.**
I have been using native paper for different projects and I came across a problem several times where I needed an autocomplete component, I tried 2 packages but I would love to have a component from the native paper so that my UI remains consistent
**Describe the solution you'd like**
I implemented an autocomplete component with the use of TextInput + Menu component from native paper
```ts
interface Props> {
theme?: AppTheme;
value: {
origValue: string | undefined;
};
label: string;
data: T[];
displayKey: keyof T;
containerStyle?: StyleProp;
onChange: (text: string) => void;
leadingIcon?: IconSource;
trailingIcon?: IconSource;
textInputstyle?: StyleProp;
menuStyle?: StyleProp;
textInputRight?: ReactNode;
textInputLeft?: ReactNode;
}
const Autocomplete = >({
theme = lightTheme,
value: propValue,
label,
data,
displayKey,
containerStyle = {},
onChange: originOnChange,
textInputstyle = {},
leadingIcon = "",
trailingIcon = "",
menuStyle = {},
textInputRight = null,
textInputLeft = null,
}: Props) => {
const [value, setValue] = useState(propValue.origValue);
const [menuVisible, setMenuVisible] = useState(false);
return (
{
if (value || value?.length === 0) {
setMenuVisible(true);
}
}}
outlineStyle={
menuVisible
? {
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}
: {}
}
onBlur={() => setMenuVisible(false)}
label={label}
{...(textInputRight ? { right: textInputRight } : {})}
{...(textInputLeft ? { left: textInputLeft } : {})}
style={textInputstyle}
onChangeText={(text) => {
originOnChange(text);
setMenuVisible(true);
setValue(text);
}}
value={value}
/>
{menuVisible && (
{data.length === 0 && (
No result found
)}
{data.map((item, index) => (
{
const selectedValue = String(item[displayKey]);
console.log(selectedValue);
setValue(selectedValue);
setMenuVisible(false);
originOnChange(selectedValue);
}}
title={String(item[displayKey])}
/>
))}
)}
);
};
```
**Describe alternatives you've considered**
I have tried two alternatives:
react-native-autocomplete-dropdown and react-native-autocomplete-input
I dropped those packages out of fear since they were backed only by one contributor.
**Additional context**
N/A
Contributor guide
Assessment
This issue has not been assessed yet.