We Keep Coding

How to get the value from a Text Input (a component) to my main app?

I have my main app with a Text, a Text Input (a component) and a button (another component):
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Alert } from 'react-native';
import { Tinput } from './components/Tinput.js';
import { Button } from './components/Button.js';
export default function App() {
return (
<View style={styles.container}>
<Text style={{fontSize:20, padding:20, textAlign:'center'}}>Ingrese un numero del pokémon a buscar!</Text>
<Tinput/>
<Button onPress={()=> ConsultarPokemon(/*this is where i want to insert the value from Tinput */)}>
Ingresar
</Button>
<StatusBar style="auto" />
</View>
);
}
And this is my component Tinput, which has the text input:
import React from 'react';
import { TextInput } from 'react-native';
const Tinput = () => {
const [numero, setNumero] = React.useState('');
return (
<TextInput
style={{ width:'90%', height: 50, borderColor: 'gray', borderWidth: 1, backgroundColor: '#fffff0', textAlign:'center', borderRadius: 20, borderWidth:5, margin:20}}
onChangeText={(value) => setNumero({numero: value})}
value={this.state.numero}
maxLength={20}
/>
);
}
export { Tinput };
I want to use the value from the text input on my onPress function, I tried doing this but didn't work:
<Button onPress={()=> ConsultarPokemon(Tinput.state.numero)}>
Ingresar
</Button>
Also, there's an error on my Tinput component: undefined is not an object (evaluating '_this.state.numero')
So I'm probably using state the wrong way too

You will use this.state.X only if you created classes like component classes , and here is an exemple :
class Counter extends React.Component {
constructor(props) {
super(props);
this.initialCount = props.initialCount || 0;
this.state = {
count: this.initialCount
}
}
increment() {
this.setState({ count: this.state.count + 1 })
}
reset() {
this.setState({ count: this.initialCount})
}
render() {
const { count } = this.state;
return (
<>
<button onClick={this.increment.bind(this)}>+1</button>
<button onClick={this.reset.bind(this)}>Reset</button>
<p>Count: {count}</p>
</>
);
}
}
I suggest to do not complicate things and just handle onPress inside Tinput
const Tinput = () => {
const [numero, setNumero] = React.useState('');
return (
<View>
<TextInput
style={{ width:'90%', height: 50, borderColor: 'gray', borderWidth: 1, backgroundColor: '#fffff0', textAlign:'center', borderRadius: 20, borderWidth:5, margin:20}}
onChangeText={(value) => setNumero(value)}
value={numero} // no need to use this.state.numero
maxLength={20}
/>
<Button onPress={()=> ConsultarPokemon(numero)}>
Ingresar
</Button>
</View>
);
}

Change state in other component in React Native

