Microsoft Teams Custom App doesn't work on mobile - mobile

Question

I've already develop one custom Microsoft Teams app that correctly works on Desktop, but it doesn't work on mobile app.
It only display the page about the debug.
This is the tab into mobile app:
how can I solve it?
Thanks
This is the tab into desktop app:
This is one part of the code of my home tab for my personal app:
class Tab extends React.Component {
constructor(props) {
super(props)
this.state = {
user: null,
loading: true,
isLogged: false,
error: null,
layout: true
}
}
componentDidMount() {
const params = new URLSearchParams(this.props.location.search);
let teamsUser = {
Tid: params.get('tid'),
Aaid: params.get('aaId')
}
getUser(teamsUser).then((userResponse) => {
this.setState({
user: userResponse,
loading: false,
isLogged: true
})
}).catch((error) => {
logger.warn(JSON.stringify(error));
this.setState({
error: error,
loading: false
})
});
}
setLogged = (user) => {
this.setState({
user: user,
isLogged: true,
loading: false
})
}
render() {
let content;
const { user, loading, isLogged, error } = this.state;
if (loading) {
content = <Loading></Loading>
} else if (error) {
throw Error(error)
}
else if (isLogged) {
content = <Catalogue user={user}></Catalogue>
} else {
content = <UserLogin setLogged={this.setLogged}></UserLogin>
}
return (
<Layout>
{content}
</Layout>
);
}
}
export default Tab
and this is my manifest where I put the url with the tid and aaid:
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
"manifestVersion": "1.9",
"version": "1.0.0",
"id": "86af4197-14c8-4439-a440-3d33b4567f54",
"packageName": "com.microsoft.teams.extension",
"developer": {
"name": "Teams App, Inc.",
"websiteUrl": "https://localhost:3000",
"privacyUrl": "https://localhost:3000/privacy",
"termsOfUseUrl": "https://localhost:3000/termsofuse"
},
"icons": {
"color": "color.png",
"outline": "outline.png"
},
"name": {
"short": "AppLocal",
"full": ""
},
"description": {
"short": "Short description for Personal App.",
"full": "Full description of Personal App."
},
"accentColor": "#FFFFFF",
"staticTabs": [
{
"entityId": "index",
"name": "Catalogue",
"contentUrl": "https://localhost:3000/catalogue?tid={tid}&aaId={userObjectId}",
"websiteUrl": "https://localhost:3000/catalogue",
"scopes": [
"personal"
]
},
{
"entityId": "live",
"name": "Live",
"contentUrl": "https://localhost:3000/live?tid={tid}&aaId={userObjectId}",
"websiteUrl": "https://localhost:3000/live",
"scopes": [
"personal"
]
},
{
"entityId": "about",
"scopes": [
"personal"
]
}
],
"permissions": [
"identity",
"messageTeamMembers"
],
"validDomains": [
"localhost:3000",
"localhost"
]
}
I hope the above mentioned code can help you help me.

Answer 1

I have tested with your code and I replaced localhost URL with ngrok URL it's working fine. Running the application locally does not give you access to Teams app functionality. So could you please try with ngrok url.

Answer 2

I solved it, my error was in the App.js file. I had a wrong path that redirected to another page (the page published above) when try to open the url outside Microsoft Teams. I have remove it and all work's fine. Thank's for all