I am new to react native. I want to use 'react-native-camera'. I created a new project , installed the package correctly(I know because I have done it thrice to make sure that i'm not doing anything wrong) and it shows this error **Cannot read property 'oneOfType' of undefined ** and it is in index.js of this package 'react-native-camera'. I can't find any solution. I have tried changing gradle version, gradle wrapper properties everything that I could but this issue is not related to gradle. This is the code in my App.js. I know code isn't generating this error but i am new to react-native so maybe i'm missing something.
Any suggestion would be appreciated
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
import Camera from 'react-native-camera';
export default class BarcodeScan extends Component {
constructor(props) {
super(props);
this.state = {
qrcode: ''
}
}
onBarCodeRead = (e) => this.setState({qrcode: e.data});
render () {
return (
<View style={styles.container}>
<Camera
style={styles.preview}
onBarCodeRead={this.onBarCodeRead}
ref={cam => this.camera = cam}
aspect={Camera.constants.Aspect.fill}
>
<Text style={{
backgroundColor: 'white'
}}>{this.state.qrcode}</Text>
</Camera>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
}
});
Thanks to this guy , https://github.com/dwicao/react-native-panel/issues/4
I was able to solve this issue by replacing following in index.js of package 'react-native-camera'.
Replace
import React, { Component, PropTypes } from 'react';
with
import React, { Component } from 'react';
import PropTypes from 'prop-types';
In case someone finds this thread by searching on the the title (which I did), I will add my experience. Sometimes with TSX, imports get a little weird. What worked for me was using this import:
import * as PropTypes from 'prop-types'
I also need to do the same thing with React itself or it does not work either:
import * as React from 'react'
So far, these are the only two imports I need to do this for.
Related
I am new to react-native. I was trying to write simple programs found from tutorials in order to familiar with react-native environment. I have researched on the same bug on stackoverflow itself and couldn't find any helpful solution, that's the reason I am writing again.
I was referring to the following tutorial
https://levelup.gitconnected.com/getting-started-with-react-native-in-2019-build-your-first-app-a41ebc0617e2
Following is the code that I have used.
Created a new class named EmojiDict.js
import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
class EmojiDict extends Component {
state = {
'😃': '😃 Smiley',
'🚀': '🚀 Rocket',
'⚛️': '⚛️ Atom Symbol'
};
render() {
return (
<View style={styles.container} >
<Text>this.state['😃'] </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
}
});
Then modified the App.js class as follows:
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import EmojiDict from './src/components/EmojiDict';
export default class App extends Component {
render() {
return <EmojiDict />;
}
}
I have tried various examples and nothing worked when the App.js class gets modified. I am not able to go forward due to this error.
It's looks like you forgot to export the EmojiDict component
instead of class EmojiDict extends Component {
try
export default class EmojiDict extends Component {
may resolve this issue
I tried to implement react-native-show-hide-toggle-box for getting the toogle box but whenever i run the project I get an error:
(Unable to resolve module "./ToggleBoxStyle" from "node_modules/react-native-show-hide-toggle-box/ToggleBox.js")
This is the 1st time usage of this module for me and i am unable to get pass through it.
I checked the node module which contains the file ToogleBoxStyles and ToogleBox in the same directory, but when i went inside ToogleBox it is having this line:
import styles from './ToggleBoxStyle'
So how to make this work as i installed it by
npm i native-show-hide-toggle-box --save
Basic importing of default export is showing error to me.
import React from 'react';
import { LayoutAnimation, View, Text, StatusBar, ScrollView, Picker, StyleSheet } from 'react-native'
import ToggleBox from 'react-native-show-hide-toggle-box'
export default class TimeSlot extends React.Component {
render() {
return (
<ScrollView style={styles.container}>
<Toggle label='Show me something' value='asd' style={{backgroundColor: '#ddd', borderBottomWidth: 1}}>
<View style={{height: 300, alignItems: 'center', justifyContent: 'center', backgroundColor: '#eee'}}>
<Text>Hello, how are you?</Text>
</View>
</Toggle>
</ScrollView>
)
}
}
From ToogleBox.js
import React, { PropTypes } from 'react'
import { Text, View, Image, TouchableWithoutFeedback, Animated} from 'react-native'
// external libs
import Icon from 'react-native-vector-icons/MaterialIcons'
// styles
import styles from './ToggleBoxStyle'
How to make the above thing work for me?
For some reasons, this worked out with me. I used import { ToggleBox } from 'react-native instead of import { ToggleBox } from 'react-native-show-hide-toggle-box'.
I'm using Expo React Native to develop a mobile application with the help of Redux, as well as React-Redux. With the React-Redux v6.0, I can connect the components with no issues, but I cannot get the state from the store with v6.0, although with Logger Middleware, my state is already updated. I cannot use it after extract it with mapStateToProps. So I decided to update React-Redux to v7.0 with the hope that the issues will be solved but I met a new one (Image below).
Issue Screen
This is my App.js
import React from 'react';
import { Platform, StyleSheet, Text, View} from 'react-native';
import {Provider} from 'react-redux';
import store from './src/redux/configureStore';
import LocationShow from './src/components/LocationShow';
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<LocationShow />
</View>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is my LocationShow.js
import React from 'react';
import {View, Text, StyleSheet, ActivityIndicator} from 'react-native';
import {Location, Permissions, Constants} from 'expo';
import {connect} from 'react-redux';
import {Platform} from 'expo-core';
import * as locationActions from '../redux/actions/locationActions';
class LocationShow extends React.Component {
componentDidMount = async () =>{
if (Platform.OS === 'android' && !Constants.isDevice){
console.log('Switch to the real device dawg!')
}else{
await this.props.getCurrentLocation();
}
}
render(){
return(
<View>
{this.props.isLoading ?
<ActivityIndicator/>:
<View>
<Text>Latitude:{this.props.latitude}</Text>
<Text>Longitude:{this.props.longitude}</Text>
</View>
}
</View>
)
}
}
const mapStateToProps = (state) =>{
return{
latitude: state.latitude,
longitude: state.longitude,
error: state.error,
isLoading: state.isLoading
}
}
const mapDispatchToProps = (dispatch) =>{
return {
getCurrentLocation: () =>
dispatch(locationActions.getCurrentLocation())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(LocationShow);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
I read the changes of v7.0 with the connect() but Im quite new to React so I cannot get the idea of it.
Note: connect now uses React.memo() internally, which returns a special object rather than a function. Any code that assumed React components are only functions is wrong, and has been wrong since the release of React 16.6. If you were using PropTypes to check for valid component types, you should change from PropTypes.func to PropTypes.elementType instead.
Im running React:v16.8.6, React-Native:0.57.1, React-Redux: v7.0.2, Redux:v4.0.1
Hope someone can help me out, sorry if the code is too bad, as I said above, I'm quite new to React Native and Redux or other stuff.
Thank you!
After considering, I decied to go back to version 6.0.1 of react-redux. Now everything works like a champ. This thread can be closed right now.
By the way, the problem exactly comes from the new connect(), cause the react-redux team uses React.memo() and Hooks. But I still do not understand why it is the problem so if anyone has an idea about the changes of version 7.0.2 with the new connect(), feel free to explain.
Thank you guys!
I'm new to React Native and I'm trying to make a custom component for a test app, but I'm getting this error when loading the app from Expo:
Uncaught error: java.lang.Exception: Bundle return code: 500.
Image: https://i.imgur.com/wRTxa8V.jpg
(not enough reputation to post image, sorry)
My project structure is basically as follows:
/TestApp
App.js
/src
/components
CustomButton.js
CustomButton.style.js
CustomButton.style.js
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
buttonContainer: {
width: 100,
height: 20,
alignItems: 'center',
border: '1px solid white',
backgroundColor: 'skyblue'
},
buttonText: {
color: 'white',
fontSize: 20
}
});
CustomButton.js
import React, { Component } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import styles from './CustomButton.style';
export default class CustomButton extends Component {
constructor(props){
this.props = props;
}
render(){
return(
<TouchableOpacity
style={styles.buttonContainer}
onPress={this.props.onPress}>
<Text style={styles.buttonText}>
{this.props.title}
</Text>
</TouchableOpacity>
);
}
}
App.js
import React, { Component } from 'react';
import { Alert, AppRegistry, StyleSheet, View, Text } from 'react-native';
import CustomButton from './src/components/CustomButton';
export default class TestApp extends Component{
render(){
return(
<CustomButton/>
);
}
}
I'm pretty sure the issue is when I try to import the custom component, because the app loads when I comment the line. I've read some questions about this, and it usually happens because the path is incorrect, though I can't figure out what's wrong with my path.
Thanks in advance.
The import for the StyleSheet is wrong in your code, it must be imported from react-native
import {StyleSheet} from 'react-native'
Also constructor is not preceeding with a super class
You need to add
constructor(props){
super(props) <== If you want to access props
this.props = props;
}
The styles are also not valid, since there is no property for border, you may check this for more info.
I just started with react-native and i'm fiddling with the styles. I want to use something i always do when working with Sass and that's creating a global configuration file with variables i can use throughout the Sass files. In Sass i would do the following:
style.scss
#import 'config/_config';
#import 'base/_base';
Then in _config.scss i would put something like $fontColor: 'red'; and then in _base.scss something like this:
p{
color: $fontColor
}
When i compile the sass files to a single css i get the expected
p{
color: 'red';
}
Now i'm trying the same in react-native, but i can't get it to work. The closest i get with a 'result' (meaning: no error, but no result either) is this:
My file App.js contains the following
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>My first app</Text>
</View>
);
}
}
const styles = require('./style/Style.js');
style/Style.js looks like this
import React from 'react';
import { StyleSheet } from 'react-native';
import s from './config/Variables.js';
module.exports = StyleSheet.create({
container: {
flex: 1,
backgroundColor: s.backColor,
alignItems: 'center',
justifyContent: 'center',
},
});
and style/config/Variables.js like
import { StyleSheet } from 'react-native';
const backColor = '#4F5B66';
I've also tried const styles = { backColor: '#4F5B66'};, but that didn't work either.
How can i make this work?
I solved it by defining the variables without const so Variables.js becomes
import { StyleSheet } from 'react-native';
backColor = '#4F5B66';