I am making an app which contains a notes field which needs to keep its input after the screen changes, but it always resets after you leave the page. Here is my constructor for the state:
this.state = {text: ""};
And my textinput declaration:
<TextInput
style={{
height: 200,
width: 250,
fontSize: 15,
backgroundColor: 'white',
}}
editable = {true}
multiline = {true}
numberofLines = {4}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
I've been trying to find a way to set the state to a variable that doesn't get reinitialized on opening the page up but have no luck so far. Any advice would be appreciated!
Use AsyncStorage to persist the input value. For eg:
<TextInput
style={{
height: 200,
width: 250,
fontSize: 15,
backgroundColor: 'white',
}}
editable = {true}
multiline = {true}
numberofLines = {4}
onChangeText={(text) => {
this.setState({text});
AsyncStorage.setItem('inputKey', text); // Note: persist input
}}
value={this.state.text}
/>
Then inside componentDidMount you can check for the value and update state accordingly to reinitialise with old value.
componentDidMount() {
AsyncStorage.getItem('inputKey').then((value) => {
if (value !== null){
// saved input is available
this.setState({ text: value }); // Note: update state with last entered value
}
}).done();
}
It's because when you leave the page in certain type of navigation you trigger the "componentUnmount" and it get destroy and rebuild when you come back.
You have to store your data away from your component class. In an other class for example. A class with only one instance
...
let instance = null;
class OtherClass {
constructor() {
if(instance) {
return instance;
}
instance = this;
}
...
}
So when your user make an input save the content in that "OtherClass" and then each time you rebuild your parent component, you set the value with data previously store here.
Each time you initialize that class the content wont be erase because it will always take the previous instance.
Hope it help !
Related
I'm having trouble with onSubmitEditing firing with every button press of my input keyboard AND when the current page first loads (that part is especially puzzling). The TextInput code is as follows:
const TimerInput = () => {
const [ value, onChangeText ] = React.useState('');
return (
<TextInput
style={{
backgroundColor: ColorScheme.Orange.e,
borderRadius: 10,
borderWidth: 0,
fontSize: 25,
height: 60,
textAlign: 'center',
shadowColor: 'gray',
shadowRadius: 10,
width: '80%',
}}
keyboardType = 'number-pad'
onSubmitEditing = {FormatTime(value)}
onChangeText = { text => onChangeText(text) }
placeholder = { ' Hours : Minutes : Seconds ' }
returnKeyType = 'done'
value = {value}
/>
);
}
The FormatTime function simply writes to the console at the moment while I've been trying to figure this out:
FormatTime = () => {
return (
console.log('test')
);
}
The behavior I'm hoping to achieve is for this to run FormatTime only when the "Done" button is pressed to close the input keyboard. I will be completely honest in that I'm not fully certain how the TextInput is working (i.e. I'm so confused about the difference between the "value" and "text"), so I'm probably missing something obvious here. Thanks so much for your help.
Cause with every button-press (and when the page is first-loaded), there's a re-render ... with your code, it executes FormatTime .. .but it supposed to bind FormatTime as a handler for onSubmitEditing event
This way you pass a handler not a function call
onSubmitEditing = {() => FormatTime(value)}
I'm trying to make buttons out of react native FlatList items, that means when I click on them they change color.
This is the function that gets rendered by the renderItem prop:
renderRows(item, index) {
return (
<TouchableOpacity
key={index}
style={[styles.item, this.calculatedSize()]}
onPress={() => this.onPressImage(index)}
>
<Image
style={[styles.picture]}
source={{ uri: item.uri }}
/>
<View
style={[
styles.imageTextContainer,
{
backgroundColor:
_.indexOf(this.active, index) === -1
? 'rgba(0,0,0,0.2)'
: 'rgba(26, 211, 132, 0.7)',
},
]}
>
<Text style={styles.imageText}>{item.title}</Text>
</View>
</TouchableOpacity>
)
}
oh yeah and im using loadash to get the index.
The function "onPressImage(index)" works fine, in "this.active" (array) I always have the positions(integer) of the elements I would like to change color,
however nothing happens, the only thing you can see is the response by the touchableOpacity. What am I doing wrong ?
Like Andrew said, you need to trigger a re-render, usually by updating state.
However, if the items don't depend on anything outside the FlatList, I would recommend creating a component (preferably a PureComponent if possible) for the items themselves, and updating their state upon press. This way it will only re-render each list item individually if there is a change instead of the parent component.
Thanks, updating the state was a little bit difficult, the items array I've used has been declared outside the class component, thus only using an "active" array with indices that should change color in the state wasn't enough, I had to map the items array in the state like so:
state = {
items: items.map(e => ({
...e,
active: false,
}))
}
then I could manipulate the active state of the element I wanted to change color like this:
onPressItem(index) {
const { items } = this.state
const newItems = [...this.state.items]
if (items[index].active) {
newItems[index].active = false
} else {
newItems[index].active = true
}
this.setState({ items: newItems })
}
and change the color like so:
style={{
backgroundColor: item.active
? 'rgba(26, 211, 132, 0.7)'
: 'rgba(0,0,0,0.2)',
}}
I am trying to build a lunch picker app that allows user to add their own menu. I want to save user data into array by using AsyncStorage. However, my value returns nothing even though the array has values. Below is my code.
//Main screen
class HomeScreen extends React.Component {
//initial
constructor(props) {
super(props);
this.state = {
isReady: false,
myMenu: '????',
menutext: '',
randomArray: ['a', 'b', 'c'],
visibility: false,
};
}
_loadMenu = async () => {
try{
const loadMenu = await AsyncStorage.getItem("menuInStorage")
const parsedLoadMenu = JSON.parse(loadMenu)
const myReturn = [...this.state.randomArray, parsedLoadMenu]
this.setState({randomArray: myReturn})
}
catch(err){
alert(err)
}
}
//get input from textinput field and add to array
addMenu = newMenu => {
//...
this._saveMenu(this.state.randomArray)
};
_saveMenu = (saving) => {
const saveMenu = AsyncStorage.setItem("menuInStorage", JSON.stringify(saving))
}
//control modal
setModalVisibility(visible) {
this.setState({visibility: visible});
}
//UI
render() {
return (
<View style={styles.mainContainer}>
<View style={[styles.container, {flexDirection: 'row', justifyContent: 'center'}]}>
<TextInput
style={{ height: 40, fontSize: 20, paddingLeft: 15, textAlign: 'left', width: 250, borderBottomColor: '#D1D1D1', borderBottomWidth: 1 }}
placeholder=".."
onChangeText={menutext => this.setState({ menutext })}
value={this.state.menutext}
/>
<Button
title=".."
onPress={() => this.addMenu(this.state.menutext)}
buttonStyle={{width:100}}
backgroundColor="#2E282A"
/>
</View>
<Text>{'\n'}</Text>
<Button
onPress={() => this.setModalVisibility(true)}
title=".."
buttonStyle={{width: 150}}
backgroundColor="#2E282A"
/>
</View>
<Modal
onRequestClose={() => this.setState({ visibility: false })}
animationType={'slide'}
transparent={false}
visible={this.state.visibility}
>
<View style={[styles.modalContainer, {marginBottom: 100}]}>
<Text style={[styles.text, { fontWeight: 'bold', padding: 20, backgroundColor: '#9090DA', borderBottomColor: '#5C5C8B',
borderBottomWidth: 1,}]}>
{'<'}List will be here{'>'}
</Text>
<ScrollView style={{height: "94%"}}>
<View style={styles.row}>{this.state.randomArray}</View>
</ScrollView>
<Button
buttonStyle={{justifyContent: 'center', marginTop: 5}}
backgroundColor="#2E282A"
onPress={() => this.setModalVisibility(!this.state.visibility)}
title="Close"
/>
</View>
</Modal>
</View>
);
}
}
How the app supposed to work is, when user clicks a button, the modal shows all data in array called 'randomArray'. After user added their custom text, it should be added at the end of the randomArray. I want to save this data to the disk and load from the disk when the app is launched. At this moment, I can load array data, but it doesn't keep user data. My current code returns nothing. I need your help. Thanks.
It looks like the logic in _loadMenu is slightly incorrect on this line:
const myReturn = [...this.state.randomArray, parsedLoadMenu]
If I understand correctly, you're expecting parsedLoadMenu to be a value of type Array. The line above will basically append the value parsedLoadMenu to the resulting array stored in myReturn - in the case of your code, this will mean the last item of myReturn will be an array, which would be incorrect from what I see in your code. Consider updating this line as shown:
/*
Add ... before parsedLoadMenu to concatenate the two arrays in myReturn
*/
const myReturn = [...this.state.randomArray, ...parsedLoadMenu]
By adding the ... as shown, this causes the two arrays this.state.randomArray and parsedLoadMenu to be concatenated together in myReturn. It would also be worth checking the parse result from JSON.parse() to ensure that it is an array before attempting this concatenation:
_loadMenu = async () => {
try{
const loadMenu = await AsyncStorage.getItem("menuInStorage")
let parsedLoadMenu = JSON.parse(loadMenu)
/*
Consider an additional check here to ensure the loaded data is of
correct Array type before proceeding with concatenation
*/
if(!Array.isArray(parsedLoadMenu)) {
parsedLoadMenu = [];
}
/* Concatenate the two arrays and store result in component state */
const myReturn = [...this.state.randomArray, ...parsedLoadMenu]
this.setState({randomArray: myReturn})
}
catch(err){
alert(err)
}
}
Also, consider revising the addMenu logic, so that the entire array of menu items in your is persisted to AsyncStorage rather than the newly added menu item only, as you are currently doing:
addMenu = (newMenu) => {
/*
Persist current randomArray with newMenu item appended
*/
this._saveMenu([...this.state.randomArray, newMenu])
};
Hope this helps!
I have 2 react native components in my app, one is a toolbar that has a "Done" button, pressed when a user is done filling a form.
The other is the form itself from where I need to get the data.
When the user clicks "Done" I send a post request with the parameters, but I can't find a neat way to get the data.
What is best practice for this?
My toolbar:
<TopToolbar text='Upload new item'
navigator={this.props.navigator} state={this.state} donePage={'true'}/>
In the toolbar component I have the done button:
<TouchableHighlight style={styles.done} onPress={() =>{this.state.text=this.props.state.data.price}} underlayColor='#4b50f8'>
<Image source={require('./Images/Path 264.png')}/>
</TouchableHighlight>
and one of the text inputs is:
<TextInput placeholder='Price*' style={styles.text} onChangeText={(text) => { this.state.data.price = text }}></TextInput>
Use state. You need to bind the view to the model => (state). Please add your code for a better guide.
Each time that you press and new character need be saved in your state using onChangeText
Example:
class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
}
render() {
return (
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
}
When you press in Done button. The TextInput value will be stored in this.state.text
For more info: https://facebook.github.io/react-native/docs/textinput.html
I think your main problem is that you need to read more about the states in the react documentation
https://facebook.github.io/react-native/docs/state.html
When you needs set the state. You should use setState not this.state.data.price = text. The state is a object with multiple keys y your needs modify one internal key inside data you need modify all data key and replace it.
Example:
In your constructor declare
this.state = { data: {price: 10, name: xxxx} };
if need modify data you should do something like.
var dataM = this.state.data;
dataM.price = 200
this.setState({ data: dataM});
I'm trying to update a text input as it changes but it doesn't seem to work.
Here's my simplified example:
var Message = React.createClass({
getInitialState: function() {
return {textValue: ''};
},
render: function() {
return (
<View style={[styles.container]}>
<ProfilePicture userId={this.props.userId}/>
<TextInput
ref={component => this._textInput = component}
style={{flex: 8, paddingLeft: 5, fontSize: 15}}
onChangeText={this._handleChange}
//multiline={true}
defaultValue={""}
value={this.state.textValue}
returnKeyType={"send"}
blurOnSubmit={false}
autoFocus={true}
enablesReturnKeyAutomatically={true}
onSubmitEditing={this._onSubmit}
/>
</View>
);
},
_handleChange: function(text) {
this.setState({textValue: "foo"});
},
_onSubmit: function(event) {
this._clearText();
},
_clearText: function() {
this._textInput.setNativeProps({text: ''});
},
});
I'm expecting that as soon as someone enters in some text it gets automatically altered to read "foo" but this doesn't work.
Any ideas?
UPDATE
Plot thickens,
If I call the same function for onBlur it works but only when there is no text already in the text input. If I change the function to set the value using this._textInput.setNativeProps({text: 'foo'}); instead of this.setState({textValue: "foo"}); then it works both when the text input is empty and has data.
Example:
render: function() {
return (
<TextInput
ref={component => this._textInput = component}
style={{flex: 8, paddingLeft: 5, fontSize: 15}}
onChangeText={this._handleChange}
onBlur={this._handleChange}
//multiline={true}
defaultValue={""}
value={this.state.textValue}
returnKeyType={"send"}
blurOnSubmit={false}
autoFocus={true}
enablesReturnKeyAutomatically={true}
onSubmitEditing={this._onSubmit}
/>
);
},
_handleChange: function(text) {
// what to do here check if there are youtube videos?
this._textInput.setNativeProps({text: 'foo'});
}
So in the above the _handleChange works for onBlur but not for onChangeText. Weird right?
Not really an optimal solution but looking at the react native code for react-native v 0.17.0 it looks like any changes made to the component's value during onChange don't take affect.
The code has changed on HEAD and this could fix it. https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js#L542
To get around this you can wrap the code to reset the text inputs value in a setTimeout like this
var self = this;
setTimeout(function() {self._textInput.setNativeProps({text: newText}); }, 1);
This creates a new change outside of the current change event.
Like I said not an optimal solution but it works.
There is another issue that the cursor position needs to be updated if the new text is larger than the old text, this isn't available on master yet but there is a PR that looks like it is close to being merged. https://github.com/facebook/react-native/pull/2668
You need to bind your onChangeText to this. Without that in the _handleChange function "this" does not refer to the component and thus setState is not going to work the way you expect it to.
<TextInput
ref={component => this._textInput = component}
style={{flex: 8, paddingLeft: 5, fontSize: 15}}
onChangeText={this._handleChange.bind(this)} // <-- Notice the .bind(this)
//multiline={true}
defaultValue={""}
value={this.state.textValue}
returnKeyType={"send"}
blurOnSubmit={false}
autoFocus={true}
enablesReturnKeyAutomatically={true}
onSubmitEditing={this._onSubmit}
/>