export const Focus = ({addSubject})=>{
const [tempValue, setTempValue] = useState(null);
return(
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}> What are you going to focus on....?</Text>
<View style={styles.inputcontainer}>
<TextInput style ={{flex:1, marginRight:10}}
onSubmitEditing ={
({nativeEvent}) => {
setTempValue(nativeEvent.text+'0000')
}
}
/>
<RoundedButton title ='+' onPress={
addSubject(tempValue)
}/>
</View>
</View>
</View>
);
}
Just after entering data, once hit the 'return' it submit entered "text+0000"
but once replace with
<RoundedButton title ='+' onPress={
()=>{ addSubject(tempValue)}
}/>
on press is not working
*** I'm testing this on on Expo web
What is the reason for this behavior and what is the solution to make it work once press the button.
Try without braces, then only it will return the addSubject function
<RoundedButton
title ='+'
onPress={()=> addSubject(tempValue)}
/>
Related
I am making an android app with ReactNative. When a button is clicked, an alert shows up with the result (My code is Alert.alert(''Results:", returnResults(a,b,c)). Is there a way I can use Modal and the function returnResults(a,b,c) with it to show the message in a more customised way?
The problem is that when I use normal alert, the text is different on every device and I want to prevent that.(I want to specify the font, its size etc)
const Modal = () => {
const [modal, setModal] = useState(false);
return (
<View>
<Button title="Open Modal" onPress={() => setModal(true)} />
<Modal
animationType="slide"
transparent={false}
visible={modal}
onRequestClose={() => setModal(false)}
>
<View style={{ marginTop: 22 }}>
<View>
<Text>This is the modal content</Text>
<Button title="Close" onPress={() => setModal(false)} />
</View>
</View>
</Modal>
</View>
);
};
I actually found what i had been looking for. I just had to write the following code:
{returnResults(a,b,c)}
I'm making an app with expo react native, and I made a collapse that shows profile information about all users on my SQLite database.
I added a button (touchableopacity) inside the collapse and my idea is to edit information in the input where I'm showing information, but i don't know how to link the button press to the profile where is being touched.
so my code is as follows (i deleted styles to make it cleaner to see):
render(){
const miLista = this.state.datos.map((item) => //this is "list" and it works(show information of each profile and shows the button of each profile when i open the collapse of each on of them)
<ScrollView style={styles.container}>
<Collapse>
<CollapseHeader>
<Text>{item.id} {item.nombre}</Text> //here shows id and name (from sqlite data)
</CollapseHeader>
<CollapseBody >
<View key={item.id} >
<Text >Nombre</Text>
<TextInput
value={item.nombre}
onChangeText={(val) => this.setState({ nombre: val})}/>
<Text style=>Rut</Text>
<TextInput
value={item.rutPersona}
onChangeText={(val) => this.setState({ rutPersona: val})}/>
<Text >Clave</Text>
<TextInput
value={item.clave}
onChangeText={(val) => this.setState({ clave: val})}/>
{this.boton(item.id)}
</View>
</CollapseBody>
</Collapse>
</ScrollView>
);
return(
<View >
<SafeAreaView >
<TouchableOpacity
onPress={() => this.props.navigation.openDrawer()}>
<FontAwesome5 name="bars" size={24} color="#161924"/>
</TouchableOpacity>
</SafeAreaView>
<Text>Perfiles</Text>
<ScrollView>
{miLista}
</ScrollView>
</View>
);
};
so i needed to add .bind to the onpress of my button and pass the data: like this
boton(id,nombre,rutPersona,clave){
return(
<TouchableOpacity
key={id}
style={styles.boton}
onPress={this.funcionBoton.bind(this,nombre,rutPersona,clave,id)}
>
<Text>SAVE </Text>
</TouchableOpacity>
);
};
I have an array with values i want to present and then if the user press the edit button the presentation is changed to a list of TextInput components. When done editing the user can press Save or Cancel. If Cancel is pressed the values in the textInput fields should not be saved to the original array of values.
My problem is that even when pressing Cancel the data in the original array seems to be updated.
This is the code:
`
const handlePress = (text, index) => {
const newSchedule = [...scheduleTempState]
newSchedule[index].value = text
setScheduleTempState(newSchedule)
}
const handlePress2 =()=>{
setScheduleTempState([]);
console.log("handlepress2")
setEdit(false)
}
const handlePress3 =()=>{
setScheduleTempState(scheduleState);
console.log("handlepress3")
setEdit(true)
}
return (
edit
?
<View style={styles.scheduleRow}>
<View style={styles.buttonView}>
<TouchableOpacity onPress = { ()=>{saveSchedule(projectId,scheduleState);updateClient() ;setEdit(false)}} >
<MaterialIcons name="save" size={16} color="green" />
</TouchableOpacity>
<TouchableOpacity onPress = { ()=>{handlePress2()}} >
<MaterialIcons name="cancel" size={16} color="red" />
</TouchableOpacity>
</View>
<View>
<FlatList
horizontal = {true}
data={scheduleTempState}
keyExtractor={item => item.id}
renderItem={({item, index}) => {
return (
<View style={styles.decimalInputView}>
<TextInput
style={styles.cellInput}
onChangeText={(text) => {handlePress(text, index)}}
value = {item.value} />
</View>
)
}}
/>
</View>
</View>
:
<View style={styles.scheduleRow}>
<View style={styles.buttonView}>
<TouchableOpacity onPress = { ()=>handlePress3()} >
<MaterialIcons name="edit" size={14} color="black" />
</TouchableOpacity>
</View>
<View >
<FlatList
horizontal={true}
data={scheduleState}
renderItem={renderScheduleItem}
keyExtractor={item => item.id}
/>
</View>
</View>
);
}`
I guess my problem has something to do with states not being updated, but i can not see how the edited values can be saved when i press cancel.
Problem:
You are updating the scheduleTempState by referencing your scheduleState. So when you mutate scheduleTempState, it also mutates the scheduleState.
Solution: Please use spread operator to scheduleState which can help to create a new copy of a reference.
const handlePress3 =()=>{
setScheduleTempState([...scheduleState]);
...
}
Suggestion: It would be better to use explanatory names for function. It will make the code more readable. For example:
onChangeText() instead of handlepress()
onCancelEditing() instead of handlepress2()
onEdit instead of handlepress3()
Hope you will get the idea.
can someone help me? so I'm trying to pass data from add balance components to home but I keep getting an error saying that the object is undefined. I just wanted to update the current balance which is displayed on the home screen if the user adds balance to their accounts.
function Home({ props, navigation }){
return (
<View style={styles.container}>
<Text style={{fontSize:30, paddingVertical:150, fontWeight:'bold'}}>Current Balance:
{props.money} </Text>
<TouchableOpacity style={styles.btnLogin1} onPress=
{()=>navigation.navigate("AddBalance")}>
<Text style={styles.btnLogin}>Add Balance</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btnLogin1} onPress=
{()=>navigation.navigate("Withdraw")}>
<Text style={styles.btnLogin}>Withdraw</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btnLogin1} onPress=
{()=>navigation.navigate("ViewCode")}>
<Text style={styles.btnLogin}>View Code To Pay</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Login")}>
<Text style={styles.btnLogin}>Logout</Text>
</TouchableOpacity>
</View>
);
}
const MyFunction = () => Alert.alert('Amount Added Successfully');
function AddBalance({ navigation }){
const[balance, newBalance] = useState(0)
const[amount, setAmount] = useState()
function addTogether(){
const Total = balance + amount;
newBalance(Total);
MyFunction();
}
return (
<View style={styles.container}>
<Text style={{fontSize:30, paddingVertical:20, fontWeight:'bold'}}>Add Balance</Text>
<TextInput style={styles.inputBox} placeholder="Enter Amount" keyboardType={'numeric'} onChangeText={(text) => setAmount(Number.parseInt(text))}></TextInput>
<TouchableOpacity style={styles.btnLogin1} onPress ={addTogether}>
<Text style={styles.btnLogin}>Continue</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Home")}>
<Text style={styles.btnLogin}>Back</Text>
</TouchableOpacity>
<Home money = {balance}/>
</View>
);
}
Replace your Home function's parameters
function Home({ props, navigation }){...} //this
With
function Home(props){...}
Then, you can navigate with that props like props.navigation.navigate, so also replace navigation.navigate with props.navigation.navigate everywhere.
Hope this works for you.
I found example code on a facebook React Native page which shows how to use setNativeProp to clear text on a click but I can't see how to do it with multiple text boxes. Here is the code:
var App = React.createClass({
clearText() {
this._textInput.setNativeProps({text: ''});
},
render() {
return (
<View style={styles.container}>
<TextInput ref={component => this._textInput = component}
style={styles.textInput} />
<TouchableOpacity onPress={this.clearText}>
<Text>Clear text</Text>
</TouchableOpacity>
</View>
);
}
});
The ref seems to be fixed in the function so will always target the same TextInput box. How can I alter the function to target any TextInput box I indicate?
This should work. Notice that the ref on the TextInput needs to be the one you call from the clearText functino.
var App = React.createClass({
clearText(fieldName) {
this.refs[fieldName].setNativeProps({text: ''});
},
render() {
return (
<View style={styles.container}>
<TextInput ref={'textInput1'} style={styles.textInput} />
<TouchableOpacity onPress={() => this.clearText('textInput1')}>
<Text>Clear text</Text>
</TouchableOpacity>
<TextInput ref={'textInput2'} style={styles.textInput} />
<TouchableOpacity onPress={() => this.clearText('textInput2')}>
<Text>Clear text</Text>
</TouchableOpacity>
</View>
);
}
});
Updated my answer to clear different fields.
You can also use something like this to clear the text of TextInput.
clearText(fieldName) {
this.refs[fieldName].clear(0);
},