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
Related
This is my InputItems.js
import React, { useState } from "react";
import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
function InputItems(props) {
const [inputGoal, setinputGoal] = useState("");
return (
<View style={style.wholeInputcontainer}>
<TextInput
placeholder="Enter the Text"
style={style.textInput}
onChangeText={(enteredtext) => {
setinputGoal(enteredtext);
}}
value={inputGoal}
/>
<Button title="Submit" onPress={props.onpressprop.bind(this,inputGoal)} />
</View>
);
}
const style = StyleSheet.create({
wholeInputcontainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
textInput: {
borderBottomColor: "blue",
borderBottomWidth: 4,
marginBottom: 10,
width: 300,
},
});
export default InputItems;
and this is my App.js
import React, { useState } from "react";
import { StatusBar } from "expo-status-bar";
import {
StyleSheet,
Text,
View,
TextInput,
Button,
ScrollView,
FlatList,
} from "react-native";
import Listitems from "./Components/ListItems";
import InputItems from "./Components/InputItems";
// import { Button, TextInput } from 'react-native-web';
export default function App() {
const [outputGoal, setoutputGoal] = useState([]);
const Onpress = (InputGoalProp) => {
setoutputGoal((Currentgoal) => [...Currentgoal, InputGoalProp]);
};
return (
<View style={style.root}>
<InputItems onpressprop={Onpress} />
{/* We can use mapping from outputGoal but using FlatList instead of ScrollView is more efficient */}
<FlatList
data={outputGoal}
renderItem={(listitems) => <Listitems anything={listitems.item} />}
/>
<StatusBar style="auto" />
</View>
);
}
const style = StyleSheet.create({
//StyleSheet is a class of react-native, we can always use inline styleing
root: {
marginTop: 100,
},
});
Stuck into this problem. Please help me if you can.
This is the error...
Invariant Violation: View config getter callback for component input must be a function (received undefined). Make sure to start component names with a capital letter.
This error is located at:
in input (created by TextInput)
in TextInput (created by InputItems)
You have a typo in this line:
<Button title="Submit" onPress={props.onpressprop.bind(this,inputGoal)} />
There's a comma instead of a period after this. It should be
<Button title="Submit" onPress={props.onpressprop.bind(this.inputGoal)} />
In InputItems.js you still have the wrong import (seems like you have already corrected it in App.js):
change this: import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
to: import { Text, View, StyleSheet, TextInput, Button } from "react-native";
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?
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 am working on a React native project, I am trying to apply two different styles in View Component but it is taking only one style someone please tell me how to overcome this issue
This is App.js
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = props => {
return (
<View style={{flex: 1, flexDirection: 'row'}} style={styles.container}>
<Text>Mark</Text>
<Text>Williams</Text>
<Text>Henry</Text>
<Text>Tom</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 0,
padding: 20,
color: '#ff0000',
},
});
export default App;
Hi try like below,
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = props => {
return (
<View style={[{flex: 1, flexDirection: 'row'}, styles.container]}>
<Text>Mark</Text>
<Text>Williams</Text>
<Text>Henry</Text>
<Text>Tom</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 0,
padding: 20,
color: '#ff0000',
},
});
export default App;
Using a style array you can set multiple styles for a same component.
I'm trying to add a logo to react-native code using Image tag but after I add Image tag it gives me below error
TypeError: (0, _reactNative.default) is not a function. (In '(0, _reactNative.default)("./../assets/logo.png")', '(0, _reactNative.default)' is an instance of Object)
* component\Login.js:12:34 in render
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11581:21 in finishClassComponent
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11509:4 in updateClassComponent
- ... 18 more stack frames from framework internals
below is my code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Image from "react-native";
import require from 'react-native'
import {ImageBackground} from "react-native";
export default class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.logoContainer}>
<Image sorce={require('./../assets/logo.png')}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
logoContainer:{
alignItems:'center',
justifyContent:'center',
},
});
my App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './component/Login'
export default function App() {
return (
<View style={styles.container}>
<Login/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
so what is wrong here?
You have a wrong Image import.
Use it like this:
import { StyleSheet, Text, View, Image } from 'react-native';
const myImageSource = require('./../assets/logo.png'); // Double check that you have the image at that path
Fix the typo from image source:
<Image source={myImageSource}/>
If still not working add full content of your files and RN version to your question.