react native passing value - javascript

I am new in React Native and I searched on Google but I only could find old version of React Native.
Actually, I am not sure how to pass state value to other js files
I am making Authpage that will redirect to tappage.js if the state value 'isValid' becomes 'true'
I am planning to change the page like this on App.js, if there are other better way, please let me know.
Thank you this is my code.
AuthManager.js
export default class AuthPage extends Component {
constructor(props) {
super(props);
this.state = {
user : null,
firebaseUser : null,
fcmToken : null,
accessToken : null,
authType : null,
hasInitialNotification : null,
isValid : false
};
this.unsubscribe = null;
}
...some codes..
render() {
// if (!this.state.firebaseUser) {
return (
<Provider store={store}>
<View style = {styles.main}>
<View style ={styles.logotemp}>
<Image style ={styles.logo}
source={require('../../resources/logo/logo.png')}
/>
</View>
<View style = {styles.inputid}>
<FormInput
ref={(el)=> {this.email = el;}}
textInputRef='email'
placeholder = "Email"
onChangeText={(email) => this.setState({email})}
value = {this.state.email}
/>
<FormInput
ref={(el)=> {this.password = el;}}
textInputRef='password'
onChangeText={(password) => this.setState({password})}
value = {this.state.password}
placeholder = "Password"
secureTextEntry = {true}
/>
<TouchableOpacity onPress={this._emailSignIn.bind(this)}>
<Image
style = {styles.loginbut}
source={require('../../resources/socialicon/signin.png')}
/>
</TouchableOpacity>
</View>
<View style = {styles.socialicons}>
<TouchableOpacity onPress={this._facebookSignIn.bind(this)} >
<Image
style={styles.fbicons}
source={require('../../resources/socialicon/facebook.png')}
/>
</TouchableOpacity>
<Image
style={styles.divider}
source = {require('../../resources/socialicon/divider.png')}
/>
<TouchableOpacity onPress={this._googleSignIn.bind(this)} >
<Image
style={styles.ggicons}
source={require('../../resources/socialicon/google.png')}
/>
</TouchableOpacity>
</View>
</View>
</Provider>
);
// }
if (this.state.firebaseUser) {
return(
<Provider store = {store}>
{store.isValid = this.state.isValid}
</Provider>
);
}
}
export default class MainPage extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
render() {
alert(store.isValid);
if(!this.props.isValid){
return(<View style={{flex:1}}>
<AuthPage></AuthPage>
</View>
);
}
if(isValid){
return(
<View style={{flex:1}}>
<TabPage></TabPage>
</View>
);
}
}
}
thank you!!

The idiom in React is that only the current element can know it's state.
I would highly recommend using Redux for the global data transfer between components, or, if you do not need data synced, you can use AsyncStorage.

Related

Get value from a TextInput component in react native

Dynamically generate a TextInput when you press a button but I can’t get the value that the user digits,try to use states but I can’t because it’s not with the other general textInputs but it’s imported as Field.
try to create a state in the component file and move it to the general view and print it to see if it works and not...is there any way to bring this state?
general view:
import Campo from './campoInput';
constructor(props){
super(props);
this.state={
Cbusto:"",
Ccintura:"",
Ccadera:"",
valueArray: []
};
this.addNewEle = false;
}
agregarCampo=()=>{
this.addNewEle = true;
const newlyAddedValue = { text: 'prueba'};
this.setState({
valueArray: [...this.state.valueArray, newlyAddedValue]
});
}
render(){
return(
------Here are the normal textInput-----
<View style={{ flex: 1, padding: 4 }}>
{this.state.valueArray.map((ele) => {
return <Campo item={ele} />;
})}
</View>
<View style={styles.flex}>
<View style={styles.ButtonAdd}>
<Button
title="Add input"
color="#B13682"
onPress={this.agregarCampo}
></Button>
</View>
)
}
Component:
constructor(props){
super(props);
this.state={
info:""
};
}
render(){
return(
<View>
<Text>pruba:{this.props.item.text}</Text>
<View style={styles.input}>
<TextInput onChangeText={(text) => this.setState({info:text})}></TextInput>
</View>
</View>
)
}
can be solved by adding the onChangeText event to the Field component in the overview and in the same way in the TextInput of the component being imported, using props status
General view:
<View style={{ flex: 1, padding: 4 }}>
{this.state.valueArray.map((ele) => {
return <Campo item={ele}
onChangeText={(text) => this.setState({ info: text })}
/>;
})}
</View>
Component
<View>
<Text>pruba:{this.props.item.text}</Text>
<View style={styles.input}>
<TextInput onChangeText={this.props.onChangeText}></TextInput>
</View>
</View>

