Our design team has shared some HTML code with us, based on which I have to build the UI in React Native.
There are some tags like:
<link rel="Stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
If I want to adapt these to React Native, how should it be? Or should I develop a React Native app separately without taking any reference from the HTML?
You can use react-native-css-transformer module
install : yarn add --dev react-native-css-transformer
For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
Add this to metro.config.js in your project's root (create the
file if it does not exist already):
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve("react-native-css-transformer")
},
resolver: {
sourceExts: [...sourceExts, "css"]
}
};
})();
Example
App.css
.myClass {
color: blue;
}
.myOtherClass {
color: red;
}
.my-dashed-class {
color: green;
}
Usage
import styles from "./App.css";
<MyElement style={styles.myClass} />
<MyElement style={styles["my-dashed-class"]} />
Documention :
react-native-css-transformer
You can't use HTML tags directly in react native projects,
So you have got two options -
Re write code with React Native elements such View etc..
Import those parts as individual stand by own webviews, https://github.com/react-native-community/react-native-webview/blob/master/README.md
Related
I am working on a Vue3/Laravel8 app, that has to support english and arabic languages. Problem is that there is a huge font-size difference between the en and ar locales:
I've been looking for a while now for a way to change the arabic font-size but it doesn't seem simple.
First I tried finding a way in vue-i18n without success. It would be most convenient if that is possible.
Then I tried going the CSS route, using the :lang(ar) selector but it depends on html or in my case laravel.blade and controlling project language seems to be a hassle, creating middleware and controllers.
Is there a convenient way to do that?
Vue 3.2 introduced some new features for single file components (SFC):
https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css
So in your case you could try something like this (untested):
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
lang: 'en',
},
},
computed() {
fontSize() {
if (this.lang === 'ar') {
return '1.5em';
}
return '1em';
},
},
}
</script>
<style>
.text {
font-size: v-bind(fontSize);
}
</style>
I'm looking to create a video streaming app using react-native and roll out its web version via react-native-web so I can share the codebase. Unfortunetaly I can't wrap my head around how to properly create e.g. a <video /> element when in the browser context.
This is what I currently have:
import { RTCView, /* ... some other components */ } from 'react-native-webrtc';
import { Platform } from 'react-native';
const VideoViewNative = () => {
// Some logic
return <RTCView {/* props for RTCView */};
}
const VideoViewWeb = () => {
return <video {/* props for web video */} />;
}
export default Platform.OS === 'web' ? VideoViewWeb : VideoViewNative;
While this works as expected it does not "feel" right. I think I am bypassing react-native-web here and gettings some drawbacks from that later on.
What would be the proper way to achieve what I want to achieve and why is the approach above wrong?
you can try splitting the code out into separate files. React Native will detect when a file has a .ios. or .android. or .web. extension and load the relevant platform file when required from other components.
Example:
VideoView.native.js for android and ios, also can be separate
platform-specific VideoView.ios.js and VideoView.android.js
VideoView.js for others or you can also make it VideoView.web.js
And You can then require the component as follows:
import VideoView from './VideoView';
React Native will automatically pick up the right file based on the running platform.
I am porting a Polymer 3 app to lit-element stepwise and also want to replace the paper and iron elements by material web components. I very often am using the combination of paper-tabs and iron-pages to show property pages/dialogs.
What would be the replacement for paper-tabs/iron-pages in the material web components world?
I have found mwc-tab-bar but there is no example for actually displaying contents according to the selected tab.
Has anyone an example for how to build what sometimes is called a page-control (tabs plus contents)?
There are several options: (I would prefer 1 & 3)
You could just create a condition to render and eventually lazy load a certain page.
Use something like lion-steps (they also provide tabs)
Use a router like simple-wc-router
class MyElement extends LitElement {
static get properties() {
return {
page: String,
}
}
get _oneTemplate() {
return html`Page one`;
}
get _twoTemplate() {
return html`Page two`;
}
constructor() {
super();
this.page = 'one';
setTimeout(() => (this.page = 'two'), 5000);
}
render() {
return this.page === 'one' ? this._oneTemplate : this._twoTemplate;
}
}
I am using ReactNavigation library in my react-native project and since 6 hours I am trying to navigate from one screen to others screen and have tried every possible way but I think I am not able to get the logic properly.
This is my project structure.
Here
The way I am doing it.
const AppStack = StackNavigator({ Main: Feeds });
const AuthStack = StackNavigator({ Launch: LaunchScreen, });
export default SwitchNavigator({
Auth: AuthStack,
App: AppStack
});
In my LaunchScreen.js
const SimpleTabs = TabNavigator(
{
Login: {
screen: Login,
path: ""
},
SignUp: {
screen: SignUp,
path: "doctor"
}
},
);
<SimpleTabs screenProps={{rootNavigation : this.props.navigation }}/>
But the problem is in my LaunchScreen Component there is a TabNavigator which contains my other two components Login.js and SignUp.js but the button in my Login.js doesn't navigate it to Feed.js.
When you click on the button this is performed.
signInAsync = async () => {
await AsyncStorage.setItem('userToken', 'abc');
this.props.navigation.navigate('Main');
console.log("AAAAAsSSS");
};
My LaunchScreen.js contains a TabNavigation which lets you slide between two components ie. Login.js and SignUp.js.
Now when you click on the Login button which is in Login.js component it will authenticate the user and will switch the entire LauchScreen.js component with the Feed.js component.
I am a noob to react-native.
You can use react-native-router-flux (npm install --save react-native-router-flux)
just make one Navigator.js file and define each page you wanted to navigate.
import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import LaunchScreen from '../components/LaunchScreen.js';
import Feed from '../components/Feed.js';
const Navigator = () => {
return (
<Router>
<Scene key="root">
<Scene key="lauchscreen" component={LaunchScreen} hideNavBar initial />
<Scene key="feedscreen" type="reset" hideNavBar component={Feed} />
</Scene>
</Router>
);
};
export default Navigator;
now in your App.js file add this:
import Navigator from './src/Navigator.js';
export default class App extends Component<Props> {
render() {
return (
<Navigator />
);
}
}
now in your login.js when you click on login button write this:
import { Actions } from 'react-native-router-flux';
onLoginClick() {
Actions.feedscreen();
}
Thats it.. happy coding.
If you want to navigate to Feeds.js then navigate as
this.props.navigation.navigate('App');
not as
this.props.navigation.navigate('Main');
because your
export default SwitchNavigator({
Auth: AuthStack,
App: AppStack // here is your stack of Main
});
refer example
I came across the same issue few months ago. Thank god you have spent just 6 hours, i almost spent around 4 days in finding a solution for it.
Coming to the issue, Please note that in react-navigation you can either navigate to siblings or children classes.
So here, You have a swtichNavigator which contain 2 stack navigators (say stack 1 and stack 2), stack1 has feeds and stack2 has a tab navigator with login and signup.
Now you want to navigate from login.js to feeds.js(say file name is feeds.js). As mentioned already you can not navigate back to parent or grandparent. Then how to solve this issue?
In react native you have the privilege to pass params (screenprops) from parent to children. Using this, you need to store this.props.navigation of launchScreen into a variable and pass it to tab/login (check the tree structure). Now in the login.js use this variable to navigate.
You are simply passing the navigating privilege from parent to children.
Editing here:
<InnerTab screenProps={{rootNavigation : this.props.navigation }} />
Here, InnerTab is the tab navigator.
export const InnerTab = TabNavigator({
login: {
screen: login,
},
},
signup: {
screen: signup,
},
},
},
in login class, use const { navigate } = this.props.screenProps.rootNavigation;
Now you can use variable navigate.
I know its little tricky to understand but i have tried and it works.
Write your Navigator.js file as below,
import React from 'react'
import { NavigationContainer, useNavigation } from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
const SwitchNavigatorStack = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='{nameofscreen}' screenOptions={screenOptions}>
<Stack.Screen name='{nameofscreen}' component={{nameofscreen}}/>
<Stack.Screen name='{nameofscreen}' component={{nameofscreen}}/>
<Stack.Screen name='{nameofscreen}' component={{nameofscreen}}/>
<Stack.Screen name='{nameofscreen}' component={{nameofscreen}}/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default SwitchNavigatorStack
Once, you are done with that change your App.js file to,
import SignedInStack from './navigation'
import React from 'react'
export default function App() {
return <SwitchNavigatorStack/>
}
After this, you are done with setting your project for navigating. In all the components where you want to add navigation feature make sure you use the navigation.navigate() (or) navigation.push() method. Also make sure you hook navigation constant by import useNavigation library. For example,
const Login = () => {
const navigation = useNavigation()
< Button title = 'Login' onPress={() => navigation.navigate('{nameofscreen}')} />
}
with this code snippet you can implement navigation between screens using #react-navigation/native and #react-navigation/stack
Kotlin has frameworks to represent html, such as kotlinx. How can I represent web component tags in such frameworks? For instance, if I want to use Polymer components, do I have to extend these frameworks to include every Polymer component?
You can Customize Kotlinx (To create a Custom Tag). For a tag called dicom-editor to be used inside divs:
class DicomEditor(consumer: TagConsumer<*>) :
HTMLTag("dicom-editor", consumer, emptyMap(),
inlineTag = true,
emptyTag = false),
HtmlInlineTag {}
fun DIV.dicom_editor(block: DicomEditor.() -> Unit = {}) {
DicomEditor(consumer).visit(block)
}
...
div{
dicom_editor {
onMouseDownFunction = {_ ->
window.alert("Dicom Editor")
}
}
}
In the example above, the dicom_editor call includes a callback for the mouse down event. You can also add atributes: attributes["data-toggle"] = "dropdown"
You can add attributes as fields:
class DicomEditor(consumer: TagConsumer<*>) :
HTMLTag("dicom-editor", consumer, emptyMap(),
inlineTag = true,
emptyTag = false),
HtmlInlineTag {
var data_toggle: String = ""
set(x) {attributes["data-toggle"] = x}
}
fun DIV.dicom_editor(block: DicomEditor.() -> Unit = {}) {
DicomEditor(consumer).visit(block)
}
...
div{
dicom_editor {
data_toggle = "dropdown"
}
}
In the Kotlin code, you have to use _ in the place of - or you get an error.
It is possible to use Vaadin 10 to control (Polymer-based) web components from server-side Java. Events are fully supported, please read the docs on how to wrap Web Component in a Java API.
There is a Kotlin integration with Vaadin 10 ready:
The Vaadin-on-Kotlin (VoK) framework; there are nice guides for Vaadin 10 to get you started there.
An example project built on VoK: Vaadin-Kotlin-PWA. This project demoes usage of AppLayout Web Component: AppLayout.kt.
The example code which uses the AppLayout layout and shows the basic page:
#BodySize(width = "100vw", height = "100vh")
#HtmlImport("frontend://styles.html")
#Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes")
#Theme(Lumo::class)
class MainLayout : AppHeaderLayout(), RouterLayout {
private val content: Div
init {
appHeader {
appToolbar {
title.text = "Vaadin Kotlin PWA Demo"
paperIconButton(VaadinIcons.FILE_REMOVE) {
addClickListener {
Notification.show("A toast!", 3000, Notification.Position.BOTTOM_CENTER)
}
}
}
}
appDrawer {
navMenuItem(VaadinIcons.LIST, "Task List")
navMenuItem(VaadinIcons.COG, "Settings")
navMenuItem(VaadinIcons.QUESTION, "About")
}
content = div {
setSizeFull(); classNames.add("app-content")
}
}
override fun showRouterLayoutContent(content: HasElement) {
this.content.element.appendChild(content.element)
}
}
Disclaimer: I'm the author of VoK
You can create XSD file for your components and generate them automatically. It's exactly how kotlinx do it.
Generator is part of the project. Check it out here: https://github.com/Kotlin/kotlinx.html/tree/master/generate
There is also the source XSD file for HTML5 in resource folder:
https://github.com/Kotlin/kotlinx.html/blob/master/generate/src/main/resources/html_5.xsd