CODEWITHSUNDEEP
javascriptandroidiosreact-native
Tanjil Pranto
Tanjil Pranto

Reputation: 29

How can I store the value of TextInput to local storage and get them when the app starts in react native?

I'm making a to-do list app. I need to store the input value locally or somewhere so that I can show them in the app even if the app is opened after closing once. Now when I'm closing the app and restarting all the previous values is being vanished. But I want to keep the previous data and If new data is given that will also be stored if I don't delete that manually. How can I solve this problem? I'm using expo. Here is my code:

import React, { useState } from 'react';
import { View, Text, StyleSheet, Button, FlatList, TouchableOpacity, TextInput, ScrollView } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'
import Line from './Line';

function App() {

  //storing data in array
  const [initialElements, changeEl] = useState([

  ]);

  const [value, setValue] = useState('')
  const [idx, incr] = useState(1);
  const [exampleState, setExampleState] = useState(initialElements);

  //add button
  const addElement = () => {
    if (value != '') {
      var newArray = [...initialElements, { id: idx, title: value }];
      incr(idx + 1);
      setExampleState(newArray);
      changeEl(newArray);

    }

  }

  //delete button
  const delElement = (id) => {

    let newArray = initialElements.filter(function (item) {
      return item.id !== id
    })
    setExampleState(newArray);
    changeEl(newArray);
  }


  //showing item
  const Item = ({ title, id }) => (
    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
      <View style={{ borderWidth: 2, margin: 5, flex: 1, padding: 10, borderRadius: 10 }}>
        <TouchableOpacity onPress={() => { alert(title) }}>
          <Text >{title}</Text>
        </TouchableOpacity>
      </View>
      <TouchableOpacity onPress={() => delElement(id)}>
        <MaterialIcons name='delete' size={24} />
      </TouchableOpacity>
    </View>
  );

  //calling item for render
  const renderItem = ({ item }) => {
   
<Item title={item.title} id={item.id} />

  }
    


  return (    

    <View style={styles.container}>

      <View style={{ alignItems: 'center', marginBottom: 10 }}>
        <Text style={{ fontSize: 20, fontWeight: '500' }}>  To <Text style={{ color: 'skyblue', fontWeight: '900' }}>Do</Text> List</Text>
        <Line />
      </View>

      <View>
        <TextInput onChangeText={text => setValue(text)} placeholder="Enter to Todo" style={{ borderWidth: 2, borderRadius: 10, backgroundColor: 'skyblue', height: 40, paddingLeft: 10, borderColor: 'black' }}></TextInput>
      </View>


      <View style={{ alignItems: 'center' }}>
        <TouchableOpacity onPress={() => addElement()} style={{ marginTop: 10 }}>
          <View style={{ backgroundColor: 'black', width: 70, height: 40, justifyContent: 'center', borderRadius: 10 }}>
            <Text style={{ color: 'white', textAlign: 'center' }}>Add</Text>
          </View>
        </TouchableOpacity>
      </View>

      <FlatList
        style={{ borderWidth: 2, padding: 10, flex: 1, backgroundColor: '#EEDDD0', marginTop: 10 }}
        data={exampleState}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()
        }

      />
    </View>
  );
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    margin: 5,
  }
})

export default App;

Upvotes: 0

Views: 1401

Answers (1)

Punit Jain
Punit Jain

Reputation: 24

React Native provides a local storage option called AsyncStorage. You might use asyncstorage to save the data locally on the device and get that data inside useEffect() hook on startup.

You can find more about AsyncStorage here.

Although this is deprecated and now community package " @react-native-async-storage/async-storage " is used. The implementation remains the same.

Upvotes: 1

Related Questions