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);
Related
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>
In my react-native application, it gives me an error, saying ": In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant" when I try to set this.props.navigation.setParams({});
What is the reason for this error?
import React, { Component } from "react";
import { View, Text, ScrollView, StyleSheet } from "react-native";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import {
Workout,
WorkoutDetail,
KeyValueText,
DetailText
} from "../../components";
import { getWorkout } from "../../actions";
class WorkoutDetailScreen extends Component {
constructor(props) {
super(props);
this.state = {
currentWorkout: {}
};
}
componentDidMount() {
const workoutId = this.props.navigation.state.params;
this.props.getWorkout(workoutId);
this.props.navigation.setParams({}); // If I remove this line, the error goes. But I want to set params here.
}
render() {
let currentWorkout = this.props.currentWorkout;
let tools =
currentWorkout.tools && currentWorkout.tools.length > 0
? currentWorkout.tools.join(", ")
: "Not Required";
let muscles = currentWorkout.muscles
? currentWorkout.muscles.join(", ")
: "";
return (
<ScrollView style={styles.container}>
<WorkoutDetail
workout={this.props.currentWorkout}
workoutImage={currentWorkout.workoutImage}
onPressWorkout={() => alert("CONTINUE WORKOUT")}
/>
<View style={styles.workoutInfo}>
<KeyValueText header="Time" value={currentWorkout.length} />
<KeyValueText header="Difficulty" value={currentWorkout.difficulty} />
<KeyValueText header="Tools" value={tools} />
<KeyValueText header="Muscles" value={muscles} />
</View>
<View>
<DetailText text={currentWorkout.description} />
</View>
</ScrollView>
);
}
// navigation options
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
headerTitle: "TITLE",
headerTitleStyle: {
width: "100%",
alignItems: "center"
},
headerStyle: {
paddingRight: 10,
paddingLeft: 10
}
};
};
}
// styles
const styles = StyleSheet.create({
container: {
flex: 1
},
workoutInfo: {
paddingBottom: 10,
borderBottomWidth: 1,
borderBottomColor: "gray"
}
});
const mapStateToProps = state => {
return {
currentWorkout: state.workouts.currentWorkout
};
};
const mapDispatchToProps = dispatch => {
return {
getWorkout: bindActionCreators(getWorkout, dispatch)
};
};
export default connect(mapStateToProps, mapDispatchToProps)(
WorkoutDetailScreen
);
This is probably because you're using an empty object in your setParams call. React navigation then probably uses Object.assign to set your navigation parameters and it hits this error
Try reseting your navigation params by providing an object that represents the initial state and not an empty object.
I've been trying to save an asyncstorage item, on touchableopacity onPress, then navigate to a react-native-camera screen.
Problem is: Camera screen get blank. I got the following error: Warning: Cannot update during an existing state transition (such as within 'render' or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are anti-pattern, but can be moved to 'componentWillMount'.
Warning points to lines 27, 36 and 41 (at AddParameters class)
Here is the code:
AddParameters.js
import React, { Component } from 'react';
import {
Text,
AsyncStorage,
View,
TouchableOpacity,
} from 'react-native';
class AddParameters extends Component {
constructor() {
super()
this.state = {
localIds: [
"data1",
"data2",
"data3",
"data4",
"data5",
"data6"
],
}
}
renderScreen = () => {
return (
<TouchableOpacity onPress={this._AddParameter(this.state.localIds[0])}>
<Text>Click Me</Text>
</TouchableOpacity>
);
}
_AddParameter = (ParameterId) => {
const { navigate } = this.props.navigation;
AsyncStorage.setItem("myparam", ParameterId);
navigate("CameraScreen");
}
render() {
return (
this.renderScreen()
);
}
}
export default AddParameters;
CameraScreen.js
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
StyleSheet,
Text,
View,
Image,
AsyncStorage,
} from 'react-native';
import Camera from 'react-native-camera';
class CameraScreen extends Component {
constructor(props) {
super(props);
this.state = {
mystate: '',
};
}
renderCamera = () => {
return (
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={stylesCamera.container}
aspect={Camera.constants.Aspect.fill}>
</Camera>
);
}
render() {
return (
this.renderCamera()
);
}
}
const stylesCamera = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "transparent",
},
});
export default CameraScreen;
Any explanation would be helpfull. Thanks in advance.
On your AddParameters file try changing this:
<TouchableOpacity onPress={this._AddParameter(this.state.localIds[0])}>
To:
<TouchableOpacity onPress={() => this._AddParameter(this.state.localIds[0])}>
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
I tried following the starter tutorial by setting up a new React Native Project for iOS. But the loginbutton doesn't seem to be working. Any help is appreciated.
Here's the index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
const FBSDK = require('react-native-fbsdk');
const {
LoginButton
} = FBSDK;
var Login = React.createClass({
render: function() {
return (
<View>
<LoginButton
publishPermissions={["publish_actions"]}
onLoginFinished={
(error, result) => {
if (error) {
alert("login has error: " + result.error);
} else if (result.isCancelled) {
alert("login is cancelled.");
} else {
alert("login has finished with permissions: " + result.grantedPermissions)
}
}
}
onLogoutFinished={() => alert("logout.")}/>
</View>
);
}
});
class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text>
Login to Facebook
</Text>
<Login />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
shareText: {
fontSize: 20,
margin: 10,
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
And the screenshot of the emulator:
You need to link the sdk's iOS project in your app's project.
If you're using react-native-sdk v0.2.0+, rnpm will take care of this step and you can follow the tips here to complete set up.
If you're using the older version, you need to link react-native-fbsdkxxx.xcodeproj in YourApp.xcodeproj. Follow the manual linking steps in https://facebook.github.io/react-native/docs/linking-libraries-ios.html