Develop Reference

how to reject or answer an incoming call witihn react native app with custom buttons(can i use react-native-call-keep)

I am using react-native-call-detection package to save incoming call number (and send it on server later), I also want to reject/answer the incoming call based on the pressed button (based on server response later).
what package should I use to do it? I just found react-native-call-keep but all examples gave fake phone number to the functons and I don't know how to use its functions or how to get my call uuid.I just know there is reject/answer call function and I should call addEventListener functions before calling functions.
here is my current code:
import React, {useEffect, useState} from 'react';
import RNCallKeep from 'react-native-callkeep';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
TouchableHighlight,
PermissionsAndroid,
} from 'react-native';
import CallDetectorManager from 'react-native-call-detection';
import RNCallKeep from 'react-native-callkeep';
export default class MasterScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
featureOn: false,
incoming: false,
number: null,
};
}
componentDidMount() {
this.askPermission();
this.startListenerTapped();
this.setupCallKeep();
}
setupCallKeep() {
const options = {
android: {
alertTitle: 'Permissions Required',
alertDescription:
'This application needs to access your phone calling accounts to make calls',
cancelButton: 'Cancel',
okButton: 'ok',
imageName: 'ic_launcher',
additionalPermissions: [PermissionsAndroid.PERMISSIONS.READ_CONTACTS],
},
};
try {
RNCallKeep.setup(options);
RNCallKeep.setAvailable(true); // Only used for Android, see doc above.
} catch (err) {
console.error('initializeCallKeep error:', err.message);
}
}
askPermission = async () => {
try {
const permissions = await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE,
]);
console.log('Permissions are:', permissions);
} catch (err) {
console.warn(err);
}
};
startListenerTapped = () => {
this.setState({featureOn: true});
this.callDetector = new CallDetectorManager(
(event, phoneNumber) => {
console.log(event);
if (event === 'Disconnected') {
this.setState({incoming: false, number: null});
} else if (event === 'Incoming') {
this.setState({incoming: true, number: phoneNumber});
} else if (event === 'Offhook') {
this.setState({incoming: true, number: phoneNumber});
} else if (event === 'Missed') {
this.setState({incoming: false, number: null});
}
},
true,
() => {},
{
title: 'Phone State Permission',
message:
'This app needs access to your phone state in order to react and/or to adapt to incoming calls.',
},
);
};
stopListenerTapped = () => {
this.setState({featureOn: false});
this.callDetector && this.callDetector.dispose();
};
render() {
return (
<View style={styles.body}>
<Text>incoming call number: {this.state.number}</Text>
<TouchableOpacity
onPress={/*what to do */} style={{
width: 200,
height: 200,
justifyContent: 'center',
}}><Text>answer</Text></TouchableOpacity>
<TouchableOpacity
onPress={/*what to do */} style={{
width: 200,
height: 200,
justifyContent: 'center',
}}>
<Text>reject</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
body: {
backgroundColor: 'honeydew',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
text: {
padding: 20,
fontSize: 20,
},
button: {},
});`

Use RNCallKeep.rejectCall. Like so
<TouchableOpacity
onPr ess={() => RNCallKeep.rejectCall(uuid)}
st yle={{
width: 200,
height: 200,
justifyContent: 'center',
}}
>
<Text>reject</Text>
</TouchableOpacity>

How to share data from one react native component to another component

i have a component "Address" were i am using google-places-autocomplete for getting address.After that i extract the needed data (such as Country,postal code etc). And now i want to transfer this data into the "Main Component" for where the is getting called. In Address Component, i have used useState() to store data.
import { View, StyleSheet, TextInput } from "react-native";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import { } from "react-native";
import Colors from "../constants/Colors";
let places = [];
const Address = (props) => {
const [place, setPlace] = useState();
const [postalCode, setPostalCode] = useState();
const [country, setCountry] = useState();
const [state, setState] = useState();
const [city, setCity] = useState();
const setCountryHandler=(value)=>{
setCountry(value)
}
const setPostalCodeHandler=(value)=>{
setPostalCode(value)
}
const setCityHandler=(value)=>{
setCity(value);
}
const setStateHandler=(value)=>{
setState(value)
}
return (
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
marginVertical: 10,
}}>
<View
style={styles.search}
>
<GooglePlacesAutocomplete
placeholder="Address"
onPress={(data,details=null)=>{
let address = details.address_components;
let address1 = [];
for (let i = 0; i < 1; i++) {
for (let i in address) {
address1 = address[i].types;
for (let j in address1) {
if (address1[j] === "sublocality") {
places.push(address[i].long_name);
}
}
}
setPlace(places);
places = [];
}
for (let i in address) {
address1 = address[i].types;
for (let j in address1) {
if (address1[j] === "locality") {
setCityHandler(address[i].long_name);
}
}
}
for (let i in address) {
address1 = address[i].types;
for (let j in address1) {
if (address1[j] === "administrative_area_level_1") {
setState(address[i].long_name);
}
}
}
for (let i in address) {
address1 = address[i].types;
for (let j in address1) {
if (address1[j] === "country") {
setCountry(address[i].long_name);
}
}
}
for (let i in address) {
address1 = address[i].types;
for (let j in address1) {
if (address1[j] === "postal_code") {
setPostalCode(address[i].long_name);
}
}
}
}}
enablePoweredByContainer={false}
disableScroll={false}
fetchDetails={true}
query={{
key: "#############################",
language: "en",
}}
styles={{
textInputContainer: {
width: "100%",
},
}}
/>
</View>
<View
style={{ justifyContent: "center", alignItems: "center", width: "80%" }}
>
<View style={styles.container}>
<TextInput placeholder="city" defaultValue={city} onChangeText={setCityHandler}/>
</View>
<View style={styles.container}>
<TextInput placeholder="state" defaultValue={state} onChangeText={setStateHandler}/>
</View>
<View style={styles.container}>
<TextInput placeholder="country" defaultValue={country} onChangeText={setCountryHandler} />
</View>
<View style={styles.container}>
<TextInput placeholder="pincode" defaultValue={postalCode} onChangeText={setPostalCodeHandler}/>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginVertical: 10,
width: "100%",
paddingVertical: 8,
paddingHorizontal: 8,
borderColor: Colors.accent,
borderWidth: 1,
borderRadius: 6,
backgroundColor: "white",
},
search:{
marginBottom:10,
width: "80%",
borderColor: Colors.accent,
borderWidth: 1,
borderRadius: 6,
backgroundColor: "white",
}
});
export default Address;
here's my code and i want to transfer data =city,state,postalcode,country into another component

To transfer data , to another component , that Component will need to be the Child Component of your Address Component, in this way child component will receive Address Component states as props.
That's why people use Redux, which creates container and stores all your states in that container, which then can be accessed by any component in your project.
https://react-redux.js.org/
But if your components are not related, and you don't want to use redux , then there is one way to do this is, that you
save your state value to the storage via Async Storage.
https://github.com/react-native-async-storage/async-storage
and then retrieve those values in Main Component via AsyncStorage.

Camera is not running

I’m trying to make a prototype application that over and over
1- record a video with the camera for x seconds
2- displays this video
For this I use the components Camera from expo-camera and Video from expo-av
For this I have two views :
I use in my code the stateSequence property and the sequencer() function which displays alternately the view with the Camera component which films for x seconds , and the video view which allows me to display the video.
Sequencer() is triggered with setInterval( this.sequencer , 10000) found in the componentWillMount()
I can switch alternately from a View with the Camera component to a View with the Video component.
To record a video with the Camera component I use recordAsync(), but I get the following error:
Unhandled promise rejection: Error: Camera is not running
I’m using an android phone for my tests.
Can’t you help me
this is my code
import { StyleSheet, Text, View ,TouchableOpacity} from 'react-native';
import * as Permissions from 'expo-permissions';
import { Camera } from 'expo-camera';
import { Video } from 'expo-av';
import { Logs } from 'expo';
export default class SequenceViewer extends Component {
constructor(props) {
super(props);
this.state = {
stateSequence: "SHOOT ",
hasCameraPermission: null,
type: Camera.Constants.Type.front,
}
this.recordVideo = this.recordVideo.bind(this)
}
sequencer = () => {
if(this.state.stateSequence==="WATCH"){
this.setState({ stateSequence: "SHOOT",})
this.recordVideo(); // Error message Camera is not running
} else {
this.setState({stateSequence: "WATCH"})
}
}
async componentWillMount() {
let rollStatus = await Permissions.askAsync(Permissions.CAMERA_ROLL);
let cameraResponse = await Permissions.askAsync(Permissions.CAMERA)
if (rollStatus.status=='granted'){
if (cameraResponse.status == 'granted' ){
let audioResponse = await Permissions.askAsync(Permissions.AUDIO_RECORDING);
if (audioResponse.status == 'granted'){
this.setState({ permissionsGranted: true });
setInterval( this.sequencer , 10000);
}
}
}
}
recordVideo = async () => {
if(this.state.cameraIsRecording){
this.setState({cameraIsRecording:false})
this.camera.stopRecording();
}
else {
this.setState({cameraIsRecording:true})
if (this.camera) {
let record = await this.camera.recordAsync(quality='480p',maxDuration=5,mute=true).then( data =>{
this.setState( {recVideoUri :data.uri})
})
}
}
};
render() {
const { hasCameraPermission } = this.state
if(this.state.stateSequence=="WATCH")
{
return(
<View style={styles.container}>
<Video
source={{ uri:this.state.recVideoUri }}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
shouldPlay
isLooping
style={{ width: 300, height: 300 }}
ref={(ref) => { this.player = ref }}
/>
</View>
)
} else
{
return(
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={this.state.type} ref={ref => {this.camera = ref; }}></Camera>
</View>
)
}
}
}
const styles = StyleSheet.create({
viewerText: {
fontSize: 20,
fontWeight: 'bold',
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Thank you

I had the same problem, my solution was by default camera type have to be "back" and you could change to "front" by:
componentDidMount = () => {
this.props.navigation.addListener('didFocus', async () => {
await setTimeout(() => {
this.setState({ cameraType: Camera.Constants.Type.front })
}, 100)
});
}

I was getting the "Camera is not running" error when i changed screens. So for functional components instead of withNavigationFocus(Camera) use this method:
import { useIsFocused } from '#react-navigation/native';
function MyComponent() {
const isFocused = useIsFocused()
return (
<View>
{ isFocused && <RNCamera /> }
</View>
)
}

React native Image uploading not uploading the images

I am developing an app That contain an image uploader. I found some code on internet that can upload image. And it worked partially. Which means When i press the choose image button, it opens gallery and i am able to select and crop image. And after cropping when i select ok nothing happen. It just show the image and its not uploading to the firebase cloud. Here is my code.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
Image,
ActivityIndicator,
TouchableOpacity
} from 'react-native';
import * as firebase from 'firebase';
import RNFetchBlob from 'react-native-fetch-blob';
import ImagePicker from 'react-native-image-crop-picker';
export default class RNF extends Component {
constructor (props) {
super(props);
this.state = {
loading: false,
dp: null
};
}
openPicker () {
this.setState({ loading: true });
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;
// const { uid } = this.state.user
const uid = '12345';
ImagePicker.openPicker({
width: 300,
height: 300,
cropping: true,
mediaType: 'photo'
}).then(image => {
const imagePath = image.path;
let uploadBlob = null;
const imageRef = firebase.storage().ref(uid).child('dp.jpg');
let mime = 'image/jpg';
fs.readFile(imagePath, 'base64')
.then((data) => {
// console.log(data);
return Blob.build(data, { type: `${mime};BASE64` });
})
.then((blob) => {
uploadBlob = blob;
return imageRef.put(blob, { contentType: mime });
})
.then(() => {
uploadBlob.close();
return imageRef.getDownloadURL();
})
.then((url) => {
let userData = {};
// userData[dpNo] = url
// firebase.database().ref('users').child(uid).update({ ...userData})
let obj = {};
obj['loading'] = false;
obj['dp'] = url;
this.setState(obj);
})
.catch((error) => {
console.log(error);
});
})
.catch((error) => {
console.log(error);
});
}
render () {
const dpr = this.state.dp ? (<TouchableOpacity onPress={ () => this.openPicker() }><Image
style={{ width: 100, height: 100, margin: 5 }}
source={{ uri: this.state.dp }}
/></TouchableOpacity>) : (<Button
onPress={ () => this.openPicker() }
title={ 'Change Picture' }
/>);
const dps = this.state.loading ? <ActivityIndicator animating={this.state.loading} /> : (<View style={styles.container}>
<View style={{ flexDirection: 'row' }}>
{ dpr }
</View>
</View>);
return (
<View style={styles.container}>
{ dps }
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
}
});
AppRegistry.registerComponent('RNF', () => RNF);

How to increase a static variable value when data will come from mqtt in react native?

I want to increase a particular static variable each time when data will receive within onMessageArrived(). Means in onMessageArrived method when new data will come from mqtt, want to increase the a static variable which is initially set with 0. Can anybody please help me to achieve that. I am a beginner in react native. Thanks in advance.
import React, { Component } from 'react';
import init from 'react_native_mqtt';
import { AsyncStorage, StyleSheet, Text, View } from 'react-native';
import Pie from 'react-native-pie';
init({
size: 10000,
storageBackend: AsyncStorage,
defaultExpires: 1000 * 3600 * 24,
enableCache: true,
sync: {},
});
export default class MqttLog extends Component {
constructor(props) {
super(props);
const client = new Paho.MQTT.Client('iot.eclipse.org', 443, 'uname');
client.connect({ onSuccess: this.onConnect, useSSL: true });
client.onConnectionLost = this.onConnectionLost;
client.onMessageArrived = this.onMessageArrived;
this.state = {
text: '10',
client,
};
}
onConnect = () => {
const { client } = this.state;
client.subscribe('WORLD');
// this.pushText('connected');
console.log('connect');
};
onConnectionLost = responseObject => {
if (responseObject.errorCode !== 0) {
var connectionLostMessage = `connection lost: ${responseObject.errorMessage}`;
console.log(connectionLostMessage);
// this.pushText(`connection lost: ${responseObject.errorMessage}`);
}
};
onMessageArrived = message => {
var msg = message.payloadString;
var messageResult = `${msg}`;
this.setState({ text: messageResult });
console.log(this.state.text);
};
render() {
// const { text } = this.state;
// console.log(this.state);
return (
<View style={styles.container}>
{/* {text.map(entry => <Text>{entry}</Text>)} */}
{/* <Text>Data</Text>
<Text>{this.state.text}</Text> */}
<Pie
radius={150}
innerRadius={130}
series={[this.state.text, 30, 60]}
colors={['#EAD026', '#FAFAFA', '#EAD026']}
backgroundColor = '#FAFAFA'
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'space-around',
},
gauge: {
position: 'absolute',
width: 100,
height: 100,
alignItems: 'center',
justifyContent: 'center',
},
gaugeText: {
backgroundColor: 'transparent',
color: '#000',
fontSize: 24,
},
});

You can append previous state value with the new value -
let messageResult = `${msg}`;
let oldMessage = this.state.text;
let newMessageIntValue = parseInt(messageResult) + parseInt(oldMessage);
this.setState({text:newMessageIntValue});
NOTE - Let me know in case of any other issue, i have just integrated the MQTT in react native.