This is my code:
import React, { component } from 'react';
import { View, Text, StyleSheet} from 'react-native';
class GuideLine extends component {
constructor(props){
super(props);
this.state = {};
};
render() {
return(
<View>
<Text>Hello</Text>
</View>
);
};
};
const styles = StyleSheet.create({});
export default GuideLine;
and I'm getting this error : Super expression must either be null or function. What should I do to fix it ?
Related
I am using reactjs.
I try to make a login layout.
This is Login class:
import React, {Components} from 'react';
import {StyleSheet, View, Image} from 'react-native';
import LoginButton from '../components/LoginButton';
export default class Login extends Components {
constructor(props) {
super(props)
}
render() {
return (
<View style={styles.container}>
<LoginButton
placeholder={"Login"}
style={styles.LoginButton}
/>
</View>
)
}
..........
and this is LoginButton in components:
import React from 'react';
import {StyleSheet, TouchableOpacity, Text} from 'react-native';
export default class LoginButton extends React.Components{
constructor(props) {
super(props)
}
render() {
const {placeholder} = this.props
return (
<TouchableOpacity style={[this.props.style, styles.container]}>
<Text style={styles.caption}
placeholder = {placeholder}
/>
</TouchableOpacity>
)
}
}`........`
When I run this code, React Native giving error "typeerror: super expression must either be null or a function".
How do I fix it ?
I am trying to change the value of props at second Recipe-Component updating the state.
I tried to use timer, alerts. but I had also problem.
App js:
import React, { Component } from "react";
import Recipe from "./Recipe";
import {Text, View } from "react-native";
export default class App extends Component {
constructor() {
super();
this.state = {
name: "Pancaces",
isYummy: true
};
}
update = (s) => {
this.setState({name : s.name, isYummy: s.isYummy });
}
render() {
return (
<View style={{alignItems: 'center'}}>
<Recipe update={this.update} name={this.state.name} isYummy={this.state.isYummy} delay={false}/>
<Text>{this.state.name}</Text>
<Recipe name={this.state.name} isYummy={this.state.isYummy} delay={true}/>
</View>
);
}
}
Recipe.js
import React, * as react from "react";
import PropTypes from "prop-types";
import { Text, View } from "react-native";
import styles from "./styles.js";
export default class Recipe extends react.Component{
static propTypes = {
name: PropTypes.string.isRequired,
isYummy: PropTypes.bool.isRequired
};
constructor(props){
super(props)
this.state = {
update : this.update,
name : this.props.name,
isYummy: this.props.isYummy
}
if(this.props.update) this.props.update(({name:'Lentils', isYummy:false}))
};
render() {
return (
<View style={styles.container}>
<Text style={styles.text_container} >{this.state.name}</Text>
{this.state.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
</View>
);
}
}
Current Output is:
Pancakes
THIS RECIPE IS YUMMY
Lentils
Pancakes
THIS RECIPE IS YUMMY
I expect output
Pancakes
THIS RECIPE IS YUMMY
Lentils
Lentils
SOLVED
I believe this is happening because you are trying to display the values from your state instead of your props and since the constructor isn't called a second time after updating, your state doesn't get reassigned. Here's what I would do:
//Recipe.js
constructor (props)
{
super(props);
if (this.props.update)
this.props.update(({name:'Lentils', isYummy:false}));
}
render()
{
return (
<View style={styles.container}>
<Text style={styles.text_container}>
{this.props.name}
</Text>
{this.props.isYummy &&
<Text>
THIS RECIPE IS YUMMY
</Text>
}
</View>
);
}
so I am trying to learn about react-redux using react-native and I want to make a page where I can input a number and press login. when I press login, the page will alert me the number I input and saved into the store I created with redux.
can anyone please tell me what i'm doing wrong and what should I add or do to make it work?
below is my testing page
import React, {Component} from 'react';
import {View, TextInput, TouchableOpacity, Text} from 'react-native';
import {connect} from 'react-redux';
import actions from '../Redux/Action';
class tes extends Component{
constructor(props){
super(props)
}
render(){
return(
<View>
<TextInput placeholder="phone number"
keyboardType="number-pad"/>
<TouchableOpacity onPress={this.props.onLogin}>
<Text>login</Text>
</TouchableOpacity>
</View>
)
}
}
mapStateToProps = state => {
return {
number: state.phoneNumber
}
}
mapDispatchToProps = dispatch => {
return {
onLogin: (number) => {
dispatch(actions.setLoginNumber(number))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(tes);
this is my store class
import {createStore} from 'redux';
import reducer from './Reducer';
export default createStore(reducer)
here is my reducer class
const reducer = (state = {
phoneNumber: '',
},action) => {
switch(action.type) {
case "LOGIN":
state = {
phoneNumber: action.payload
}
break;
}
return state;
}
export default reducer;
{/* and this one my action class */}
export default function setLoginNumber(number) {
return{
type: "LOGIN",
payload: number
};
}
thanks in advance..
I think your not passing parameter number to onLogin function and you will need local state variable to hold the value. The code should be like this
import React, {Component} from 'react';
import {View, TextInput, TouchableOpacity, Text} from 'react-native';
import {connect} from 'react-redux';
import actions from '../Redux/Action';
class tes extends Component{
constructor(props){
super(props)
this.state = {
number: 0,
};
}
render(){
return(
<View>
<TextInput placeholder="phone number"
onChangeText={inputNumber => {
this.setState({ number: inputNumber })
}}
keyboardType="number-pad"/>
<TouchableOpacity onPress={() => {this.props.onLogin(this.state.number) }}>
<Text>login</Text>
</TouchableOpacity>
</View>
)
}
mapStateToProps = state => {
return {
number: state.phoneNumber
}
}
mapDispatchToProps = dispatch => {
return {
onLogin: (number) => {
dispatch(actions.setLoginNumber(number))
}
}
}
Answer for your second question -
You haven't passed created store to provider component of react-redux like below example
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
export default class Root extends Component {
constructor() {
super();
}
render() {
return (
<Provider store={store}>
<App />
</Provider>
);
}
}
Hope it helps.
I am new to React Native and I am trying to implement a simple Login form.
I tried the following first, which works:
import React, { Component } from 'react';
import {
View,
Text,
TextInput,
StyleSheet,
} from 'react-native';
import TitledInput from './login-form';
export default class LoginForm extends Component {
constructor(props) {
super(props);
this.state = { email: '', password: ''};
}
render() {
return (
<View style={styles.container}>
<TextInput
label='Email Adress'
placeholder='you#domain.com'
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Then I wanted to split the input in another independent component called TitledInput and tried this (which is not working):
LoginForm
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
import TitledInput from './login-form';
export default class LoginForm extends Component {
constructor(props) {
super(props);
this.state = { email: '', password: ''};
}
render() {
return (
<View style={styles.container}>
<TitledInput
label='Email Adress'
placeholder='you#domain.com'
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
</View>
);
}
}
TitledInput
import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export default class TitledInput extends Component {
const { inputStyle, labelStyle, containerStyle } = styles;
render() {
return (
<View style={container}>
<Text style={label}>{props.label.toUpperCase()}</Text>
<TextInput
autoCorrect={false}
placeholder={props.placeholder}
secureTextEntry={props.secureTextEntry}
value={props.value}
onChangeText={props.onChangeText}
style={input}
/>
</View>
);
}
}
I get a 'maximum call stack exceeded' error.
I could read on the internet that this error can occur when calling setState in a re-render function... but I don't know how to handle this case where I want my login form to know the value a its input child component.
I want to know it because I will use it when clicking the submit button or is it the whole purpose of the state?
while you are changing email input value in TiledInput email value will propagate to LoginForm. In LoginForm because of state "email" change the login form will rerender. In this case you have to use ComponentWillReceiveProps inorder to get the new email value.
Instead of this approach you can have another state value inside TitledInput to keep email value.
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
import TitledInput from './login-form';
export default class LoginForm extends Component {
constructor(props) {
super(props);
this.state = { email: '', password: ''};
}
render() {
return (
<View style={styles.container}>
<TitledInput
label='Email Adress'
placeholder='you#domain.com'
onChangeText={(email) => this.setState({email})}
/>
</View>
);
}
}
// TitledInput
import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export default class TitledInput extends Component {
constructor(props) {
super(props);
this.state = { text: ''};
}
const { inputStyle, labelStyle, containerStyle } = styles;
handleTextChange(value){
this.setState({text:value});
this.props.onChangeText(value);
}
render() {
return (
<View style={container}>
<Text style={label}>{props.label.toUpperCase()}</Text>
<TextInput
autoCorrect={false}
placeholder={props.placeholder}
secureTextEntry={props.secureTextEntry}
value={this.state.text}
onChangeText={this.handleTextChange()}
style={input}
/>
</View>
);
}
}
[update] By using onBlur instead of onChangeText you can reduce the number of function call
Trying to create a basic component in React Native and getting an error.
Element type is invalid: expected a string(for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
I'm just trying to create a component that will be an image, but with some resizing on it.
The <ActivityImage> component is what I'm trying to make:
import React from 'react';
import { Dimensions, Image } from 'react-native';
let windowWidth = Dimensions.get('window').width
export default class ActivityImage extends React.Component {
render() {
return (
<Image source={source} style={{width: windowWidth}} />
)
}
}
The app code:
import React from 'react';
import {
Dimensions,
Image,
Text,
TouchableHighlight,
StatusBar,
View,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import styles from './assets/styles';
import { Slide1, Slide2, Slide3, Slide4 } from './assets/content';
import { ActivityImage } from './components/activityImage';
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
static navigationOptions = {
header: null,
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<StatusBar hidden />
<ActivityImage source={require('./assets/images/0.jpg')} />
</View>
);
}
}
const AppNavigation = () => (
<SimpleAppNavigator />
);
export default class App extends React.Component {
render() {
return (
<AppNavigation/>
);
}
}
I assume you import the missed components like <View>, <StatusBar> and ...
You should use your props for getting the source for your component. And you should define a height for your image, in this example I make it 200. In this way your component will be like this:
export default class ActivityImage extends React.Component {
render () {
return (
<Image source={this.props.source} style={{width: windowWidth, height: 200}}/>
)
}
}