Hello, In this video you really covered very much things, but i want to know that i want to navigate some verification weblink and after verification completely the web returns some value too, So i want to get that return value and update on locat hooks state, and pass the upldate value through params to another page Thank you
Great video! Question! ¿do you know how to touch event (touchstart, touchmove ,...) in the webview or html js ? I need help show inside WebView html js with game such as table tennis or throw ball. Thank you
I haven't used Webview for anything like that before. It's best to do things like that natively. Playing a game in a react native webview doesn't sound like a good user experience.
Hey, thanks for the great guide! I was hoping you could help me out with something though. The progress bar displays perfectly when the webview loads for the firs ttime, but does not show when I click on a link. I noticed you never clicked on a link within the web view, so I don't think it was addressed, and I've followed along properly. What can I do about this?! Thanks for your time.
This is just an introduction to webviews. It doesn't cover every scenario, but take a look at this section in the docs here. github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#controlling-navigation-state-changes
file.js with html is not loading in ios. it coming error has " src/assets/web/main.js' cannot be loaded as its extension is not registered in assetExts "
Nice video, helped me integrate webview in my app. I just have one problem. The website I am using displays a dialog when opening it (pop-up) and accessing it and therefore, this dialog does not appear in the webview, even with js enabled. Could you help me fix this? Thanks.
Unfortunately, I'm not much of a web developer and there are multiple ways that they could be displaying the dialog that may not be compatible with the way I set it up in this video. I always try to avoid having to use webviews whenever possible. For specific issues like that it's best to post the question in the issues tab on their Github repo. This section also may or may not help github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native
I haven't done that in a webview before, but I'm sure that question has been asked a lot in Stack overflow. stackoverflow.com/questions/39446077/react-native-go-back-on-android-hardware-back-button-pressed
Hi, completely new to coding and looking to convert a website into an app. I already have a e-commerce wordpress website that is responsive, so it displays correctly on smartphones. Is it possible to convert this into an app by using react native web view?
Converting it to react native means writing a normal react native app with UI components in the framework and a REST API layer. Webviews are useful if you just want to display a web page as it is from within an existing app. That's what the video is demonstrating. For example, a large company may have most of their app written with normal React native components, but they don't want to type out a 40 page Terms and Conditions that may change often. So they might put the link to the T&C inside of a Webview component. Your entire app should NOT be a webview if you want a fluid user experience since it requires a constant, stable internet connection.
@@TheFlutterFactory would the app not perform the same as my website? Sorry but not sure what you mean by "constant, stable internet connection", won't my app also need internet to connect to the backend? I appreciate that it is perhaps not the best idea and would not provide any benefits over just using the website in the browser. Perhaps even may be some delay. I just want to know would it work as my website does? I would probably have to add back and forward buttons. And a loader. Other than that would everything work as normal like payment gateway popups etc. Appreciate the advice either way.
If you're calling a REST api, you'll need internet, but it's up to you as the developer to decide when you to to get/send data to an internet. If you don't use webviews your app will all be connected to the internet while those api calls are taking place in the background. You can decide what UI to show before, during and after the api call is executing. Having your entire screen as the webview, means that a blank( page cannot be loaded) message will show without an internet connection. Most apps don't want the sending and retrieval of data to effect the user experience (no webviews, just asynchronous api calls for data), but it depends on your use case. Webviews are just one tool in a giant tool box. It's up to you to decide where/if you need to use it
@@TheFlutterFactory can i get values from fields in the webview and use them in the application logic?, sounds like i want to do something bad, but the place where i work requires some hacks to make things work, we have lots of applications that we don't have the code to modify them and we don't follow standards consistently
Loading local html file is easy to display , can you explain multiple html files are loading, i have problem multiple html files loading in ios simulator fine working but ,in android ,single html also not loading i got error loading page
@@TheFlutterFactory single html file was loading sucessfully ,but multiple html files loading example i want , 1) i want in one screen 10 button are there , each button must one individual html file. 2) make a video to load 10 html files in 10 buttons and display individually 3) for andriod and ios platforn ,in react native 4) hope you make video or explain with code below.
Every video would be incredibly repetitive if I went through the basics of creating basic widgets, installing packages, etc. If you're looking at this video, it should be safe to assume that the viewer knows how to install packages already.
If you don't know anything, you shouldn't be looking at a video to install webviews. There's a lot more things to learn before that. Each video covers a specific topic. I can't repeat everything in every video. this channel isnt for people that are new to coding in general.
Outstanding video. It saves me 20% of my lifetime earning:)
May Almighty Bless You
You are a Legend. You earned a sub my friend. Thank you.
It helps me a lot, Thank you so much and i appreciate that
very good explanation, вельмі добрае тлумачэнне
Thank you so much...
Excellent! Subscribed :)
Maravilhoso Tutorial !!!!Obrigado!!
really informative video
1 question, if we want to use local HTML file which has many CSS n js also included in page will that work fine?
Thanks for the tutorial sir.
Is there a way to copy text to clipboard on webview? My app crashes if I do.
Hello,
In this video you really covered very much things,
but i want to know that
i want to navigate some verification weblink and after verification completely the web returns some value too,
So i want to get that return value and update on locat hooks state, and pass the upldate value through params to another page
Thank you
Thanks a lot :)
Thanks a lot for the video. my problem is that i downloaded your files and launched the app but the homepage image is not showing.
Great video! Question! ¿do you know how to touch event (touchstart, touchmove ,...) in the webview or html js ?
I need help show inside WebView html js with game such as table tennis or throw ball. Thank you
I haven't used Webview for anything like that before. It's best to do things like that natively. Playing a game in a react native webview doesn't sound like a good user experience.
Iam using inline html. I want to pass a dynamic value inside html tag . How should it will possible in React Native webview ?
i have issue when playing video in web view . the screen is black in webview and audio work fine how can i fix that
how to handle print functionality is not working in react-native webview in please help me
Do you know how to hide header, footer and cookies form in styled components?
Header and footer have nothing to do with styles. That is part of Navigation. Cookies? Do you mean web cookies? that's a completely different topic.
Hey, thanks for the great guide! I was hoping you could help me out with something though. The progress bar displays perfectly when the webview loads for the firs ttime, but does not show when I click on a link. I noticed you never clicked on a link within the web view, so I don't think it was addressed, and I've followed along properly. What can I do about this?! Thanks for your time.
Okay, I've added "onLoadStart={() => setLoaded(false)}" but the progress bar doesn't show up immediately upon clicking a link. Any ideas?
This is just an introduction to webviews. It doesn't cover every scenario, but take a look at this section in the docs here. github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#controlling-navigation-state-changes
file.js with html is not loading in ios. it coming error has " src/assets/web/main.js' cannot be loaded as its extension is not registered in assetExts "
github.com/react-native-webview/react-native-webview/issues/1394
Nice video, helped me integrate webview in my app. I just have one problem. The website I am using displays a dialog when opening it (pop-up) and accessing it and therefore, this dialog does not appear in the webview, even with js enabled. Could you help me fix this? Thanks.
Unfortunately, I'm not much of a web developer and there are multiple ways that they could be displaying the dialog that may not be compatible with the way I set it up in this video. I always try to avoid having to use webviews whenever possible. For specific issues like that it's best to post the question in the issues tab on their Github repo. This section also may or may not help github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native
@@TheFlutterFactory Thankyou for your response, I appreciate your help! Keep making great videos!
How to make back device button go back to webview history
What vscode theme do you use?
I actually switch between a few different ones depending on the language/framework. 'Super One Dark' is probably my favorite
How to add go back in webview. When physical back button is clicked it go back to main page
reactnative.dev/docs/backhandler
Can we run react native app using tomcat server? If yes then how??
That's not related to mobile webviews. This is a more a web development question which is out of the scope of this channel.
Can you react with it like search in google or comment in Facebook ?
It's just a webview. It would behave almost exactly like a website in the browser on your phone.
what about how to handle hardware back button press on android... can you give an example on how to do that.
I haven't done that in a webview before, but I'm sure that question has been asked a lot in Stack overflow. stackoverflow.com/questions/39446077/react-native-go-back-on-android-hardware-back-button-pressed
Hi, completely new to coding and looking to convert a website into an app. I already have a e-commerce wordpress website that is responsive, so it displays correctly on smartphones. Is it possible to convert this into an app by using react native web view?
Converting it to react native means writing a normal react native app with UI components in the framework and a REST API layer. Webviews are useful if you just want to display a web page as it is from within an existing app. That's what the video is demonstrating. For example, a large company may have most of their app written with normal React native components, but they don't want to type out a 40 page Terms and Conditions that may change often. So they might put the link to the T&C inside of a Webview component. Your entire app should NOT be a webview if you want a fluid user experience since it requires a constant, stable internet connection.
@@TheFlutterFactory would the app not perform the same as my website? Sorry but not sure what you mean by "constant, stable internet connection", won't my app also need internet to connect to the backend?
I appreciate that it is perhaps not the best idea and would not provide any benefits over just using the website in the browser. Perhaps even may be some delay.
I just want to know would it work as my website does? I would probably have to add back and forward buttons. And a loader. Other than that would everything work as normal like payment gateway popups etc.
Appreciate the advice either way.
If you're calling a REST api, you'll need internet, but it's up to you as the developer to decide when you to to get/send data to an internet. If you don't use webviews your app will all be connected to the internet while those api calls are taking place in the background. You can decide what UI to show before, during and after the api call is executing. Having your entire screen as the webview, means that a blank( page cannot be loaded) message will show without an internet connection. Most apps don't want the sending and retrieval of data to effect the user experience (no webviews, just asynchronous api calls for data), but it depends on your use case. Webviews are just one tool in a giant tool box. It's up to you to decide where/if you need to use it
can you request values from a webview?
What do yo mean?
@@TheFlutterFactory can i get values from fields in the webview and use them in the application logic?, sounds like i want to do something bad, but the place where i work requires some hacks to make things work, we have lots of applications that we don't have the code to modify them and we don't follow standards consistently
injectedJavaScriptBeforeContentLoaded doesn’t work for me
Loading local html file is easy to display , can you explain multiple html files are loading, i have problem multiple html files loading in ios simulator fine working but ,in android ,single html also not loading i got error loading page
I don't understand what you're asking. What do you mean by loading multiple html files?
@@TheFlutterFactory single html file was loading sucessfully ,but multiple html files loading example i want ,
1) i want in one screen 10 button are there , each button must one individual html file.
2) make a video to load 10 html files in 10 buttons and display individually
3) for andriod and ios platforn ,in react native
4) hope you make video or explain with code below.
@@TheFlutterFactory yes multiple html files individually for ios and andriod platform in react native.
What is login and password in the app?
you keep saying I have already done that, why didn't you start from scratch , I can't even get the webview downloaded you didn't explain that
Every video would be incredibly repetitive if I went through the basics of creating basic widgets, installing packages, etc. If you're looking at this video, it should be safe to assume that the viewer knows how to install packages already.
I also mentioned the package name and install directions directly in the video, so I'm not sure what the confusion is
@@TheFlutterFactory I don’t know anything and I thought you could at least explain that
If you don't know anything, you shouldn't be looking at a video to install webviews. There's a lot more things to learn before that. Each video covers a specific topic. I can't repeat everything in every video. this channel isnt for people that are new to coding in general.
@@TheFlutterFactory I didn’t hear it
Hello, do you help me please?
this dont work for android