Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enniel/react-native-calls-history
https://github.com/enniel/react-native-calls-history
Last synced: 17 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/enniel/react-native-calls-history
- Owner: enniel
- Created: 2021-07-08T16:23:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-08-05T09:42:21.000Z (over 3 years ago)
- Last Synced: 2024-11-06T08:08:00.295Z (2 months ago)
- Language: Kotlin
- Size: 59.6 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Load calls history with cursor based navigation
## Installation:
Run `npm i react-native-calls-history`
### Android
#### React Native 0.60+
`auto links the module`
#### React Native <= 0.59
##### Auto
`react-native link react-native-calls-history`
#### Manual
* Edit your `android/settings.gradle` to look like this (exclude +)
```diff
+ include ':react-native-calls-history'
+ project(':react-native-calls-history').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-calls-history/android')
```
* Edit your `android/app/build.gradle` (note: **app** folder) to look like this (exclude +)
```diff
dependencies {
+ implementation project(':react-native-calls-history')
}
```
* Edit your `MainApplication.java` from ( `android/app/src/main/java/...`) to look like this (exclude +)
```diff
+ import ru.enniel.callshistory.CallsHistoryPackage;
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
+ new CallsHistoryPackage()
);
}
```
## Usage
```typescript
import { useState, useEffect } from 'react';
import { PermissionsAndroid, NativeEventEmitter, EmitterSubscription } from 'react-native';
import CallsHistory, { CallsHistoryItem } from 'react-native-calls-history';
interface State {
loadingFirst: boolean;
loadingBefore: boolean;
loadingAfter: boolean;
items: CallsHistoryItem[];
pagination: {
before?: string | null;
after?: string | null;
};
}
const useCallsHistory = () => {
const [state, setState] = useState({
loadingFirst: false,
loadingBefore: false,
loadingAfter: false,
items: [],
pagination: {
before: null,
after: null,
},
});
const loadFirst = async () => {
setState((prev) => ({
...prev,
loading: true,
}));
const { items, pagination } = await CallsHistory.load(10)
setState((prev) => ({
...prev,
loading: false,
items,
pagination
}));
};
const loadBefore = async () => {
setState((prev) => ({
...prev,
loadingBefore: true,
}));
const { items, pagination } = await CallsHistory.load(10, state.pagination.before)
setState((prev) => ({
...prev,
loadingBefore: false,
items: [
...items,
...state.items,
],
pagination: {
before: pagination.before,
after: prev.pagination.after,
},
}));
};
const loadAfter = async () => {
setState((prev) => ({
...prev,
loadingAfter: true,
}));
const { items, pagination } = await CallsHistory.load(10, state.pagination.after)
setState((prev) => ({
...prev,
loadingAfter: false,
items: [
...state.items,
...items,
],
pagination: {
before: prev.pagination.before,
after: pagination.after,
},
}));
};
return {
state,
loadFirst,
loadBefore,
loadAfter,
};
};
const CallsHistoryScreen = () => {
const { state, loadFirst, loadBefore, loadAfter } = useCallsHistory();
useEffect(() => {
let callHistoryChangeDataListener: EmitterSubscription | null = null;
PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CALL_LOG)
.then((granted) => {
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
loadFirst();
CallsHistory.registerOnChangeListener();
const emitter = new NativeEventEmitter();
callHistoryChangeDataListener = emitter.addListener('CallsHistoryChangeData', () => {
loadBefore();
});
}
});
return () => {
CallsHistory.removeOnChangeListener();
callHistoryChangeDataListener?.remove();
};
}, []);
const onLoadMore = () => loadAfter();
...
};
```