I'm using create-react-app to design a PWA. The default Splash screen provided by the App is an icon (in middle of the screen) and a name of the app below that icon. Icon & name must be provided in the manifest file.
Question: Is there any way to customize the Splash Screen instead of using the default one?
Following is the possible solution but searching for a better way to do that.
Possible Solution:
Add a component for Splash Screen.
On the main component, render SplashScreen component untill the API response is returned from the server. I am using renderSplashscreen state for rendering the SplashScreen component.
// Component for Splash Screen
class SplashScreen extends React.Component {
render() {
const style = {top: 0,
bottom: 0,
right: 0,
left: 0,
position: 'fixed'};
return (
<img src={'IMAGE-URL'} style={style}/>
);
}
}
class MainComponent extends React.Component {
constructor(props) {
this.state = {
renderSplashscreen: true
};
}
apiCallback(data) {
// After getting the API response from server
this.setState({renderSplashscreen: false});
}
render() {
let view;
if(this.state.renderSplashscreen)
return <SplashScreen/>;
else
return <OtherComponent/>
}
}
Here's my own possible solution added in the question, as for now, this is the only solution that works well.
Add a component for Splash Screen.
On the main component, render SplashScreen component untill the API response is returned from the server. I am using renderSplashscreen state for rendering the SplashScreen component.
// Component for Splash Screen
class SplashScreen extends React.Component {
render() {
const style = {top: 0,
bottom: 0,
right: 0,
left: 0,
position: 'fixed'};
return (
<img src={'IMAGE-URL'} style={style}/>
);
}
}
class MainComponent extends React.Component {
constructor(props) {
this.state = {
renderSplashscreen: true
};
}
apiCallback(data) {
// After getting the API response from server
this.setState({renderSplashscreen: false});
}
render() {
let view;
if(this.state.renderSplashscreen)
return <SplashScreen/>;
else
return <OtherComponent/>
}
}
Related
Some answers were submitted but please note that background color has to be changed through props, NO css at all.
I've a 3rd party component rendered, how can I change it's background color from the wrapper component without changing the code of MediumButton component?
3rd party component:
class MediumButton extends React.PureComponent {
render() {
return <button style={{ width: 100, height: 50 }}>{this.props.text}</button>;
}
}
Wrapper component
class BackgroundWrapper extends React.Component {
constructor(){ super() }
render() {
return <MediumButton text={"Click me!"}></MediumButton>;
}
componentDidMount() {
}
componentWillUnmount() {
}
getDOMNode() {
return ReactDOM.findDOMNode(this);
}
}
BackgroundWrapper.defaultProps = {
backgroundColor: "green"
};
App
const App = (props) => <BackgroundWrapper backgroundColor={props.backgroundColor} ></BackgroundWrapper>;
This isn't the best way to add styling. Also findDOMNode is deprecated in StrictMode i.e it will be soon removed from the library. But to answer your question:
findDOMNode returns the underlying element in this case it is button. And we can make use of native properties to update the styling. In this case we want update background style so we can do below:
componentDidMount() {
if (this.getDOMNode())
this.getDOMNode().style.background = this.props.backgroundColor;
}
I would do it as follow:
First, import the custom style:
// import style.css stylesheet
import './style.css'
Then, render the component to see how can you select the button that needs to change the background and use that css selectors in the style.css
your_selector {
your_css;
}
You can trick it like this:
Create a parent div element
return <div className={`div-{props.backgroundColor}`}><MediumButton text={"Click me!"}></MediumButton></div>;
and then you could define a css for this, e.g.
.div-green > button {
background: green;
}
In a new create-react-app, hot reloading seems to be taking effect only for css files. In the simple example below, clicking on the first hello increments the timer to 1. Then, when I change e.g. the second "Hello" text to "Goodbye", the page reloads and the timer is set to 0 again.
Am I misunderstanding hot-reloading perhaps? I thought that it's purpose is to stop the re-render from happening.
import React from 'react';
import './App.css'
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
timer: 0,
};
this.timerInc = this.timerInc.bind(this);
}
timerInc() {
this.setState({
timer: 1,
})
}
render () {
return (
<div className="App">
<h1 onClick={this.timerInc}>Hello</h1>
<h1>{this.state.timer}</h1>
<h1>Hello</h1>
</div>
)};
}
export default App;
I am using an iframe on the webpage which is blocking the rest of the page from rendering until the iframe is completely loaded. How can I enable an async iframe load (or delay the load of the iframe) so the web page element isn't blocked? *the iframe is not providing async loading.
You could initialize the iframe after your componentDidMount like this:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
showIframe: false
};
}
componentDidMount() {
this.setState({showIframe: true});
}
render() {
const { showIframe } = this.state;
return (
<div>
{ showIframe &&
<iframe src={'https://www.example.com'} />
}
</div>
);
}
}
This will render the iframe after your component has mounted.
I have started to learn React Native and as always begin by creating reusable components. I learnt how you can pass and access props while creating custom components.
I want to create a base screen in React Native, which has common properties and all screens in my app can set, like a title for example.
Below I'm creating a new Screen for the home page of my app
class APCComponent extends Component {
constructor(props) {
super(props);
}
render() { //dummy function, will always get overridden in the child
return (
<View />
);
}
}
export default class Home extends APCComponent {
//I somehow want to pass a string to the parent APCComponent
//and want APCComponent use it to set the Header of the navigation
constructor() {
super({ title: 'Home' });
}
//Right now the following works, but in case I use a different type of Navigation,
//I'll have to change all components. By just setting a string, I'm allowing my base
//component to display the header
static navigationOptions = { title: "Home" }; //from react-navigtion's StackNavigator
render() {
return <Button title="Sample Button" />;
}
}
Thanks
class BaseComponent extends Component {
render() {
return (){
<Header title={this.props.title} />
}
}
}
class HomeScreen extends Component {
render() {
return (){
<BaseComponent title='this is your home screen' />
}
}
}
where Header component is also a separate reusable component.
you need to pass props(in our case 'title') from the upper level component to base level components like the above example.
In the constructor of HomeScreen, props should be able to passed to BaseComponent through
constructor(props) {
super(props);
...
does it work for you?
I'm working on a React Native project and I realized that React Native seems to break the React flow (Parent to children) props update.
Basically, I'm calling a "Menu" component from an "App" component, passing a prop to "Menu". However, when I update the "App" state, the props on "Menu" should update, but this doesn't happen. Am I doing something wrong?
That's my code:
App.js
import React from 'react';
import {
View,
Text
} from 'react-native';
import Menu from './Menu';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
opacity: 2
}
}
componentDidMount() {
setTimeout(() => {
this.setState({
opacity: 4
});
}, 3000);
}
render() {
return(
<View>
<Menu propOpacity={this.state.opacity} />
</View>
);
}
}
export default App;
Menu.js
import React from 'react';
import {
View,
Text
} from 'react-native';
class Menu extends React.Component {
constructor(props) {
super(props);
this.state = {
menuOpacity: props.propOpacity
}
}
render() {
return(
<View>
<Text>Menu opacity: {this.state.menuOpacity}</Text>
</View>
);
}
}
Menu.propTypes = {
propOpacity: React.PropTypes.number
}
Menu.defaultProps = {
propOpacity: 1
}
export default Menu;
React is not breaking data flow... You are. After initial state initialisation, you forget to update Menu's state later, when parent sends updated props.
Try this...
class Menu extends React.Component {
constructor(props) {
super(props);
this.state = {
menuOpacity: props.propOpacity
}
}
componentWillUpdate(nextProps, nextState) {
nextState.menuOpacity = nextProps.propOpacity;
}
render() {
return(
<View>
<Text>Menu opacity: {this.state.menuOpacity}</Text>
</View>
);
}
}