React-Native returning view from AsyncStorage

Question

I'm trying to render card list from AsyncStorage. What i want to do is get all data from storage and create card list depending on this data. I can see storage data inside function but i cannot return view. Here's what i did.

import {View,AsyncStorage} from "react-native";
import { Container, Header, Content, Card, CardItem, Text, Body, Icon, Fab } 
from "native-base";


export default class extends Component{

 async _retrieveData(){
    const value = await AsyncStorage.getAllKeys();
    return value;
 };

 getAll(){
   this._retrieveData()
     .then(items =>{
       items.map(async (k) => {
         await AsyncStorage.getItem(k).then(ok => {

           var cards = [];

             cards.push(

               <Card key="">
                 <CardItem>
                   <Body>
                     <Text>
                       ok data
                     </Text>
                   </Body>
                 </CardItem>
               </Card>

             )
           return cards;

         });
       });

     })
     .catch(err =>{
       alert(err);
     });
   };


   render(){

       return(
         <Container>
           <Content padder>
           {this.getAll()}
           </Content>
         </Container>
       )
   }
}

Luka Dumančić · Accepted Answer · 2021-05-20 09:11:15Z

2

You can't call getAll function inside render method because it needs promise to be resolved.

You can call the same function inside componenDidMount method, save cards to local state and then render that data inside render method.

edited May 20, 2021 at 9:11

answered Feb 10, 2019 at 10:05

Luka Dumančić

1261 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Native returning view from AsyncStorage

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related