I am currently working on a mobile app, being developed using react native and expo, where I need to keep track of number of views on a React Native View Component inside a React Native ScrollView Component. The number of views should be the similar to the youtube number of views. Any leads would be really appreciated.
If you want to store the number of time a specific view was hit (similar to YouTube) you could call a small function at the componentDidMount of that class. If you need to have it stored in the back end, you make your API call (I guess a simple function in the back-end increasing the current viewCounter would do).
If you need to display that number, you either can get it from back-end on the initialization of that view (componentDidMount is always a good option) or you can get it before calling the view (i.e. previous screen) and pass it as a parameter.
What you'r saying leave us with some blind side, but here's what I suggest:
in your export use this:
export default function nameOfThePage() {
const [views, setViews] = useState(0);
Call your database api where you're saving those records:
api.get('views')
.then(response => setViews(response.data.views)
and Setup your view:
<View style={setup your style}>
<Text>{Views}</Text>;
</View>
Related
I wish to use Algolia to setup InstantSearch in my React Native project. I am using this tutorial to learn the basics.
It appears in their RefinementList and InfiniteHits components there is a parameter: refine. This parameter seems to play a key role in the functionality of this tutorial's app.
Where can I get an example of how this refine() method would look like?
Please help me with some resources. An explanation of this refine() method would also help.
Thanks!
I think there's a typo in the documentation at the time of this writing (for which I opened a pull request), and the name of the actual prop is refineNext.
The documented InfiniteHits example from the React Native guide uses a connector, which is a lower-level abstraction allowing users to fully control the UI. This is what allows you to use React Native code for the UI while having access to the InfiniteHits data and logic. You can read more about the connectInfiniteHits connector in the documentation.
The provided refineNext function lets you load more results. It doesn't take any arguments, all you need to do is call it whenever you want to load more results from Algolia. In the example, it's being used in the onEndReached callback of React Native's FlatList component, whenever the hasMore provided prop is true. This allows loading more results once when the scroll position gets within onEndReachedThreshold of the rendered content.
I'm using code like this it is not working for me
componentWillRecieveProps(nextProps,nextState){
if(nextProps.navigation.state != this.state){
//here calling api
}
}
I think the question should be more elaborative to help to solve your issue. Based on your questions, you may be asking for either -
How to reload page if data changes
How to reload page if navigation state changes
How to reload page if data changes
In this case, you no need to add 'componentWillRecieveProps'. You can simply check for a value in render method like this
{data.items.length && <ItemLIstCustomComponent />}
or
{data.items.length ? <ItemLIstCustomComponent /> : <EmptyMessageComponent />}
You can look into conditional rendering in react-native.
If the re-render is not happening still? Then your way of updating state/data is not correct. Make sure you make copy of object and update the existing one.
To understand this, read about mutable objects and react shallow-check for re-rendering. Or may be this will help
How to reload page if navigation state changes
I don't think it is good practice to call another API or do any state change related thing in componentWillRecieveProps. You can create a new Screen on which you navigate and call API in componentDidMount.
You can try React navigation if you are not using any navigation library.
I have two independent screen
Login Screen
DashBoard
Now on the login screen i store the requested API data inside the state (this.state.data) and that stored data I want to show on the dashboard screen for example the name or the age or the country or whatever. Now how do I sync both of these screens, I am using React Navigation 2.0
On success of a login request you need to change your current component to the Dashboard component, which -
Can be done in two ways
If you are replacing the component then you can call <Dashboard data={this.state.data} /> and fetch it in your Dashboard screen as this.props.data
If you are navigating to the component, you can do it via this.props.navigation.navigate('Dashboard', { data: this.state.data }); and then in your Dashboard component you can fetch it via this.props.navigation.state.params.data
Hope it helps :)
If you are doing a small project, you can do this via props, as explained by #Aseem Upadhyay
But note that this method becomes ineffective as your project grows. Imagine that you have multiple screens, distributed in a hierarchy, in which one daughter screen needs to pass data to another, which is on a different node. To do this via props, it would be necessary for the parent component to pass these values to both screens. This form is very difficult to manage.
The ideal way to do this is through redux. With it, you create a shared store of variables, so you can access them anywhere in the application. The following link demonstrates how to configure redux in your project.
https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29
It is recommended to use redux for variables that need to be shared. If you have only local component variables, then you do not need to use it.
I hope this can help you in your projects.
Hugs!
I am building an app with 2 tabs (react-navigation). I am new to react and redux and I am still trying to wrap my head around how to communicate between components without creating too many unnecessary dependencies.
Tab A: The main component is fetching data via a remote API. For this I am using a react-redux and redux-thunk. The data is kept inside the central store since it is used for button states across different components (Tab A and Tab B). Pressing a button is calling a Thunk that deals with the asynchronous API call to update the server and then dispatches the action to update the store.
Tab B: Also fetches its data via a remote API but sets it via the component's State. I did not see the point of also putting this into the redux store since it is not shared across components. The button component from Tab A is also used here.
What I am trying to achieve: When the state inside the redux store changes (button's onPress() dispatches an action) both Tab A and Tab B require to re-fetch via the remote API but only under the following circumstances:
Switching from one tab to the other requires a re-fetch inside the target tab. Then, only when switching back to the first tab it should also trigger a re-fetch.
What I considered:
Adding a tabAinvalidated and tabBinvalidated flag to the redux store. I then listen to the willFocus event inside both tabs. I then re-fetch if the respective tab is flagged as invalidated. This might work but I am not sure if it is considered an anti-patter to keep update flags for individual components inside the redux store.
Q: Is there a better approach to this? What is the best way in react native to inform components that they need to reload their data from a remote API?
I think I came up with a solution myself. Instead of using the boolean flags for each tab (tabAinvalidated, tabBinvalidated) I am now just recording a timestamp for every update inside the redux store. For components which require re-fetching based on redux store updates I copy the redux timestamp into their own component's State each time I re-fetch the data. This way I can check if the component needs to re-fetch its own data from the server.
setFocus = async() => {
if (this.props.updateTs > this.state.updateTs) {
await this.loadData()
this.setState({ updateTs: this.props.updateTs, })
}
}
Seems to work fine.
My app uses a react-navigation DrawerNavigator component to allow the user to navigate through various screens within the app.
My react-native-maps MapView component is nested inside a screen accessible via the DrawerNavigator.
The problem I am finding is that if you navigate to another page in the app, and then navigate back to the map page, the whole map has to reload and previous markers/map configuration is lost.
Is there a way that I can prevent the screen from unmounting when navigating away, or another way of stopping the whole map from resetting? I won't post code below because I believe the issue to be more theory based as opposed to fixing a code bug.
You need to persist the state when the component is unmounted. You need a state management library.
I know of two state management libraries.
RxJS is the recommended library for use with Angular. Even though it is not an developed by Angular, it is still installed by default if you use the Angular CLI to bootstrap a project. This library is incredibly powerful, especially with handling asynchronous data flows, and it fits in really well with the angular DI system. My understanding is that you create singleton services to manage particular parts of your global state. You could have many RxJS services for different parts of your app. Your components can then tap into these services and get state information from them. There are libraries which help you integrate RxJS with react components but I cannot attest to their value.
Redux is the canonical way to manage global and persisted state in React. It differs from RxJS in many ways. First, you have only one redux store in your whole app and it contains the entire global state. Second, Redux is modeled on Flux and setting up the various 'players' for the first time can be a very involved process (but once you get it it's easy). I highly recommend making use of the combineReducers function to simplify getting set up. Third, redux does not manage async data straight out of the box, you will need to reach for redux-thunkif you have async data flows.
Redux is still my go-to for global and persisted state in react because of how it integrates. There is a library called react-redux which integrates the two libraries really well. It provides you with a function called connect. The connect function accesses your global state and passes it into your components as a prop.
You wrap your entire app in a store provider line so
export default () => {
<Provider store={store}>
<App />
</Provider>
Then your individual components can access state using connect. connect accepts a function which extracts parts of your state for you. The function could look like this.
const mapStateToProps = state => {
return {
stateVariable: state.variable
}
Now you know your component will receive a prop called stateVariable which is the value of variable in your global store / state. So you can write your component to accept this prop
class Component extends React.Component {
render() {
var { stateVariable} = this.props;
return (
<View>
<Text>{stateVariable}</Text>
</View>
)
}
Then you call connect on your component with the mapStateToProps function and hey presto
const ConnectedComponent = connect(mapStateToProps)(Component)
export { ConnectedComponent as Component }
You see how this injects the props as if you had written
<Component stateVariable={state.variable} />
In this way it is a solution to prop-drilling
In addition, you can use redux-persist to persist state between sessions, not just mounting/unmounting components. This library accesses localStorage on web or asyncStorage on native.
When you call connect on a component is automatically passes in a prop called dispatch. Dispatch is a function which is used to dispatch actions which make edits to your local store. as I said the system requires some setting up - you must create constants, actions-creators, and reducers to manage these action dispatches. If you watch the first 8 videos of this course you will be well on your way https://egghead.io/courses/getting-started-with-redux
At this moment in time my recommendation is to use Redux with React.