I am trying to take a form for inputting you email and send it as text to display on a separate page. I have added the only code I think you would need from the two pages, if you need more let me know! Any help at all is appreciated more than you know!
SignUpEmail.js
xport default class SignUpEmailPage extends Component {
constructor() {
super();
this.state = {
color1: '#A2A2A2',
inputValue: '', //add state here
};
}
updateInputValue = (event) => {
this.setState({
inputValue: event.target.value
});
}
render() {
return (
<View style={styles.containerMain}>
{/* Email Input */}
<Container style = {styles.emailInput}>
<Form>
<Item floatingLabel >
<Label style={{color:this.state.color1}}>Email Address</Label>
<Input
value = {this.state.inputValue}
onChange={this.updateInputValue}
style={styles.textInput}
autoCorrect={false}
autoCapitalize="none"
onFocus={() => this.setState({color1: '#F7018D'})}
onBlur={() => this.setState({color1: '#A2A2A2'})}
/>
</Item>
</Form>
</Container>
EDIT - I have added my styles in case there is an issue there
After adding the updates below I still have nothing, I didnt bother putting them here but everything else is exactly how its copied here!
CreatePassword.js
export default class CreatePasswordPage extends Component {
/* Colors Input label*/
constructor() {
super();
this.state = {
color1: '#A2A2A2'};}
render() {
const {inputValue} = this.props.route.params;
return (
<View style={styles.containerMain}>
{/* Password Input */}
<Container style = {styles.passwordInput}>
<Form>
<Item floatingLabel>
<Label style={{color:this.state.color1}}>Password</Label>
<Input
style={styles.textInput}
autoCorrect={false}
autoCapitalize="none"
secureTextEntry={true}
onFocus={() => this.setState({color1: '#F7018D'})}
onBlur={() => this.setState({color1: '#A2A2A2'})}
/>
</Item>
</Form>
</Container>
<View style={styles.containerHeader}>
<Text style={styles.title}>Create a Password</Text>
</View>
<View style={styles.containerCaption}>
<Text style={styles.caption}> Lets create your Password for
</Text>
</View>
<View>
<Text style={styles.caption}>{inputValue}</Text>
</View>
<View style={styles.containerBottom}>
<ContinueButton
onPress={() => this.props.navigation.navigate('PhoneVerification')}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
containerMain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#1E2028',
},
containerHeader: {
position: 'absolute',
bottom: 310,
left: 325
},
containerCaption: {
position: 'absolute',
right: 140,
bottom: 490,
},
containerCaption2: {
position: 'absolute',
right: 196,
bottom: 470,
fontWeight: 'bold'
},
containerBottom: {
position: 'absolute',
bottom: 270
},
title: {
color: 'white',
fontSize: 35,
fontWeight: "bold",
position: 'absolute',
right: 5,
bottom: 233
},
caption:
{
color: 'white',
fontSize: 16,
textAlign: 'left',
},
passwordInput: {
flex: 1,
backgroundColor: '#1E2028',
width: 350,
position: 'absolute',
top: 225,
left: 3
},
textInput: {
color: '#FFFFFF',
},
}
)
This might help
// SignUpEmail.js
navigateToCreatePasswordScreen = () => {
this.props.navigation.navigate("CreatePassword", {
inputValue: this.state.inputValue,
});
};
<Form>
<Item floatingLabel>
<Label style={{ color: this.state.color1 }}>Email Address</Label>
<Input />
<Button
onPress={() => this.navigateToCreatePasswordScreen()} // change here
title="Navigate to Create Password"
/>
</Item>
</Form>
CreatePassword.js
export default class CreatePasswordPage extends Component {
constructor() {
super();
this.state = {
color1: "#A2A2A2",
};
}
render() {
// get param value
const { inputValue } = this.props.route.params;
return (
<View style={styles.containerMain}>
<Text style={styles.caption}>{inputValue}</Text>
</View>
);
}
}
Related
I keep getting this error when trying to access this.state
None of the solutions I've tried so far worked
Here's my constructor
export default class Layout extends React.Component {
constructor() {
super();
this.state = {
bagTitle: 'View Bag'
}
this.renderContent = this.renderContent.bind(this);
}
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Menu' component={HomeScreen}
options={{
headerRight: () => (
<Ionicons style={iconView.icons} name='ios-list' size={26} color="black" />
),
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
}
This is where I'm calling the renderContent function
class HomeScreen extends React.Component {
render() {
const title = 'View Bag'
return (
<View style={styles.container}>
<StatusBar style="auto" />
{/* Bottomsheet View */}
<BottomSheet
ref={sheetRef}
snapPoints={[100, 300, Dimensions.get('window').height - 100]}
borderRadius={10}
renderContent={renderContent}
>
<Text onPress={showBag} style={{ backgroundColor: 'red', fontSize: 17, fontWeight: '600', textAlign: 'center', position: "absolute", marginTop: 20, width: windowWidth }}>View Bag</Text>
</BottomSheet>
</View>
);
}
}
This is where I'm trying to access this.state
renderContent = () => (
<View
style={{
backgroundColor: '#ecf0f1',
padding: 16,
fontSize: 20,
height: windowHeight,
width: windowWidth,
marginBottom: -200
}}
>
<Text onPress={showBag} style={{ fontSize: 17, fontWeight: '600', textAlign: 'center', position: "absolute", marginTop: 20, width: windowWidth }}>{this.state.bagTitle}</Text>
</View>
);
Keep getting this error
undefined is not an object (evaluating '_this.state')
You can use showBag and renderContent in HomeScreen class
class HomeScreen extends React.Component {
constructor() {
super();
this.state = {
bagTitle: 'View Bag'
}
this.showBag = this.showBag.bind(this);
this.renderContent = this.renderContent.bind(this);
}
// FUNCTIONS
showBag = (item) => {
sheetRef.current.snapTo(1);
if (item.title !== null) {
this.setState({
bagTitle: item.title
})
console.log('ITEM: ', item);
}
}
renderContent = () => (
<View
style={{
backgroundColor: '#ecf0f1',
padding: 16,
fontSize: 20,
height: windowHeight,
width: windowWidth,
marginBottom: -200
}}
>
<Text onPress={this.showBag} style={{ fontSize: 17, fontWeight: '600', textAlign: 'center', position: "absolute", marginTop: 20, width: windowWidth }}>{this.state.bagTitle}</Text>
</View>
);
render() {
const title = 'View Bag'
return (
<View style={styles.container}>
<StatusBar style="auto" />
{/* Bottomsheet View */}
<BottomSheet
ref={sheetRef}
snapPoints={[100, 300, Dimensions.get('window').height - 100]}
borderRadius={10}
renderContent={this.renderContent}
/>
</View>
);
}
}
I need to pass Flatlist data to modal in react native. Like, on click the item from the flatlist, it shows the modal with data for selected item. Here is my code below
Home.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList, Image, TouchableOpacity, Alert, Button } from 'react-native';
import { Popup } from './Modal';
import * as productdata from '../data/productdata.js';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
};
}
componentDidMount() {
this.setState({
isLoading: false,
dataSource: productdata.product,
})
}
popupRef = React.createRef()
onShowPopup = item => {
popupRef.show();
}
onClosePopup = () => {
popupRef.close()
}
ProductList = ({ item }) => (
<View style={styles.listItem}>
<TouchableOpacity onPress={() => this.onShowPopup(item)} style={{ height: 100, width: 100, justifyContent: "center", alignItems: "center" }}>
<Image source={item.photo} style={{ width: 100, height: 100, borderRadius: 15 }} />
</TouchableOpacity>
<View style={{ alignItems: "center", flex: 1, marginTop: 20 }}>
<Text style={{ fontWeight: "bold", fontSize: 22 }}>{item.name}</Text>
<Text style={{ fontSize: 18, fontWeight: "bold" }}>{item.price}</Text>
</View>
<Popup name="Product Details" ref={(target) => popupRef = target} onTouchOutside={this.onClosePopup} />
</View>
);
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={this.ProductList}
keyExtractor={item => item.name}
/>
</View>
);
}
}
Modal.js
import React, { Component } from 'react';
import { Modal, Dimensions, TouchableWithoutFeedback, StyleSheet, View, Text, Button, Image, TouchableOpacity } from 'react-native';
const deviceHeight = Dimensions.get("window").height
export class Popup extends Component {
constructor(props) {
super(props)
this.state = {
show: false,
}
}
show = () => {
this.setState({ show: true })
}
close = () => {
this.setState({ show: false })
}
renderOutsideTouchable(onTouch) {
const view = <View style={{ flex: 1, width: '100%' }} />
if (!onTouch) return view
return (
<TouchableWithoutFeedback onPress={onTouch} style={{ flex: 1, width: '100%' }}>
{view}
</TouchableWithoutFeedback>
)
}
renderTitle = () => {
const { name } = this.props
return (
<View style={{ alignItems: 'center' }}>
<Text style={{
color: 'black', fontSize: 20,
fontWeight: 'bold', margin: 15
}}>
{name}
</Text>
</View>
)
}
renderContent = (item) => {
return (
<View style={{ alignItems: 'center', marginBottom: 10 }}>
<View style={styles.card}>
<Text style={{ fontSize: 20, fontWeight: '500', fontWeight: 'bold', alignSelf: 'center', margin: 5 }}/>
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.button}>Add to Cart</Text>
</TouchableOpacity>
</View>
</View>
)
}
render() {
let { show } = this.state
const { onTouchOutside, title } = this.props
return (
<Modal animationType={'slide'} transparent={true} visible={show} onRequestClose={this.close}>
<View style={{ flex: 1, backgroundColor: '#000000AA', justifyContent: 'flex-end' }}>
{this.renderOutsideTouchable(onTouchOutside)}
<View style={{
backgroundColor: '#FFFFFF', width: '100%', height: '70%', borderTopRightRadius:20, borderTopLeftRadius: 20, paddingHorizontal: 20, maxHeight: deviceHeight * 5}}>
{this.renderTitle()}
{this.renderContent()}
</View>
</View>
</Modal>
)
}
}
My Problem: I am not able to pass the flatlist item data to a Modal component and have no better idea solving it in this code.
Please help me and if any including, changes or complete solution for perfect understanding for the requirement would be really great. Many Thanks in Advance!
You don't need to duplicate open state in modal/popup. Simply set the style and open. Assume open close state is controlled by parent component, so if rendering modal/popup it is open by definition.
class Popup extends React.Component {
renderOutsideTouchable(onTouch) {
const view = <View style={{ flex: 1, width: '100%' }} />;
if (!onTouch) return view;
return (
<TouchableWithoutFeedback
onPress={onTouch}
style={{ flex: 1, width: '100%' }}>
{view}
</TouchableWithoutFeedback>
);
}
renderTitle = () => {
const { name } = this.props;
return (
<View style={{ alignItems: 'center' }}>
<Text
style={{
color: 'black',
fontSize: 20,
fontWeight: 'bold',
margin: 15,
}}>
{name}
</Text>
</View>
);
};
renderContent = () => {
const { item } = this.props;
return (
<View style={{ alignItems: 'center', marginBottom: 10 }}>
<View style={styles.card}>
<Text
style={{
fontSize: 20,
fontWeight: '500',
// fontWeight: "bold",
alignSelf: 'center',
margin: 5,
}}
/>
<TouchableOpacity style={styles.buttonContainer}>
<Text>Name: {item.name}</Text>
<Text>Price: {item.price}</Text>
<Text>Description: {item.desc}</Text>
<Text>Rating: {item.rating}</Text>
<Text style={styles.button}>Add to Cart</Text>
</TouchableOpacity>
</View>
</View>
);
};
render() {
const { onTouchOutside, title } = this.props;
return (
<Modal
animationType={'slide'}
transparent
visible // <-- visible prop is truthy
onRequestClose={this.close}>
<View
style={{
flex: 1,
backgroundColor: '#000000AA',
justifyContent: 'flex-end',
zIndex: 1000,
}}>
{this.renderOutsideTouchable(onTouchOutside)}
<View
style={{
backgroundColor: '#FFFFFF',
width: '100%',
height: '70%',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
paddingHorizontal: 20,
maxHeight: deviceHeight * 5,
}}>
{this.renderTitle()}
{this.renderContent()}
</View>
</View>
</Modal>
);
}
}
A react ref isn't necessary for opening a modal/popup to display a specific item. Change the onShowPopup and onClosePopup to set/nullify a clicked on item. Conditionally render the Popup outside the Flatlist.
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource: productdata.product,
isLoading: false,
popupItem: null,
};
}
onShowPopup = (popupItem) => {
this.setState({ popupItem });
};
onClosePopup = () => {
this.setState({ popupItem: null });
};
ProductList = ({ item }) => (
<View style={styles.listItem}>
<TouchableOpacity
onPress={() => this.onShowPopup(item)}
style={{
height: 100,
width: 100,
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
source={item.photo}
style={{ width: 100, height: 100, borderRadius: 15 }}
/>
</TouchableOpacity>
<View style={{ alignItems: 'center', flex: 1, marginTop: 20 }}>
<Text style={{ fontWeight: 'bold', fontSize: 22 }}>{item.name}</Text>
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>{item.price}</Text>
</View>
</View>
);
render() {
return (
<View style={styles.container}>
{this.state.popupItem && (
<Popup
name="Product Details"
item={this.state.popupItem} // <-- pass pop item
onTouchOutside={this.onClosePopup}
/>
)}
<FlatList
data={this.state.dataSource}
renderItem={this.ProductList}
keyExtractor={(item) => item.name}
/>
</View>
);
}
}
Expo Snack
there is way to pass a function into "onpress" ?
i need to pass the "postData" function into the "onpress" button ,
how can i do it?
in my code the has 2 "onpress" that i want to pass inside the "postData" .
if there some mistake so please let me know and i will fix it .
this is my code for example :
export default class OrderInformationScreen extends Component {
constructor(props) {
super(props);
const { state } = props.navigation;
this.state = {
title: state.params.data
}
//alert(JSON.stringify((state.params.data.SHORT_TEXT)))
}
postData = () => {
const postData = {
ACTOR_ID:"APAZ",
REPORT_KEY:"001",
WORK_ITEM_ID:"000018639250",
NOTE:"fun all time"
}
const axios = require('axios')
axios.post('https://harigotphat1.mekorot.co.il/ConfirmPackaotWS/OrderApprove/OrderApprove_OrderApp_Save_Approvement/'+ postData)
.then(function (response) {
console.log("roei response======>>>>",response);
})
}
render() {
return (
<>
<View
style={{
alignItems: 'flex-start',
justifyContent: 'center',
borderColor: 'blue',
flexDirection: "row",
justifyContent: 'space-evenly'
}}>
<TouchableOpacity onPress={() => console.log("cancel!")}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("cancel!")} />
<View >
<Text style={{ fontSize: 25, fontWeight: 'bold', color: 'red' }}>לדחות</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log("works!")}> ///HERE I NEED PASS postData
<Avatar
size='large'
activeOpacity={0.1}
rounded
source={require('../assets/up.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("Works!")} />
<View>
<Text style={{ fontSize: 25, fontWeight: 'bold', color: 'green', marginHorizontal: 6 }}>לאשר</Text>
</View>
</TouchableOpacity>
</View>
<InfoTable headerInfo={this.state.title}></InfoTable>
</>
);
};
}
Check this updated code
export default class OrderInformationScreen extends Component {
constructor(props) {
super(props);
const { state } = props.navigation;
this.state = {
title: state.params.data
};
//alert(JSON.stringify((state.params.data.SHORT_TEXT)))
}
postData = () => {
const postData = {
ACTOR_ID: "APAZ",
REPORT_KEY: "001",
WORK_ITEM_ID: "000018639250",
NOTE: "fun all time"
};
const axios = require("axios");
axios
.post(
"https://harigotphat1.mekorot.co.il/ConfirmPackaotWS/OrderApprove/OrderApprove_OrderApp_Save_Approvement/" +
postData
)
.then(function(response) {
console.log("roei response======>>>>", response);
});
};
render() {
return (
<>
<View
style={{
alignItems: "flex-start",
justifyContent: "center",
borderColor: "blue",
flexDirection: "row",
justifyContent: "space-evenly"
}}
>
<TouchableOpacity onPress={() => console.log("cancel!")}>
<Avatar
size="large"
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require("../assets/down.png")}
style={{ height: 80, width: 80 }}
onPress={() => console.log("cancel!")}
/>
<View>
<Text style={{ fontSize: 25, fontWeight: "bold", color: "red" }}>
לדחות
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.postData()}>
<Avatar
size="large"
activeOpacity={0.1}
rounded
source={require("../assets/up.png")}
style={{ height: 80, width: 80 }}
onPress={() => console.log("Works!")}
/>
<View>
<Text
style={{
fontSize: 25,
fontWeight: "bold",
color: "green",
marginHorizontal: 6
}}
>
לאשר
</Text>
</View>
</TouchableOpacity>
</View>
<InfoTable headerInfo={this.state.title}></InfoTable>
</>
);
}
}
Simply you can put function like this way
<TouchableOpacity onPress={() => this.postData()}> .... </TouchableOpacity>
I am creating a simple login page in react native and am facing some confusions in styling. How can I make the text on the button in the center?
How can I take the INSTARIDE text upwards and not so close to the username field. Code could be run on Expo Snack.
import React, { Component } from 'react';
import { Alert, Button, Text, Container, Header, Content, TextInput, Form, Item, View, Label, StyleSheet } from 'react-native';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
onLogin() {
const { username, password } = this.state;
Alert.alert('Credentials', `${username} + ${password}`);
}
render() {
return (
<View style={styles.container}>
<Text style={{fontWeight: 'bold'}}>
My App
</Text>
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
placeholder={'Username'}
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'Password'}
secureTextEntry={true}
style={styles.input}
/>
<Button rounded success
title={'Login!'}
style={styles.input}
color = '#65c756'
onPress={this.onLogin.bind(this)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#1b1c1c',
},
input: {
width: 200,
height: 33,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
},
});
Check this below code
import React, { Component } from 'react';
import { Alert, Button, Text, TextInput, View, StyleSheet } from 'react-native';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
onLogin() {
const { username, password } = this.state;
Alert.alert('Credentials', `${username} + ${password}`);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>My App</Text>
<TextInput
value={this.state.username}
onChangeText={username => this.setState({ username })}
placeholder={'Username'}
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={password => this.setState({ password })}
placeholder={'Password'}
secureTextEntry={true}
style={styles.input}
/>
<View style={styles.buttonStyle}>
<Button
rounded
success
title={'Login!'}
color="#65c756"
onPress={this.onLogin.bind(this)}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
input: {
width: '90%',
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
alignSelf: 'center',
},
buttonStyle: {
width: '90%',
alignSelf: 'center',
},
textStyle: {
fontWeight: 'bold',
justifyContent: 'center',
alignSelf: 'center',
marginBottom: 30,
fontSize: 18,
},
});
Change this according to your requirement. Feel free for doubts
Create custom button by text and touchable opacity
<TouchableOpacity style={{backgroundColor:'#65c756',paddingVertical:5,paddingHorizontal: 30,borderRadius:6}} onPress={this.onLogin.bind(this)}>
<Text style={{color:'white'}}>Login!</Text>
</TouchableOpacity>
for text close to input just add some padding or margin b/w them
To center the button, try adding text-align: center; to the style prop in <Text style={{color:'white'}}>Login!</Text>
I am having an issue with React Native's this.setState() within a TextInput's onChangeText. I am trying to display the content of the TextInput in the Text tag below it. However, it displays nothing -- the setState() call never changes this.state.searchtext. I also get no errors. Thank you in advance for your help! Here is my code:
export default class ShowScreen extends Component {
constructor(props) {
super(props);
this.state = {
searchtext: ""
};
}
render() {
var thisscreen = (
<View>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
>
<View
style={{
flex: 1,
height: totalheight,
justifyContent: "space-around",
alignItems: "center",
width: totalwidth,
backgroundColor: "#FF0000"
}}
>
<TextInput
style={{ height: 80, fontSize: 20 }}
placeholder="placeholder"
value={this.state.searchtext}
onChangeText={searchtext =>
this.setState({ searchtext })
}
ref={input => {
this.textInput = input;
}}
returnKeyType="go"
/>
<Text>{this.state.searchtext}</Text>
</View>
</ScrollView>
</View>
);
return thisscreen;
}
}
In your TextInput add value prop
<TextInput
style={{height: 80, fontSize: 20}}
placeholder="placeholder"
value={this.state.searchtext}
onChangeText={(searchtext) => this.setState({ searchtext })}
ref={input => { this.textInput = input }}
returnKeyType="go"
/>
Hey you have used a variable to store screen code which is thisscreen. This might be preventing it from updating state.
Your render function should be like this:
render () {
return (
<View>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
>
<View style={{
flex: 1,
height: totalheight,
justifyContent: "space-around",
alignItems: "center",
width: totalwidth,
backgroundColor: "#FF0000"
}}>
<TextInput
style={{height: 80, fontSize: 20}}
placeholder="placeholder"
value={this.state.searchtext}
onChangeText={(searchtext) =>
this.setState({searchtext})}
ref={input => { this.textInput = input }}
returnKeyType="go"
/>
<Text>{this.state.searchtext}</Text>
</View>
</ScrollView>
</View>);
}
onChangeText={(search_text) => this.setState({searchtext:search_text})}
try this, that might do job.
When you use setState, we provide a JSON as parameter. Please follow below code.
<TextInput
style={{height: 80, fontSize: 20}}
placeholder="placeholder"
value={this.state.searchtext}
onChangeText={(searchtext) => this.setState({ searchtext: searchtext })} // <--
ref={input => { this.textInput = input }}
returnKeyType="go"
/>
Do let me know if it does not work.
I think there might bug in React onChangeText method. You just need to replace onChangetText to onChange then It will work fine.
<TextInput
style={{height: 80, fontSize: 20}}
placeholder="placeholder"
onChange={(text) => this.setState({searchtext : text})}
ref={input => { this.textInput = input }}
returnKeyType="go"
/>