I have this in my Comp:
import { StatusBar } from 'expo-status-bar';
import React, { Component, } from 'react';
import { StyleSheet, Text, TextInput, View, WebView } from 'react-native';
function AccurXVCS() {
return(
<View>
<WebView source={{html:"<html><body style='color:red'>Hello<br/>This is a test</body></html>"}} />
</View>
);
}
export default AccurXVCS;
And this in my App Comp:
import { StatusBar } from 'expo-status-bar';
import React, {useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AccurX from './VideoCallingService/AccurXVCS';
export default function App() {
const [count, setCount] = useState(0);
useEffect(() => {
});
return (
<View style={styles.container}>
<AccurX></AccurX>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
why am i getting this error?
Related
I am getting a render error when trying to view App.js in react native using Expo. I'm not sure what is wrong...
Error is "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."
This occurred when i added NavigationContainer and AuthNavigator.
import React from "react";
import { StyleSheet, View, StatusBar, NavigationContainer } from "react-native";
import AuthNavigator from "./app/navigation/AuthNavigator";
const BAR_HEIGHT = StatusBar.currentHeight;
const styles = StyleSheet.create({
statusColor: {
backgroundColor: "#000",
},
viewController: {
flex: 1,
},
})
export default function App() {
return (
<View style={styles.viewController}>
<StatusBar style={styles.statusColor} />
<NavigationContainer>
<AuthNavigator />
</NavigationContainer>
</View>
);
}
It seems You forgot to import NavigationContainer correctly.
You are supposed to import it from #react-navigation/native and not from react-native:
import React from "react";
import { StyleSheet, View, StatusBar} from "react-native";
//-----------👇
import { NavigationContainer } from '#react-navigation/native';
import AuthNavigator from "./app/navigation/AuthNavigator";
const BAR_HEIGHT = StatusBar.currentHeight;
const styles = StyleSheet.create({
statusColor: {
backgroundColor: "#000",
},
viewController: {
flex: 1,
},
})
export default function App() {
return (
<View style={styles.viewController}>
<StatusBar style={styles.statusColor} />
<NavigationContainer>
<AuthNavigator />
</NavigationContainer>
</View>
);
}
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')}
I have created a card component when I pass title and subtitle its work when I add the image it's giving me an error this is my cardcomponent code
import React from "react";
import {
View,
Text,
StyleSheet,
Button,
Image,
ImageBackground,
} from "react-native";
import colors from "../config/colors";
import AppText from "./AppText";
export default function CardList({ title, subtitle, image }) {
return (
<View style={styles.card}>
<Image source={require(image)} />
<AppText>{title}</AppText>
<AppText>{subtitle}</AppText>
</View>
);
}
const styles = StyleSheet.create({
card: {
backgroundColor: colors.white,
borderRadius: 15,
marginBottom: 20,
paddingTop: 100,
},
});
this is my app file
import React from "react";
import WelcomeScreen from "./app/screen/WelcomeScreen";
import { View, Text, StyleSheet, Button } from "react-native";
import AppText from "./app/components/AppText";
import AppButton from "./app/components/AppButton";
import CardList from "./app/components/CardList";
export default function App() {
return (
<View style={styles.cardStyle}>
<CardList
title="need blood"
subtitle="$100"
image={require("./app/assets/child.png")}
/>
</View>
);
}
const styles = StyleSheet.create({
cardStyle: {
backgroundColor: "#f8f4f4",
padding: 20,
paddingTop: 100,
},
});
I am adding some pictures here which before adding image prop
when I add image its giving me error
I've been trying to navigate from Text to another screen but this error pops up, can anyone please help
This is a testing sheet for a bigger problem I have posted here Navigate when clicking on image doesn't work , I am trying to structure my code to navigate from an Image to a page. Thanks for helping
import React from 'react';
import { AppRegistry, StyleSheet, View, Image, TouchableOpacity, Text } from "react-native";
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import AddDocScreen from './Menu/AddDocScreen'
export default class Mock extends React.Component {
render() {
const navigate = this.props.navigation
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => navigate.navigateToScreen(navigationAction)}>
<View><Text>Click Me</Text></View>
</TouchableOpacity>
</View>
)
}
}
const navigationAction = NavigationActions.navigate({
routeName: 'AddDocSreen',
})
function navigateToScreen(navigationAction) {
() => {
return navigationAction
}
}
const doc = createStackNavigator({
AddDocScreen: { screen: AddDocScreen },
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(215,215,215,1)',
alignItems: 'center',
justifyContent: 'center',
},
})
Use it like this:
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import AddDocScreen from './Menu/AddDocScreen'
class Mock extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',backgroundColor: 'rgba(215,215,215,1)'}}>
<Text>Home Screen</Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details')}>
<View><Text>Click Me</Text></View>
</TouchableOpacity>
</View>
);
}
}
const RootStack = createStackNavigator(
{
Mock: Mock,
AddDocScreen: AddDocScreen,
{
initialRouteName: 'Mock',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
I have a function to navigate to different component by checking in Async storage.
Here is my Loading Page Code:
import React from 'react';
import {
View,
Text
} from 'react-native';
import { AsyncStorage } from 'react-native';
export class LoadingScreen extends React.Component{
componentDidMount(){
async()=>{
try{
const usertoken = await AsyncStorage.getItem('token');
if(usertoken !== null ){
return this.props.navigation.navigate('Login');
}else{
return this.props.navigation.navigate('Register');
}
}catch(error){
this.props.navigation.navigate('Register')
}
};
}
render(){
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>This is loading...</Text>
</View>
);
}
}
But while running the app its not navigating to another Screen.
What am I doing wrong?
This is my register component:
import React , { Component } from 'react';
import {
View,
Text
} from 'react-native';
import { withNavigation } from 'react-navigation';
class RegisterScreen extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Register Screen</Text>
</View>
);
}
}
export default withNavigation(RegisterScreen);
Export both Login and Register using withNavigation. Like below.
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { withNavigation } from 'react-navigation';
class Login extends Component {
render() {
return (
<View>
<Text> Login </Text>
</View>
)
}
}
export default withNavigation(Login);