Develop Reference

Sending form to a seperate page

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>
);
}
}

How to Pass Props to Modal Component in React Native

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

react native : there is way to pass a function into "onpress"?

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>

pass props to DrawerContent component

I want to pass props to Drawer so that i can display the name of user in the drawer component. If i export DrawerContent, i dont get the props like navigation etc.
routes.js
const navitems =[
{
name:'Home',
nav:'classesnew',
},
{
name:'Device',
nav:'start',
},
]
const mapDispatchToProps = (dispatch) => (
{
loadInitialData: () => dispatch(loadInitialData()),
}
);
const mapStateToProps = createStructuredSelector({
user: selectUser(), // fetch the name of user to show below
});
class DrawerContent extends React.Component{
constructor(props) {
super(props)
}
render(){
return (
<Image source={require('../images/logo.png')}
style={styles.container}>
<View style={{justifyContent: 'center',
alignItems: 'center',}}>
<Image style={styles.image} source={{uri: ''}}/>
<Text>{user.get('name')}</Text> {/* show username */}
</View>
<View>
{
navitems.map((l,i)=>{
return (
<TouchableOpacity
key={i}
style={{marginBottom:0.5}}
onPress={()=>{
this.props.navigation.navigate(l.nav)
}
}>
<View style={{flexDirection:'row', padding: 15, paddingLeft:0, backgroundColor:'#fff0', borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)', marginLeft: 20, marginRight:20}}>
<Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25, }} color="#ffffff" />
<Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
</View>
</TouchableOpacity>)
})
}
</View>
</Image>)
}
}
const DrawerRoutes = (
{
Main: { screen: App, title: 'Main' },
Device: { screen: Device, title: 'Device' },
})
const Drawer = DrawerNavigator(DrawerRoutes ,{
contentComponent:({navigation})=> <DrawerContent navigation={navigation} routes={DrawerRoutes} />,
});
Drawer.navigationOptions = {
contentOptions: {
activeBackgroundColor: '#ff5976',
style: {
backgroundColor: '#000000',
zIndex: 100,
paddingTop: 0
}
},
header: ({ state, setParams, navigate, dispatch }) => ({
visible: true,
tintColor: '#ffffff',
title: "LokaLocal",
style: {
backgroundColor: '#ff5976'
},
right: (
<TouchableOpacity
onPress={() => navigate('DrawerOpen')}
>
<Icon name="search" size={16} style={{ padding: 10, paddingRight: 20 }} color="#ffffff" />
</TouchableOpacity>
),
left: (
<TouchableOpacity
onPress={}
>
<Icon name="bars" size={16} style={{ padding: 10, paddingLeft: 20 }} color="#ffffff" />
</TouchableOpacity>
),
})
}
export const Routes = StackNavigator(
{
Login: { screen: Login },
Dashboard: {screen: Drawer},
},
index.js
import { Drawer } from './routes';
const App = () => (
<Provider store={store}>
<Drawer />
</Provider>
);
where should i use connect so i can use redux state as props to show username?
UPDATED
const mapDispatchToProps = (dispatch) => (
{
loadInitialData: () => dispatch(loadInitialData()),
}
);
const mapStateToProps = createStructuredSelector({
user: selectUser(),
});
class DrawerContent extends React.Component{
constructor(props) {
super(props)
}
componentDidMount() {
console.log('props are', this.props);
this.props.loadInitialData();
}
render() {
console.log('props', this.props);
return (
<View style={styles.container}>
<View>
<Image style={styles.image} source={require('../images/logo.png')}/>
<Text style={{ color: '#fff', fontSize: 11, paddingTop: 10, paddingBottom: 20 }}>username here</Text>
</View>
<View>
{
navitems.map((l,i)=>{
return (
<TouchableOpacity
key={i}
style={{marginBottom:0.5}}
onPress={()=>{
this.props.navigation.navigate(l.nav)
}
}>
<View style={{flexDirection:'row', padding: 15, paddingLeft:0, borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)',}}>
<Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25, }} color="#ffffff" />
<Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
</View>
</TouchableOpacity>)
})
}
</View>
</View>
)
}
}
const DrawerRoutes = (
{
Main: { screen: App, title: 'Main' },
Device: { screen: Device, title: 'Device' },
})
export const Drawer = DrawerNavigator(DrawerRoutes ,{
contentComponent:({navigation})=> <ContentDrawer navigation={navigation} routes={DrawerRoutes} />,
});
const ContentDrawer = connect(mapStateToProps, mapDispatchToProps)(DrawerContent);

JSX attributes must only be assigned a non-empty expression

I am trying to create a custom drawer in react-navigation. However I am getting an error. The error is JSX attributes must only be assigned a non-empty expression. I have even create the array and maped it to show but still getting an error. Did i miss anything?
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
const navitems =[
{
name:'Home',
nav:'classesnew',
},
{
name:'Device',
nav:'start',
},
]
class DrawerContent extends React.Component{
constructor(props) {
super(props)
}
render(){
return (
<Image source={require('../images/logo.png')}
style={styles.container}>
<View style={{justifyContent: 'center',
alignItems: 'center',}}>
<Image style={styles.image} source={{uri: ''}}/>
</View>
<View>
{
navitems.map((l,i)=>{
return (
<TouchableOpacity
key={i}
style={{marginBottom:0.5}}
onPress={()=>{
this.props.navigation.navigate(l.nav)
}
}>
<View style={{flexDirection:'row', padding: 15, paddingLeft:0, backgroundColor:'#fff0', borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)', marginLeft: 20, marginRight:20}}>
<Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25, }} color="#ffffff" />
<Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
</View>
</TouchableOpacity>)
})
}
</View>
</Image>)
}
}
const DrawerRoutes = (
{
Main: { screen: App, title: 'Main' },
Device: { screen: Device, title: 'Device' },
})
const Drawer = DrawerNavigator(DrawerRoutes ,{
contentComponent:({navigation})=> <DrawerContent navigation={navigation} routes={DrawerRoutes} />,
});
Drawer.navigationOptions = {
contentOptions: {
activeBackgroundColor: '#ff5976',
style: {
backgroundColor: '#000000',
zIndex: 100,
paddingTop: 0
}
},
header: ({ state, setParams, navigate, dispatch }) => ({
visible: true,
tintColor: '#ffffff',
title: "LokaLocal",
style: {
backgroundColor: '#ff5976'
},
right: (
<TouchableOpacity
onPress={() => navigate('DrawerOpen')}
>
<Icon name="search" size={16} style={{ padding: 10, paddingRight: 20 }} color="#ffffff" />
</TouchableOpacity>
),
left: (
<TouchableOpacity
onPress={}
>
<Icon name="bars" size={16} style={{ padding: 10, paddingLeft: 20 }} color="#ffffff" />
</TouchableOpacity>
),
})
}
export const Routes = StackNavigator(
{
Login: { screen: Login },
Dashboard: {screen: Drawer},
},
);
I am using react-navigation 1.0.0.bet.9

<TouchableOpacity
onPress={}
Here , as the error mentioned , you can't assign an empy expression to a JSX attributes.

You can't have empty {} in JSX attributes.
In here you can't have
<TouchableOpacity
onPress={}
>
Fix this by having
<TouchableOpacity
onPress={someFunction}
>

Error:
onPress={}
You have to pass a prop but to run this temporary you can do this as :
onPress={""}
let me know if it worked :)