Loading static assets dynamically in React Native WebView

Is there a way to dynamically load files in a WebView from the local file system or assets folder? I've been able to fetch resources from a server using ajax, but struggling to figure out how to load local resources.

DETAILS: I am currently loading a Three.js scene from the local file system with the following code:

<WebView source={{ uri: "file:///android_asset/test.html" }} />

I have several models stored in the asset folder and would like to selectively load them when a user makes a selection. How can I achieve this using a THREE.js loader? If a loader isn't an option, is it possible to manually fetch the model and pass it into the loader?

Mainly, I'm wondering if it's feasible for a webview to access the local file system in react-native.

ajaxreact-nativewebviewthree.js

Answer №1

Consider attempting something along these lines

const localHtmls = [require('../htmls/example.html'),
  require('../htmls/sample.html'), ...];

// Implement your own algorithm to determine the index
let selectedHtml = localHtmls[0];

<WebView
  source={selectedHtml}
  style={{flex: 1}}
/>

Double-check that the path in require is accurate.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing the nativeEvent callback from being triggered in React Native's Animated.event() function?

Why isn't the nativeEvent callback triggering in my Animated.event call when dragging a box? I am working on implementing functionality to prevent draggable components from going off-screen using gesture control. However, I'm facing an issue whe ...

reactjsanimationreact-nativereact-native-gesture-handler

Utilizing iOS Local Storage for Efficient Form Submission Handling

I feel like my brain is on the verge of exploding. I just can't seem to get this to work as intended, and I'm struggling to pinpoint the issue. Currently, I have a form that needs to be processed using AJAX. Before proceeding with that, I want ...

javascriptjqueryiosajaxforms

The JSON data is being posted, but the table remains empty and does not populate

UPDATE: Tried modifying the Jquery code to dynamically recreate rows, but it still doesn't work Reorganized my table structure with no success I have a PHP script that encodes my database table into an array. When I echo the json_encode, everything ...

phpmysqlajaxjsonpdo

Error message in JS/Ajax alert box

I keep receiving an alert box saying "Image uploaded" even when the variable $imagename is empty. Below is the script in question: <script> function ajax_post1(ca){ var cat = ca; var name = document.getElementById("name").value; var ...

javascripthtmlajax

Tips for transferring the value of a variable from a Java class to a JSP page

I have 2 different files titled Admin.java and index.jsp. Within the Admin.java file, there is a function that retrieves the value of a variable called res. This particular variable needs to be transferred to a JSP page. The location of Admin.java is at ...

javaajaxjspservlets

Using a URL in an AJAX request

Before redirecting to another page, I am storing data from a textbox. When the user clicks the back button on the page load function in JavaScript, I retrieve the data from the textbox using: var pageval = $('#grid') .load('/Dealer/AllClai ...

javascriptajaxjquery

Ways to update image source in a React application

Can you help me understand how to switch out an image source in React? I am currently assigning a src URL to my img tag. If the image is not available on the server, I would like to replace the src URL with this one: http://punemirror.indiatimes.com/photo/ ...

reactjsreact-nativereact-routerreact-redux

Looking to add the Ajax response data into a dropdown selection?

Looking to add select options dynamically, but unsure how to retrieve response values. I am able to fetch all the values in the response, but I struggle with appending them correctly in the select option. I believe the syntax is incorrect. success: funct ...

javascripthtmlajaxlaravel

Rest assured, with Ajax Security, your protection is in good

I am currently developing a browser game that heavily utilizes AJAX instead of page refreshes. The combination of PHP and JavaScript is being employed for this project. However, during the course of my work, I became aware of the potential security vulnera ...

phpjavascriptjqueryhtmlajax

Using AJAX to retrieve Django view return values

I am currently using Django along with AJAX, Within my template, users have the ability to select an option and then submit their choice. Upon clicking the submit button, an Ajax function is triggered which sends the data to my view for processing, and th ...

pythonajaxdjango

React Native: Image display issue

I'm facing a problem with displaying an image. I've followed all the steps correctly as per a tutorial, but for some reason, my image is not showing up while the author's images are displayed perfectly. What could be causing this issue? I ha ...

reactjsreact-native

Improving website performance with faster Ajax calls

I'm working on improving the ajax response time of my website hosted on Hostinger. Currently, it takes approximately 1.30 seconds to receive a response when live, but only 220ms on my local machine. Is there a way to speed up the response time on the ...

ajax

JSF not triggering Ajax event

I'm facing an issue where the Ajax event is not firing to call the actionListener or update the second select menu. Can anyone help me with what might be causing this problem? <p:selectOneMenu value="#{player}" converter="playerCon ...

ajaxjsf

creating a live updating dropdown menu using Node.js and MySQL

Upon a user clicking and selecting a client, I would like to dynamically update the region dropdown menu with options that are related to that specific client from the databaseenter code here This is my client table: Here is the Region table, where clien ...

javascriptmysqlnode.jsajaxhtml

Is it possible to create a personalized serialize form when sending an AJAX POST request

How can I format form data on an AJAX POST request differently than the default $("#formid").serialze()? The current result is not suitable for my needs, as it looks like this: `poststring="csrfmiddlewaretoken=bb9SOkN756QSgTbdJYDTvIz7KYtAdZ4A&colname= ...

javascriptajaxjsondjangopost

403 error when making an Ajax post request in CakePHP despite having granted all permissions

Encountered a 403 error when making an Ajax request in a Cakephp project. Despite having all permissions granted for the project directory in localhost (XAMPP). Error message: "Failed to load resource: the server responded with a status of 403 (Forbidde ...

phpjqueryajaxcakephphttp-status-code-403

What steps should I take to transform this into an ajax form?

I'm struggling with converting this code into an Ajax form. Can someone guide me on the process? @using (Html.BeginForm("", "CollaborativeProjects", FormMethod.Post, new {enctype="multipart/form-data"})) { <input type="file" name="FileUpload1 ...

jqueryajaxasp.net-mvcrazor

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

I am using a div and CSS id to control the checkbox check and uncheck functionality, but I am not getting the desired outcome from my source code Step 1: By default, the checkbox is unchecked and the listbox is disabled Step 2: When the checkbox is check ...

javascripthtmljquerycssajax

What is preventing me from using jQuery to dynamically insert HTML onto the page?

Below is the HTML code for a Bootstrap Modal dialog box: <div class="modal fade" id="rebateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Implementing jQuery - I Require Sequential Execution of Functions

I have a unique scenario where I need to ensure that two jQuery functions run in sequence when a form is submitted. The first function performs an AJAX call to check the database for any duplicate values and returns a response. It is crucial that the sec ...

jqueryajaxfunction