I'm interested in having a view which initially loads with my React Native app that essentially has nested components in it. These components will give visual queues to the user as to what state the app is in, eg: still loading data from the server, etc. Basically, it's not just a static splash screen. I might also add some kind of spinner/progress bar, eg: other animated components.
There are solutions out there for static splash screens that initially show while your app loads into memory, but I need to be able to load an initial component, and then remove it when the application's data is ready to go. Is there a convention/pattern to follow in order to achieve this? Is there a way to mount a component, then remove it when it's no longer necessary allowing the rest of the app to be displayed? What's a best practice for this using React Native?
This is what I used to do:
Use <Modal /> to provide your initial, interactive page. It will blocks the screen, with semi-transparent background; If you like it to be full width, just use flex: 1 within the <View /> inside <Modal />.
Use global object / queue for loading status information. My choice is rxjs, then your initial page can just listen to this one source of truth, suggest a BehaviorSubject. So you can subscribe on it for something like:
...
{ tag: 'FetchRemoteData', progress: 10 }
{ tag: 'LoadingComponent', progress: 5 }
{ tag: 'FetchRemoteData', progress: 20 }
...
Read it until match your "load complete" conditions, then close the model.
To make it clear with code.
app.js
render() {
return (
<View>
<InitialBlockingPage />
<YourMainApp />
</View>
);
}
initial-blocking-page.js
constructor(props) {
super(props);
this.state = {
visible: true
};
}
componentDidMount() {
globalQueue.subscribe( () => {
/// pseudo code: until fully loaded
if (fullloaded) this.setState({visible: false});
});
}
render() {
return (
<Modal visible={this.state.visible}>
<SplashScreenWithData />
</Modal>
);
}
Related
For the case of this question let's say I'm building Medium as a React Native app, specifically the screen where you read a story.
This is a long screen, with different types of content appearing as you scroll down. The title, the author information, the content (paragraphs, images, videos, etc), some meta information at the end, social features like comments, etc.
What's the recommended way to build a view like this? ScrollView doesn't seem performant enough especially if there were videos or other media types that needed to be loaded within the content. ListViews seem like they are the more performant option but don't seem like they are designed for this use-case.
Has anyone else faced this challenge? What's the best way to approach it?
<ScrollView> renders all its children first. So, let say you have thousands of elements(medium articles), <ScrollView> will first render all of them, which is pretty much slow and is visible.
For these cases, you can use <FlatList>, which renders the child when it enters the viewport. So, it is performant.
You can refer <FlatList> documentation here: https://facebook.github.io/react-native/docs/flatlist
I had a similar problem for one screen in my app where there were various categories of components involved, for my case <FlatList> worked very well, performance was also up-to the mark.
Solution
Example.js
import React, { Component } from "react";
import { FlatList } from "react-native";
export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
showProgress: false,
content: [{}, {}, {}] // list of objects
};
}
onRefresh() {
this.setState({ showProgress: true });
// call methods here to load new data, once loaded make sure to reset the loading state to false
this.setState({ showProgress: false });
}
showParagraph() {
return <React.Fragment>{/* Your paragraph */}</React.Fragment>;
}
showVideo() {
return <React.Fragment>{/* Your Videos */}</React.Fragment>;
}
showAudio() {
return <React.Fragment>{/* Your Audio */}</React.Fragment>;
}
renderItem(item) {
return (
<React.Fragment>
{item.isVideo ? showVideo() : showParagraph()}
</React.Fragment>
);
}
NoDataMessage() {
return <React.Fragment>{/* Empty screen message goes here */}</React.Fragment>;
}
render() {
return (
<FlatList
data={this.state.content}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => this.renderItem(item)}
onRefresh={() => this.onRefresh()}
refreshing={this.state.showProgress}
ListEmptyComponent={this.NoDataMessage()}
/>
);
}
}
read more about props from here, also you can make an infinite news feed like facebook home page check this React native infinite scroll with flatlist
hope this helps..!
I am making a test with react navigaton and webview , I have 2 screens , Home and Details , at details screen I am calling / opening a webpage inside webview , let's say that I am calling stackoverflow.com (Page A) , my problem is that when user click a link of the stackoverflow page and navigate and after wants to go back to the previous page (Page A) , it doesn't go , its going or navigating to the Home screen !!!
how can I let The user go back to the previous page. ?
that 's how I am calling the page
<WebView
javaScriptEnabled
source={{uri: 'https://stackoverflow.com/'}}
style={{marginTop: 20}}
/>
As we know built in back button is not provided in iOs but it is provided in android .
So for considering both platform there is two possibility.
Android.
-> For android you have to define BackHandler so here are the step.
import it like this.
import {BackHandler } from 'react-native'.
initialize backhandler inside the life cycle methods.
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}
handleBackPress = () => {
if (this.state.canGoBack) {
this.refWeb.goBack();
}
else{
this.props.navigation.goBack(null)
}
return true;
}
define a userdefine variable canGoBack inside the status.
constructor(props) {
super(props)
this.state = {
canGoBack: false
}
}
create a method which detect the change in navigation of the webview and bind it with the web view.
onNavigationStateChange(navState) {
this.setState({
canGoBack: navState.canGoBack
});
}
Bind it like this.
<WebView
ref={(myWeb) => this.refWeb = myWeb}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
source={{ uri: 'https://stackoverflow.com/questions/51712310/react-
native-webview-navigation-issue' }} />
And thsts it you are ready to go..
iOs
For iOs you didn't have to bother too much.
Create a button for back press above the webview or according to your design logic
Follow the above webview and navigation logic . forgot about the backhandler and set this code inside the onPress() method of your created button of backpress
if (this.state.canGoBack) {
this.refWeb.goBack();
}else{
this.props.navigation.goBack(null)
}
Note : Here I use stackNavigator for screen navigation so i used this.props.navigation.goBack(null) this code. if you didn't use it then dont consider this code and replace with your feasible navigator code in else condition
Thankyou..
MainComponent:
<Tabs
initialPage={this.props.day}
tabBarUnderlineStyle={{ backgroundColor: '#5AF158' }}
renderTabBar={() => <ScrollableTab />}>
{this.renderTabHeader()}
</Tabs>
renderTabHeader() {
return (
this.props.dateArray.map((date, i) =>
<Tab
key={i}
heading={date.format('DD/MM')}
tabStyle={styles.tabStyling}
activeTabStyle={styles.activeTabStyle}
textStyle={styles.tabTextStyle}
activeTextStyle={styles.activeTabTextStyle}
>
<View style={{ backgroundColor: '#EEEEEE', flex: 1 }}>
<Content contentDate={date.format('YYYY-MM-DD')} />
</View>
</Tab>
)
);
}
Content Component:
class Content extends Component {
componentWillMount() {
console.log('Component Will Mount() ?');
this.props.loadTransactionByDate({ date: this.props.contentDate });
}
render() {
return (
<View><Text>{this.props.contentDate}</Text></View>
);
}
Basically, in MainComponent there is a collection of tabs. I've noticed something rather weird which Content will be mounted on the first time their tab being click or active?
Meaning for the first time, we can click on Tab index 2 and seeing the console log in componentWillMount, then we switch to another tab and if coming back to Tab index 2 again, componentWillMount will not be triggered anymore?
First I would like to point out you should not use componentWillMount life cycle method since it has been deprecated on last minor update of React 16.3
Heres list of deprecated life cycle methods,
(componentWillMount, componentWillReceiveProps, and componentWillUpdate). You can read more about deprecated life cycle methods here.
Secondary in your example life cycle works as expected. componentWillMount triggers only once since your component will be initial rendered/mounted only one time and that's how React works.
I would work this out with following method.
Add getDerivedStateFromProps life cycle to Content component, which will trigger when component receives new props and as well on initial mount.
static getDerivedStateFromProps(nextProps, prevState) {
console.log('will log on props change');
if( nextProps.contentDate !== prevState.contentDate ) {
return { contentDate: nextProps.contentDate };
// Notice we return plain object here to update state
}
return null;
// return null when changes are not needed
}
This example checks that contentDate has changed and if so pushes it into component -state. And on render method you get it by this.state.contentDate.
render() {
return (
<View><Text>{this.state.contentDate}</Text></View>
);
}
You could achieve similar behaviour with implementing this in componentDidUpdate but then you have much bigger risk to end up with infinite loops and much worse performance. But it's possible just have strong checks that data you have expected has really changed as you would expect. Then you can do setState and component re-renders.
I am new one in React Native. I have to make an app with google map and make possible to change map type from other screen. I am using TabNavigator to switch between screens.
Qestion is how to change map type by switching a radio button in other screen.
This is my HomeScreen map component:
<View style={styles.container}>
<MapView
mapType={'standard'}
provider={this.props.provider}
style={styles.map}
initialRegion={this.state.region}
onPress={e => this.onPress(e)}
>
I want to pass a mapType from another screen with radio buttons
const MAP_TYPES = {
STANDARD: 'standard',
SATELLITE: 'satellite',
HYBRID: 'hybrid',
TERRAIN: 'terrain',
NONE: 'none',};
var radio_props = [
{label: MAP_TYPES.STANDARD, value: MAP_TYPES.STANDARD },
{label: MAP_TYPES.SATELLITE, value: MAP_TYPES.SATELLITE }];
export default class LinksScreen extends React.Component {
static navigationOptions = {
title: 'Options',
};
onPress(value) {
this.setState({value:value});
/*
Here I want to send value to HomeScreen but I don't know how =(
*/
console.log(value);
}
render() {
return (
<ScrollView style={styles.container}>
<RadioForm
radio_props={radio_props}
initial={0}
onPress={(value) => {this.onPress(value)}}
/>
</ScrollView>
);
}
}
App Images
This is my home screen with map
This is my switch
There are two common techniques for this.
Use a higher order component to maintain the state of the map type, and pass it down to child components as a prop. Also pass down a function which can be used to update the state in the higher order component.
Use a system such as redux to create a single state which you can read and update from anywhere in your application.
It’s a matter of personal preference which method you choose, though if the app is going to get more complex over time, some global state management such as redux may be a good idea to use early on.
I'm trying to create a small app, but have many questions)
I have 3 screen and use react-navigation to pass data. the scheme is following:
1) loading screen (fetch data and save it to AsyncStorage+handling data and save to obj1 for pickers)
(pass obj1)
2)main screen (get data,render pickers based on it, take selected values and pass them next)
(pass pickers selection+input)
3)some results(get data from Asyncstorage, some calculating and render results)
so I have two questions.
when I navigate back from 3) to 2) I have an error that screen2 need data, which was passed from screen1. yes - i've checked if this data pass to 3 and then to 2 when Back Button is pressed, and there is no error, but I'm sure this is bad solution
and second..trying to explain) on screen 3 some calculations made on pickers selection, so it hasn't problem. but rest of them needed get data from AsyncStorage and then convert it according to Picker values and render to ListView. Despite I'm putting getting from AS on componentWillMount it's still take much time so data for rendering is undefined. Of course I'm using states, but I think this is a bad logic of data handling..
UPD
so I'm trying pass data from child(screen) to parent(index.ios.js), where it define as first loading view( I'm using navigator's stack screens)
export default class App extends Component {
constructor(props) {
super(props);
};
}
myCallback(dataFromChild) {
console.log("yeah", dataFromChild);
}
render() {
return (
<LoadingScreen callbackFromParent={this.myCallback}/>
);
}
}
and LoadingScreen.js:
render() {
return(
<View style={{flex: 1, backgroundColor: '#dc143c', marginTop:20}}>
<Image
source={require('./WhiteLogo.png')}
style={{flex:3, height: undefined, width: undefined, marginLeft:20, marginRight:20}}
resizeMode="contain"
qwer={this.props.callbackFromParent('listInfo').bind(this)}
/>
<Spinner color='white' style={{flex:1}}/>
</View>
);
}
}
and I've got an error "Unhandled JS Exception: this.props.callbackFromParent is not a function"
AsyncStorage might not be the best solution for what you are trying. Using react-navigation for data delivery is not the best neither. I would suggest checking redux for storing states globally and delivering it to the pages when needed. There is also another way which is passing functions to the props of child components for pulling up any data from child to parent components. You can check this and this or the sample code is below.
Parent
class Parent extends Component {
updateState (data) {
this.setState(data);
}
render() {
<View>
<Child updateParentState={this.updateState.bind(this)} />
</View>
}
}
Child
class Child extends Component {
render() {
<View>
<Button title="Change" onPress={() => {this.props.updateParentState({name: 'test})}} />
</View>
}
}