I have an array list saved in asyncstorage with key 'list' My goal is that i need them to be rendered as picker. Items How can i do this? - react-native

Question

export default class Incomel extends Component {
state = {
isEdit: null,
list: [],
isLoading: false,
editText: '',
};
componentDidMount = () => {
this.setState({ isLoading: true });
// AsyncStorage.removeItem('list')
AsyncStorage.getItem('list')
.then(list => {
if (list) {
this.setState({ list: JSON.parse(list), isLoading: false });
} else {
this.setState({ list: [], isLoading: false });
}
})
.catch(err => {
this.setState({ isLoading: false });
});
};
add = () => {
let list = this.state.list;
list.push('');
this.setState({ list: list });
this.saveToStorage();
this.setEdit(list.length - 1);
};
setEdit = index => {
if (this.state.isEdit !== index) {
this.setState({ isEdit: index, editText: this.state.list[index] });
}
};
setList = (text, index) => {
let list = this.state.list;
list[index] = text;
this.setState({ list: list, isEdit: null, editText: '' });
this.saveToStorage();
};
saveToStorage = () => {
let data = JSON.stringify(this.state.list);
AsyncStorage.setItem('list', data);
};
deleteItem = index => {
let list = this.state.list;
list.splice(index, 1);
this.setState({ list: list });
this.saveToStorage();
};
render() {
return (
<ScrollView style={style.container}>
<View style={style.header}>
<Text style={style.headerText}>Incomes</Text>
<Image style={{ width: 50, height: 50 }} source={require('../android/assets/1322767.png')} />
</View>
{this.state.isLoading ? (
<ActivityIndicator color="#d28888" size="large" />
) : (
<View style={style.body}>
{this.state.list.map((item, key) => (
<React.Fragment>
{this.state.isEdit === null || this.state.isEdit !== key ? (
<TouchableOpacity
style={style.item}
activeOpacity={0.5}
onLongPress={() => this.setEdit(key)}>
<Text style={style.itemText}>{item}</Text>
<TouchableOpacity
style={style.itemDelete}
onPress={() => this.deleteItem(key)}>
<Image style={{ width: 30, height: 30 }} source={require('../android/assets/delete-icon.png')} />
</TouchableOpacity>
</TouchableOpacity>
) : null}
{this.state.isEdit !== null ? (
key == this.state.isEdit ? (
<TextInput
style={style.itemInput}
onBlur={() => this.setList(this.state.editText, key)}
onSubmitEditing={() =>
this.setList(this.state.editText, key)
}
value={this.state.editText}
autoFocus
onChangeText={editText => this.setState({ editText })}
/>
) : null
) : null}
</React.Fragment>
))}
<TouchableOpacity style={style.btnAdd} onPress={() => this.add()}>
<Image style={{ width: 50, height: 50 }} source={require('../android/assets/add-icon.png')} />
</TouchableOpacity>
</View>
)}
</ScrollView>
);
}
}