Develop Reference

Can't load a local background image in ReactJS

I'm having some problems taking an image from my local machine with my React App.
I'm trying to take image like
style={{ backgroundImage: `url(../../assets/images/games/${img}))` }}
But it's not working, and I don't understand why.
My file is located in
C:\Users\Me\Desktop\myreactapp\src\routes\GameSlider\index.js
And my images are in
C:\Users\Me\Desktop\myreactapp\src\assets\images\games
This is how my index.js looks now (without imports):
const GameSlider = ( { key, id, name, img, minPrice, maxSlots } ) => {
return (
<div key={key}>
<div className="home-games">
<div className="img" style={{ backgroundImage: `url(../../assets/images/games/${img}))` }} alt="..." />
<div className="price">
<IntlMessages id="gameSlider.startingAt" />
<p>
<span className="min">{minPrice}</span>
<span className="per-slot">
<IntlMessages id="gameSlider.perSlot" />
</span>
</p>
</div>
<span className="title">{name}</span>
<div className="features">
<Col span={24} className="feature">
<Icon type="lock" /> <IntlMessages id="gameSlider.upTo" /> {maxSlots} <IntlMessages id="general.slots" />
</Col>
</div>
<Link to={`/order/${id}`}><Button className="comet-buy-button" style={{ background: 'rgb(241,89,89)', borderRadius: '20px' }}>BUY NOW!</Button></Link>
</div>
</div>
);
}
export default GameSlider;

1 - Import your img:
import img from '../../pics/asteroids.jpg'
2 - And then use it:
<div style={{backgroundImage: `url(${img})`}}>Test</div>
On your page this div will look like this:
<div style="background-image: url("/static/media/asteroids.c8ab11b3.jpg");">Test</div>

Absolute path and relative path is always one of the issue for developers to fix :P so there is a another way to solve this easily.
You can use something like this:
import the whatever image in the namespace
import backgroundImg from '../images/BackgroundImage.jpg';
then use it the element like this
<img src={backgroundImg} />
let me know if this works.

If you want to use image or images without importing them, you should put your assets folder into the public folder and use them like below:
src='/assets/images/pic.jpeg'

