Hi I am working on Widgets with a React Native Application.
From My Widgets I have to navigate to one of my screens in React-Native App. I am writing my IOS code down below
<code>Link(destination: URL(string: "com.app.me://viewAppComponent")!) {
Rectangle()
.fill(LinearGradient(gradient: Gradient(colors: [.init(red: 234.0 / 255.0, green: 67.0 / 255.0, blue: 159.0 / 255.0), .init(red: 101.0 / 255.0, green: 49.0 / 255.0, blue: 207.0 / 255.0)]), startPoint: .topLeading, endPoint: .bottomTrailing)).cornerRadius(50)
.frame(width: 139, height: 35).overlay(
HStack(spacing: 5) { // Add spacing between Text and Image
Image("comment-icon")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 17, height: 17)
Text("Comments")
.font(Font.custom("Poppins", size: 14))
.foregroundColor(Constants.Color).padding(.horizontal, 10)
}
)
</code>
<code>Link(destination: URL(string: "com.app.me://viewAppComponent")!) {
Rectangle()
.fill(LinearGradient(gradient: Gradient(colors: [.init(red: 234.0 / 255.0, green: 67.0 / 255.0, blue: 159.0 / 255.0), .init(red: 101.0 / 255.0, green: 49.0 / 255.0, blue: 207.0 / 255.0)]), startPoint: .topLeading, endPoint: .bottomTrailing)).cornerRadius(50)
.frame(width: 139, height: 35).overlay(
HStack(spacing: 5) { // Add spacing between Text and Image
Image("comment-icon")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 17, height: 17)
Text("Comments")
.font(Font.custom("Poppins", size: 14))
.foregroundColor(Constants.Color).padding(.horizontal, 10)
}
)
</code>
Link(destination: URL(string: "com.app.me://viewAppComponent")!) {
Rectangle()
.fill(LinearGradient(gradient: Gradient(colors: [.init(red: 234.0 / 255.0, green: 67.0 / 255.0, blue: 159.0 / 255.0), .init(red: 101.0 / 255.0, green: 49.0 / 255.0, blue: 207.0 / 255.0)]), startPoint: .topLeading, endPoint: .bottomTrailing)).cornerRadius(50)
.frame(width: 139, height: 35).overlay(
HStack(spacing: 5) { // Add spacing between Text and Image
Image("comment-icon")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 17, height: 17)
Text("Comments")
.font(Font.custom("Poppins", size: 14))
.foregroundColor(Constants.Color).padding(.horizontal, 10)
}
)
And I am recieving this link in the component, right here
<code>useEffect(() => {
const handleDeepLink = (event) => {
const url = event.url;
if (url) {
const route = url.replace(/.*?:///g, "");
const routeName = route.split("/")[0];
if (routeName === "viewAppComponent") {
navigation.navigate("stackProducts", {
userInfo: user,
productInfos: product,
});
}
}
};
const getInitialURL = async () => {
const initialURL = await Linking.getInitialURL();
if (initialURL) {
handleDeepLink({ url: initialURL });
}
};
getInitialURL();
const linkingListener = Linking.addEventListener("url", handleDeepLink);
return () => {
linkingListener.remove();
};
</code>
<code>useEffect(() => {
const handleDeepLink = (event) => {
const url = event.url;
if (url) {
const route = url.replace(/.*?:///g, "");
const routeName = route.split("/")[0];
if (routeName === "viewAppComponent") {
navigation.navigate("stackProducts", {
userInfo: user,
productInfos: product,
});
}
}
};
const getInitialURL = async () => {
const initialURL = await Linking.getInitialURL();
if (initialURL) {
handleDeepLink({ url: initialURL });
}
};
getInitialURL();
const linkingListener = Linking.addEventListener("url", handleDeepLink);
return () => {
linkingListener.remove();
};
</code>
useEffect(() => {
const handleDeepLink = (event) => {
const url = event.url;
if (url) {
const route = url.replace(/.*?:///g, "");
const routeName = route.split("/")[0];
if (routeName === "viewAppComponent") {
navigation.navigate("stackProducts", {
userInfo: user,
productInfos: product,
});
}
}
};
const getInitialURL = async () => {
const initialURL = await Linking.getInitialURL();
if (initialURL) {
handleDeepLink({ url: initialURL });
}
};
getInitialURL();
const linkingListener = Linking.addEventListener("url", handleDeepLink);
return () => {
linkingListener.remove();
};
}, []);
This code works perfectly, when app is running in the background, but it overrides other paths if app is in killed state.
I mean, if I try to open some screens like Home-Screen, it will again navigate to this stackProducts Screen.
Please write down the solution, or any link for me to figure out the reason