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.

React Component only rendering on some browsers

I have an array of addresses which i have mapped to a list and then rendered on the screen. The issue I am finding is that when the app is deployed it only seems to work on some peoples machines and not others. A few of us have tested on chrome and i cant see the list while others can. While i can not visibly see the list I can still click a selected address so the array is there but it is just no visible.
Below is my code to render the list
$('#addressDropddown').show();
const listItems = this.addresses.map((list) =>{
return(
<li>
<p className="addressListButtons" onClick={()=>this.myFunction(myObj, list)}>{list}</p>
</li>
)
})
//Render the button listdocument.
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('addressDropddown'));
it is then rendered to the below div
<MDBRow>
<MDBCol size="3" />
<MDBCol lg="5" md="12" className="title-left">
<MDBAnimation className="ex3" id="addressDropddown" type="fadeIn">
<div className="ex3" />
</MDBAnimation>
</MDBCol>
<MDBCol size="3" />
</MDBRow>
i have attached two images of the results on 2 separate pcs. i see the list in one and not the other.
Results Not Visible
Results Visible

The issue was that when rendering styling within a component and not through the css it will only be allowed on some browsers and not others.
e.g.
document.getElementById("authorisationCheckboxText").style.color = "#ff0000";

React bootstrap dropdown form control layout

Im new to react (and react bootstrap) frontend and im a bit stuck. Is there a way to use a dropdown like this and have the 2 date inputs next to eachother (horizontally) instead of vertically? Orcan i only achieve that by using accordion? It needs to look like a dropdown before you click it.
This is how it looks now. And as you see it isnt quite fancy.
My current code:
return (
<Dropdown>
<Dropdown.Toggle variant="light" style={ buttonStyle } id="dropdown-basic" className="uniform-select" >
{headerTitle}
</Dropdown.Toggle>
<Dropdown.Menu>
<Form.Control
type="date"
name="startTime"
id="startDateId"
onChange={ handleStartDate }
/>
<Form.Control
type="date"
name="enddate"
id="endDateiD"
onChange={ handleEndDate }
/>
</Dropdown.Menu>
</Dropdown>
)
Help would be appreciated!

Well, im quite new too but you can probably change the flexbox properties, from a column to a row, if you havent tried it. just inspect the DOM element, and create a new css style with the classname and experiment with the flex directions, cause as far as i know most of react bootstrap components use flex anyways

Bottom Navigation bar for android application (NativeScript)

I am trying to create a navigation bar at the bottom of my android application. I am using NativeScript for creating the application. Is there any plugin to do this?
<page
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns:widgets="shared/widgets"
xmlns:statusbar="nativescript-statusbar"
xmlns:bottomnav="nativescript-bottomnavigation"
loaded="pageLoaded">
<statusbar:StatusBar ios:barStyle="light" />
<page.actionBar>
<action-bar title="NativeScript">
<navigation-button icon="res://ic_menu" tap="toggleDrawer" ios:visibility="collapsed" />
<action-bar.actionItems>
<ios>
<action-item icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
</ios>
</action-bar.actionItems>
<ActionItem tap="onDelete" ios.systemIcon="16" ios.position="right" text="Delete" android.position="popup"/>
<ActionItem id="logoutButton" tap="logOut" ios.systemIcon="16" ios.position="right" text="LogOut" android.position="popup"/>
</action-bar></page.actionBar>
<drawer:rad-side-drawer id="drawer">
<drawer:rad-side-drawer.mainContent>
<!-- Home page contents -->
<StackLayout loaded="contentLoaded">
<image src="https://i.imgur.com/LY3cb3A.png" id="logo" tap="fun" height="100" margin="20 0 0 0" />
<label text="Welcome to the NativeScript drawer template! This is the home page. Try tapping the logo." margin="20" horizontalAlignment="center" textWrap="true" />
</StackLayout>
</drawer:rad-side-drawer.mainContent>
<drawer:rad-side-drawer.drawerContent>
<widgets:drawer-content />
</drawer:rad-side-drawer.drawerContent>
</drawer:rad-side-drawer>

I did a research about what's the best way to create a bottom navigation.
For me, the easiest approach is to create a GridLayout with two rows: one for the scrolling content and one for the bottom navigation:
<GridLayout rows=*,60">
<ScrollView row="0">
... scrolling content ...
</ScrollView>
<StackLayout row="1">
... navigation buttons ...
</StackLayout>
</GridLayout>
The second row represents the navigation. In my example, I am using 60 dp in height. The first row (the scrolling content) takes the rest of the vertical space available. The star (*) symbol means — take as much space as available.
You can check my experience in the following article: NativeScript: how to create a fixed bottom navigation

Programatically i would advice you write the code without library for easy manipulation and flexibility
consider the following CSS on your app.css
.add-menu-btn {
background-color: #2b2dad;
padding: 10;
color: #fff;
border-radius: 50;
text-align: right;
}
.float-menu-bottom {
vertical-align: bottom;
horizontal-align: right;
padding: 5;
}
Then on your xml file you should have your layouts structured how ever you want but maintain this.
One step layouts, main contents and absolute layouts
<Page>
<GridLayout>
<ScrollView>
...contents here or more layouts
</ScrollView>
<AbsoluteLayout class="float-menu-bottom">
<StackLayout class="add-menu-btn">
<Label text="add" class="mdi mdi-large menu-right"></Label>
</StackLayout>
</AbsoluteLayout>
</GridLayout>
</Page>

Use this library
Solution 1
For better solution you can check here
Solution 2

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.