I'm new to React and React Native, I want to build a cross platform app which would use native components on mobile platforms.
I installed and initialized a react-native-app and install react-native-web and I wonder how to start my boilerplate code on android emulator, the documentation doesn't tell how.
Use these commands to get Demo Code
npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start or react-native start
Once you Get familiar to basics. I recommend you boilerplate code you must check out .
1. https://github.com/cubixlabs/ReactCube
2. https://github.com/GeekyAnts/NativeBase
3. https://github.com/shoutem/ui
Web View Component index.js
// #flow
import React from "react";
import PropTypes from "prop-types";
import {
WebView as WebViewRn
} from "react-native";
export default class WebView extends React.PureComponent {
static propTypes = {
source: PropTypes.object
};
static defaultProps = {
source: {
html: `
<html>
<header>
<style>
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</header>
<body>
<p>No valid HTML provided</p>
<p>source props is missing</p>
</body>
</html>
`
}
};
render() {
const {
source,
...rest
} = this.props;
return <WebViewRn source = {
source
} { ...rest
}
/>;
}
}
Component : Styles.js
// #flow
import {
StyleSheet
} from 'react-native';
import {
Colors
} from '../../theme';
export default StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.primary.backgroundColor
}
});
Container Class index.js
// #flow
/*
Disable selection style
style="-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;"
Word wrap and break word style
style="word-wrap: break-word;"
*/
import {
connect
} from "react-redux";
import React, {
Component
} from "react";
import {
WebView
} from "../../components";
class Terms extends Component {
render() {
return <WebView source = {
{
html
}
}
/>;
}
}
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin: 0 auto;
}
h2 {
color: #000;
margin-bottom: 15px;
font-size: 30px;
font-weight: 700;
font-family: 'Roboto', sans-serif;
line-height: 1.2;
margin-top: 25px;
}
p {
font-family: 'Roboto', sans-serif;
text-align: left;
line-height: 26px;
font-weight: 300;
font-style: normal;
color: #000;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container" style="-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;">
<h2>Disclaimer</h2>
<p>Always make sure to double check recipe and component ingredients (and where they are produced) if you have any health
related issues to avoid particular foods. Please make sure to consult a doctor and always double check labels. Please
notify us of any errors on the recipes itself. We strive to make information as acurate as possible for convenience, however
we disclaim any warranty on it.</p>
<p>Always consult a licensed physician or licesned nutritionalist for all medical, dietary and allergen issues. All information
on our site “as is” has no warranty on it of any kind. Either expressed or implied. </p>
<p>Rich thomas LLC and its partners disclaim all warranties expressed or implied including without limitation those of merchanitbility
or fitness for a particular purpose and non fringement or arsiing from a course of dealing, usage, or trade practice.
Rich Thomas LLC shall not be liable for any indirect, special, consequential, or incidental damages arising from any information
present.</p>
</div>
</body>
</html>`;
const mapStateToProps = () => ({});
const actions = {};
export default connect(mapStateToProps, actions)(Terms);
Related
I am trying to render a styled react calendar (see here https://blog.logrocket.com/react-calendar-tutorial-build-customize-calendar/#styling-your-calendar) in Symfony. I am following the tutorial found here: https://symfony.com/bundles/ux-react/current/index.html.
The calendar component itself appears to render fine. See below.
However, there is no css styling present.
Here is the code for the calendar:
// assets/react/controllers/MyComponent.jsx
import React, { useState } from 'react';
import Calendar from 'react-calendar';
import './calendar.css'
export default function () {
const [date, setDate] = useState(new Date());
return (
<div className='app'>
<div className='calendar-container'>
<Calendar
onChange={setDate}
value={date}
locale="en-EN"
/>
</div>
<p className='text-center'>
<span className='bold'>Selected Date:</span>{' '}
{date.toDateString()}
</p>
</div>
);
}
Here is the css code:
.react-calendar {
width: 400px;
max-width: 100%;
background-color: #fff;
color: #222;
border-radius: 8px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.125em;
}
.react-calendar__navigation button {
color: #6f48eb;
min-width: 44px;
background: none;
font-size: 16px;
margin-top: 8px;
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
background-color: #f8f8fa;
}
.react-calendar__navigation button[disabled] {
background-color: #f0f0f0;
}
abbr[title] {
text-decoration: none;
}
/* .react-calendar__month-view__days__day--weekend {
color: #d10000;
} */
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
background: #f8f8fa;
color: #6f48eb;
border-radius: 6px;
}
.react-calendar__tile--now {
background: #6f48eb33;
border-radius: 6px;
font-weight: bold;
color: #6f48eb;
}
.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
background: #6f48eb33;
border-radius: 6px;
font-weight: bold;
color: #6f48eb;
}
.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
background: #f8f8fa;
}
.react-calendar__tile--active {
background: #6f48eb;
border-radius: 6px;
font-weight: bold;
color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
background: #6f48eb;
color: white;
}
.react-calendar--selectRange .react-calendar__tile--hover {
background-color: #f8f8fa;
}
.react-calendar__tile--range {
background: #f8f8fa;
color: #6f48eb;
border-radius: 0;
}
.react-calendar__tile--rangeStart {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
background: #6f48eb;
color: white;
}
.react-calendar__tile--rangeEnd {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
background: #6f48eb;
color: white;
}
Here is a screenshot of the folder/file structure:
Here is my webpack.config.js
const Encore = require('#symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or subdirectory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/app.js')
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
// .enableVersioning(Encore.isProduction())
.enableVersioning()
// configure Babel
// .configureBabel((config) => {
// config.presets.push('#babel/preset-react');
// })
// enables and configure #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = '3.23';
})
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use React
.enableReactPreset()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
And here is my app.js:
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
////////////////////////////////////////
//
// FOR REACT
//
// https://symfony.com/bundles/ux-react/current/index.html
import { registerReactControllerComponents } from '#symfony/ux-react';
// Registers React controller components to allow loading them from Twig
//
// React controller components are components that are meant to be rendered
// from Twig. These component then rely on other components that won't be called
// directly from Twig.
//
// By putting only controller components in `react/controllers`, you ensure that
// internal components won't be automatically included in your JS built file if
// they are not necessary.
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
//
////////////////////////////////////////
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';
// compile new js file
// import './javascript/method1.js';
// start the Stimulus application
import './bootstrap';
Please let me know if there is anything else I can do to help. When running npm run dev, it does seem to recognize the import './calendar.css' as valid. I am not sure what to do here and haven't found anything similar online yet. Thank you.
In webpack, css-loader I use localIdentName hash:base64:10 to "hide" real class names.
I have also some global components to put inside DOM structure page.
But, sometimes I need change style component form parent. When I use explicit class names (local), styles is working, but after render with hash, "duplicates" class name has diffrent hash and not overrite styles.
I mean about .window .paper - I want to overite .paper form a parent, but I haven't idea how can I get rendered hash name from file.
structure:
|-main.js
|-style.less
|-paper
|-index.js
|-style.less
main.js
import React from 'react';
import s from "./style.less";
import Paper from './paper/index.js';
export class Main extends React.Component {
render() {
return (
<div className={s.window}>
<Paper>example text</Paper>
</div>
)
}
}
style.less
#import 'paper/style.less';
.window {
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
width: 100%;
height: 100%;
.paper { //<-----
background-color: yellow;
}
}
paper/index.js:
import React from 'react';
import s from "./paper/style.less";
export class Paper extends React.Component {
render() {
const { children } = this.props;
return (
<div className={s.paper}>
<div className={s.content} ref={...}>{children}</div>
</div>
)
}
}
paper/style.less:
.paper { //<-----
display: block;
background-color: white;
border: 1px solid black;
.content {
margin: 20px;
}
}
I use class modules throughout my project, but for some reason in one of my components it isn't built correctly:
import Body from './Body';
import IllustrationJobs from '../../assets/images/illu_jobs.svg';
import styles from "./Careers.modules.css";
const Careers = () => {
return (
<Body>
<section className={styles.rowOneContainer}>
<div className={`${styles.careersText} animate__animated animate__fadeInLeft`}>Right now we don't have any open positions. Make sure to check by
soon again or contact us directly.</div>
<div className={`${styles.careersImage} animate__animated animate__fadeInRight`}><img src={IllustrationJobs} alt="illustration_jobs"/></div>
</section>
</Body>
)
}
export default Careers;
CSS
.rowOneContainer {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.careersText {
width: 50%;
margin: auto;
text-align: center;
font-size: 1.5rem;
color: var(--salaryx-purple-dark);
}
.careersImage {
width: 50%;
}
returns
while in other components the very same syntax returns the correct class. Why's that?
Careers.modules.css is invalid format for the file
Use Careers.module.css instead
What is the "animate__animated animate__fadeInLeft"?.
Is that a style module or regular CSS?
Are those two class names?
Where is the code for this?
enter image description here
Image
encountering white space at top of the react-app
Check the image
There's weird whitespace occurring at the top of the react-app. My developed app not even a big react-app but there something occupying the space there and creating a white space there. I have deleted the old project and did this new one thinking it'll remove my error but the same result. I'm using a routing package to route through my app react-route-dom. I tried all the possible ways but couldn't find out the error or the line of code that is triggering the white-space at the top of the react-app. Please anyone help I have to submit my project!.
App.js
import React from 'react'
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello</h1>
</div>
);
}export default App
App.css
.App {
text-align: center;
background: red;
height: 30%;
}
Index.js
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'
const app = <BrowserRouter><App/></BrowserRouter>
ReactDOM.render(
<React.StrictMode>
{app}
</React.StrictMode>,
document.getElementById('root') );
reportWebVitals()
**index.css**
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #333;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
Add this to your index.css :
*{
margin: 0;
padding: 0;
box-sizing: border-box; // not neccesary
}
This happens because chrome by default adds some padding to your page
user agent stylesheet is doing that. For instance Chrome styles h1 by default like so:
h1 {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
This will create those margins you're complaining about. All you need to do is explicitly style your h1 in your CSS file. Something like this: h1{margin: 0px}. Do the same for the body.
Also note that If <!DOCTYPE> is missing in your HTML content oftentimes the browser gives preference to the "user agent stylesheet" over your custom stylesheet.
In my case, the space provoked the css property place-items: center from the index.css file.
When I am trying to use font-weight and font-family when creating a styled component, nothing happens. Is there some specific way to set font-weight and font-family, when using styled components?
Any help is appreciated. Thanks in advance.
export const H3 = styled.h3`
font-size: ${fontsize.H3FONTSIZE};
font-weight: 700;
font-family: "museo", Helvetica Neue, Helvetica, sans-serif;
`;
What you have works perfectly fine.
Complete example
import React, { Component } from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';
const fontsize = {
H3FONTSIZE: '400px',
}
export const H3 = styled.h3`
font-size: ${fontsize.H3FONTSIZE};
font-weight: 10000;
font-family: "museo", Helvetica Neue, Helvetica, sans-serif;
`;
class App extends Component {
render() {
return (<H3>Hello</H3>)
}
}
render(
<App />,
document.getElementById('root')
)
Demo: https://stackblitz.com/edit/styled-components-rbd4xo?file=index.js