I'm new to react-native so i don't know how to fix this error
import { StatusBar } from 'expo-
status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hello World</Text>
<TextInput placeholder ="something"/> **The error is here**
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I have a trouble with Text input
and the image error is :
How to fix this??
You haven't imported the textinput
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View ,TextInput } from 'react-native'; **import here**
export default function App() {
return (
<View style={styles.container}>
<Text>Hello World</Text>
<TextInput placeholder ="something"/> **The error is here**
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Use this code
Related
I am trying to make a reusable text input component, but I want to grab the value that the user types to manipulate it on the App.js
TextInputComponent.js
import React, {useState} from 'react';
import { StyleSheet, View, TextInput } from 'react-native'
const TextInputComponent = (props) => {
const [text, onChangeText] = useState("")
return (
<View>
<TextInput style={styles.container} value={text} onChangeText={onChangeText} placeholder="Enter"/>
</View>
)
}
const styles = StyleSheet.create({
container: {
height: 50,
width: 200,
padding: 10,
margin: 10,
borderWidth: 1,
borderColor: "black",
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default TextInputComponent
App.js
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import TextInputComponent from './src/components/TextInputComponent';
export default function App() {
return (
<View style={styles.container}>
<View style={{flexDirection: 'row' }}>
<Text>Test</Text>
<TextInputComponent/>
<Button title="A" onPress={()=> console.log(-------> text value from TextInputComponent <-----)}></Button>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
In order to access the state value created on the TextInputComponent.js what do I need to do?
One thing you can do is to pass a custom method through to the component and then use it as the onChangeText method:
const TextInputComponent = ({ customMethod }) => {
const [text, onChangeText] = useState("")
return (
<View>
<TextInput style={styles.container} value={text} onChangeText={(txt) => customMethod(txt)} placeholder="Enter"/>
</View>
)
}
Then in App.js you have the method:
customMethod = (txt) => {
// do something with txt variable
}
and:
<TextInputComponent customMethod={customMethod} />
Might require some tweaking to get it to work (I didn't test it), but that's the general idea.
I am having a problem with my button. i have just started learning reactnative.
import { StatusBar } from 'expo-status-bar';
import React,{ useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
export default function App() {
const [name, setName] = useState('Hamza');
const clickHandler= () => {
setName('Awais');
};
return (
<View style={styles.container}>
<Text >My Name is { name }</Text>
<Text></Text>
<View style={styles.buttonContainer}>
<Button title='update State' onPress={ clickHandler }/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer:{
marginTop:20,
},
});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Try this way
<Button title='update State' onPress={() => clickHandler() } />
i still learning react-native and want to set the backgroundColor to an entire screen which is imported in app.js.
Even if i set the flex in 1, the height covering the screen but the width is always center but not covering the entire screen.
Here what i'm doing:
App.js
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Splash from "./Screen/Splash";
import TestScreen from "./Screen/TestScreen";
export default function App() {
return (
<View style={styles.container}>
{/* <Splash /> */}
<TestScreen />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
// flexDirection: "column",
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
TestScreen.js:
import React from "react";
import { View, Text, StyleSheet } from "react-native";
const Test = () => {
return (
<View style={styles.container}>
<Text>Hello</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "rgb(0, 168, 150)",
},
});
export default Test;
So,how i can set properly the backgroundColor to ScreenTest to cover the entire screen?
Thanks
Within app.js maybe add the full-width property:
<TestScreen style = {styles.redbox} >
container: {
flex: 1
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
I'm trying to update an app I've developed using react-navigation v4.
Using react-navigation v4 I could get the id using something like console.log(navigation.getParam('id'));
But when I tried the same after updating to v5 of react-navigation it shows me an error and I can't find the right way to get the param id
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function ShowScreen({ navigation }) {
console.log(navigation.getParam('id'));
return (
<View style={styles.container}>
<Text>Show Screen</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
The other screen where the id is located is it:
import React, { useContext } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
import { Context } from '../../context/BlogContext';
import Icon from 'react-native-vector-icons/Feather'
export default function IndexScreen({ navigation }) {
const { state, addBlogPost, deleteBlogPost } = useContext(Context);
return (
<View style={styles.container}>
<Button
title="Add Post"
onPress={addBlogPost}
/>
<FlatList
data={state}
keyExtractor={(blogPost) => blogPost.title}
renderItem={({ item }) => {
return (
<TouchableOpacity onPress={
() => navigation.navigate('ShowScreen',
{ id: item.id })}>
<View style={styles.row}>
<Text style={styles.title}>
{item.title} -
{item.id}
</Text>
<TouchableOpacity onPress={() => deleteBlogPost(item.id)}>
<Icon style={styles.icon}
name="trash"
/>
</TouchableOpacity>
</View>
</TouchableOpacity>
);
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 30,
justifyContent: 'center',
alignItems: 'center'
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
paddingVertical: 20,
borderTopWidth: 1,
borderColor: '#333'
},
title: {
fontSize: 18
},
icon: {
fontSize: 24
}
});
You can get params using route.params in react navigation v5 more on that read here
just update your code to this
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function ShowScreen({ navigation,route }) {
const {id} =route.params; //you will get id here via route
return (
<View style={styles.container}>
<Text>Show Screen</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
you can simply access your parameters like this
const id = this.props.route.params.id
inside this.props.route.params you will get all paramaters :)
I have created 3 buttons in react native. I have stored images in three different components. I want that when i click on first button, it show the image stored in first component and so on . I want to use switch case statement. I dont want to use any library like tab navigators.
app.js
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Alert,
Button,
TouchableOpacity
} from "react-native";
import first from "./components/first";
import second from "./components/second";
import third from "./components/third";
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.wrapper1}>
<Text>Button 1</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.wrapper2}>
<Text>Button 2</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.wrapper3}>
<Text>Button 3</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF",
alignItems: "flex-start",
flexDirection: "row"
},
wrapper1: {
borderWidth: 1,
borderColor: "black",
backgroundColor: "red",
paddingHorizontal: 40,
paddingVertical: 15
},
wrapper2: {
borderWidth: 1,
borderColor: "black",
backgroundColor: "red",
paddingHorizontal: 40,
paddingVertical: 15
},
wrapper3: {
borderWidth: 1,
borderColor: "black",
backgroundColor: "red",
paddingHorizontal: 40,
paddingVertical: 15
}
});
first.js
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Alert,
Button,
TouchableOpacity
} from "react-native";
export default class first extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
source={{ uri: "http://facebook.github.io/react/img/logo_og.png"
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF",
alignItems: "flex-start",
flexDirection: "row"
}
});
second.js
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Alert,
Button,
TouchableOpacity
} from "react-native";
export default class second extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
source={{ uri: "http://facebook.github.io/react/img/logo_og.png"
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF",
alignItems: "flex-start",
flexDirection: "row"
}
});
third.js
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Alert,
Button,
TouchableOpacity
} from "react-native";
export default class third extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
source={{ uri: "http://facebook.github.io/react/img/logo_og.png"
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF",
alignItems: "flex-start",
flexDirection: "row"
}
});
A clean way consist in :
Storing the pictures url in an array
Use a state to keep the current picture index
Call one time the Image component, with a different url depending of the state
Add buttons to change the state
I created a working example :
https://snack.expo.io/#sanjar/so-53608978
Edit : if you really want to keep different components, and to use a switch here is a working example :
https://snack.expo.io/#sanjar/so-53608978-2