contentDescrption is not working using react-native-fbsdk - react-native

I used the react-native for sharing i wrote like in mycode
const FBSDK = require('react-native-fbsdk');
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
View,
} from 'react-native';
const {
LoginButton,
ShareDialog,
} = FBSDK;
class HelloFacebook extends Component {
constructor(props) {
super(props);
const shareLinkContent = {
contentType: 'link',
contentUrl: 'https://www.facebook.com',
contentDescription: 'Wow, check out this great site!',
};
this.state = {
shareLinkContent: shareLinkContent,
};
}
shareLinkWithShareDialog() {
var tmp = this;
ShareDialog.canShow(this.state.shareLinkContent).then(
function(canShow) {
if (canShow) {
return ShareDialog.show(tmp.state.shareLinkContent);
}
}
).then(
function(result) {
if (result.isCancelled) {
alert('Share cancelled');
} else {
alert('Share success with postId: '
+ result.postId);
}
},
function(error) {
alert('Share fail with error: ' + error);
}
);
}
render() {
alert("render")
return (
<View style={styles.container}>
<LoginButton />
<TouchableHighlight style={styles.share}
onPress={this.shareLinkWithShareDialog.bind(this)}>
<Text style={styles.shareText}>Share link with ShareDialog</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
shareText: {
fontSize: 20,
margin: 10,
},
});
AppRegistry.registerComponent('HelloFacebook', () => HelloFacebook);
But here the output which i got only the link which i want to share,i Didn't get any Description which i want to share
What i need is :
I want to share both contentDescription and contentUrl, so any one please give me the suggestions is there any thing wrong in my code, Any help much appreciated

Related

How to make a QR code scanner in React native using expo?

When I run https://snack.expo.io/#sushil62/qr-code-scanner in the expo which works fine, but when copy the same code given in App.js file, after running the application the camera opens but it shows no result while scanning, and
in expo also when changing the snack version 33 or higher it does not work there too.
import React, { Component } from 'react';
import { Alert, Linking, Dimensions, LayoutAnimation, Text, View, StatusBar, StyleSheet, TouchableOpacity } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';
export default class App extends Component {
state = {
hasCameraPermission: null,
lastScannedUrl: null,
};
componentDidMount() {
this._requestCameraPermission();
}
_requestCameraPermission = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({
hasCameraPermission: status === 'granted',
});
};
_handleBarCodeRead = result => {
if (result.data !== this.state.lastScannedUrl) {
LayoutAnimation.spring();
this.setState({ lastScannedUrl: result.data });
}
};
render() {
return (
<View style={styles.container}>
{this.state.hasCameraPermission === null
? <Text>Requesting for camera permission</Text>
: this.state.hasCameraPermission === false
? <Text style={{ color: '#fff' }}>
Camera permission is not granted
</Text>
: <BarCodeScanner
onBarCodeRead={this._handleBarCodeRead}
style={{
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}}
/>}
{this._maybeRenderUrl()}
<StatusBar hidden />
</View>
);
}
_handlePressUrl = () => {
Alert.alert(
'Open this URL?',
this.state.lastScannedUrl,
[
{
text: 'Yes',
onPress: () => Linking.openURL(this.state.lastScannedUrl),
},
{ text: 'No', onPress: () => {} },
],
{ cancellable: false }
);
};
_handlePressCancel = () => {
this.setState({ lastScannedUrl: null });
};
_maybeRenderUrl = () => {
if (!this.state.lastScannedUrl) {
return;
}
return (
<View style={styles.bottomBar}>
<TouchableOpacity style={styles.url} onPress={this._handlePressUrl}>
<Text numberOfLines={1} style={styles.urlText}>
{this.state.lastScannedUrl}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.cancelButton}
onPress={this._handlePressCancel}>
<Text style={styles.cancelButtonText}>
Cancel
</Text>
</TouchableOpacity>
</View>
);
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
},
bottomBar: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.5)',
padding: 15,
flexDirection: 'row',
},
url: {
flex: 1,
},
urlText: {
color: '#fff',
fontSize: 20,
},
cancelButton: {
marginLeft: 10,
alignItems: 'center',
justifyContent: 'center',
},
cancelButtonText: {
color: 'rgba(255,255,255,0.8)',
fontSize: 18,
},
});
It would be very nice if someone suggests me to solve this or give me an example(such as downgrading the expo version) so that I can implement this.
You can use
expo-barcode-scanner
Run expo install expo-barcode-scanner
Usage
You must request permission to access the user's camera before attempting to get it. To do this, you will want to use the Permissions API. You can see this in practice in the following example.
import * as React from 'react';
import {
Text,
View,
StyleSheet,
Button
} from 'react-native';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import {
BarCodeScanner
} from 'expo-barcode-scanner';
export default class BarcodeScannerExample extends React.Component {
state = {
hasCameraPermission: null,
scanned: false,
};
async componentDidMount() {
this.getPermissionsAsync();
}
getPermissionsAsync = async() => {
const {
status
} = await Permissions.askAsync(Permissions.CAMERA);
this.setState({
hasCameraPermission: status === 'granted'
});
};
render() {
const {
hasCameraPermission,
scanned
} = this.state;
if (hasCameraPermission === null) {
return <Text > Requesting
for camera permission < /Text>;
}
if (hasCameraPermission === false) {
return <Text > No access to camera < /Text>;
}
return ( <
View style = {
{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
}
} >
<
BarCodeScanner onBarCodeScanned = {
scanned ? undefined : this.handleBarCodeScanned
}
style = {
StyleSheet.absoluteFillObject
}
/>
{
scanned && ( <
Button title = {
'Tap to Scan Again'
}
onPress = {
() => this.setState({
scanned: false
})
}
/>
)
} <
/View>
);
}
handleBarCodeScanned = ({
type,
data
}) => {
this.setState({
scanned: true
});
alert(`Bar code with type ${type} and data ${data} has been scanned!`);
};
}
Note: Passing undefined to the onBarCodeScanned prop will result in no scanning. This can be used to effectively "pause" the scanner so that it doesn't continually scan even after data has been retrieved.
Allow all the permisions which gets popped.
You're good to go!!
Hope this helps.

