I have written a simple .js file using react library react-bootstrap Carousel.js to create a uncontrolled carousel , but the images instead of coming as a slide are coming one after other vertically. Posting the code below. Can you help with debugging the same.
App.jsx
-----------
import React, { Component } from 'react';
import './App.css';
import writing from './writing.jpg' ;
import grammer from './grammer.jpg' ;
import listening from './listening.jpg' ;
import reading from './reading.jpg' ;
import {Carousel} from 'react-bootstrap';
class App extends Component {
constructor(props, context) {
super(props, context);
this.state = {
index: 0,
direction: null
};
}
render() {
const { index, direction } = this.state;
return (
<Carousel controls={false} >
<Carousel.Item >
<img src={grammer} alt="grammer" width={300} height={100} />
</Carousel.Item>
<Carousel.Item>
<img src={listening} alt="listen" width={300} height={100} />
</Carousel.Item>
<Carousel.Item>
<img width={300} height={100} alt="reading" src={reading} />
</Carousel.Item>
<Carousel.Item>
<img width={300} height={100} alt="reading" src={writing} />
</Carousel.Item>
</Carousel>
);
}
}
export default App;
Index.js
----------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and under index.html I have element below:
<div id="root"></div>
So, after running this code, images are loading to the page, but carousel behavior is not working.
I had the same problem just today and I saw this unanswered post, so I thought it would be a good idea to write how I solved my issue :
In my case, the carousel images were aligned vertically because I didn't include correctly the bootstrap stylesheets. Here are the steps I followed :
1. go to https://react-bootstrap.github.io/getting-started/introduction/
2. find the newest stylesheets and copy them to clipboard. The latest releases to this date are :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
3. paste them inside the <head> part of your index.html file. Now if you save all and reload your react app, it should be good.
Hope this would help anyone having the same issue !
FYI with bootstrap-4-react you don't need to add the CSS files yourself. https://bootstrap-4-react.com/#documentation/components/carousel
Related
I have
<link rel="stylesheet" href="https://unpkg.com/font-awesome#latest/css/font-awesome.min.css">
...
<i class="fa fa-camera-retro"></i>
This works but I would like to use Quasar (using Vite) so I add the following to my main.js file...
import iconSet from 'quasar/icon-set/fontawesome-v6';
import '#quasar/extras/fontawesome-v6/fontawesome-v6.css';
import "quasar/src/css/index.sass";
app.use(Quasar, {
iconSet: iconSet,
plugins: {}, // import Quasar plugins and add here
});
...
<q-btn dense flat icon="close" />
But the icon does not show up instead I see close. What am I missing?
You don’t need to import it in your app, just configure quasar.config.js:
https://quasar.dev/options/installing-icon-libraries#introduction
extras: [
// 'ionicons-v4',
// 'mdi-v5',
'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
// 'roboto-font', // optional, you are not bound to it
// 'material-icons', // optional, you are not bound to it
// 'material-icons-outlined',
// 'material-symbols-outlined'
],
Then use it wherever you want
<q-icon name="fa-solid fa-ambulance" />
Also, please note how to correctly use the font name as per library choosen
https://quasar.dev/vue-components/icon#webfont-usage
When using font-awesome, the icon name should be
fa-[solid,regular,brands] fa-
I'm trying to render svg file path from #dicebear/avatars
let svg = createAvatar(style, {
seed: 'random',
// ... and other options
});
svg variable has this value =
But when i try to render in react-native is not showing even if i use a library called react-native-render-html
I'm trying to render using the library like this
<View style={styles.container}>
<HTML source={{ html: svg }} />
<StatusBar style="white" />
</View>
When i do this this is what i get[
You can do this using react-native-svg.
Steps:
Install the library using npm install react-native-svg
Rebuild the app after clearing the cache.
Now use the XML like
import React from 'react';
import {createAvatar} from '#dicebear/avatars';
import * as style from '#dicebear/avatars-identicon-sprites';
import {SvgCss} from 'react-native-svg';
const xml = createAvatar(style, {
seed: 'custom-seed',
});
export default function App() {
return <SvgCss xml={xml} width="100%" height="100%" />;
}
this document suggests that I should be able to inject values into a web page displayed by the WebView component such that the value can be used by loaded the page:
https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native
specifically, the code below shows how to set a value within the window object but does not show how it is used:
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
const runFirst = `
window.isNativeApp = true;
true; // note: this is required, or you'll sometimes get silent failures
`;
return (
<View style={{ flex: 1 }}>
<WebView
source={{uri: 'my-url-here'}}
injectedJavaScriptBeforeContentLoaded={runFirst}
/>
</View>
);
}
}
the page I'm loading looks like this:
<html>
<body>
<script>
alert(window.isNativeApp)
</script>
</body>
</html>
which displays undefined. I've also tried:
<html>
<body>
<script>
var fn = function() {
alert(window.isNativeApp)
}
document.addEventListener('DOMContentLoaded', fn, false)
</script>
</body>
</html>
with identical results. given that I'm supposed to be able to send the webpage values, how am I supposed to use them?
from my package.json:
"react-dom": "~16.9.0",
"react-native": "^0.62.1",
"react-native-webview": "^8.2.1",
Appendix I
in fact, the above doesn't seem to run at all. if I try the following:
const runFirst = `
console.log('INJECTION')
alert('INJECTION')
true; // note: this is required, or you'll sometimes get silent failures
`;
I get neither an alert, nor a trace in the log. of course, I'm not sure whether alert() can work before the document is loaded, or whether the log would be visible to me in the regular app's console output
by contrast injectedJavaScript does seem to run, albeit after the document loads, which means that at the time that the <script> in my doc runs, the value hasn't yet been set
for the next poor sod that struggles with this, the library is broken and will (someday) be fixed, but in the meantime, this works:
<WebView
source={{uri: 'my-url-here'}}
injectedJavaScriptBeforeContentLoaded={runFirst}
onMessage={event => { alert(event.nativeEvent.data )}}
/>
the onMessage is intended for communications in the other direction but its mere presence makes the code work
I am getting the html response from the api as shown below. I want to render the text and open the url on click of the text that is given in the response.
"Details": "<span style=\"font-family: Georgia; font-size: 24px;\"><em><span style=\"color: #0070c0;\">Click here to view News.</span></em></span>"
You can use WebView as HTML renderer like this,
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h1>Hello world</h1>' }}
/>
);
}
}
See official docs here
use this package react-native-render-html
extremely customizable and easy to use and aims at being able to render anything you throw at it.
import React, { Component } from 'react';
import { ScrollView, Dimensions } from 'react-native';
import HTML from 'react-native-render-html';
const htmlContent = `
<h1>This HTML snippet is now rendered with native components !</h1>
<h2>Enjoy a webview-free and blazing fast application</h2>
<img src="https://i.imgur.com/dHLmxfO.jpg?2" />
<em style="textAlign: center;">Look at how happy this native cat is</em>
`;
export default class Demo extends Component {
render () {
return (
<ScrollView style={{ flex: 1 }}>
<HTML html={htmlContent} imagesMaxWidth={Dimensions.get('window').width} />
</ScrollView>
);
}
}
For a simple react native webview using the source.htmlfor content:
import * as React from 'react'
const contents =`
<h1 id="1">Section 1</h1>
<h1 id="2">Section 2</h1>
`;
class AboutView extends React.Component {
render() {
return <WebView source={{ html: contents, baseUrl: '' }} />
}
}
Is there a way to navigate the webview to a specific section using the named anchor, such as #1 or #2 like you would put in a url? I know this can be achieved with JS, but I would like to know if there is a cleaner solution