I am trying to display admob Interstitial, but I have this error. The admob banner works fine, and the only issue is with Interstitial.
This is my code:
import {AdMobInterstitial} from 'react-native-admob';
componentDidMount() {
AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712');
AdMobInterstitial.requestAd().then(() => AdMobInterstitial.showAd());
}
Screenshot
import {AdMobBanner,AdMobInterstitial,PublisherBanner,AdMobRewarded} from 'react-native-admob';
class Alpha extends React.Component {
componentWillMount(){
this.makeAdmobRequest();
setTimeout(()=>{
this.makeRemoteRequest()
},1000);
setTimeout(()=>{
this.showInterstitial()
},60000);
}
makeAdmobRequest=()=>{
return fetch('http://url/admob_setting.php?cat_id=2')
.then((response) => response.json())
.then((responseJson) =>
{
var bannerid1=responseJson[0]['banner_add'];
this.setState({
bannerid1:responseJson[0]['banner_add'],
interestitialid:responseJson[0]['interestial_add'],
});
})
.catch((error) =>
{
console.error(error);
});
}
renderAdd(){
if(this.state.bannerid1){
return(
<View style={{flex:1}}>
<AdMobBanner
adSize="banner"
adUnitID={this.state.bannerid1}
testDeviceID="EMULATOR"
didFailToReceiveAdWithError={this.bannerError} />
</View>
);
}
}
showInterstitial() {
AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);
AdMobInterstitial.setAdUnitID(this.state.interestitialid);
AdMobInterstitial.requestAd().then(() => AdMobInterstitial.showAd());
}
render() {
.......
}
}
Related
I am trying to display data that I fetched with Axios. They came as an array. Because of this I cant show them. What should I do?
Here is my fetch code
componentDidMount() {
axios.post('http://192.168.1.106:80/partner_project_backend/project_list.php')
.then((response) => {
console.log(response.data)
})
.catch((error) => {
console.error(error);
});
}
Here is my console.log
I'm guessing you are getting the API response correctly and your only intention is to display the data in your application. If so, you could use the FlatList component from React Native
import React from 'react';
import { FlatList, Text } from 'react-native';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
axios.get('http://192.168.1.106:80/partner_project_backend/project_list.php')
.then((response) => {
this.setState({ data: response.data });
})
.catch((error) => {
console.error(error);
});
}
render() {
return (
<FlatList
data={data}
renderItem={({ item }) => (
<Text>{item.name}</Text> // render your view here
)}
keyExtractor={item => item.id}
/>
);
}
}
React more about FlatList at https://reactnative.dev/docs/flatlist
To fetch data you have to use get method NOT post
this.state ={ data : null }
componentDidMount(){
axios.get('http://192.168.1.106:80/partner_project_backend/project_list.php')
.then((response) => {
this.setState({ data : response.data })
})
.catch((error) => {
console.error(error);
});
}
I'm using react-native-fingerpirnt-scanner, the library is working fine, I just wanted to ask can we have our own fingerprint modal for authentication and add fingerprint listener to our own modal?
class BiometricPopup extends Component {
....
componentDidMount() {
if (this.requiresLegacyAuthentication()) {
this.authLegacy();
} else {
this.authCurrent();
}
}
componentWillUnmount = () => {
FingerprintScanner.release();
}
requiresLegacyAuthentication() {
return Platform.Version < 23;
}
authCurrent() {
FingerprintScanner
.authenticate({ title: 'Log in with Biometrics' })
.then(() => {
this.props.onAuthenticate();
});
}
authLegacy() {
FingerprintScanner
.authenticate({ onAttempt: this.handleAuthenticationAttemptedLegacy })
.then(() => {
...
})
....
}
handleAuthenticationAttemptedLegacy = (error) => {
...
};
renderLegacy() {
const { errorMessageLegacy, biometricLegacy } = this.state;
const { style, handlePopupDismissedLegacy } = this.props;
return (
<View style={styles.container}>
<View style={[styles.contentContainer, style]}>
...
</View>
</View>
);
}
render = () => {
if (this.requiresLegacyAuthentication()) {
return this.renderLegacy();
}
// current API UI provided by native BiometricPrompt
return null;
}
}
If anyone has made a custom modal and linked fingerprint to it then please share your code. Thanks
Hi this is my code in App.js
var music = {
name: "Starboy",
artist: "The Weeknd",
albumArt: "",
length: "4:20",
audioURL:"",
};
export default class App extends Component
{
render() {
return (
<Image style={styles.albumArt} source={{ uri:music.albumArt }} />
);
}
};
I have another function in lastFM.js
export function getAlbumArt(albumName)
{
fetch('http://ws.audioscrobbler.com/2.0/?method=album.search&album='+albumName+'&api_key=MY_API_KEY&format=json&limit=1')
.then((response) => response.json())
.then((result) => {
const image = result.results.albummatches.album[0].image[2]['#text'];
console.log(image);
return image;
})
.catch((error) => {
console.log("ERROR: "+error);
});
}
How can I update music.albumArt in App.js and re-render Image inside App.js Render?
This might help. Re-render happens when you change the state of the component. So, here we are updating the state once we get data from the API.
export default class App extends React.Component {
constructor() {
super();
this.state = {
name: "Starboy",
artist: "The Weeknd",
albumArt: "",
length: "4:20",
audioURL: ""
};
}
componentDidMount(){
fetch('http://ws.audioscrobbler.com/2.0/?method=album.search&album='+albumName+'&api_key=MY_API_KEY&format=json&limit=1')
.then((response) => response.json())
.then((result) => {
const image = result.results.albummatches.album[0].image[2]['#text'];
console.log(image);
this.setState({...this.state, albumArt: image });
})
.catch((error) => {
console.log("ERROR: "+error);
});
}
render() {
return <Image style={styles.albumArt} source={{ uri: this.state.albumArt }} />;
}
}
I am trying to open the camera and taking a picture when clicking on some button but still having this error [Error: takePicture failed] without any error debugging information.
here is my code:
import { Camera, Permissions } from 'expo';
class SignUp extends React.Component {
constructor(props) {
super(props);
this.openCamera = this.openCamera.bind(this);
}
async openCamera() {
if (this.camera) {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
if(status === 'granted'){
console.log('Taking photo granted');
this.camera.takePictureAsync({ skipProcessing: true }).then(photo => {
console.log('photo', photo);
})
.catch((err) => {
console.log('err', err);
});
}
else{
console.log('no permission granted');
}
}
}
render() {
return (
<View>
<Camera
ref={ (ref) => {this.camera = ref} }
type={Camera.Constants.Type.back}
autoFocus={'off'}
></Camera>
<TouchableOpacity onPress={this.openCamera} >
<Text>open camera</Text>
</TouchableOpacity>
</View>
)
}
}
and I can't edit any native modules because it is an expo app
any help, please!
I would like to know how I can view data from my fetch query in my app.
I have a node that is fetched from React native and I want to display the response.
The node part;
app.get('/balance', function(req, res){
//calling the function
res.jsonp('0');
console.log("CRYPTO CALLED");
});
The react function;
_getBalanceFromApiAsync() {
fetch('http://192.168.1.100:3000/ballance')
.then(response => response.json())
.then(responseJson => {
console.log(responseJson);
return responseJson;
})
.catch((error) => {
console.error(error);
});
}
I can see the result in the node console as well as the react console. But where it doesn't work is here.
Native app;
<Text style={styles.getStartedText}>Your Wallet Balance</Text>
<Text> {this._getBalanceFromApiAsync()}</Text>
</View>
The function is getting executed but I would like to display the returned value and as it is the text field remain empty
Thank you
Its simple you need to setState for re-rendering the component. Try doing this
constructor(props){
super(props)
this.state = {
textData: ''
}
}
componentDidMount(){
this.getBalanceFromApiAsync()
}
getBalanceFromApiAsync() {
fetch('http://192.168.1.100:3000/ballance')
.then(response => response.json())
.then(responseJson => {
console.log(responseJson);
this.setState({
textData: responseJson
})
})
.catch((error) => {
console.error(error);
});
}
<Text style={styles.getStartedText}>Your Wallet Balance</Text>
<Text> {this.state.textData}</Text>
</View>