I am developing news app using react native, and the problem is the startup time is taking too much time (around 3 seconds to load initially and 5 seconds for the home screen to show up).
I have 36 articles and the json response is big(3000 lines). After analyzing i found that the reason is the waiting time of resolving the function promise that get the articles(after .then).
The function that gets articles:
export async function getArticles(){
try {
let articles = await fetch(``);
let result = await articles.json();
return result;
} catch (error) {
throw error
}
}
The home.js that display the articles is :
export class HomeScreen extends PureComponent {
constructor(props) {
super(props);
this.state = {
isLoading: true,
data: null,
isError: false,
}
}
componentDidMount() {
getArticles().then(data => {
this.setState({
isLoading: false,
data: data
})
}, error => {
Alert.alert("Error", "Something happend, please try again")
})
}
I tried to simplify the response body by extracting specific fields but there was no difference, and I dont know how to fetch only simple number of articles from the url itself like per_page or something else ... .
Can you advice how to start rendering before waiting the json response to complete?.
Related
I am developing app using react native, and i have api call that retrieve json. How i can call another api in home screen immediately after it is loaded, this api i want to use for storing json data in order to use it in another screen, because i do not want the user to wait if he clicks.
The home.js that display the home screen is :
export class HomeScreen extends PureComponent {
constructor(props) {
super(props);
this.state = {
isLoading: true,
data: null,
isError: false,
}
}
componentDidMount() {
getArticles().then(data => {
this.setState({
isLoading: false,
data: data
})
}, error => {
Alert.alert("Error", "Something happend, please try again")
})
}
The function that gets articles:
export async function getArticles(){
try {
let articles = await fetch(``);
let result = await articles.json();
return result;
} catch (error) {
throw error
}
}
Can you recommend also tutorials or docs about cashing json response ?.
You can use any of these 3 third-party libraries to cache the response
[Redux] https://redux.js.org/introduction/getting-started
[React Native Async Storage] https://github.com/react-native-community/async-storage
[Context API] https://www.taniarascia.com/using-context-api-in-react/
You can call as many APIs in the componentDidMount. But if the second API is dependent on the first API then call second API in the then function
Currently, I am learning react native and still don't know why it happened.
I have a component A and component B.
In component A when handle success I will pass isSucceeded: true and false for the failure case.
but I don't know why when having success case it navigates to B screen and always show Fail text before showing Success text for 1 second
component A:
login() {
dataService.getService().then((response) => {
navigateService.navigate('B', {isSucceeded: true})
}).catch(error => {
navigateService.navigate('B', {isSucceeded: false})
});
}
In component B:
componentDidMount() {
this.state.isSucceeded = navigation.getParam('isSucceeded')
}
render() {
this.state.isSucceeded ? <View> <Text>Success</Text></View> :
<View> <Text>Fail</Text></View>
}
How can it show Success Text when having success case and fail for failed case
Thanks you.
You should do it in the constructor
constructor(props) {
super(props);
this.state = {
isSucceeded: props.navigation.getParam('isSucceeded'),
};
}
If you insist doing it in componentDidMount then you must use setState():
componentDidMount() {
const isSucceeded = this.props.navigation.getParam('isSucceeded');
this.setState({ isSucceeded });
}
I'm trying to pass device token from my App.js to my Login component in react-native.
I'm trying something like this :
Here's my app.js :
const RootStack = createStackNavigator(
{
Login: {
screen: Login,
navigationOptions :{ headerLeft: null}
},
Tab: {
screen: Tab,
navigationOptions :{ headerLeft: null }
}
},
{
initialRouteName: 'LoginScreen'
}
);
const MyApp = createAppContainer(RootStack);
constructor(props) {
super(props);
this.state = {
token: ''
}
}
async componentDidMount() {
this.state.token = await firebase.messaging().getToken().then(token=> { return token;});
this.checkPermission();
this.createNotificationListeners();
}
render() {
return (
<MyApp token={this.state.token}></MyApp>
);
}
And my Login.js :
export default class LoginScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
mail:"",
password: "",
token: this.props.token
}
}
async Login(){
console.log(this.state.token)
}
}
Of course it's not working, I don't know how to pass the token via components, or via stacknavigator without using .navigate(). Besides even if I fill the const with a single string, it's not working, so what am I doind wrong ? And is it going to be different with the token ?
screenProps
You need to use screenProps. You should check the documentation to see more about it.
This is how I would use it in your case.
<MyApp screenProps={{ token: this.state.token}} />
Then you can access it in your screens using this.props.screenProps.token.
Here is a snack that I created that shows passing values through a navigator. https://snack.expo.io/#andypandy/passing-props-through-a-navigator
In your current LoginScreen you are trying to set the value of the token in the state. Bear in mind, your page may be constructed before the token is created so the initial value for the token may not exist so you may prefer to capture the value in componentDidUpdate, see the docs for more.
Alternatively you could store the token in AsyncStorage.
Firebase
When getting your token from Firebase, you are mixing promises and async/await notation. Choose one notation and stick with it.
You are setting your state incorrectly. You are mutating state with your line
this.state.token = await firebase.messaging().getToken().then(token=> { return token;});
You should not mutate state as it can get overwritten, and it can cause side effects that you don't expect. You should use this.setState({token}); to set your token value into state.
This is how I would refactor your componentDidMount
async componentDidMount() {
// await functions can throw so always wrap them in a try/catch
try {
// get the token from firebase https://rnfirebase.io/docs/v5.x.x/messaging/device-token
let token = await firebase.messaging().getToken();
if (token) {
// if we have a token then set the state and use a callback
// once the state has been the callback calls checkPermissions and createNotificationListeners
this.setState({token}, () => {
this.checkPermission();
this.createNotificationListeners();
});
}
} catch (err) {
console.log(err);
}
}
Additional reading
The following articles by Michael Chan are a great introduction into state.
https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0
https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296
https://medium.learnreact.com/setstate-takes-a-function-56eb940f84b6
The following article shows the differences between promises and async/await
https://medium.com/#bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8
I have a basic component that calls a webservice during the componentDidMount phase and overwrites the contents value in my state:
import React, {Component} from 'react';
import {Text} from "react-native";
class Widget extends Component {
constructor() {
super();
this.state = {
contents: 'Loading...'
}
}
async componentDidMount() {
this.setState(...this.state, {
contents: await this.getSomeContent()
});
}
render() {
return (
<Text>{this.state.contents}</Text>
)
}
async getSomeContent() {
try {
return await (await fetch("http://someurl.com")).text()
} catch (error) {
return "There was an error";
}
}
}
export default Widget;
I would like to use Jest snapshots to capture the state of my component in each one of the following scenarios:
Loading
Success
Error
The problem is that I have to introduce flaky pausing to validate the state of the component.
For example, to see the success state, you must place a small pause after rendering the component to give the setState method a chance to catch up:
test('loading state', async () => {
fetchMock.get('*', 'Some Content');
let widget = renderer.create(<Widget />);
// --- Pause Here ---
await new Promise(resolve => setTimeout(resolve, 100));
expect(widget.toJSON()).toMatchSnapshot();
});
I'm looking for the best way to overcome the asynchronicity in my test cases so that I can properly validate the snapshot of each state.
If you move the asynchronous call out of setState, you can delay setState until the network call has resolved. Then you can use setState's optional callback (which fires after the state change) to capture the state.
So, something like this:
async componentDidMount() {
var result = await this.getSomeContent()
this.setState(...this.state, {
contents: result
},
// setState callback- fires when state changes are complete.
()=>expect(this.toJSON()).toMatchSnapshot()
);
}
UPDATE:
If you want to specify the validation outside of the component, you could create a prop, say, stateValidation to pass in a the validation function:
jest('loading state', async () => {
fetchMock.get('*', 'Some Content');
jestValidation = () => expect(widget.toJSON()).toMatchSnapshot();
let widget = renderer.create(<Widget stateValidaton={jestValidation}/>);
});
then use the prop in the component:
async componentDidMount() {
var result = await this.getSomeContent()
this.setState(...this.state, {
contents: result
},
// setState callback- fires when state changes are complete.
this.props.stateValidaton
);
}
I need to get the user's name the first time the app is run. Then after I want to skip the first screen and go directly to the second screen.
I'm using AsyncStorage.getItem("first") in the first screen to check if this is the first boot. If not, navigate('SecondScreen').
The problem is that the first screen flash for half a second before going to the second screen. Is there a way to fix this?
Render a loader and check AsyncStorage until the data is loaded, then navitage or render your component conditionally like so:
constructor(){
super()
this.state = {
hasName: null, loaded: false,
}
}
componentDidMount(){
this.fetchName()
}
fetchName(){
AsyncStorage.getItem('first')
.then((e, s)=>{
this.setState({hasName: s ? true : false, loaded: true})
});
}
loading(){
return(<View><Text>Loading...</Text></View>)
}
renderLoaded(){
if (this.state.hasName){
return(...)
} else {
navigate('secondScreen')
return(...)
}
}
render(){
if (this.state.loaded){
return this.renderLoaded()
}
return this.loading()
}
Basicaly, you want to do something similar...
Render "loading" screen while loading data. When done, rerender with main application.
class Application extends React.Component {
state = {
ready: false,
user: null,
}
async componentWillMount() {
const user = await AsyncStorage.getItem("user");
this.setState({
user,
ready: true
})
}
render() {
if (this.state.ready === false) {
// render "booting" screen while reading data from storate or remote server
return <Boot />;
}
if (this.state.user === null) {
// render Login screen
return <Login />
}
// Render main navigation stack for app
return <NavigatorStack user={this.state.user} />
}
}