import React,{Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
TouchableOpacity,
} from 'react-native';
import {
responsieHeight,
responsiveHeight,
} from 'react-native-responsive-dimensions';
class App extends Component(){
constructor(props){
super(props);
this.state={Hi:false}
}
render(){
return (
<View style={{flex:1}}>
<SafeAreaView>
<TouchableOpacity
onPress={() => this.setState({Hi: true})}
style={{
marginHorizontal: 30,
height: responsiveHeight(8),
backgroundColor: '#000',
borderRadius: 40,
marginVertical: 5,
}}></TouchableOpacity>
</SafeAreaView>
</View>
);
}
};
export default App;
i don't know why this error occur,as it due to props on constructor or changing state in touchableOpacity or this is some error related to mobile Phone,i just change View to TouchableOpacity and then start such error,,and now this error happen again and again
change :
class App extends Component(){
to:
/// it's a Class not a function
class App extends Component {
check the expo slack:
https://snack.expo.io/#saadqbal/96c70b
Related
I would just like to be redirected to my "Profile" page when I click on the "Enter" button. I don't know if this is the correct method but my homepage is App.js and it contains my button and my image. Sorry for the mistakes I am a beginner and moreover French!
app.js
import 'react-native-gesture-handler';
import React from 'react';
import DisplayAnImage from './Components/DisplayAnImage';
import Profile from './Components/Profile';
import { Enter } from './Components/Enter';
import { StyleSheet, Text, ScrollView } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
export default class App extends React.Component {
render() {
return (
<ScrollView style={{ flex: 1 }}>
<DisplayAnImage/>
<Enter/>
</ScrollView>
)
}
}
enter.js
import React from 'react';
import { Platform, StyleSheet, Text, View, Image, Button, Alert, SafeAreaView } from 'react-native';
import Profile from './Profile.js';
import { createStackNavigator } from '#react-navigation/stack';
import { StackNavigator } from 'react-navigation';
export const Enter = ({ navigation }) => {
return (
<SafeAreaView style={styles.Button}>
<View>
<Button
title="Entrer"
color="#FFFFFF"
onPress={() => this.props.navigation.navigate('Profile')}
/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
Button: {
flex: 1,
marginHorizontal: 120,
borderRadius: 20,
backgroundColor: '#1067b3'
},
title: {
textAlign: 'center',
marginVertical: 8,
},
fixToText: {
flexDirection: 'row',
justifyContent: 'space-between',
},
separator: {
marginVertical: 8,
borderBottomColor: '#737373',
borderBottomWidth: StyleSheet.hairlineWidth,
},
});
profile.js
import React, {Component} from 'react';
import { View, Text } from 'react-native';
export default class Profile extends React.Component {
render() {
return (
<View>
<Text>Profile</Text>
</View>
);
}
}
Thank you very much for your help
You are calling "this" from your functional component. Please change this
onPress={() => this.props.navigation.navigate('Profile')}
to
onPress={() => navigation.navigate('Profile')}
React native simulator gives the error
"Invariant Violation: Element type is invalid: expected a string( for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
App.js
import React, { Component } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
NavigatorIOS,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import SearchPage from './SearchPage';
export default class App extends Component<{}> {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Property Finder',
component: SearchPage,
}}/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
SearchPage.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
Button,
ActivityIndicator,
Image,
} from 'react-native';;
export default class SearchPage extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name or postcode.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565'
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
});
Could someone tell the problem in it.
Using react-native version: 0.61
the error you met often occurs when you likely forgot to export your component from the file it’s defined in. I see your code it is done.
I run your code. it shows NavigatorIOS is removed from the library. and I think that it caused by NavigatorIOS, it is only working on ios and deprecated. you should use 'react-native-navigationorreact-native-router-flux' and I suggest you use react-native-router-flux.
if use the react-native-router-flux, you can look at the following code:
const App = () => (
<Router>
<Stack key="root">
<Scene key="search" component={SearchParge} title="search" />
</Stack>
</Router>
// then, if you want to go to it
Actions.search()
);
I have problems, i want to navigate to register from login in Modal. how solved this problem?
how so I can navigate in the Modal?
enter image description here
enter image description here
import React, { Component } from 'react';
import { Alert, StyleSheet, Text, TouchableOpacity, View, Dimensions, TextInput } from 'react-native';
import Modal from 'react-native-modalbox';
import Lock from '../../../assets/icon/lock.svg';
import User from '../../../assets/icon/user.svg';
var screen = Dimensions.get('window');
class Login extends Component {
constructor(props) {
super(props);
}
showLogin = () => {
this.refs.myLogin.open();
}
closeLogin = () => {
this.refs.myLogin.close();
}
render() {
return (
<Modal
ref={"myLogin"}
style={{
borderRadius: 10,
width: screen.width - 80,
shadowRadius: 10,
height: 300,
}}
position='center'
backdrop={true}
/>
)
}
}
and this button
<TouchableOpacity onPress={() => this.props.navigation.navigate('Register')}>
<Text style={{ color: '#024379', fontWeight: 'bold' }}>Daftar Disini</Text>
</TouchableOpacity>
Use withNavigation HOC to be able to access navigation prop in your component.
For reference see this
Problem:
I have created a react-native application. There are I am using a linear gradient.
This is my code.
import React, { Component } from "react";
import {
StyleSheet,
KeyboardAvoidingView,
View,
ActivityIndicator,
TouchableOpacity,
TextInput,
Text,
Image,
ImageBackground
} from "react-native";
import { LinearGradient } from "expo";
class Login extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.loginHeader}>
<LinearGradient colors={["#fdc830", "#ff9a00"]} style={{ flex: 1 }}>
<Image
source={require("../../../assets/logo-02.png")}
style={styles.image}
/>
</LinearGradient>
</View>
<Text>Login</Text>
</View>
);
}
}
export default Login;
const styles = StyleSheet.create({
container: {
top: 0,
flex: 3,
alignItems: "center"
},
loginHeader: {},
image: {}
});
The error which I was facing is
Invarient Violation: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, or you might have mixed up default and named imports
I tried a lot to find a solution to this problem but I was unable to do so. Can you help me to find a solution to this problem It would be great? Thank you.
if you are using expo:34,35:
Add the package expo-linear-gradient and modify import to
import { LinearGradient } from 'expo-linear-gradient'
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.