Error occur with Net-info is not working in React-Native

I am using Net-info in my code for checking internet connectivity but it is not working for me. It will give error..
Type Error: undefined is not an object(evaluating'_reactNative.Netinfo.isConected')
I have also set permission in AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
but it is not working for me
and my code is here..
import { StyleSheet, Text, View, NetInfo } from 'react-native';
export default class App extends Component{
constructor(){
super();
this.state={
connection_Status : ""
}
}
componentDidMount() {
NetInfo.isConnected.addEventListener(
'connectionChange',
this._handleConnectivityChange
);
NetInfo.isConnected.fetch().done((isConnected) => {
if(isConnected == true)
{
this.setState({connection_Status : "Online"})
}
else
{
this.setState({connection_Status : "Offline"})
}
});
}
componentWillUnmount() {
NetInfo.isConnected.removeEventListener(
'connectionChange',
this._handleConnectivityChange
);
}
_handleConnectivityChange = (isConnected) => {
if(isConnected == true)
{
this.setState({connection_Status : "Online"})
}
else
{
this.setState({connection_Status : "Offline"})
}
};
render() {
return (
<View style={styles.MainContainer}>
<Text style={{fontSize: 20, textAlign: 'center', marginBottom: 20}}> You are { this.state.connection_Status } </Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 20
},
TextStyle: {
fontSize:20,
textAlign: 'center'
}
});
how can solve this problem please suggest me any solution.
I don't know whats version of React Native you have, but netinfo has been extracted to a different library.
https://github.com/react-native-community/react-native-netinfo
For people who try to use this in 2021, netinfo is separated from react native, and need to be imported separately from here :
https://github.com/react-native-netinfo/react-native-netinfo
if there are still error when using it, it is maybe because the fetch is depreciated, so no need to use
componentDidMount() {
NetInfo.isConnected.addEventListener(
'connectionChange',
this._handleConnectivityChange
);
NetInfo.isConnected.fetch().done((isConnected) => {
if(isConnected == true)
{
this.setState({connection_Status : "Online"})
}
else
{
this.setState({connection_Status : "Offline"})
}
});
}
instead use this
componentDidMount() {
NetInfo.addEventListener(this.handleConnectivityChange);
// The fetch is not needed as the listen will send the current state when you subscribe to it
}
componentWillUnmount() {
NetInfo.removeEventListener(this.handleConnectivityChange);
}
handleConnectivityChange = state => {
if (state.isConnected) {
Alert.alert('online');
this.setState({connection_Status: 'Online'});
} else {
Alert.alert('offline');
this.setState({connection_Status: 'Offline'});
}
};
as mentioned in this github
https://github.com/react-native-netinfo/react-native-netinfo/issues/279
you must change
const {
View,
ImageBackground,
ActivityIndicator,
NetInfo,
Platform,
StyleSheet,
} = ReactNative;
to
const {
View,
ImageBackground,
ActivityIndicator,
Platform,
StyleSheet,
} = ReactNative;
const NetInfo = require('#react-native-community/netinfo');
in node-module/react-native-cached-image/CachedImage.js