I tried for hours lots of different solutions and in the end it came down to having quotes inside the url call, like this:
`url('${ImportedImage}')`
Quite weird that this happened though because in previous projects it has always worked fine without the inner quotes (actually, I've noticed in the past that it worked with OR without the quotes). Only thing I've done differently this time is used the TypeScript template of create-react-app to set up the project.

Modal page shows page shadow on physical device, none on emulator

I'm currently creating a simple subsription page for an app developed using Nativescript. It's presented as a modal page with a little bit of styling and all the usual jazz to make it look nice and neat. To make sure that it looks somewhat like a pop-up dialog i've removed the background as mentioned in this issue on github and set the Page background to transparent. This works perfectly fine on an emulator but when I launch it on a physical device it leaves a shadow. It's barely visible but it is still too much to make us ship it.
Emulator without a shadow
Physical device with shadow
This issue is only present on a physical iPad which is a 9.7' 2018 model with OS 13.1.2.
The code from the parentView is as follows,
exports.onUpdateSubscriptionTap = async() => {
const option = {
context: { viewModel: settingsViewModel },
closeCallback: () => {
license = settingsViewModel.license;
onUpdate();
},
fullscreen: false
};
page.showModal('~/views/settings/fmprompt-page', option);
};
And the XML building the dialog is as follows,
<Page borderRadius="40" backgroundColor="transparent" loaded="onLoaded" shownModally="onShownModally" showingModally="onShowingModally"
xmlns="http://www.nativescript.org/tns.xsd" automationText="FMPrompt" >
<StackLayout class="layout" height="50%" verticalAlignment="top">
<Label class="prompt-title" text="{{ L('settings.subscription_dialog_title') }}" textWrap="true" automationText="prompt-title"/>
<Label class="prompt-detail" text="{{ L('settings.subscription_dialog_msg') }}" textWrap="true" automationText="prompt-details"/>
<GridLayout columns="auto,auto,auto,auto,auto" horizontalAlignment="center" height="50">
<TextField id="inputField1" col="0" class="prompt-field" hint="ABC" automationText="prompt-field"
textChange="onTextChangeOne" autocorrect="false" autocapitalizationType="allcharacters" maxLength="3" />
<Label text="-" col="1" />
<TextField id="inputField2" col="2" class="prompt-field" hint="DEF" automationText="prompt-field"
textChange="onTextChangeTwo" autocorrect="false" autocapitalizationType="allcharacters" maxLength="3" />
<Label text="-" col="3"/>
<TextField id="inputField3" col="4" class="prompt-field" hint="GHE" automationText="prompt-field"
textChange="onTextChangeThree" autocorrect="false" autocapitalizationType="allcharacters" maxLength="3" />
</GridLayout>
<GridLayout columns="auto,auto" horizontalAlignment="center">
<Button class="prompt-btn" text="{{ L('cancel') }}" tap="onCancelTap" col="0" />
<Button class="prompt-btn" text="{{ L('OK') }}" tap="onOKTap" col="1"/>
</GridLayout>
</StackLayout>
</Page>
If anyone can spot where I go wrong or what's causing this weird shadow to appear, and solution or a tip would be greatly appreciated!
UPDATE
So i've tried a few different iOS runtimes on my iPad and Simulator. This shadow presents itself on all runtimes tested (10.3, 13.1, 13.3) but not on the 13.0 runtime which i find odd.
It is some time ago since i last did native iOS development but I thought i could recall a time where modal ViewControllers didn't show any shadow as in the first picture. Is this a new design choice from Apple? I did the following test by writing a super simple native iOS app and the shadow still presents its ugly face.
Can this "shadow" be removed and how?

ReactJS style component

I'm new to reactjs and I made a component like this:
<Row>
<Column className="col-8 noPadding">
<Text value={this.props.description} />
</Column>
<Column className="col-4 text-right noPadding">
<Text {...this.props} />
</Column>
</Row>
This works fine for me but if I'm using this component (named Autosuggest) I can't style it. I made a .css file (which works on other components) but it doesn't affect my Autosuggest control:
<AutoSuggest className="marginTop" {...this.props.formControlProps} description="test" value="test" />
CSS:
.marginTop{
margin-top: 3rem;
}
There is no margin for the Autosuggest control. I tried to change the color but it doesn't work too.
Is the only way to style it, if you apply the styles in the component class?

Its solved just added a new property and set the className of the hosting to the properties value. Thanks

Import Local Picture to XML for Cross-Platform App

I am currently working on a NativeScript App. I am having trouble using a locally saved picture on this app. I need to be able to maximize this said picture in XML and make it transparent so it allows movement to the next page.

Depends on how you are storing your image; if it is in the app folder then you need:
<Image src="/path/to/local/image">
If it is in the app_resources folder then you need
<Image src="res://image_name">
Add a width and a height to size it
<Image width="300" height="300">
Add some css for transparency:
Image {opacity: 50;}
If you are needing a button (for navigation) above it then you should do:
<GridLayout rows="auto">
<Image row="0" ... other params .../>
<Button row="0" ... other params .../>
</GridLayout>
Grid layout will allow you to stack items in the same display area.

How do you center a div element in react w/out external css file

How do I center a div element in react with using an external css file. I tried using bootstrap classes and inline styles that other people posted but none of those worked. I was wondering how you guys would implement this without an external css file.

If you don't have to support old browsers, you may look into Flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Try something like this:
<div style={{display: 'flex', justifyContent: 'center'}}>
<div>centered content</div>
</div>

Offsets: The first uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 6 would be centered by adding an offset of 3, that's (12-6)/2.
In markup this would look like:
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
margin-auto: You can center any column size by using the margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout :
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>

An easy way to do this using react-bootrsrap is
<Grid>
<Row className="text-center"><h1>Our Products</h1></Row>
</Grid>
Use className (instead of class) to take advantage of Bootstrap's built in class of "text-center".

I am using react-bootstrap for this:
export default class CenterView extends React.Component {
render() {
return (
<Grid>
<Row className="show-grid">
<Col xs={1} md={4}></Col>
<Col xs={4} md={4}>{this.props.children}</Col>
<Col xs={1} md={4}></Col>
</Row>
</Grid>
)
}
}
and then in code
<CenterView>
<LoginForm/>
</CenterView>

Have this between the imports and React Class
const styles = {
center: {
marginLeft: "auto",
marginRight: "auto"
}
}
Then to use
<div className={styles.center}>
hi
</div>

I just added:
<Grid container spacing={2} justify="center"></Grid>

For people using React Bootstrap, here I show an example of the classes text-align and justify-content-center. As the names describe, one is for centering text and the other for centering elements.