[React Native]
Can anyone help to elaborate what should that kind of menu called? When onclick, it slided up. Please also introduce what are other menu's available in react native? (Must work for both android and iOS)
Example
It is share dialog and you can easily implement it in React Native
Try this code
import React, {Component} from 'react';
import {Share, Button} from 'react-native';
class ShareExample extends Component {
onShare = async () => {
try {
const result = await Share.share({
message:
'React Native | A framework for building native apps using React',
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
alert(error.message);
}
};
render() {
return <Button onPress={this.onShare} title="Share" />;
}
}
React Native Modal
1-
react-native-modal
2-
react-native-modalbox
Related
In my app, all other Expo AdMob ads are working very well except AdMobInterstitial. AdMobInterstitial ads showing only once. when I try to visit the next time on that page the ads not showing. I am not getting any errors as well. could you please tell me what's wrong with the below codes? Appreciate your support.
I am using this-> npm i expo-ads-admob
import React, { useEffect, useState, } from 'react';
import { Text, View } from 'react-native';
import {
AdMobBanner,
AdMobInterstitial,
PublisherBanner,
AdMobRewarded,
setTestDeviceIDAsync,
} from 'expo-ads-admob';
const interstitial = async () => {
await AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712');
try {
await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
await AdMobInterstitial.showAdAsync();
} catch (error) {
console.log(e);
}
}
const TestAds = ({ navigation }) =>{
useEffect (() => {
interstitial();
},[])
return (
<View>
<Text>Hello World Testing</Text>
</View>
});
export default TestAds;
I have been seeing this Share library in many new Apps and I was wondering if there is one like it already. if not, how does one trigger opening WhatsApp and Facebook in React Native? thank you
You can use import { Share} from 'react-native'
import React from 'react';
import { Share, View, Button } from 'react-native';
const ShareExample = () => {
const onShare = async () => {
try {
const result = await Share.share({
message:
'React Native | A framework for building native apps using React',
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
alert(error.message);
}
};
return (
<View style={{ marginTop: 50 }}>
<Button onPress={onShare} title="Share" />
</View>
);
};
export default ShareExample;
or
react-native-share library
npm i react-native-share --save to get your desired result.
One solution is to use Linking.openURL and social_icon together
(A) For social icons, you may install and use by referring to this official link:
https://reactnativeelements.com/docs/social_icon/
(B) For opening social media / email, etc thru Linking.openURL, the following are some examples:
Linking.openURL('fb://page/PAGE_ID');
Linking.openURL('http://instagram.com/_u/USER_NAME');
Linking.openURL('http://instagram.com/_p/PICTURE');
Linking.openURL('mailto:support#example.com')
Note: you have to import Linking , such as follows:
import { Button, Linking, View } from 'react-native';
I can know when the scene is on screen using following code:
this.subs = [
this.props.navigation.addListener('didFocus', this.loadOfflineData)
];
But , if I want to detect when scene is out of focus. I 'm wondering what should I do .
Basically I want to detect if the user press home button and then I want to perform some action.
Any suggestions.
You can use AppState to know when an app is put into the background.
AppState can tell you if the app is in the foreground or background, and notify you when the state changes.
Here is a simple example of using AppState:
import React, {Component} from 'react';
import {AppState, Text} from 'react-native';
class AppStateExample extends Component {
state = {
appState: AppState.currentState,
};
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
if ( this.state.appState.match(/inactive|background/) && nextAppState === 'active' ) {
console.log('App has come to the foreground!');
} else {
console.log('App has gone to the background!');
// start your background task here
}
this.setState({appState: nextAppState});
};
render() {
return <Text>Current state is: {this.state.appState}</Text>;
}
}
I've done this with android and java using the android lifecycle. This should work in React Native (see EDIT down below). the developer.android.com forum: this page
In short:
onCreate(): a user opens your app for the first time
onStart(): app restarts
onResume(): a user opens your app while it was active in the background
onPause(): app goes out of focus
onStop(): app is no longer visible
onDestroy(): activity will be destroyed
In your case you should use onPause()
So a little code snippet for in java:
#Override
public void onPause() {
super.onPause();
//do something
}
EDIT:
This answer tells you how to detect onPause and onResume in Reacte Native.
Code in that answer:
import React, {Component} from 'react'
import {AppState, Text} from 'react-native'
class AppStateExample extends Component {
state = {
appState: AppState.currentState
}
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
console.log('App has come to the foreground!')
}
this.setState({appState: nextAppState});
}
render() {
return (
<Text>Current state is: {this.state.appState}</Text>
);
}
}
import { Sound } from 'react-native-sound'
import React, { Component } from 'react'
import { Button } from 'react-native'
//import Audio from 'react-native-audio'
class About extends Component {
playTrack = () => {
const track = new Sound('geetha_govindham_song.mp3','', null, (e) => {
if (e) {
console.log('error loading track:', e)
} else {
//track.play()
}
})
track.play()
}
render() {
console.log("CCCCC", JSON.stringify(Sound));
return <Button title="play me" onPress={this.playTrack} />
}
}
export default About
After executing this we got the error like undefined is not a constructor.
Here, i used react-native-sound module for playing mp3 song. But, I got the error like, what shown in the picture. Please give any suggestion to me to solve the issue.
Could you try using require?
const Sound = require('react-native-sound');
you should do default import:
import Sound from ‘react-native-sound’
You can find the example in the project’s README: https://github.com/zmxv/react-native-sound/blob/master/README.md
I am new in react-native. I have problems wiht implementing orientation for ios. I am trying to use react native orientation. I have read the documentation but can't do it anyway. Please don't answer with methods like "lockToPortrait(),lockToLandscape() or getOrientation(function(err, orientation)", I have already read this. Can anyone just respond with a piece of working code, it will be enough for me.
Thanks
var Orientation = require('react-native-orientation');
class YourApp extends Component {
componentDidMount() {
Orientation.lockToPortrait();
}
render() {
<MainComponent />
}
}
AppRegistry.registerComponent('YourApp', () => YourApp);
Worked for me just fine.
import React, {PureComponent} from 'react';
import {
View,
Text,
Dimensions
} from 'react-native';
import Orientation from 'react-native-orientation';
const {
width: deviceScreenWidth,
height: deviceScreenHeight
} = Dimensions.get('window');
let aspectRatio = deviceScreenWidth / deviceScreenHeight;
export default class Home extends PureComponent {
constructor(props) {
super(props);
}
render() {
return (
<View style={style.homeMainContainer}>
<Text>Atif dont let this screen rotate</Text>
</View>
)
}// end of render
componentDidMount() {
if (deviceScreenWidth > deviceScreenHeight) {
Orientation.lockToLandscape();
} else {
Orientation.lockToPortrait();
}
// this unlocks any previous locks to all Orientations
// Orientation.unlockAllOrientations();
Orientation.addOrientationListener(this._orientationDidChange);
}
_orientationDidChange = (orientation) => {
if (orientation === 'LANDSCAPE') {
// do something with landscape layout
} else {
// do something with portrait layout
}
}
};
This example is to figure out the the device is the tablet or mobile, if it is tablet it will lock the screen as landscape and if it is mobile then it will lock the screen as portrait.
This is the library as package first you have to install the package link : https://www.npmjs.com/package/react-native-orientation
Adding this since none of the above mentioned that this can be done in react native, without importing a library with Dimensions.addEventListener.
Here is an example of a class that can be initiated to remove and add the StatusBar in your app.
import { Dimensions } from "react-native";
class OrientationChanger {
constructor() {
this.update();
Dimensions.addEventListener("change", () => {
this.updateOrientation();
});
}
update() {
if (Dimensions.get("window").width < Dimensions.get("window").height) {
StatusBar.setHidden(false); // "portrait"
} else {
StatusBar.setHidden(true); // "landscape"
}
}
}
export default OrientationChanger;