Cant get React native app to navigate to homescreen after facebook login

I am making a react native application where the user logs in with Facebook and then goes to their home page with more details of the app and I can not get the App to navigate to the homepage after successful login with Facebook.
I'm using React Navigator. I have been searching Stackoverflow for 3 days with no luck...
Any help would be appreciated
the homepage successfully navigated when using the regular button
as shown above but it will not after the facebook authentication
//index.js
import React, {
Component
} from 'react';
import {
Platform,
StyleSheet,
Image,
Button,
Slider,
Text,
View,
Dimensions
} from 'react-native';
import FBLoginButton from '../FBLoginButton';
import {
SliderBox
} from 'react-native-image-slider-box';
import {
SafeAreaView
} from 'react-navigation';
import A from 'react-native-a'
import {
NavigationActions,
StackActions
} from 'react-navigation';
import {
createStackNavigator,
createAppContainer
} from 'react-navigation';
//import App from '../App';
const FBSDK = require('react-native-fbsdk');
const {
LoginManager,
} = FBSDK;
let isLoggedIn = false
type Props = {};
export default class Login extends Component < Props > {
constructor(props) {
//this._loginAuth = this._loginAuth.bind(this)
super(props);
this.state = {
images: [
'https://hluhluwegamereserve.com/wp-content/uploads/2014/03/IMG_1579.jpg',
'https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/04/26/09/giraffe.jpg',
]
};
}
//this.props.navigation.push('Home')
render() {
LoginManager.logInWithReadPermissions(['public_profile']).then(
function(result) {
if (result.isCancelled) {
alert('Login was cancelled');
} else {
alert('Login was successful with permissions: ' + result.grantedPermissions.toString());
//this.props.navigation.push('Home')
//this.props.navigation.navigate("Home")
//this._loginAuth()
}
},
function(error) {
alert('Login failed with error: ' + error);
}
);
//alert(this.state.loggedIn)
return (
<
View style = {
styles.container
} >
<
SliderBox style = {
styles.slider
}
images = {
this.state.images
}
sliderBoxHeight = {
'100%'
}
paginationBoxVerticalPadding = {
0
}
//parentWidth={400}
/>
<
Button onPress = {
() => this.props.navigation.navigate('Home')
}
title = "Go to Home"
color = "#841584" /
>
<
FBLoginButton onload = {
() => this.props.navigation.navigate('Home')
}
style = {
styles.welcome
} >
<
/FBLoginButton>
<
Text style = {
styles.instructions
} >
<
/Text>
<
/View>
);
}
}
if (this.isLoggedIn) {
this.props.navigation.navigate('Home')
}
// ...
// Attempt a login using the Facebook login dialog,
// asking for default permissions.
const styles = StyleSheet.create({
container: {
flex: 1,
//padding: 40,
//marginBottom: 250,
justifyContent: 'center',
alignItems: 'center',
//marginTop: '15%',
paddingTop: '15%',
paddingBottom: '15%',
resizeMode: 'contain',
},
slider: {
//width: '100%',
//alignSelf: 'flex-start',
//width: this.deviceWidth,
resizeMode: 'contain',
},
welcome: {
fontSize: 12,
textAlign: 'center',
marginBottom: '10%',
padding: '5%',
//paddingTop: 40,
},
terms: {
fontSize: 12,
color: 'blue',
textAlign: 'center',
margin: 1,
},
instructions: {
textAlign: 'center',
color: '#333333',
//marginBottom: 5,
},
safeArea: {
backgroundColor: '#ddd'
},
});
Here is my App.Js
//App.js
/*
* #format
* #flow
*/
import React, {
Component
} from 'react';
import {
Platform,
StyleSheet,
Image,
Button,
Slider,
Text,
View,
Dimensions
} from 'react-native';
import A from 'react-native-a'
import {
NavigationActions,
StackActions
} from 'react-navigation';
import {
createStackNavigator,
createAppContainer
} from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
import Login from './screens/Login';
import {
StackNavigator
} from "react-navigation";
import FBLoginButton from './FBLoginButton'
type Props = {};
//Login Screen
const NavigationApp = createStackNavigator({
Login: Login,
Home: HomeScreen
}, {
initialRouteName: "Login"
});
class App extends Component < Props > {
constructor(props) {
super(props);
}
render() {
return (
//Empty View For App.js
<
View >
<
/View>
);
}
}
//Navagation Goes To Login.js For Default
export default createAppContainer(NavigationApp);
Instead of doing an if-statement in your code outside of your class, do this one:
Once you are logged-in, Facebook's LoginManager will be returning a Promise
The promise will then be checked. So, if you have
.then((result) => {
if(result) {
this.props.navigation.navigate('HomeScreen');
} else {
alert('...'); // Anything you want to do if login failed.
}
});
I used
FBLogout = (accessToken) => {
let logout =
new GraphRequest(
"me/permissions/",
{
accessToken: accessToken,
httpMethod: 'DELETE'
},
(error, result) => {
if (error) {
console.log('Error fetching data: ' + error.toString());
} else {
LoginManager.logOut();
}
});
new GraphRequestManager().addRequest(logout).start();
};
and added a button and used
LoginManager.logout();
<View style={styles.container}>
<SettingsView profile={this.state.profile}/>
<Button
onPress={() => {
FBLogout();
this.props.navigation.navigate('HomeScreen')
}}
title="Log Out"
color="#3b5998"
/>
</View>