I'm quite new to React-Native.
I have a screen which will render depends on its current state like below. At default (initial state) it will render the login screen.
App.js
import React, { Component } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Header } from './components/Export';
import LoginBox from './components/LoginBox';
import AdditionalActivity from './components/AdditionalActivity';
import SignUp from './components/SignUp';
export default class App extends Component {
state = {
status: 'initial'
}
renderBasedOnLoggedInState() {
if(this.state.status == 'initial') {
return (
<View>
<Header headerText="APP NAME"/>
<LoginBox/>
<AdditionalActivity />
</View>
);
} else if (this.state.status == 'logged') {
return (
<View>
<Text>Welcome to my application</Text>
</View>
)
} else {
return (
<View>
<Header headerText="APP NAME"/>
<SignUp/>
<AdditionalActivity />
</View>
)
}
}
render() {
return (
<View>
{this.renderBasedOnLoggedInState()}
</View>
);
}
}
When the login below is successed, I need to change the state of component App from "initial" to "logged". How could I do it? The login function here is only for test purpose so don't care much about it XD.
LoginBox.js
import React, { Component } from 'react'
import { Alert, Text, View, TouchableOpacity, Button } from 'react-native'
import GreyTextbox from './GreyTextbox'
export default class LoginBox extends Component {
state = {
username: '',
password: '',
}
Login()
{
var username = this.state.username;
var password = this.state.password;
var userdata = require('./a.json');
var count = 0;
for (let j = 0; j < 2; j++) {
if ((userdata[j].username == username) && ( userdata[j].password == password))
{
Alert.alert("true");
count++;
}
}
if(count == 0)
{
Alert.alert("false");
}
}
render() {
return (
<View style={styles.containerStyle}>
<GreyTextbox
secureOption={false}
placeholder="username"
value={this.state.username}
onChangeText={username => this.setState({username})}
/>
<GreyTextbox
secureOption={true}
placeholder="password"
value={this.state.password}
onChangeText={password => this.setState({password})}
/>
<TouchableOpacity
style={styles.buttonStyle}
onPress={this.Login.bind(this)} > >
<Text style={styles.textStyle}>Log In</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = {
containerStyle: {
//flex: 0.35,
height: 180,
justifyContent: 'space-between',
marginTop: 40,
marginLeft: 30,
marginRight: 30,
position: 'relative'
},
buttonStyle: {
borderWidth: 1,
borderColor: '#3da8ff',
alignContent: 'center',
justifyContent: 'center',
marginLeft: 25,
marginRight: 25,
paddingTop: 5,
paddingBottom: 5,
},
textStyle: {
color: '#3da8ff',
alignSelf: 'center',
fontSize: 20
}
}

Create a method which changes the state and pass it down to the child component as prop.
export default class App extends Component {
constructor(props) {
super(props)
this.state = {status: 'initial'}
this.changeState = this.changeState.bind(this)
}
changeState() {
this.setState({
status: 'logged'
})
}
render() {
return (
<View>
<Header headerText="APP NAME"/>
<LoginBox changeState = {this.changeState}/>
<AdditionalActivity />
</View>
}
}
And in your LoginBox.js you can call it from props:
class LoginBox extends Component {
constructor(props) {
super(props);
this.login = this.login.bind(this);
}
login() {
this.props.changeState;
}
render() {
return (
{...}
<TouchableOpacity
style={styles.buttonStyle}
onPress={this.login} > >
<Text style={styles.textStyle}>Log In</Text>
</TouchableOpacity>
)
}
}
Another useful tip: Never bind functions in your render method!

react native: how to store complete state and all it's props using AsyncStorage

I have a Reminder Component with a simple form comprising of one TextInput from react-native and one DatePicker from native-base and one submit to store the value on click.
I am trying to implement AyncStorage to store those values locally and later display them on another screen. But I am unable to do so, as I am getting an error 'Value is not defined.'
Whatever blog posts and tuts, the person was storing only one single property. I want to store complete state i.e input field and the date onclick of the save button.
This is my ReminderComponent
import React, { Component } from 'react';
import { View,StyleSheet, AsyncStorage, TextInput } from 'react-native';
import {
Form,
Button, Icon,
DatePicker, Text
} from 'native-base';
import PropTypes from 'prop-types';
class Reminder extends Component {
constructor(props) {
super(props);
this.state = {
input: '',
chosenDate: new Date(),
};
this.setDate = this.setDate.bind(this);
this.handleChangeInput = this.handleChangeInput.bind(this);
this.saveData = this.saveData.bind(this);
}
setDate(newDate) {
this.setState({
chosenDate: newDate
});
}
handleChangeInput = (text) => {
this.setState({input:text});
}
//On application loads, this will get the already saved data and set
//the state true when it's true.
componentDidMount() {
AsyncStorage.getItem("key").then((value) => {
this.setState({'key':value});
});
}
//save the input
saveData(value) {
console.log('value', value);
AsyncStorage.setItem("key", value);
this.setState({'key':value});
}
render() {
const {input} = this.state;
return (
<View>
<Form style={styles.formContainer}>
<View style={styles.formView}>
< TextInput
placeholder = "Set your reminder"
onChangeText={this.handleChangeInput}
value={this.state.input}
/>
<DatePicker
defaultDate={new Date()}
minimumDate={new Date(2018, 1, 1)}
maximumDate={new Date(2019, 12, 31)}
locale={"en"}
timeZoneOffsetInMinutes={undefined}
modalTransparent={false}
animationType={"fade"}
androidMode={"default"}
placeHolderText="Select date"
textStyle={{ color: "green" }}
placeHolderTextStyle={{ color: "#d3d3d3" }}
onDateChange={this.setDate}
/>
<Text style={styles.datePicker}>
{this.state.chosenDate.toString().substr(4, 12)}
</Text>
</View>
<View style={styles.footer}>
<Button block success style={styles.saveBtn}
onPress={ () =>
{this.saveData()
console.log('save data', value);}
}
>
<Icon type='MaterialIcons' name='done' />
</Button>
</View>
</Form>
</View>
);
}
}
const styles = StyleSheet.create({
formContainer: {
marginTop: 10,
padding: 10,
},
editIcon:{
color: '#28F1A6',
fontSize: 26,
},
editBtn:{
flex: 1,
alignSelf: 'flex-end',
},
datePicker:{
alignSelf: 'auto',
paddingLeft: 10
},
footer:{
position: 'relative',
top: 350
},
saveBtn: {
position:'relative',
marginTop: 35,
}
});
export default Reminder;
This is my ReminderScreen.
import React, { Component } from 'react';
import { View, StatusBar } from 'react-native';
import PropTypes from 'prop-types';
import Reminder from '../components/Reminder';
const ReminderScreen = ({navigation}) => (
<View >
<Reminder navigation={navigation} >
<StatusBar backgroundColor = "#28F1A6" />
</Reminder >
</View>
);
Reminder.propTypes = {
navigation: PropTypes.object.isRequired
}
export default ReminderScreen;

Some tweaks needed in the saveData function and get items from Asyncstorage.
While storing the data in AsyncStorage just convert entire state as a string and save it. For retrieving just convert the string to JSON object and set the value in setState function.
Please see the modified code below for Remainder component.
import React, { Component } from 'react';
import { View,StyleSheet, AsyncStorage, TextInput } from 'react-native';
import {
Form,
Button, Icon,
DatePicker, Text
} from 'native-base';
import PropTypes from 'prop-types';
class Reminder extends Component {
constructor(props) {
super(props);
this.state = {
input: '',
chosenDate: new Date(),
};
this.setDate = this.setDate.bind(this);
this.handleChangeInput = this.handleChangeInput.bind(this);
this.saveData = this.saveData.bind(this);
}
setDate(newDate) {
this.setState({
chosenDate: newDate
});
}
handleChangeInput = (text) => {
this.setState({input:text});
}
//On application loads, this will get the already saved data and set
//the state true when it's true.
componentDidMount() {
AsyncStorage.getItem("key").then((value) => {
this.setState(JSON.parse(value));
});
}
//save the input
saveData() {
AsyncStorage.setItem("key", JSON.stringify(this.state));
}
render() {
const {input} = this.state;
return (
<View>
<Form style={styles.formContainer}>
<View style={styles.formView}>
< TextInput
placeholder = "Set your reminder"
onChangeText={this.handleChangeInput}
value={this.state.input}
/>
<DatePicker
defaultDate={new Date()}
minimumDate={new Date(2018, 1, 1)}
maximumDate={new Date(2019, 12, 31)}
locale={"en"}
timeZoneOffsetInMinutes={undefined}
modalTransparent={false}
animationType={"fade"}
androidMode={"default"}
placeHolderText="Select date"
textStyle={{ color: "green" }}
placeHolderTextStyle={{ color: "#d3d3d3" }}
onDateChange={this.setDate}
/>
<Text style={styles.datePicker}>
{this.state.chosenDate.toString().substr(4, 12)}
</Text>
</View>
<View style={styles.footer}>
<Button block success style={styles.saveBtn}
onPress={ () =>
{this.saveData()
console.log('save data', value);}
}
>
<Icon type='MaterialIcons' name='done' />
</Button>
</View>
</Form>
</View>
);
}
}
const styles = StyleSheet.create({
formContainer: {
marginTop: 10,
padding: 10,
},
editIcon:{
color: '#28F1A6',
fontSize: 26,
},
editBtn:{
flex: 1,
alignSelf: 'flex-end',
},
datePicker:{
alignSelf: 'auto',
paddingLeft: 10
},
footer:{
position: 'relative',
top: 350
},
saveBtn: {
position:'relative',
marginTop: 35,
}
});
export default Reminder;

React Native: React Navigation StackNavigator not working. Getting error: “undefined is not an object (evaluating '_this3.props.navigation.navigate')”

I'm facing one issue I have simple and usual navigation flow with Stacknavigation and once they login they will see the Tab navigation.
In tab navigation I have chat screen which will render segments in one screen, each segment will produce a list of chat heads which is supposed to be open in the individual chat screen.
Chatscreen.js
import React, { Component } from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
import AdminChat from './Chat/AdminChat';
import AcademicChat from './Chat/AcademicChat';
import ActiveChat from './Chat/ActiveChat';
import { createMaterialTopTabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import { Button, Container, Content, Header, Body, Left, Right, Title } from 'native-base';
class ChatScreen extends Component{
state = {
activeIndex : 0
}
segmentClicked = (index) => {
this.setState({activeIndex: index})
}
renderSection = () => {
if (this.state.activeIndex === 0) {
return <AdminChat />
} else if (this.state.activeIndex === 1) {
return <AcademicChat />
} else {
return <ActiveChat />
}
}
render(){
return (
<Container>
<Header style={{backgroundColor: '#8E44AD'}}>
<Left>
</Left>
<Body>
<Title style={{color: 'white'}}>Chat</Title>
</Body>
<Right />
</Header>
<View style={styles.container}>
<View style={{flexDirection: 'row', justifyContent: 'space-around', borderBottomWidth: 1, borderBottomColor: 'grey' }}>
<Button
transparent
onPress={()=>{this.segmentClicked(0)}}
active={this.state.activeIndex === 0}>
<Text style={[this.state.activeIndex === 0 ? { color: '#8E44AD' } : {color: 'grey'}]}>Admin</Text>
</Button>
<Button
transparent
onPress={()=>{this.segmentClicked(1)}}
active={this.state.activeIndex === 1}>
<Text style={[this.state.activeIndex === 1 ? { color: '#8E44AD' } : {color: 'grey'}]}>Academic</Text>
</Button>
<Button
transparent
onPress={()=>{this.segmentClicked(2)}}
active={this.state.activeIndex === 2}>
<Text style={[this.state.activeIndex === 2 ? { color: '#8E44AD' } : {color: 'grey'}]}>Chat</Text>
</Button>
</View>
{this.renderSection()}
</View>
</Container>
);
}
}
export default ChatScreen;
from above code, I have generated Chat Screen, which is a part of tab navigator, and in that I am loading the AdminScreen.js.
import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator, StyleSheet } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";
import axios from 'axios';
class AdminChat extends Component{
state = {
adminChat : [],
userid: "2980",
usertype: '1'
}
componentWillMount = async () => {
console.log(this.state.userid)
try {
let { data } = await axios
.post("https://tgesconnect.org/api/Communication_group", {
userid: this.state.userid,
group_id: '0',
is_sub_group: '0',
usertype: this.state.usertype,
})
.then(response => {
//console.log(response.data.data.group_list);
if (response.data.status === "success") {
//console.log("Success")
this.setState({
adminChat: response.data.data.group_list,
});
} else {
alert("Something went wrong");
}
});
} catch (err) {
console.log(err);
}
//console.log(this.state.adminChat.group_name[0])
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#CED0CE",
}}
/>
);
};
render () {
return (
<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={this.state.adminChat}
renderItem={({ item }) => (
<ListItem
// roundAvatar
title={item.group_name}
// subtitle={item.email}
// avatar={{ uri: item.picture.thumbnail }}
containerStyle={{ borderBottomWidth: 0 }}
onPress={()=>this.props.navigation.push('onescreen')}
/>
)}
keyExtractor={item => item.group_id}
ItemSeparatorComponent={this.renderSeparator}
/>
</List>
)
}
}
export default AdminChat;
const styles = StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
});
Now if I click to open a single List item and use this.props.navigation.navigate('adminSingle.js') it is not working, how can I solve it?
I am using "react-navigation": "^2.6.0"

