I am trying to integrate a component with the following Code:
<!-- ScheduleOnce embed START -->
<div id="SOIDIV_MohamadElBaba" data-so-page="MohamadElBaba" data-height="550" data-style="border: 1px solid #d8d8d8; min-width: 290px; max-width: 900px;" data-psz="00"></div>
<script type="text/javascript" src="https://cdn.oncehub.com/mergedjs/so.js"></script>
<!-- ScheduleOnce embed END -->
The goal is to have the app display the component.
I am using react-native and expo, but when I run the project no errors are logged. The component is simply not appearing.
Can someone give me an idea about whats going on?
Full code: (react-native / expo App.js)
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View>
<h1>App Loaded</h1>
<div
id="SOIDIV_MohamadElBaba"
data-so-page="MohamadElBaba"
data-height="550"
data-style="border: 1px solid #d8d8d8; min-width: 290px; max-width: 900px;"
data-psz="00"
></div>
<script
type="text/javascript"
src="https://cdn.oncehub.com/mergedjs/so.js"
></script>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
As react native doesn't use the DOM like regular react does, you can't use HTML tags such as div, h1 etc. My assumption would therefore be that you need to use this WebView component to do that. You would then need to set the source prop equal to your html code. You should end up with something like <WebView source={{html: '<h1>App Loaded</h1><div.....'}}. Or even better, if you have the actual uri for the embedded code, you can just do <WebView source={{uri: 'the uri to the page'}} />
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source
This links to the deprecated project page, but it provides an actual code example, and the syntax should be the same between this old version and the newest version. Just remember to add the package referenced in the github link opposed to this one https://reactnative.dev/docs/webview#source
Related
I am starting to learn VueJS by building a simple website.
Right now I have made three components:
Header
Navigation
Topbar
I want to render navigation and topbar inside header, so I can call the header component inside every page (I haven't found a way to make a "layout" or something, that every page uses).
Header.vue
<template>
<header id="topNav">
<topbar />
<navigation />
</header>
</template>
<script lang="ts">
import Vue from 'vue'
import navigation from '../navigation/navigation.vue'
import Topbar from '../topbar/topbar.vue'
export default Vue.extend({
components: { Topbar, navigation },
})
</script>
<style scoped>
#topNav {
background-color: #fff;
-webkit-box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1001;
padding: 0 12px;
}
</style>
Topbar
<template>
<div id="topBar">
<h2>this is the topbar</h2>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>
<style scoped>
#topBar {
border-bottom: 1px solid #dee2e6;
height: 70px;
padding: 0 10px;
z-index: 100;
position: fixed;
left: 0;
right: 0;
}
</style>
And when I call it on for example my home page (index.vue) nothing renders.
<template>
<main>
<header />
<div id="page-content">
<h1>Home</h1>
</div>
</main>
</template>
<script lang="ts">
import Vue from 'vue'
import Header from '../components/header/header.vue'
export default Vue.extend({
name: 'Home',
components: { Header },
})
</script>
I've tried reading the documentation and search around, but haven't been able to figure out what I'm doing wrong.
Since the question is tagged with a Nuxt tag, I'll recommend looking into Nuxt layouts: https://nuxtjs.org/docs/concepts/views#layouts
There is a default named default that you could use by creating the file /layouts/default.vue and passing the components inside of it.
You can of course change that with a layout: 'yolo' if you want another 'yolo` layout.
Pro tip: you don't need to import the components yourself in Nuxt.
You have named your component header, which is a standard html element. Therefore the browser will probably just try to render a standard <header> element instead of your component.
Therefore it is advised to always use multi word component names. See docs here. You can use eslint in your code editor to help you spot these mistakes.
PS: if you are learning vue from the start, I would advise you to use the composition api with the script setup approach, as it makes things easier and provide the opportunity to write clearer code as components grow.
I'm trying to throw together a simple phone app mockup using React Native & React Native Elements as a set of UI components. I want to set the styling of various elements to a common theme, so I'm following the example in the documentation: https://reactnativeelements.com/docs/customization#using-themeprovider.
But the trouble with the example there (as it says in the docs), it sets the style of all buttons. What I'd like to do is to set the background colour of only the solid buttons for example, leaving the clear buttons, clear! Can anyone point me in the right direction of how to do this?
Current snippet (trimmed to save space):
const myTheme = {
Button: {
buttonStyle: {
borderRadius: 4,
backgroundColor: '#03E0EE',
},
titleStyle: {
color: '#180D43',
},
},
};
...
<ThemeProvider theme={myTheme}>
<View style={styles.footerContainer}>
<Button title="Primary Button"/>
<Button title="Secondary Button" type="clear" />
</View>
</ThemeProvider>
Create a wrapper component for SolidButton and or ClearButton. Make this wrapper components consuming the myTheme context with style props (e.g. ButtonSolid\ButtonClear). AFAIK there are no selector capabilities like in css.
I'm working with the React Native Web and React Native Paper library with Styled Components. Basically I would like to customize the TextInput inner components: Label and html input
The questions are:
1) How to change Label styles? eg. width\size\color, etc. ?
2) How to change html input styles? I want to set outline: none to prevent the blue border show on focus in the case of browser.
I understand that in the case of native we don't have html and the native-web transpiles it.
And I can't understand how to catch the nested label component to change its styles. Because I want to show gray label when non-filled, violet when filled and the Input text should be black.
In the case of the web, it's trivial but in the case of native, I don't know how to handle it.
So is that possible at all?
Thanks for any help. Here is the code example
import React from 'react';
import {
View,
Platform,
} from 'react-native';
import {
TextInput as NativePaperInput,
withTheme,
} from 'react-native-paper';
import styled from 'styled-components/native';
const NativePaperInputThemed = withTheme(NativePaperInput);
export const TextInputStyled = styled(NativePaperInputThemed)`
${(props: any) => {
return `
outline: none; // doesn't work
input: { outline: none; } // doesn't work
& input: { outline: none; } // doesn't work
// Label change style ?
color: ${props.theme.theme10x.palette.typography.placeholder}; // doesn't work
border-color: '#f92a2a8a'; // doesn't work
height: 52px;
`;
}
}
`;
P.S. Basically even colors and fontFamily doesn't work somehow
label={<Text style={{fontSize: 20}}>{t('PersonalDetailsYuvitalOrg:editInput.firstName')}</Text>}
Some guy tried to change label style manually, the maintainer reponse:
You can pass fontSize via style prop. However it will affect both
label and input text. There is no way to change only one of them.
https://github.com/callstack/react-native-paper/issues/1505
You can pass a component for the label prop. For Example:
export const Input = styled(TextInput).attrs({
dense: true,
activeUnderlineColor: theme.colors.ui.blueDark,
label: <Text style={{fontSize: 50}}>My Custom Label</Text>
})`
width: 100%;
height: 50px;
font-size: 16px;
`
However, I have not looked for a way to control the scale when the animation occurs.
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>
);
}
}
I am trying to finish the intro tutorial for Gooddata.ui. However, I am not able to see any chart. I can see loading bullets, but no charts.
To be more specific:
a line chart is shown just for a short time and then it disappears (just a blick)
a bar chart is not shown at all
a table is shown without formatting
My code looks like this (I removed all the things from create-react-app) :
import React, { Component } from 'react';
import { LineChart, BarChart, Table } from '#gooddata/react-components';
...
class App extends Component {
render() {
return (
<div className="App">
<div style={{ height: 300 }}>
<Table
projectId="xms7ga4tf3g3nzucd8380o2bev8oeknp"
measures={measures}
/>
</div>
<div style={{ height: 300 }}>
<LineChart
projectId="xms7ga4tf3g3nzucd8380o2bev8oeknp"
measures={measures}
trendBy={attribute}
config={{
colors: [ '#14b2e2']
}}
/>
</div>
</div>
);
}
}
export default App;
Please, could you help me to find the problem?
It looks you forgot to add the following line of the code to load the CSS:
import '#gooddata/react-components/styles/css/main.css';
See step 2 in part 6 of the tutorial.