react-native-camera onBarCodeRead not working

Im having issues with onBarCodeRead using react-native.
The expected behaviour: App consoles log barcode type and data.
Actual behaviour: Apps just open the camera, and _onBarCodeRead is never called.
Any explanation would be satisfatory.
Here is the code:
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
StyleSheet,
Text,
TouchableHighlight,
View
} from 'react-native';
import Camera from 'react-native-camera';
class camera_app extends Component {
constructor(props) {
super(props);
this.state = {
showCamera: true,
};
}
renderCamera = () => {
if(this.state.showCamera) {
return (
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.container}
aspect={Camera.constants.Aspect.fill}
onBarCodeRead={this._onBarCodeRead}>
</Camera>
);
} else {
return (
<View></View>
);
}
}
render() {
return (
this.renderCamera()
);
}
_onBarCodeRead = (e) => {
this.setState({showCamera: false});
alert("Barcode Found!",
"Type: " + e.type + "\nData: " + e.data);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "transparent",
},
});
AppRegistry.registerComponent('rn_camera', () => camera_app);
I tried your code and it works just fine. Just change the alert function so it will show the type and data of the barcode. Also try to check the barcode type if it's supported or not https://github.com/lwansbrough/react-native-camera
alert("Barcode Found! \nType: " + e.type + "\nData: " + e.data);

React Native: `Image` does show the `uri` source

Image doesn't show the uri source.
Image can show the require('') source.
I don't know the reason.
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
Image,
Dimensions,
ScrollView,
} from 'react-native';
const deviceWidth = Dimensions.get('window').width;
export default class AwesomeProject extends Component {
// Initialize the hardcoded data
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
imageArray1: [
{
url: 'http://insights.ubuntu.com/wp-content/uploads/8063/react-native-logo.jpg',
description: 'React Logo'
},
],
imageArray2: [
{
url: 'http://insights.ubuntu.com/wp-content/uploads/8063/react-native-logo.jpg',
description: 'React Logo'
},
{
url: 'http://insights.ubuntu.com/wp-content/uploads/8063/react-native-logo.jpg',
description: 'React Logo'
},
],
};
}
renderRow = (tempArray) => {
const imageStyleNumber = tempArray.length;
let imageStyleString;
switch (imageStyleNumber) {
case 1:
imageStyleString = `imgView1`;
break;
default:
imageStyleString = `imgView9`;
}
return tempArray.map((item, index) => {
if(index > 8){
return ;
}
return (
<View key={index} style={styles[imageStyleString]}>
<Image style={styles.imgIstyle} source={{uri: item.url}}/>
<Text style={styles.imgTDesc}>{item.description}</Text>
</View>
)
})
}
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.rowVImageBox}>
{this.renderRow(this.state.imageArray1)}
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ebf0f2',
},
rowVImageBox: {
flexDirection:'row',
flexWrap:'wrap',
width: 300,
height: 300,
marginBottom:100,
},
rowVImageBox2: {
flexDirection:'row',
flexWrap:'wrap',
width: 300,
height: 300,
marginBottom:100,
backgroundColor:'blue',
},
imgView1: {
width:290,
height:290,
marginRight:5,
marginBottom:5,
},
imgView2: {
width:140,
height:290,
marginRight:5,
marginBottom:5,
},
imgIstyle:{
width:'100%',
height:'70%',
backgroundColor:'yellow',
},
imgTDesc: {
flex:2,
backgroundColor:'white'
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Do you run it well?
I have asked my friend. He doesn't know the reason too.
modify the Info.plist.
iOS can load the http resource.