I have a react native component like below:
export const SearchBar = (props: SearchListProps) => { const { data, matchingFunction, listItemVariant, onChange, onSubmit, renderItem, ...rest } = props; const animatedValue = useRef(new Animated.Value(0)); const [searchValue, setSearchValue] = useState(''); const [isFocused, setFocused] = useState(false); const listData = useRef([...data]); if (isFocused) { Animated.timing(animatedValue.current, { duration: 100, toValue: 1, useNativeDriver: true, }).start(); } useEffect(() => { const promise = props?.dataSource(searchValue); console.log('RETURNED: '+ JSON.stringify(promise)); promise .then((result: any) => { console.log('RESULT: '+ JSON.stringify(result)); }) .catch((e) => console.log(e)); }, [searchValue]);//... rest of the code
Then I'm using this component somewhere like this:
<SearchBar listItemVariant={'withImage'} dataSource={async (query?: string) => { console.log('Query Passed: '+ query); return new Promise<ListItem[]>((resolve, _) => { resolve([ { title: 'Paneer Bhurji', subTitle: 'Delicious', imageSource:'https://homepages.cae.wisc.edu/~ece533/images/peppers.png', }, { title: 'Paneer Butter Masala', subTitle: 'High Protein' }, { title: 'Chicken', imageSource:'https://homepages.cae.wisc.edu/~ece533/images/peppers.png', }, ]); }); }}// ...rest of the code
Problem is that .then() is not being called in the component.Console prints the following statements:
- Query Passed:
- RETURNED: {}
I'm not sure why {} is being returned when I'm returning a promise which contains some data.
Other logs (inside useEffect's .then() ) are not getting printed.So essentially, .then() method is never being called.