Render in React Native interferes with variable update - react-native

Question

I have the following code written in React Native. As can be seen, a function within 'componentDidMount' is called ('getKey') that is used to retrieve some variables previously saved from storage:
export default class Cast extends Component {
constructor(props) {
super(props);
this.state = {
admin: false,
isPublishing: false,
userComment: "",
hasPermission: false,
paused: true,
_email: false,
_name: false,
_pword: false,
_play_ID: false,
_streamkey: false,
_playurl: "",
_streamurl: "",
isLoading : true,
};
}
getKey = async() => {
try {
var value = await AsyncStorage.getItem('email');
this.setState({ _email: value });
value = await AsyncStorage.getItem('playkey');
this.setState({ _play_ID: value });
const playurl = "https://stream.mux.com/" + value + ".m3u8"
this.setState({ _playurl: playurl });
value = await AsyncStorage.getItem('castkey');
this.setState({ _streamkey: value });
const streamurl = "rtmp://global-live.mux.com:5222/app/" + value
this.setState({ _streamurl: streamurl });
this.setState({ isLoading: false });
} catch (error) {
console.log("Error retrieving data" + error);
}
}
componentDidMount(){
this.getKey();
}
renderCameraView = () => {
return (
<NodeCameraView
style={styles.nodeCameraView}
/* eslint-disable */
ref={vb => {
this.vb = vb;
}}
/* eslint-enable */
outputUrl = {this.state._streamurl}
camera={settings.camera}
audio={settings.audio}
video={settings.video}
autopreview
/>
);
};
renderPlayerView = () => {
const { paused } = this.state;
const source = {
uri: _playurl //THROWS A "VARIABLE NOT FOUND" ERROR...LIKELY DUE TO RENDER BEFORE VALUE IS RETREIVED FROM STORAGE...?
};
return (
<Video
source={source} // Can be a URL or a local file.
/* eslint-disable */
ref={ref => {
this.player = ref;
}} // Store reference
/* eslint-enable */
onBuffer={this.onBuffer} // Callback when remote video is buffering
onError={this.onError} // Callback when video cannot be loaded
style={styles.nodePlayerView}
fullscreen={false}
resizeMode="cover"
paused={paused}
/>
);
};
renderEmptyView = () => {
const { paused } = this.state;
const source = {
uri: "http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"
};
return (
<Video
source={source} // Can be a URL or a local file.
/* eslint-disable */
ref={ref => {
this.player = ref;
}} // Store reference
/* eslint-enable */
onBuffer={this.onBuffer} // Callback when remote video is buffering
onError={this.onError} // Callback when video cannot be loaded
style={styles.nodePlayerView}
fullscreen={false}
resizeMode="cover"
paused={paused}
/>
);
};
//...
render() {
const { admin, paused, isPublishing } = this.state;
return (
<View style={styles.container}>
{isLoading ? this.renderEmptyView() : !isLoading && admin ? this.renderPlayerView() : !isLoading && !admin ? this.renderCameraView()}
//...
</View>
);
//...
This code is mainly operative. The problem is that the function 'renderPlayerView' is immediately called/rendered...as can be seen in the 'render' section at the bottom of the code. As I understand...in React Native any render is performed BEFORE any other process. I believe this is the cause of my problem.
The 'uri: _playurl' line within the 'renderPlayerView' function throws a 'variable not found' error or something similar. Since the render is performed before anything else, I guess this makes sense to me as the value of the '_playurl' variable would not have yet been retrieved from storage.
Therefore my question is how could I pass the correct value (after retrieved from 'storage') to the '_playurl' variable FOLLOWING the render? Or perhaps there is some sort of work-around? I thank you in advance for any suggestions.

Answer 1

You should create a loader for this, just create a state and set its initial value to true and once you're done fetching the data from async storage set it to false. Then you should use this state to conditionally render the whole component.
like this:-
// 1. Create state
state: {
...rest of your states,
isLoading : true // ADD this
}
//2. Update state of isLoading once you are done fetching data
getKey = async() => {
try {
... your code
} catch (error) {
console.log("Error retrieving data" + error);
} finally {
this.setState({ loading: false });
}
}
//3. use the state to render your components conditionally
render() {
const { admin, paused, isPublishing, isLoading } = this.state;
return (
<View style={styles.container}>
{isLoading ? <Loader/> //create some loader for your app (or simply use an activity indicator)
: admin ? this.renderCameraView() : this.renderPlayerView()}
//...
</View>
);