Replace React Native Expo Splash Screen Image with Real Splash Screen - javascript

How to Replace React-Native Splash Image With Some Custom React-Native Page. Currently I'm using an image as splash screen. I want the splash screen to be dynamic and load/display some data from server. Here is my configuration of app.json:
{
"expo": {
"name": "SplashDemo",
"slug": "SplashDemo",
"privacy": "public",
"sdkVersion": "31.0.0",
"platforms": [
"ios",
"android"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.sample.splash",
"versionCode": 1
}
}
}
Primary focus on the splash configurations given as:
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
}
Can we somehow replace it with the React-Native page? How?

Related

Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/ • should NOT have additional property 'nodeModulesPath

Trying to use expo publish in order to host my react native app and show other people but running into this error. It seems to indicate the need for the removal of a 'nodeModedulesPath' property from my app.json but ...well here is the structure. I'm not quite sure what needs to be removed or why, any help would be greatly appreciated.
{
"expo": {
"name": "new",
"slug": "new",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#9CB2A5"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#9CB2A5"
}
},
"web": {
"favicon": "./assets/favicon.png"
},
"plugins": [
[
"expo-notifications",
{
"icon": "./assets/icon.png",
"color": "#ffffff",
"sounds": [
"./local/assets/notification-sound.wav",
"./local/assets/notification-sound-other.wav"
]
}
]
],
"extra": {
"eas": {
"projectId": "027e8e01-7c7e-4212-8812-a49f5db4f826"
}
}
}
}
I tried finding the nodeModulesPath, there is no string with those characters in the entire project directory, and the configuration workflow shown in expo's documentation doesn't exactly explain what would cause this error.

Allow third party cookie in incognito mode from expo-web project

I have a website on expo-web, in incognito mode my website is not able to send cookie.
So I found the solution here Chrome Extension in incognito mode
Expo uses app.json for generating manifest.json. Is there any way I can add incognito option in the expo app.json?
Here is my current app.json file
{
"expo": {
"name": "website name",
"slug": "website-name",
"privacy": "public",
"incognito": "split", // I want to add this property
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"packagerOpts": {
"sourceExts": [
"tsx",
"js",
"json",
"ts",
"jsx"
],
"config": "metro.config.js"
}
}
}

How to implement Google AdMob service in React Native?

While working with testing ads, it was fine, but with real ad units, it didn't show up, and most importantly how to implement For the module to attribute interactions with ads to your AdMob app properly you will need to add a googleMobileAdsAppId property to app.json under [platform].config."
enter image description here
change googleMoblieAppId to your own app id. The one you get from admob.
{
"expo": {
"name": "YourappName",
"slug": "Slugname",
"privacy": "public",
"android": {
"package": "in.learner.yourappname",
"versionCode": 1,
"config": {
"googleMobileAdsAppId": "yourGoogleAppId goes here"
}
},
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"config": {
"googleMobileAdsAppId": "your GoogleAppId goes here"
}
}
}
}

No operations defined in spec Node.js Express

swagger ui
i'm trying to solve this problem but somehow i still didn't manage to do it. /swagger endpoint seems to read only part of the swagger.json file. I configured everything and still not a single error popped up. It just says "No operations defined in spec" even tho i created one test model. Googling this was a disaster,so few articles and they are all different completely.
in app.js i added :
import swaggerUi from "swagger-ui-express";
import * as swaggerDoc from "./swagger.json";
app.use("/swagger", swaggerUi.serve, swaggerUi.setup(swaggerDoc));
in swagger.json :
{
"openapi": "3.0.0",
"info": {
"version": "1.0.0",
"title": "Stefan Back-end Swagger",
"description": "Test",
"license": {
"name": "MIT",
"url": "https://opensource.org/licenses/MIT"
}
},
"Cat": {
"type": "object",
"properties": {
"genus": {
"type": "string"
}
}
}
}
You are using openapi-3, look at the components section,
Your swagger.json file should be like:
{
"openapi": "3.0.0",
"info": {
"version": "1.0.0",
"title": "Stefan Back-end Swagger",
"description": "Test",
"license": {
"name": "MIT",
"url": "https://opensource.org/licenses/MIT"
}
},
"components": {
"schema": {
"Cat": {
"type": "object",
"properties": {
"genus": {
"type": "string"
}
}
}
}
}
}
Hope this help.

vscode launch config for next.js app

I'm developing a next.js app with Visual Studio Code (vscode) and I like that editor a lot! I've installed Debugger for Chrome from the extension store. The config below starts a new Chrome instance and I can start to debug. It stops on the breakpoint in vscode but here comes the problem. It doesn't show the values of the function and jumps into the node_modules event though I added it to "skipfiles".
Breakpoints also won't stop on the constructor. Is next.js somehow not supported?
I'm using async await syntax a lot. Debugging server side code works perfectly.
{
"name": "My Client",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/my-client/",
"skipFiles": [
"node_modules/**/*.js",
"<node_internals>/**/*.js",
"node_modules",
".next"
]
}
Following worked for me (extending from Maximiliano Cespedes answer):
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "NPM Launch",
"runtimeExecutable": "npm",
"cwd": "${workspaceFolder}/my-app",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229,
"console": "integratedTerminal"
},
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"stopOnEntry": false,
"restart": true
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
}
],
"compounds": [{
"name": "Debug-Full",
"configurations": ["NPM Launch", "Attach", "Chrome"]
}]
}
I hope is not too late for you ma friend,
Here you have the original documentation from VSCode that solve the issue:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Next: Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "next",
"runtimeArgs": [
"--inspect"
],
"port": 9229,
"console": "integratedTerminal"
}
],
"compounds": [
{
"name": "Next: Full",
"configurations": ["Next: Node", "Next: Chrome"]
}
]
}

Categories

Resources