I am trying to use react navigation but getting this error
import React, { useState } from 'react'
import{StyleSheet,Text,View,TextInput} from 'react-native'
import { TouchableOpacity,FlatList,ScrollView,} from 'react-native-gesture-handler'
import LegalInformation from './LegalInformation'
import {NavigationContainer} from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
export default function App(){
const[menu,menupeople]=useState([
{name:'My Account',key:1},
{name:'Notification Settings',key:2},
{name:'Clear Cache',key:3},
{name:'Legal Information',key:4},
{name:'Rate App Tak',key:5},
{name:'Version',key:6},
{name:'About',key:7},
])
return(
<View style={styles.container}>
<ScrollView>
{menu.map((item)=>{
return(
<TouchableOpacity onPress={()=>navigation.navigate(LegalInformation)}
key={item.key}
>
<Text style={styles.item}
>{item.name}</Text>
</TouchableOpacity>
)
})}
</ScrollView>
</View>
)
}
const styles=StyleSheet.create({
container:{
flex:1,
backgroundColor:'#fff',
paddingTop:40,
paddingHorizontal:20,
alignItems:'center'
}
})
I read the documentation of react navigation and installed all the dependencies imported the required dependencies but this does not seem to work any tip
You should get the navigation from props like
export default function App(props){
let {navigation}=props;
//your code
}
but first make sure that your component is wrapped by NavigationContainer. Read this for more detailed info.
Related
i am trying to use an image source with require function or uri in react native but the source will be use in calling the function that has the image, it doesn't work with me.
this is the image the contains the structure of the project and the image folder.
this is the card file code:
import { View, Image, StyleSheet } from "react-native";
import colors from "../config/colors";
import React from "react";
import BookStoreText from "./BookStoreText";
function Card(title,subtitile,image) {
return (
<View style={styles.card}>
<Image source={image} />
<BookStoreText>{title}</BookStoreText>
<BookStoreText>{subtitile}</BookStoreText>
</View>
);
}
const styles = StyleSheet.create({
card:{
borderRadius:15,
backgroundColor:colors.white,
marginBottom:20,
}
})
export default Card;
this is the app.js source code:
//import WelcomeScreen from "./app/screens/WelcomeScreen";
//import colors from "./app/config/colors";
//import ViewImageScreen from "./app/screens/ViewImageScreen";
//import { MaterialCommunityIcons } from "#expo/vector-icons";
//import AppButton from "./app/components/AppButton";
import { View } from "react-native";
import React from "react";
import Card from "./app/components/Card";
function App() {
return (
<View
style={{
padding: 20,
paddingTop: 100,
backgroundColor: "#f8f4f4",
}}
>
<Card
image={require("./app/assets/chair.jpg")}
></Card>
</View>
);
}
export default App;
what i tried:
i tried to use uri with the image istead of using require function but it doesn't work
I think you need to destructure the image property in the Appcard component's params like this:
//notice the curly braces here
function Card({title,subtitile,image}) {
return (
<View style={styles.card}>
<Image source={image} />
<BookStoreText>{title}</BookStoreText>
<BookStoreText>{subtitile}</BookStoreText>
</View>
);
}
After read through many other similar questions I am still unable to import my custom component.
Here is main view:
import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {LOGO} from '../../assets/logo.png';
import {testingInput} from './testingInput';
function tempScreen({navigation}) {
return (
<View style={
styles.container
}>
<View style={
styles.topContainer
}>
<Image styles={
styles.logo
}
scoure={LOGO}
resizeMode={'cover'}/>
<Text>
Here
</Text>
</View>
<View style={
styles.bottomContainer
}>
<testingInput/>
</View>
</View>
)
}
const styles = StyleSheet.create({
...
})
export default tempScreen;
Here is tempButton File:
import React, {Component} from 'react';
import {TextInput, StyleSheet} from 'react-native';
const testingInput = (prop) => {
return (
<TextInput style={
styles.TextInput
}
placeholder="Email"
color="#ffffff"
placeholderTextColor="#ffffff"
autoCapitalize="none"></TextInput>
)
}
const styles = StyleSheet.create({
TextInput: {
height: 50,
flex: 1,
padding: 10,
marginLeft: 20
}
})
export default testingInput;
Im getting the error
"Invariant Violation: View config getter callback for component testingInput must be a function (received undefined). Make sure to start component names with a capital letter."
Any help would be greatly appreciated!
When you use a default export you do not need destructuring the import.
with export default testingInput; you will import import TestInput from './testinputfile. Here the name of the import is not important
with export testingInput; you will import import {functionName} from './testinputfile. Here the name of the import need to be equal to the name of the function exported
I used This <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}> to open other page, But when I click <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}> in photos page, I got this error:
enter image description here
The code:
import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, Dimensions, StyleSheet, StatusBar, Image} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import * as Animatable from 'react-native-animatable';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '#react-navigation/native';
const SplashScreen = ({navigation}) => {
const { colors } = useTheme();
return (
<View style={styles.container}>
<StatusBar backgroundColor='#009387' barStyle="light-content"/>
<View style={styles.header}>
<Animatable.Image
animation="bounceIn"
duraton="1500"
source={require('../assets/fmasdeco.png')}
style={styles.logo}
resizeMode="stretch"
/>
</View>
<Animatable.View
style={[styles.footer, {
backgroundColor: colors.background
}]}
animation="fadeInUpBig"
>
<Text style={[styles.title, {
color: colors.text
}]}>Stay connected with everyone!</Text>
<Text style={styles.text}>Sign in with account</Text>
<View style={styles.button}>
<TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
<LinearGradient
colors={['#08d4c4', '#01ab9d']}
style={styles.signIn}
>
<Text style={styles.textSign}>Get Started</Text>
<MaterialIcons
name="navigate-next"
color="#fff"
size={20}
/>
</LinearGradient>
</TouchableOpacity>
</View>
</Animatable.View>
</View>
);
};
export default SplashScreen;
My page SignUpScreen.Js
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default function SignUpScreen() {
return (
<View>
<Text>Hello</Text>
</View>
)
}
const styles = StyleSheet.create({})
Whenever You Navigate From Component which isn't in Your Navigation Container Your Navigation Props Is Undefined Your Splashscreen Component isn't in your Navigation Container May be it is a Child of Screen Thats why You Couldn't get Navigation Prop Pass navigation from from Parent Component where you rendered Splashscreen .
OR
You Should Use Use Navigation Hook Provided By React navigation To Navigation Between Screen from Outside of Navigation Container....
import { useNavigation } from '#react-navigation/native';
const someComponent = () => {
const navigation = useNavigation();
<TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
<Text>Navigation To Sigin Screen</Text>
</TouchableOpacity>
}
Hope this would Help...
I'm trying to navigate to the home page from login page but my login-form is in another folder named "component", When I'm navigating from the login page using touchableOpacity it is working, But when I'm doing same thing from login-form component it is giving me an error. Can someone tell me what I'm doing wrong.
Here is the code which I'm trying to perform.
code of Login.js
import React, {Component} from 'react';
import {Text, View, ScrollView} from 'react-native';
import LoginForm from '../components/LoginForm';
type Props = {};
export default class Login extends Component<Props> {
static navigationOptions = {
header: null
}
render() {
return (
<ScrollView>
<View>
<LoginForm/>
</View>
<View>
<Text> Skip login and goto</Text>
<Text onPress={()=>this.props.navigation.navigate('Home')}>
Home
</Text>
</View>
</ScrollView>
);
}
}
code of LoginForm.js
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
type Props = {};
export default class LoginForm extends Component<Props> {
render() {
return (
<View>
<TextInput
placeholder={'Email'}
keyboardType={'email-address'}
autoCapitalize={'none'}
/>
<TextInput
placeholder={'Password'}
secureTextEntry={true}
/>
<TouchableOpacity
activeOpacity={0.6}
onPress={()=>this.props.navigation.navigate('Home')}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
}
here is the screenshot of error:
Error when navigating to page in another folder
Please help me to get out of this error. Thanks in advance. :)
You can use withNavigation or you should pass navigation as a props to child component.
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
import { withNavigation } from 'react-navigation';
type Props = {};
class LoginForm extends Component<Props> {
render() {
return (
<View>
<TextInput
placeholder={'Email'}
keyboardType={'email-address'}
autoCapitalize={'none'}
/>
<TextInput
placeholder={'Password'}
secureTextEntry={true}
/>
<TouchableOpacity
activeOpacity={0.6}
onPress={()=>this.props.navigation.navigate('Home')}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
}
export default withNavigation(LoginForm);
In the end of your LoginForm.js you need to put export {LoginForm};
If only this not work, try make your import like this: import {LoginForm} from '../components/LoginForm';
I have a Custom Button Component with this code
import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import PropTypes from 'prop-types';
import styles from './styles';
const CustomBtn = ({props, text, onPress }) => (
<TouchableOpacity {...props} onPress={onPress}>
<View style={styles.button}>
<Text style={styles.text}>{text}</Text>
</View>
</TouchableOpacity>
);
CustomBtn = {
text: PropTypes.string,
onPress: PropTypes.func,
};
export default CustomBtn;
I want to override the styles (Margins, Paddings) of the Component in my view where I write
<CustomBtn style={styles.BtnMargin} onPress={this.handlePressLogin} text="Login" />
But my custom Button don't get the style. How to change the code for the custom btn to solve this?
You are using the stateless component wrong. If you look at the signature you can notice that it accepts props as an argument:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
In the line {...props} varibale props is undefined because it is the same as this.props.props in a normal component. What you really want to do is:
const CustomBtn = (props) => (
<TouchableOpacity {...props} onPress={props.onPress}>
<View style={styles.button}>
<Text style={styles.text}>{props.text}</Text>
</View>
</TouchableOpacity>
);