Why is this.props.componentId needed? - react-native

Question

Why is this.props.componentId needed?
What is its purpose?
Why can't we use the library without that id being needed?
react-navigation doesn't need something like that, and react-native-navigation v1 didn't use anything like that. So why does v2 needs and uses that? The reason I ask is firstly to understand it, and secondly to see if I can skip this since now I cannot use RNN v2 from a saga.

Answer 1

Here's a detailed answer from a blogpost by the react-native-navigation library developer.
So now we want to enable the following behavior: after user clicks on the text, the app pushes the ViewPost screen. Later on it will be very easy to attach the same function to a list item instead of the text. To push a new screen into this screen’s navigation stack, we will use Navigation.push. In the new API this method expects to receive the current componentId which can be found in props.componentID. So in PostsList.js we create a pushViewPostScreen function and attach it to the onPress event of the Text.
import React, {PureComponent} from 'react';
import {View, Text} from 'react-native-ui-lib';
import PropTypes from 'prop-types';
import {Navigation} from 'react-native-navigation';
class PostsList extends PureComponent {
static propTypes = {
navigator: PropTypes.object,
componentId: PropTypes.string
};
constructor(props) {
super(props);
this.pushViewPostScreen = this.pushViewPostScreen.bind(this);
}
pushViewPostScreen() {
// We pass the componentId to Navigation.push
// to reference the which component will be pushed
// to the navigation stack
Navigation.push(this.props.componentId, {
component: {
name: 'blog.ViewPost',
passProps: {
text: 'Some props that we are passing'
},
options: {
topBar: {
title: {
text: 'Post1'
}
}
}
}
});
}
render() {
return (
<View flex center bg-blue60>
<Text onPress={this.pushViewPostScreen}>Posts List Screen</Text>
</View>
);
}
}
export default PostsList;
In the official docs, it seems that the Screen API, which is responsible of pushing, popping and changing navigation, will be accessible through the Navigation module always expecting a props.componentId to get the reference to the component.