react-native-mk-local-search
v0.1.2
Published
test
Downloads
8
Readme
react-native-mk-local-search
Native module for using MKLocalSearch with react native.
This library cannot be run on Android.
Installation
yarn add react-native-mk-local-search
cd ios && pod install
Usage
import {
searchCoodinate,
searchLocations,
updatedLocationResultsListener,
Coodinate,
SearchLocationResultItem,
} from 'react-native-mk-local-search';
// ...
export default function App() {
const [results, setResults] = useState<SearchLocationResultItem[]>([]);
const [coodinate, setCoodinate] = useState<null | Coodinate>(null);
useEffect(() => {
// The results of searchLocations are passed to this listener.
const subscription = updatedLocationResultsListener((data) => {
setResults(data);
});
return () => {
subscription.remove();
};
}, []);
const onChangeText = async (text: string) => {
// Pass search keywords to searchLocations.
await searchLocations(text);
};
const onItemPress = async (title: string, subtitle: string) => {
try {
// Get latitude and longitude from addresses and other queries.
let searchedCoodinate = await searchCoodinate(subtitle);
if (!searchedCoodinate) {
searchedCoodinate = await searchCoodinate(`${title} ${subtitle}`);
}
setCoodinate(searchedCoodinate);
} catch (e) {
// If coodinate is not found, error occurs with [Error: Coodinate is not found].
console.log(e);
}
};
return (
<View style={styles.container}>
<TextInput style={styles.input} onChangeText={onChangeText} />
<ScrollView
style={styles.scroll}
contentContainerStyle={styles.scrollContainer}
>
{results.map((result, index) => {
return (
<TouchableOpacity
onPress={() => {
onItemPress(result.title, result.subtitle);
}}
key={index}
style={styles.itemContainer}
>
<Text style={styles.title}>{result.title}</Text>
<Text style={styles.subtitle}>{result.subtitle}</Text>
</TouchableOpacity>
);
})}
</ScrollView>
{!!coodinate && (
<Text style={styles.coodinate}>
{`latitude is ${coodinate.latitude}, longitude is ${coodinate.longitude}`}
</Text>
)}
</View>
);
}
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library