how to load the local file in react native ios webview - react-native-ios

local files are not loading in ios, in android its working fine, using,
react-native-webview version 5.0.1
<WebView
source={{ uri: 'ICF-Package/ICFPackage/index.html'}}
ref={(webView) => this.webView = webView}
originWhitelist={'["*"]'}
javaScriptEnabled={true}
domStorageEnabled={true}
scrollEnabled={false}
onLoad={() => this.sendPostMessage()}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
useWebKit={true}
/>

try using this
Loading local file
const FileHTML = require('./Index.html');
<WebView
source={FileHTML}
style={{flex: 1}}
/>
you can write like
<WebView source={{ html: HTML, baseUrl: 'web/' }} />
This code is working for me android ios
import {Platform, WebView} from 'react-native';
<WebView
source={Platform.OS === 'ios' ?
require('../src/assets/your.html') :
{uri: 'file:///android_asset/your.html'}
}
domStorageEnabled
javaScriptEnabled
/>

In ios for local files to be accessed, you need to include them in the Copy Bundle Resources section in XCode.
Click on you project name in the Xcode's left pane.
In the center pane, select your app target
Click on Build Phases tab on top
Scroll to Copy Bundle Resources section and click +
Find your file in the list. If not found Click on Add other option and locate it.
Then in your code change source prop of webview as:
source={{ uri: 'ICF-Package/ICFPackage/index.html', baseUrl: './'}}
Hope this helps

Related

Set up Pendo in Next.js

We're using Next.js 12 with SSR in our project. I've read through the Pendo documentation but I'm still not sure where to place the install snippet in our code, as Next.js doesn't provide an index.html file. We're using layouts however, is the top of the layout a good place to place Pendo?
I was trying to put the snippet as a function inside of the layout component's return, but it apparently doesn't work like this.
Thanks for any help!
Your _app.tsx should start with something like this and this will work:
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
{/* Pendo Offsite MPA setup code snippet */}
<script
dangerouslySetInnerHTML={{
__html: `
(function(apiKey){
...
...
});
});`,
}}
/>
<sometag />
</>
);
}
Paste your Pendo script code as is into the placeholder above as a comment block.
The _app.js file works as index.js, the entry point for the whole application including every sub-page of it.

neutralinojs workaround to HTML input attribute accept

I have a neutralinojs app with an file input. It should only be possible to choose files from type ".csv" or ".xlsx". So I use the accept attribute.
<input type="file" accept=".csv,.xlsx" />
That works in browser mode but not in window mode.
Is there a workaround to show only files with these filetypes in the file chooser?
You Need To Use Neutralino's API For Dialogs.
So In Neutralino's OS API We Have Some Functions For save file, open file and open folder using which we can show dialogs to users.
In your case you need to use open file dialog so you can use Neutralino.os.showOpenDialog, example:
Neutralino.os.showOpenDialog('Open a file', {
filters: [
{name: 'Documents', extensions: ['csv', 'xlsx']},
{name: 'All files', extensions: ['*']}
]
}).then(result => {
console.log('You have selected:', result);
});
One thing to note is all these API will work in both modes, browser and window.
So if you run this code in browser mode a dialog box will still appear.
Read More About Neutralino's OS APIs

Local images no loading on React

When i'm trying to display an image <img src = {require(path)}/> I dont know why, i dont get that images when i start the react app, althogh my partner on his computer can see the images. And I have deleted and installed all from his files.
The images on browser appears as <img src = [Object Module]/>. I've done some research, and it seems to be some problem with webpack or url-loader, but i dont understand why on my computers isnt working and in my parnert is.
If someone have an idea. Please help.
Thank you.
Try to import the image first like this:
import image from '../image.jpg'
const App = () => {
return (
<img src={image} alt='image' />
)
}
You might wanna wrap the src value in braces
<img src={require(path)} />

React Native IOS Image Not Updating

I have an Image Component that needs to be updated periodically after state change. The app works perfectly on Android but the images do not load on IOS. Also the links are in https and work perfectly on IOS normally, but after uri state change, the image area is blank. Also after the OnloadStart event, the onLoad event does not fire on IOS.
Image Component
<Image
source={{uri: this.state.uploadUrl}}
style = {{resizeMode:'stretch',width:'auto',height:125,marginTop:50,marginBottom:15}}
onLoad={() => {
alert('loaded image! ')
}}
onLoadStart={() => {
alert('load starting: ' + this.state.uploadUrl)
}}
/>
State Change
this.setState({isTrying:false,uploadUrl: responseJson.data.uploadUrl,adUrl : responseJson.data.adUrl});

TinyMce + Ajax File Manager + Codeigniter = Little Problem

OK, I'm using the following:
TinyMCE, CodeIgniter, and the TinyMCE Ajax File Manager. I can upload correctly and it looks pretty good. However, when I view the HTML (from TinyMCE), this is what I get.
<img src="../../../data/page/verde_enfemera.jpg" alt="" />
What I need to be getting is the following:
<img src="http://localhost/http/data/page/verde_enfemera.jpg" alt="" />
Can someone help?
EDIT: I changed the code in the HTML editor of Tinymce, then I saved it. When I re-opened it, the code was reverted back to the original "../.../../data", etc. please, help, someone.
insert convert_urls : false
Change the "relative_urls : true" to "relative_urls : false" under the options for tinymce. I'm a dummy.
Force TinyMCE to use absolute urls instead of relative urls by setting relative_urls, remove_script_host and convert_urls to false in the tinymce.init like this:
tinymce.init({
...
...
relative_urls : false,
remove_script_host : false,
convert_urls : false,
...
...
});

Resources