Custom Radio Button React Native

Hey there so i'm new to react native and javascript and currently i'm learning to make a custom radio button with images it looks like this my custom radio button in this page user is going to pick one button from the list, and i want to make it when the page first render it will show one pressed button and user is only allowed to pick one button. Can anyone tell me how to figure this out? Thanks in advance
here are my codes
RadioButton.js
export default class RadioButton extends Component {
constructor(props) {
super(props);
this.state = {
selected: this.props.currentSelection === this.props.value,
}
}
button() {
var imgSource = this.state.selected? this.props.normalImg : this.props.selectedImg;
return (
<Image
source={ imgSource }
/>
);
}
render() {
let activeButton = this.props.activeStyle ? this.props.activeStyle : styles.activeButton;
return (
<View style={[styles.container, this.props.containerStyle, this.state.selected || this.props.normalImg ? activeButton : inactiveButton]}>
<TouchableOpacity onPress={() => {
this.setState({ selected: !this.state.selected });
}}>
{
this.button()
}
</TouchableOpacity>
</View>
);
}
}
ActivityLog.js
class ActivityLog extends Component {
constructor(props){
super(props);
}
render() {
return (
<View style={styles.innerContainer}>
<Text style={styles.dialogText}>{`Log my activity at ${time} as...`}</Text>
<View style={styles.buttonContainer}>
<RadioButton selectedImg={img.activity.breakA} normalImg={img.activity.break} containerStyle={{marginHorizontal: normalize(10)}}/>
<RadioButton selectedImg={img.activity.meetingA} normalImg={img.activity.meeting} containerStyle={{marginHorizontal: normalize(10)}}/>
</View>
<View style={styles.buttonContainer}>
<RadioButton selectedImg={img.activity.otwA} normalImg={img.activity.otw} containerStyle={{marginHorizontal: normalize(10)}}/>
<RadioButton selectedImg={img.activity.officeA} normalImg={img.activity.office} containerStyle={{marginHorizontal: normalize(10)}}/>
</View>
);
}
}
Extract the activeStatus to ActivityLog so as to track which button is selected,right now you are maintaing a state for every button as a local state.So it is difficult to know other components to know about the button's active status.
Here is a generic implementation for rough idea.
const Child=(props)=>{
<TouchableOpacity onPress={props.handlePress}>
<Text style={[baseStyle,active && activeStyle]}>{props.title}</Text>
</TouchableOpacity>
}
class Parent extends React.Component{
state={
selectedChild:''
}
changeSelection=(sometitle)=>{
this.setState({
selectedChild:sometitle
})
}
render(){
return(
<View>
<Child handlePress={()=>this.changeSelection('1')} active={this.state.selectedChild==='1'}/>
<Child handlePress={()=>this.changeSelection('2')} active={this.state.selectedChild==='2'}/>
<Child handlePress={()=>this.changeSelection('3')} active={this.state.selectedChild==='3'}/>
<Child handlePress={()=>this.changeSelection('4')} active={this.state.selectedChild==='4'}/>
</View>
)
}
}
Expo demo Link

React-Native: Access TextField value in another class