Looks like you forgot to pass navigation as prop for AdminScreen
renderSection = () => {
if (this.state.activeIndex === 0) {
return <AdminChat navigation={this.props.navigation}/>
} else if (this.state.activeIndex === 1) {
return <AcademicChat />
} else {
return <ActiveChat />
}
}

Is there a way to export default 2 constants?

Note: I am a beginner learning React Native. I have two js files (Inputs.js and Styles.js) and I am trying to put them both in a const in my main js file (App.js) but I can only export default one of them. Is there a way I can export both of them or should I rearrange my code in another way?
App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const Home1 = () => {
return (
<Style/>
)
}
const Home2 = () =>{
return (
<Inputs />
)
}
export default Home1; //I am unable to export both Home1 and Home2 here
Style.js:
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'
const Style = () => {
return ( <View style = {styles.container}>
<Text style = {styles.text}>
<Text style = {styles.capitalLetter}>
Title Here
</Text>
<Text>
<Text style = {styles.textInput}> {"\n"} {"\n"}{"\n"}Location: </Text>
</Text>
<Text>
<Text style = {styles.textInput}> {"\n"} {"\n"}Time:</Text>
</Text>
<Text>
<Text style = {styles.textInput}> {"\n"} {"\n"}Time: </Text>
</Text>
</Text>
</View>
)
}
export default Style
const styles = StyleSheet.create ({
container: {
//alignItems: 'center',
marginTop: 50,
},
text: {
color: '#41cdf4',
},
capitalLetter: {
color: 'red',
fontSize: 20
},
textInput: {
padding: 22,
//fontWeight: 'bold',
color: 'black'
},
textShadow: {
textShadowColor: 'red',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius : 5
}
})
Inputs.js:
import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
class Inputs extends Component {
state = {
email: '',
password: ''
}
handleEmail = (text) => {
this.setState({ email: text })
}
handlePassword = (text) => {
this.setState({ password: text })
}
login = (email, pass) => {
alert('email: ' + email + ' password: ' + pass)
}
render(){
return (
<View style = {styles.container}>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Email"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handleEmail}/>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Password"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handlePassword}/>
<TouchableOpacity
style = {styles.submitButton}
onPress = { () => this.login(this.state.email, this.state.password)}>
<Text style = {styles.submitButtonText}>
Submit
</Text>
</TouchableOpacity>
</View>
)
}
}
export default Inputs
const styles = StyleSheet.create({
container: {
paddingTop: 200
},
input: {
margin: 15,
height: 40,
borderColor: '#7a42f4',
borderWidth: 1
},
submitButton: {
backgroundColor: '#7a42f4',
padding: 10,
margin: 15,
height: 40,
},
submitButtonText:{
color: 'white'
}
})
****UPDATED CODE BELOW for the error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.:*****
App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
module.exports = {
Home1() {
return (
<Style/>
);
},
Home2() {
return (
<Inputs/>
);
}
};
Style.js
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'
import { Inputs } from "./App.js"
import Home1, {Home2} from './App.js'
const Style = () => {
return ( <View style = {styles.container}>
<Text style = {styles.text}>
<Text style = {styles.capitalLetter}>
Title Here
</Text>
<Text>
<Text style = {styles.textInput}> {"\n"} {"\n"}{"\n"}Your address or location (eg, Nashville, TN): </Text>
</Text>
<Text>
<Text style = {styles.textInput}> {"\n"} {"\n"}Contact 2:</Text>
</Text>
<Text>
<Text style = {styles.textInput}> {"\n"} {"\n"}Contact 3: </Text>
</Text>
</Text>
</View>
)
}
export default Style
const styles = StyleSheet.create ({
container: {
//alignItems: 'center',
marginTop: 50,
},
text: {
color: '#41cdf4',
},
capitalLetter: {
color: 'red',
fontSize: 20
},
textInput: {
padding: 22,
//fontWeight: 'bold',
color: 'black'
},
textShadow: {
textShadowColor: 'red',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius : 5
}
})
Inputs.js
import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
//import { Style } from "./App.js"
import Home1, {Home2} from './App.js'
class Inputs extends Component {
state = {
email: '',
password: ''
}
handleEmail = (text) => {
this.setState({ Location: text })
}
handlePassword = (text) => {
this.setState({ Time: text })
}
login = (email, time1) => {
alert('Location: ' + email + ' Time: ' + time1)
}
render(){
return (
<View style = {styles.container}>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Location"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handleEmail}/>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Time"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handlePassword}/>
<TouchableOpacity
style = {styles.submitButton}
onPress = { () => this.login(this.state.email, this.state.password)}>
<Text style = {styles.submitButtonText}>
Submit
</Text>
</TouchableOpacity>
</View>
)
}
}
export default Inputs
const styles = StyleSheet.create({
container: {
paddingTop: 200
},
input: {
margin: 15,
height: 40,
borderColor: '#7a42f4',
borderWidth: 1
},
submitButton: {
backgroundColor: '#7a42f4',
padding: 10,
margin: 15,
height: 40,
},
submitButtonText:{
color: 'white'
}
})

You could use module.exports in this case to export an object with two methods. Usage:
export function Home1() {
return (
<Style/>
);
};
export function Home2() {
return (
<Inputs/>
);
};
This is part of your file called App.js, so in order to import it in another file you need to:
import { Home1, Home2 } from "./App.js"
In this case you are using named export. In order to import it properly you explicitly need to use import { Home1, Home2 } with Home1 and Home2 being corresponding names of exported functions.

You can have just one default export and as many exports as you need:
const Home1 = () => {
return <Style/>
}
export const Home2 = () => {
return <Inputs />
}
export default Home1;
And then import it like this:
import Home1, {Home2} from './App'

You can export const, but only one default const.
import React from 'react';
export const myCon1 = (
// your code goes here
);
export const myCon2 = (
// your code goes here
);
in Other side you can import
import { myCon1 , myCon2} from '/path_to_file';

Create a component like the code that is shown below, which works, and shows both the Style.js and the Inputs.js files in the app:
import React, {Component} from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import Style from './Style.js';
import Inputs from './Inputs.js';
export default class App extends Component {
render() {
return (
<View>
<Style/> // here, both the Style and Inputs files can be used
<Inputs/>
</View>
)
}
}