I can't seem to figure out why this code gives me a syntax/unexpected token error on line 14. Any help would be greatly appreciated.
I'm pretty sure that getInitialState() is set up correctly and not sure why it's throwing an error.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class Test extends Component {
getInitialState() {
return {
test: ''
};
},
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
{this.state.test}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('Test', () => Test);
You are mixing ES5 way of writing react components with ES6(ES2015) way of writing react components. Read more about it here https://facebook.github.io/react/docs/react-without-es6.html
To Fix your code, modify as below
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class Test extends Component {
constructor(props) {
super(props);
this.state = {
test: ''
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
{this.state.test}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('Test', () => Test);
Related
I am new to react native and need help. I created two components one
is for TextInput and another for button, I imported the Button
component in textInput and it show error. can someone help me figure
out the error I made here. I am getting error undefined is not an
object(evalutaing;?_reactnative,stylesheet.create')*
and folder structure in the picture attached
this is button Component
import React from 'react';
import { TouchableOpacity, Text, Stylesheet } from 'react-native';
export const Button = ({
style = {},
textStyle = {},
size = 125,
...props
}) => {
return (
<TouchableOpacity style={\[styles(size).radius, style\]}>
<Text style={\[styles.text, textStyle\]}>{props.title}</Text>
</TouchableOpacity>
);
};
**error is likely to be here**
const styles = (size) => Stylesheet.create({
radius: {
borderRadius: size / 3,
width: size,
hieght: size,
alignItems: 'center',
borderColor: 'white',
},
text: {
color: '#fff',
fontSize: 20,
},
});
this is textInput component
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';
import { Card } from 'react-native-paper';
import {Button} from '../components/Button';
// You can import from local files
// or any pure javascript modules available in npm
export const Something = () => {
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}> input something here</Text>
<TextInput />
<Button title="+" />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
titleContainer: {
flex: 0.5,
padding: 20,
justifyContent: 'center',
},
title: {
fontWeight: 'bold',
color: 'white',
fontSize: 30,
},
});
Mispelled height maybe?
const styles = (size) => Stylesheet.create({
radius: {
borderRadius: size / 3,
width: size,
hieght: size, <-------------------- hieght
alignItems: 'center',
borderColor: 'white',
},
text: {
color: '#fff',
fontSize: 20,
},
});
In one of my components, I check the value of my props before deciding what component to return.
But the issue I am facing in testing is that the snapshot is not getting created properly for these components.
When I am testing a component on its own, the snapshot is created properly but not when my component checks prop value before returning a JSX.
This is my component:
import React, {Component} from 'react'
import {Button, Text, View, FlatList, StyleSheet, ActivityIndicator} from 'react-native'
import CategoryCell from '../Components/CategoryCell'
import { connect } from 'react-redux'
import { fetchQuotes } from '../actions/Quotes'
class QuotesCategories extends Component {
static navigationOptions = {
title: 'Categories',
}
render() {
return this.props.error ? (
<View style={styles.Container}>
<Text style={{color: 'red'}}>FAILED TO LOAD DATA</Text>
<Button
title='Reload'
onPress={this.props.fetchQuotes}
/>
</View>
) : this.props.loading ? (
<View style={styles.Container}>
<ActivityIndicator size="large"/>
</View>
) : (
<View style={styles.Container}>
<FlatList
style= {{flex:1, width: '100%'}}
data= {this.props.data}
renderItem = {({item,index}) => {
return (
<CategoryCell Category={item} navigation={this.props.navigation} id={index}/>
)
}}
keyExtractor = {(item, index) => item.category}
/>
<Text>Additions</Text>
</View>
)
}
}
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
export const mapStateToProps = (state) => {
return {
loading: state.loading,
error: state.error,
data: state.data
}
}
export const mapDispatchToProps = (dispatch) => {
return {
fetchQuotes: () => {
dispatch(fetchQuotes())
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(QuotesCategories)
I am trying to test the three cases
When there is some error
When the data is loading
When the data has loaded
I am trying to test the three cases
error and loading is a boolean
data is an array of JSON objects
This is the test for the error case:
import React from 'react'
import {shallow} from 'enzyme'
import QuoteCategories from '../../Components/QuoteCategories'
import quotes from '../fixtures/quotes-fixture'
describe('Testing QuoteCategories component', () => {
it('should load error button when error loading', ( ) => {
const wrapper = shallow(
<QuoteCategories
loading = {false}
error = {true}
data = {undefined}
/>
)
expect(wrapper).toMatchSnapshot()
}
)
}
)
But in the QuoteCategories.test.js.snap file this is the snapshot I see:
exports[`Testing QuoteCategories component should load error button when error loading 1`] = `
<ContextConsumer>
<Component />
</ContextConsumer>
`;
Why am I seeing these tags <ContextConsumer>,<Component /> ?
In my other component test which directly returns a component, the snapshot is displaying properly:
My Component:
import React from 'react'
import { View, Text, TouchableHighlight, StyleSheet } from 'react-native'
const FavouriteQuoteCell = (props) => {
return (
<TouchableHighlight
onPress={() => props.navigation.navigate('Quotes',{id: props.item.parentId, category: props.item.category})}
style={styles.TableCell}
>
<View>
<Text style={styles.Quote}>{props.item.text}</Text>
<Text style={styles.Author}>-- {props.item.person}</Text>
<View style={styles.CategoryPill}>
<Text style={styles.Category}>
{props.item.category}
</Text>
</View>
</View>
</TouchableHighlight>
)
}
export default FavouriteQuoteCell
const styles = StyleSheet.create({
TableCell: {
backgroundColor: '#ff6347',
margin:5,
padding: 5,
justifyContent: 'space-around',
flexDirection: 'column',
flex: 1 ,
padding: 10,
margin: 5,
borderRadius: 15,
},
"Quote": {
fontWeight: 'bold',
color: 'white'
},
"Author": {
fontWeight:'200',
color:'white',
justifyContent: 'flex-end',
alignItems: 'flex-end',
height: 20
},
Category: {
color: '#ff6347',
fontWeight: 'bold',
fontSize: 12,
textTransform: 'capitalize',
margin: 'auto'
},
CategoryPill: {
marginTop: 10,
padding: 2,
height: 20,
borderRadius: 10,
backgroundColor: 'white',
width: 100,
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
The test:
import React from 'react'
import {shallow} from 'enzyme'
import FavouriteQuoteCell from '../../Components/FavouriteQuoteCell'
import {favouriteItem} from '../fixtures/favourites-fixture'
describe('testing FavouriteQuoteCell', () => {
let wrapper,navigation
beforeEach(() => {
navigation = {
navigate: jest.fn()
}
wrapper = shallow(<FavouriteQuoteCell navigation={navigation} item={favouriteItem}/>)
})
it('should render FavouriteQuoteCell correctly', () => {
expect(wrapper).toMatchSnapshot()
})
})
The snapshot:
exports[`testing FavouriteQuoteCell should render FavouriteQuoteCell correctly 1`] = `
<TouchableHighlight
activeOpacity={0.85}
delayPressOut={100}
onPress={[Function]}
style={
Object {
"backgroundColor": "#ff6347",
"borderRadius": 15,
"flex": 1,
"flexDirection": "column",
"justifyContent": "space-around",
"margin": 5,
"padding": 10,
}
}
underlayColor="black"
>
<View>
<Text
style={
Object {
"color": "white",
"fontWeight": "bold",
}
}
>
Believe you can and you"re halfway there
</Text>
<Text
style={
Object {
"alignItems": "flex-end",
"color": "white",
"fontWeight": "200",
"height": 20,
"justifyContent": "flex-end",
}
}
>
--
Theodore Roosevelt
</Text>
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "white",
"borderRadius": 10,
"flex": 1,
"height": 20,
"justifyContent": "center",
"marginTop": 10,
"padding": 2,
"width": 100,
}
}
>
<Text
style={
Object {
"color": "#ff6347",
"fontSize": 12,
"fontWeight": "bold",
"margin": "auto",
"textTransform": "capitalize",
}
}
>
inspirational
</Text>
</View>
</View>
</TouchableHighlight>
`;
Your QuotesCategories component is connected to redux with:
export default connect(mapStateToProps,mapDispatchToProps)(QuotesCategories)
that is why when you are shallow rendering you see the redux wrapper component in the snapshot and not your QuotesCategories.
The usual why to fix this to also export your QuotesCategories and import it with its name in your tests:
So your component file should have two exports:
export class QuotesCategories extends Component {
...
}
export default connect(mapStateToProps,mapDispatchToProps)(QuotesCategories)
And in your test you should import QuotesCategories with:
import { QuoteCategories } from '../../Components/QuoteCategories'
Current behavior
When I attempt to invoke the Video library (import { Video } from 'react-native-video') my application breaks with the error of Module AppRegistry is not a registered callable module (calling runApplication)
Reproduction steps
My Video component is as follows:
import React, { Component } from 'react';
import { Video } from 'react-native-video';
import {
View,
Dimensions,
TouchableOpacity,
TouchableWithoutFeedback,
Animated,
Text,
Slider,
NetInfo,
StyleSheet
} from 'react-native';
class VideoPlayer extends Component {
state = {
paused: true
};
render() {
const videoWidth = Dimensions.get('window').width;
const videoHeight = videoWidth * (9 / 16);
const styles = StyleSheet.create({
videoContainer: {
width: videoWidth,
height: videoHeight,
backgroundColor: 'rgb(255,255,255)',
paddingTop: 0
}
})
return (
<Video
source={{ uri: 'https://www.youtube.com/embed/3NhHqPA8nIs?rel=0&autoplay=0&showinfo=0&controls=0' }}
paused={this.state.pause}
style={styles.videoContainer}
/>
)
}
}
export default VideoPlayer;
and App.js
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Header from './components/Header';
import VideoPlayer from './components/Video';
export default class App extends Component {
render () {
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<Header />
</View>
<View style={styles.videoContainer}>
<VideoPlayer />
</View>
<Text style={{color: 'white'}}>Hello Wilbur!</Text>
<Text style={{color: 'white'}}>Some text</Text>
<Text style={{color: 'white'}}>some other text</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgb(4,4,4)',
alignItems: 'center',
justifyContent: 'center',
},
headerContainer: {
position: 'absolute',
flex: 1,
top: 0,
height: 72,
alignSelf: 'stretch',
paddingTop: 20,
paddingLeft: 12,
paddingRight: 12,
flexDirection: 'row',
backgroundColor: 'white'
},
videoContainer: {
flex: 0,
backgroundColor: 'rgb(4,4,4)',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 0
}
});
If I do not instantiate the component I can render the application fine, and even make it work with a WebView, however when I attempt to import my VideoPlayer component I receive the aforementioned error.
Expected behavior
A functional video component, or at least an error related to the video player.
Platform
iOS
Video sample
https://www.youtube.com/embed/3NhHqPA8nIs?rel=0&autoplay=0&showinfo=0&controls=0
Does anyone see what I'm doing wrong?
Thank you.
react-native-video does not currently support youtube...
https://github.com/react-native-community/react-native-video/issues/1147
Can someone tell me what I am doing wrong ?
I am pretty new to React Native and I am following the example for React Navigator from here.
The app is developed via Expo IDE.
https://reactnavigation.org/docs/intro/quick-start
This is my src code for App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { RootNavigator } from './src/RootNavigator';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<RootNavigator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is my src code for RootNavigator.js
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
const HomeScreen = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
const DetailsScreen = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'Home',
},
},
Details: {
screen: DetailsScreen,
navigationOptions: {
headerTitle: 'Details',
},
},
});
export default RootNavigator;
Rootnavigator.js which is located inside a src folder (attached the screenshot)
I am getting this error while trying to run it in my iphone.
You're doing export default App which is an unnamed export, therefore you need to change:
import { RootNavigator } from './src/RootNavigator';
to
import RootNavigator from './src/RootNavigator';
More info about es6 import/export here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
I can't find what's wrong in here: https://hastebin.com/fuwofavuso.scala (I can't post it here, and I didn't want to indent all lines).
import React, { Component} from 'react';
import { Text, View, StyleSheet, Image, TextInput, AppRegistry} from 'react-native';
import { Constants, BlurView } from 'expo';
export default class App extends Component {
render() {
return (
<View style={{ height: 200, width: 300 }}>
<InputText/>
</View>
);
}
}
class InputText extends Component {
constructor(props) {
super(props);
this.state = {
text: 'lel',
};
}
render() {
return (
<div>
<TextInput
onChangeText={(text) => this.setState({ text })}
value={this.state.text}
/>
<Text value={this.state.text}></Text>
</div>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
AppRegistry.registerComponent('Unknown Snack', () => InputText);
My error is:
undefined is not an object evaluating _reactnative.appregistry.registerComponent()
I am running it on Expo Snack
As you can see here, registerComponent function has two arguments that the second argument is your main component that in your case the name of component seems to be wrong (your problem may be because of this). I think your code should be like this:
AppRegistry.registerComponent('yourAppKey', App);