I am getting html from API in my react native app:
"consentForm": "<p>some text --- text.\nFor further information regarding this
can be found here:\n
<a href="url">
URL text
</a>
</p>",
I tried using react-native-webview in the following way:
<WebView
originWhitelist={['*']}
source={{
html: api.consentForm,
}}
/>
but nothing is coming up on my device... it's coming as blank screen. I am not able to understand what I am doing wrong
Related
I tried to upload file in react quill, at the moment you can see how it works in first photo, But I want file that i uploaded to be inside react Quill textarea.
Have someone any idea how can i do it ?
How it works now
How it need to be
This is code how i render upload file
{!!upload_attachments.length && (
<div className='my-3 flex max-h-52 flex-wrap gap-5 overflow-auto'>
{upload_attachments.map((attachment) => (
<Attachment key={attachment.id}
attachment={attachment} deleteAction={true} upload={true} />
))}
</div>
)}
I have an input file in a page (from server), displayed in react native webview by its url. Somehow, when I choose a file, after selected, it should display the name of the file in the input box (refer image) but nothing got displayed and it appeared to be empty. But, if I browse the url manually from the browser, the selected file can be displayed.
The above image is the one I tested from the browser. In react native app, it doesn't display anything.
HTML from server side :
<div class="form-group">
<label>Company On Receipt</label>
<select class="form-control select2" name="company_id" style="width: 100%;">
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
</select>
<input type="file" name="company_receipt[]" multiple="multiple" required>
</div>
React native :
...
import { WebView } from 'react-native-webview';
export default function SubmitClaim({ route, navigation }) {
...
return (
<WebView source={{ uri: 'server-side-page-url' }} />
)
}
Dependencies :
"react-native": "0.65.1"
"react-native-webview": "^11.22.7"
For your info, this app was previously working (last tested on last year with react-native-webview: ^11.13.0). I am currently maintaining it and suddenly facing this issue so I have no idea what's going on. Tried to search similar issue but couldn't find anything that can help. I thought it could be the webview version issue so I uninstalled the existing package and re-installed but still not working.
Any help would be much appreciated. Thank you!
I've been using Docusaurus v2 with the default theme for my Python library website and love it! I'd like to change the position of the announcement bar, which is currently at the top of the page, as it isn't very visible. I think it would work better beneath the "hero". Is there any way to accomplish this without swizzling the Layout element? Thanks!
You can always create your own annoucement bar component and add it to your index.js file. This is what I did to create any additional bar under the hero.
CODE EXAMPLE:
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className='container'>
<h1 className='hero__title'>{siteConfig.title}</h1>
<p className='hero__subtitle'>{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className='button button--secondary button--lg'
to='/docs/intro'
>
Docusaurus Tutorial - 5min ⏱️
</Link>
</div>
{/* YOU CAN ADD YOUR ANNOUNCEMENT BAR HERE */}
<div>
<YourComponent />
</div>
</div>
</header>
);
}
Create and Add your Annoucement Bar Component
This is how I added it to my website under that homepage hero...
Example Home Page Annoucement Bar Docusaurus Website
I'm currently making an mobile web application with next.js boilerplate.
My back button code is this.
import Router from 'next/router'
<button>
<a href="#" onClick={() => Router.back()}>
<span> some back button icon here </span>
</a>
</button>
I don't think there's anything wrong with my html code but when clicking that button on
safari browser, it doesn't work. Anybody had same experience? or know the solution? or know why this is happening?
please share ;
FYI. I've tried major browsers like IE, Chrome, Firefox but only Safari don't work.
this work for me:
import Router from 'next/router'
...
<button>
<a href="#" onClick={(e) => { e.preventDefault(); Router.back(); }}>
<span> some back button icon here </span>
</a>
</button>
A little late, but I'm sure someone needs it.
I am integrating google maps functionality using vue2-google-maps. I am able to show default marker in my application but when I tried it for custom market it shows nothing on the map.
Following is my code.
<gmap-map
:center="center"
:zoom="17"
style="width:100%; height: 350px;"
>
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:icon="{url:'../assets/markerIcon.png'}"
#click="center=m.position"></gmap-marker>
</gmap-map>
Can anyone solve my problem why I am not able to see custom marker on map?
Try change :icon="{url:'../assets/markerIcon.png'}" to :icon="{url:require('../assets/markerIcon.png')}