I'm new to React Native. I've got a textInput that takes the key of an object and saves it.
submit(){
for (let key of Object.keys(listadoPrep)) {
if(this.state.sueldo <= listadoPrep[key][0]) {
alert(key);
}
}
}
As soon as it saves the key, I want to have a new screen with a different textInput, to save a new one. I've seen some react-navigation videos, but I'm not sure I'm going in the right direction.
As soon as I click the button, I want to have a new screen to add new text input.
As I understand your question correctly, you already have code to get the key, but dont know how to save that value so that you can use it in other screen in React Native?
It is really possible and we normally use this case every time.
Then I suggest two ways to apply this.
React Navigation
You can pass the key value to navigation as props then you can use it on arriving screen as you wish.
Reach this doc: https://reactnavigation.org/docs/params/
React Redux
You can use redux store to save the any value to use it in any screen. Redux is very useful storage to be used for React Native development.
You can choose one of these but if you get just started React Native I recommend you to get picture of React Native and master react navigation and redux.
Related
My app displayed a grid of pokemons, I have retrieved the data from axios and fed it to a FlatList in React Native (Below)
I want each of these pokemons to be buttons which leads to the next page (Below)
I have no idea on how to do this. I'm assuming I have to create an 'onPress' function inside the Flatlist? Or React routing but not sure could someone shed some light into this?
Thanks
Basically, you need a lib to do that. I've been using React Navigation. You can follow its tutorial here https://reactnavigation.org/docs/hello-react-navigation
I’m trying to create multiple pages with forms. When I navigate from one page to another, I want the data that was filled by the user to be saved automatically (lets says, in the state of that component). Note the user has not submitted anything yet, nor there is any save button to fire any function.
The user has simply jumped from one page with form components(eg: ) to another page with other form components using react routers... And I want whatever the user entered saved automatically.
Can that be done? When the user goes back to the previous page, the user can pick up where he left off?
So in this example, when the user goes back to the previous page(using react routers) the component did not reset or refresh itself, and whatever was entered; the user would not have to enter again, hence picking up where he left off. There were talk about using iframes, but I'm not sure about that.
Of course all this eventually will go to the redux store. But I’m trying to solve the “saved” state of these form even after navigating to other components/pages using react routers
For that, you can take a look at redux.
If you don't want to use redux i will link my answer that uses react-router =>
With react-router, you can transfer "state"
this.props.history.push({
pathname: '/ShowRecommendation',
state: { taskid: Task_id }
})
and at the ShowRecommendation.js componenet you can get the value using
console.log(this.props.location.state)
can we pass a value when we move to next component using this.props.history.push("/next Component")?
I am relatively new to the React world and struggling to find a way to load IconButtons to the toolBar of an AppBar (from Material UI).
Say I am on pageA and like to have two IconButtons specific to pageA and when I got to pageB, I like to have the toolBar buttons loaded that are specific to pageB.
I have created a codesandbox project to make it easier for anyone to help.
https://codesandbox.io/s/material-ui--react-admin-1qc5x
I appreciate any help, guidance etc.
you can achieve this by multiple ways:
Redux: you can use react-redux and create a store where you can store your current_page value (best practice in case of SPA) and access the page value in
static getDerivedStateFromProps(props, state){
//your code here
}
Based on Route(react-router)
[what i have done] based on URL params as you are doing history.push so it will be easier to extract the params from your URL and based on that render your Toolbar Icons.
My code reference: https://codesandbox.io/s/material-ui--react-admin-nxh7m
Trying to think of a good solution to this issue, I am trying to create a Form which would exist on multiple pages. At one point if you press an option on one of the buttons on page 1, it will bring you to page 2 where you select something, and then go back to page 1. The issue I am having is writing the code so that it will rember what was currently on page 1, and can pass the information from page 2 to page 1.
I am assuming I am going to have to use some sort of state management system to pull this off, but honestly have no clue. RIght now all I use is react native flux for navigation for page to page.. and thought about just passing everything as props.. but that seems clunky
Any help would be awesome!
Well, if your form is simple and you do need to have multiple screens, I see no reason not to use the props injected by react-native-router-flux. But if you are looking for something that can scale a bit better, why not try to put your form data in a temporal object inside your state manager. For the sake of the example, let's say redux. Create a reducer that stores an object with all the form data, and bind your different screens so that they can access it. Then, through actions, update the values when the user inputs something. There might be a few tricky edge cases, such as clearing all data when the form is submitted, what happens if the user cancels the action, etc... Sure, it looks a bit cumbersome to handle data in such a way, but I think it could be a nice solution.
I am developing application using react native. I have implemented NavigatorIOS component for navigations. It works fine with push and pop navigations but It shows default back button with previous page title and back arrow. I have designs like Cancel button on right side and no back / left button. I know it is just one line code in objective-c to hide back button.
I tried on react native documents but did not found anything regarding this.
could anyone have idea about it?
Looks like there still ins't a way to hide the left/right buttons while pushing using NavigatorIOS.
A small hack that I use is setting the leftButtonTitle to a whitespace.
this.props.navigator.push({
title: 'New Screen',
leftButtonTitle: ' ',
component: MyComponent,
passProps: { id: 101 },
})
According to the docs, support for NavigatorIOS is provided by the community, not Facebook and as such the features are limited. They recommend Navigator for "non-trivial apps". You're able to fully customize the nav bar in this component, but not for NaviagatorIOS.
Includes a navigation bar by default; this navigation bar is not a React Native view component and the style can only be slightly modified.
You can always export that native view over the bridge, but that's probably more work than it's worth.