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
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>
);
}
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.
I am trying to implement an animation on the text ams using react-native-reanimated.
I am pretty sure it's because of the Animated component, but can't figure out how to resolve it.
App.js
import React, {useEffect, useRef} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import Logo from './screens/Logo';
import Animated, { useCode, cond, eq, set } from 'react-native-reanimated';
import { withTimingTransition } from 'react-native-redash';
export default function App() {
const scale = useRef(new Animated.Value(0));
const scaleAnimation = withTimingTransition(scale.current);
useCode(() => cond(eq(scale.current, 0), set(scale.current, 1)), []);
return (
<>
<View style={styles.container}>
<View style={{ ...styles.logoContainer}}>
<Logo scale={scaleAnimation} />
</View>
</View>
<NavigationContainer>...</NavigationContainer>
</>
);
}
Logo.js
import React, {Component} from 'react';
import Animated from 'react-native-reanimated';
import {Button, StyleSheet, Text, View} from 'react-native';
const Logo = (scale) => (
<Animated.View style={{ ...styles.logo, transform: [{scale: scale}] }}>
<Text style={{ fontWeight: "400", fontSize: 36}}> ams </Text>
</Animated.View>
);
export default Logo;
I missed { } while passing scale.
const Logo = ({scale}) => (
Here's my App.js
import React, {Component} from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import Reducers from './app/reducers';
import Preload from './app/Screens/Preload';
import HomeScreen from './app/Screens/HomeScreen';
let store = createStore(
Reducers,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
const AppNavigator = createStackNavigator({
Home: {screen: HomeScreen, navigationOptions: {header: null }},
Preload: {screen: Preload, navigationOptions: {header: null }},
});
const AppContainer = createAppContainer(AppNavigator);
export default class App extends Component {
render () {
return (
<Provider store={store}>
<AppContainer/>
</Provider>
)
}
}
HomeScreen.js has a nested Wrap.js component which in turn has a Header.js component where the onPress event is handled to load a new screen, in this case the Preload.js screen.
When I press the TouchableOpacity component, there is no error thrown but nothing happens either. The new screen doesn't load. Please let me know how to load new screens while using functional components.
Here are the respective components mentioned above.
Wrap.js
import React from 'react'
import { View, Text, StyleSheet, StatusBar, Platform, SafeAreaView, ScrollView } from 'react-native'
import Colors from '../../Constants/Colors'
import Header from './Header'
const Wrap = (props) => {
return (
<SafeAreaView style={styles.mainWrapper}>
<ScrollView>
<Header />
{props.children}
</ScrollView>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
mainWrapper: {
backgroundColor: Colors.orange,
height: "100%",
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
}
})
export default Wrap
Header.js
import React from 'react'
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
import { FontAwesome } from '#expo/vector-icons';
import SourceImages from '../../Constants/SourceImages'
import Colors from '../../Constants/Colors'
import { NavigationActions } from 'react-navigation';
const {navigate} = NavigationActions;
const Header = () => {
return (
<View style={styles.wrapper}>
<View style={styles.menuIconWrapper}>
<TouchableOpacity style={styles.iconWrapper}
onPress={()=>{navigate('Preload')}}
>
<FontAwesome name="navicon" style={styles.icon} />
</TouchableOpacity>
</View>
<View style={styles.logoWrapper}>
<Image style={styles.logo} source={ SourceImages.logo } resizeMode="contain" />
</View>
<View style={styles.cartIconWrapper}>
<TouchableOpacity style={styles.iconWrapper} >
<FontAwesome name="shopping-basket" style={styles.icon} />
</TouchableOpacity>
</View>
</View>
)
}
export default Header
You have to do it in following way:
1- import { withNavigation } from 'react-navigation' instead of NavigationActions
2- use const Header = (props) instead of const Header = ()
3- use props.navigation instead of const {navigate} = NavigationActions;
4- export default withNavigation(Header) instead of export default Header
It will work this way:
import { withNavigation } from 'react-navigation'
const Header = (props)
props.navigation.navigate('Preload')
export default withNavigation(Header)
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';