I want to make an app that makes a compass and compass should changes with changing direction of magnetometer. The code attached below shows a strange error. Although I have run npm install react-timer-mixin to sort the problem.By running this code on Expo it shows an error like
Super expression must either be a null or a function.
import React, {Components} from 'react';
import {Image, ImageBackground, View, Text, StyleSheet} from 'react-native';
import Expo from 'expo';
export default class App extends Components{
state={
isReady: false,
v: null,
};
_setMagnetometerAsync = async() =>{
Expo.Magnetometer.addListener((v)=>{
this.setState({v});
});
}
componentDidMount() {
this._setupMagnetometerAsync();
}
render(){
return(
<View style = {styles.container}>
<Text>{JSON.stringify(this.state.v)}</Text>
<ImageBackground
source = {require('./compassFace.png')}
style = {{
height: 320,
width: 320,
paddingTop:Expo.Constants.statusBarHeight,
alignItems: 'center',
justifyContents: 'center',
}}>
<Image
source = {require('./CompassNeedle.png')}
style={{
height: 420,
width: 420,
opacity: 0.65,
}}
/>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ecf0f1',
},
paragraph:{
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
Some fixes:
1.
import React, {Components} from 'react';
to
import * as React from 'react';
2.
componentDidMount(){
this._setupMagnetometerAsync();
}
to
componentDidMount(){
this._setMagnetometerAsync();
}
3.
export default class App extends Components{
to
export default class App extends React.Component{
Related
I'm doing a weather project on React Native error with PropTypes
The code:
import React from "react";
import PropTypes from 'prop-types';
import { StyleSheet, Text, View } from "react-native";
export default function Wather({temp}) {
return (
<View style={styles.container}>
<Text>{temp}</Text>
</View>
);
}
Wather.propTypes = {
temp:PropTypes.nymber.isRequired,
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#FDF6AA",
justifyContent: "flex-end",
paddingHorizontal: 30,
paddingVertical: 100,
},
});
Erorr name:
undefined is not an object (evaluating '_propTypes.default.nymber.isRequired')
I think you have made a typo error. It should be PropTypes.number and not PropTypes.nymber
After fixing typo error it should look like this :
Wather.propTypes = { temp:PropTypes.number.isRequired, }
I an using yarn workspaces, and i have 3 packages: app, electron app using react, and shared for all the common stuff. When importing shared in the app or electron, it says that error in vscode:
error
i dont know what to do :/ i tried everything. and the files arent ts, but js.
import { View, StyleSheet, Text } from 'react-native';
import Header from 'shared/components/Header';
//const socket = new Socket("192.168.1.146", 8080, "http");
(async () => {
//await socket.connect();
})();
const styles = StyleSheet.create({
screenContainer: {
flex: 1
},
text: {
fontSize: 20,
color: 'cornflowerblue',
marginTop: 50,
alignSelf: 'center'
}
});
const App = () => {
/*useEffect(() => {
if (socket.getSocket() != undefined && socket.getSocket().connected) {
socket.getSocket().disconnect();
}
});*/
return (
<View styles={styles.screenContainer}>
<Header />
<Text style={styles.text}>I'm a React Native component</Text>
</View>
);
};
export default App;
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
header: {
paddingTop: 50,
backgroundColor: 'red'
},
headerText: {
fontSize: 22,
color: 'white',
fontWeight: 'bold',
paddingHorizontal: 10
}
});
const Header = () => {
return (
<View style={styles.header}>
<Text style={styles.headerText}>I'm a shared component.</Text>
</View>
);
};
export default Header;
create fallback.d.ts with content:
declare module '*';
And include it in your tsconfig.json https://www.typescriptlang.org/tsconfig#include (path to d.ts file relative to tsconfig.json path)
{
"include": ["./fallback.d.ts", ...],
...
}
This will allow you to import from js files.
But imho better would be to convert Header.js file to typescript
I am trying to send images which are taken using React Native Camera library to Camera Roll.
When the user presses a button the following function gets triggered:
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true }
const data = await this.camera.takePictureAsync(options)
CameraRoll.saveToCameraRoll(data.uri)
}
}
I already know that the app sends pictures to the cache folder because after this code is executed a link to the picture is displayed:
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true }
const data = await this.camera.takePictureAsync(options)
console.log(data.uri)
}
}
The debugger shows the following error:
Possible Unhandled Promise Rejection (id:0)
React Native Camera: TypeError: _reactNative.default.saveToCameraRoll is not a function
The code of the Cam component:
import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native'
import { RNCamera } from 'react-native-camera'
import CameraRoll from 'react-native'
import ActionButton from 'react-native-action-button'
import Icon from 'react-native-vector-icons/Ionicons'
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button: {
height: 200,
justifyContent: 'flex-end',
alignItems: 'center'
},
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white',
},
});
export default class Cam extends Component {
constructor() {
super()
this.takePicture = this.takePicture.bind(this)
}
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true }
const data = await this.camera.takePictureAsync(options)
CameraRoll.saveToCameraRoll(data.uri)
}
}
render() {
return (
<View style={styles.container}>
<RNCamera
ref={ref => {this.camera = ref}}
style={{
flex: 1,
width: '100%',
position: 'relative'
}}
>
</RNCamera>
<ActionButton size={80} useNativeFeedback={false} buttonColor="rgba(231,76,60,1)">
<ActionButton.Item useNativeFeedback={false} buttonColor='#9b59b6' title="Settings" onPress={this.props.switchScreen}>
<Icon name="md-create" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item useNativeFeedback={false} buttonColor='#1abc9c' title="Start" onPress={this.takePicture}>
<Icon name="md-done-all" style={styles.actionButtonIcon} />
</ActionButton.Item>
</ActionButton>
</View>
)
}
}
Looking at this example of how to use CameraRoll :
import {
View,
Text,
TouchableHighlight,
Modal,
StyleSheet,
Button,
CameraRoll,
Image,
Dimensions,
ScrollView,
} from 'react-native'
You have to replace :
import CameraRoll from 'react-native';
by
import { CameraRoll } from 'react-native';
(I've put it as an answer so it can be accepted and close the question)
In your code, you can mutualise the imports like :
import React, {
Component,
} from 'react';
import {
RNCamera,
} from 'react-native-camera';
import {
CameraRoll,
StyleSheet,
View,
} from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';
I am new to react-native framework and learning how to use navigator. I tried to implement jump between two pages of APP. From "Boy" to "Girl" then back to "Boy".
Here is the code in APP.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, {Component, } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
} from 'react-native';
import Boy from './Boy';
import {Navigator} from 'react-native-deprecated-custom-components';
import TabNavigator from 'react-native-tab-navigator';
export default class imooc_gp extends Component {
constructor(props){
super(props);
this.state = {
selectedTab:'tb_popular',
}
}
render() {
return (
<View style={styles.container}>
<Navigator
initialRoute = {{
title:'example',
component: Boy
}}
renderScene = {(route, navigator) =>{
let Component = route.component;
return <Component navigator = {navigator} {...route.params}/>
}}
></Navigator>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
page1 :{
flex: 1,
backgroundColor: 'red',
},
page2: {
flex: 1,
backgroundColor: 'yellow',
},
image: {
height: 22,
width: 22,
}
});
Boy.js:
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet
}from 'react-native';
import Girl from './Girl';
export default class Boy extends Component{
constructor(props){
super(props);
this.state = {
word: ''
}
}
render(){
return (
<View style = {styles.container}>
<Text style = {styles.text}> I am a boy</Text>
<Text style = {styles.text}
onPress = {()=>{
this.props.navigator.push({
title:'Girl',
component: Girl,
params:{
word: 'A Rose',
onCallBack: (word)=>{
this.setState({
word: word
})
}
}
})
}}>Send girl a Rose</Text>
<Text style = {styles.text}>{this.state.word}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'gray',
justifyContent: 'center'
},
text: {
fontSize: 20,
}
})
Girl.js:
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet
}from 'react-native';
export default class Girl extends Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return(
<View styles = {styles.container}>
<Text style = {styles.text}> I am a Girl</Text>
<Text style = {styles.text}>{this.state.word}</Text>
<Text style = {styles.text}
onPress = {()=>{
this.props.onCallBack('A box of chocolate')
this.props.navigator.pop()
}}>return chocolate</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red',
justifyContent: 'center',
},
text: {
fontSize: 22
}
})
And I received the error message on iPhone emulator showed in the image:
I guess the error could be caused by wrong usage grammar of Navigator in different react-native version.
In my experience, I have found it more useful to use react-navigation library. This allows one to create a router files that lists all the pages that you want your app to navigate around; in your case, it could be Boy.js and Girl.js. Example given below:
import React from 'react';
import { StackNavigator } from 'react-navigation';
import { Boy, Girl } from '../app';
export const Screens = StackNavigator({
Boy: {
screen: Boy,
},
Girl: {
screen: Girl
}
});
And once you render the Screen component, Boy.js and Girl.js will each have access to the other screen via the "navigation.navigate" props.
So in your Boy component, rather than:
onPress = {()=>{
this.props.navigator.push({
title:'Girl',
component: Girl,
params:{
word: 'A Rose',
onCallBack: (word)=>{
this.setState({
word: word
})
}
}
})
You could simply write:
this.props.navigation.navigate("Girl")
All you would need to do is import the Girl component.
Hope this helps!
I'm studying with React-native due to this case I want to create navigation for IOS and Android, Actually, I meet an error
Error: React native Undefined is not an object(evaluating'_react3.default.PropType.shape')
My Develop environment
OS: MACOS Sierra
Clie: react-native-cli: 2.0.1
React-native version: react-native: 0.49.3
I follow the official react-native tutorial
App.js
import React, { Component } from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Navigator from 'react-native-deprecated-custom-components';
import MyScene from './src/components/navigation/MyScene';
const instructions = Platform.select({
ios: 'IOS: Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Android : Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
render() {
return (
<Navigator initialRoute={{ title: 'My Initial Scene', index: 0 }}
renderScene={(route, navigator) =>
<MyScene
title={route.title}
// Function to call when a new scene should be displayed
onForward={() => {
const nextIndex = route.index + 1;
navigator.push({
title: 'Scene ' + nextIndex,
index: nextIndex,
});
}}
// Function to call to go back to the previous scene
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 50,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
MyScene.js
import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';
export default class MyScene extends Component {
render() {
return (
<View>
<Text>Current Scene: {this.props.title}</Text>
<TouchableHighlight onPress={this.props.onForward}>
<Text>Tap me to load the next scene</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.props.onBack}>
<Text>Tap me to go back</Text>
</TouchableHighlight>
</View>
)
}
}
MyScene.propTypes = {
title: PropTypes.string.isRequired,
onForward: PropTypes.func.isRequired,
onBack: PropTypes.func.isRequired,
};
Check your version of react,
If the version is > 16 then propTypes is inside a new package called prop-types
see : https://www.npmjs.com/package/prop-types