As an iOS dev I'm struggling a bit with react native.
I have two components inside different classes:
Component A is a view with a TextInput
class A extends Component<Props>{
state = {
textFieldValue: ""
};
render() {
return (
<View>
<TextInput placeholder={this.props.placeholderText}
ref={textField => {
this.textField = textField;
}}
value={this.state.textFieldValue}
onChange={e => this.setState({ textFieldValue: e.target.value})}/>
</View>
);}
}
Component B uses A in it's view
class B extends Component<Props>{
render() {
return (
<View>
<A placeholder={"test"}/>
<TouchableOpacity onPress={() => {
//show text of input A here
}}>
<View>
<Text>{text}</Text>
</View>
</TouchableOpacity>
</View>
);}
}
How can I access the value/state with the value of the TextInput in A from B to show it on the button press?
Try this on Class B
class B extends Component<Props>{
render() {
return (
<View>
<A placeholder={"test"} ref={c => this.textRef = c}/>
<TouchableOpacity onPress={() => {
//show text of input A here
alert(this.textRef.state.textFieldValue)
}}>
<View>
<Text>{text}</Text>
</View>
</TouchableOpacity>
</View>
);}
}
Access reference of class A through ref props, then get its own state.

Render on TextInput Submit - React Native

In a a react native app I have some text and then a textinput rendered on the screen. I'm trying to figure out how to output the same text and the same textinput when I submit on in the original text field. I was thinking to do this recursively but I'm not sure how where and how implement the function to do so.
If it's in the same screen, than you can use local state. here's the example
class TestScreen extends Component {
constructor(props) {
super(props)
this. state = {
firstInput:'First Input',
secondInput:''
}
this.submit = this.submit.bind(this)
}
submit(){
this.setState({ secondInput: this.state.firstInput })
}
render() {
return (
<View style={{flex:1,marginTop:40}}>
<View>
<Text>Text Input #1</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text)=> this.setState({firstText:text})}
value={this.state.firstInput}
/>
<Button
onPress={this.submit}
title="Submit"
/>
</View>
<View style={{marginTop:20}}>
<Text>Text Input #1</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
value={this.state.secondInput}
/>
</View>
</View>
);
}
}
I hope that help. Thanks
Perhap you can use ref,state,conditional rendering. let's code talk
const MyInputs = (props) => {
inputs =props.inputs
result=inputs.map(function(value,index){
return(
<TextInput key={index} style={styles.input} value={value} />
)
})
return(
<View>
{result}
</View>
)
}
class TestScreen extends Component {
constructor(props) {
super(props)
this. state = {
inputs:[]
}
this.submit = this.submit.bind(this)
this.clearText = this.clearText.bind(this)
}
submit(){
let lastInput=this._textInput._lastNativeText
let inputs=this.state.inputs
this._textInput.setNativeProps({text: ''});
inputs.push(lastInput)
this.setState({
inputs:inputs
})
}
clearText = () => {
this.setState({
inputCount: this.state.inputCount + 1,
})
this._textInput.setNativeProps({text: ''});
}
render() {
return (
<View style={{flex:1,marginTop:40}}>
<View>
<Text>Text Input #1</Text>
<TextInput
style={styles.input}
ref={component => this._textInput = component}
/>
<Button onPress={this.submit} title="Submit"
/>
</View>
<MyInputs inputs={this.state.inputs}/>
</View>
);
}
}

onPress change fragment view

I am using react-native and i have a NavigationDrawer.When i press ListItem i change the page. What i want to do now is to change only half of page's view depending on what user presses.
export default class Some extends Component {
render() {
return (
<View style={styles.View1}>
<View style={styles.hed}>
<View style={styles.imageview}>
<Image style={styles.img} source={require('../images/logo3.png')} />
</View>
</View>
<View style={styles.View2}>
<Page2/>
</View>
</View>
);
}
}
So what i want is depending onPress change to Page 3, Page4.. BUT the first view to stay constant.
You can switch the pages with a logic like this:
export default class Some extends Component {
constructor() {
// You define the first page seen
this.state = { currentPage: 1 };
}
onPress = () => {
// Here your logic to choose the page with:
this.setState({ currentPage: ... });
}
render() {
// All of your pages
const pages = {
1: <Page1 />,
2: <Page2 />,
3: <Page3 />,
};
const { currentPage } = this.state;
return (
<View style={styles.View1}>
<View style={styles.hed}>
<View style={styles.imageview}>
<Image style={styles.img} source={require('../images/logo3.png')} />
</View>
</View>
<View style={styles.View2}>
{/* Display the selected page */}
{pages[currentPage]}
</View>
</View>
);
}
}

Categories