Ask for permission in specific screen in android - react-native

Question

For react native application navigation I use react-native-navigation v2 here I've created navigation with bottomTabs. Here is the navigation handler
import { Navigation } from "react-native-navigation";
import { width, height } from "../utils/screenResolution";
import { bottomTabIcon, topBarOpts } from "../components";
const sideBarWidth = width * 0.65;
export const goToAuth = () =>
Navigation.setRoot({
root: {
stack: {
id: "AuthNav",
children: [
{
component: {
name: "SignInScreen",
options: {
topBar: { visible: false, height: 0 }
}
}
}
]
}
}
});
export const goHome = async () => {
let icon1 = await bottomTabIcon("CollectionScreen", "Collection", "archive");
let icon2 = await bottomTabIcon("MainScreen", "Home", "home");
let icon3 = await bottomTabIcon("CaptureScreen", "Capture", "camera");
Navigation.setRoot({
root: {
sideMenu: {
right: {
component: {
name: "SideBar"
}
},
center: {
bottomTabs: {
id: "AppNav",
children: [icon1, icon2, icon3]
}
},
options: {
sideMenu: {
right: {
width: sideBarWidth
}
}
}
}
}
});
Navigation.mergeOptions("MainScreen", {
bottomTabs: {
currentTabIndex: 1
}
});
};
Icons tab creating with this bottomTabIcon function.
import Icon from "react-native-vector-icons/FontAwesome";
import { topBarOpts } from "./";
import { PRIMARY, BOTTOM_TAB_BACKGROUND, TAB_ICON } from "../../assets/color";
let bottomTabIcon = async (name, text, iconName) => {
let icon = {
stack: {
children: [
{
component: {
name: name,
id: name,
options: {
bottomTab: {
text: text,
fontSize: 12,
selectedIconColor: PRIMARY,
iconColor: TAB_ICON,
icon: await Icon.getImageSource(iconName, 20)
}
}
}
}
]
}
};
if (name === "CaptureScreen") {
icon.stack.children[0].component.options.bottomTabs = {
visible: false,
drawBehind: true,
animate: true
};
icon.stack.children[0].component.options.topBar = {
visible: false,
height: 0
};
} else {
icon.stack.children[0].component.options.bottomTabs = {
backgroundColor: BOTTOM_TAB_BACKGROUND
};
icon.stack.children[0].component.options.topBar = await topBarOpts("Example");
}
return icon;
};
export { bottomTabIcon };
Here is the problem, when user logging in application,its asking for permissions (camera,audio etc.) in MainScreen I want to do that in specific screen,after that I find out that all screens in bottomTabs mounted.So if I call something to do in componentDidMount in CaptureScreen it will work in MainScreen.How I can solve this part? I am pretty new in react-native so something you can find weird in this code.Thanks for help and for attention.

Answer 1

Have the permission calls only in did mount of the specific screens or in the child screen where it is needed not in the parent screen or in navigators.
In your case you are calling them by taking the route index in the react navigation. Add the permission code on the child screen or where the permissions are required and they will start working.