React Native Save Response

Question

I am learning to code using react native and using it to interact with GitHub API. I use the code below to get the data of all my notifications.

Firstly, it is not sending the fetch call after loading the Asyncstorage username and password. It is returning an authentication required message. Am I doing something wrong with Asyncstorage? It worked just fine when I used it in a different page except that did not fetch as on componentDidMount but only during button presses.

I bypassed the authentication temporarily by hard coding my username and password and that brings me to the second issue. I am not able to use the notidata I save to state. What am I doing wrong and how can I use save it properly.

Finally, how can I use the saved response with a Flatlist to display all the notification titles? I haven't been able to save the array/dictionary to pass to the Flatlist so I am not sure how to do it. Can I just pass in the saved array like below:

<FlatList
    data={this.state.notidata}
    renderItem={this._renderItem}
  />

_renderItem = ({item}) => {
return (
  <TouchableHighlight
    underlayColor='#dddddd'>
    <View>
      <Text>{item.id}</Text>
    </View>
  </TouchableHighlight>
);
};

The Actual code is

constructor() {
super();
this.state = {
    notidata: [],
    mainusername: '',
    mainpassword: '',
    showdone: '',
  };
}

componentDidMount () {
    let base64 = require('base-64');
    AsyncStorage.getItem("mainusername").then((value) => {
    this.setState({mainusername: value});
    })
    .then(
    AsyncStorage.getItem("mainpassword").then((value) => {
    this.setState({mainpassword: value});
    }).done())
    .then(
    fetch("https://api.github.com/notifications",{
      method: "GET",
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + base64.encode(this.state.mainusername + ':' + this.state.mainpassword),
      },
    })
    .then((response) =>  this.setState({
    notidata: response,
    })));
}

Answer 1

No need to store mainusername and mainpassword into the state, you can make use of closure property. Consider following snippet.

let base64 = require('base-64');
AsyncStorage.getItem('mainusername').then(username => {
  AsyncStorage.getItem('mainpassword').then(password => {
    fetch("https://api.github.com/notifications",{
      method: "GET",
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + base64.encode(username + ':' + password),
      },
    })
    .then((response) => response.json())
    .then(res => {
      this.setState({
        notidata: res
      });
    });
  });
});

Using above code I was able to get all the notifications.

Now, coming to your final question, how you can display title, the answer is you need to process the response as per your requirement. To show this in FlatList, you need to change the last .then in the above snippet

.then(res => {
  let notis = [];
  Object.keys(res).forEach((val, index) => {
    notis.push({ data: res[val].subject.title, key: `litItem${index}` });
  });
  this.setState({
   notidata: notis
  });
});

Now set the data property of FlatList to this.state.notidata and in renderItem function, access the title as item.data.

Hope this will help!