My Question i have two Scene OnceScene and TwoScene I want to Navigate from OnceScene to TwoScene and at the same time i want to pass some array from 1st the 2nd so for that i have written the below code
this.props.navigator.push({
id: "productdetails",
passProps: {arr: arr[rowID]}
});
you can see i am passing the array in passProps but how can i acess that array in TwoScene Its seems simple but since i am new i dont have much idea.
Have you tried using react-native router?
https://github.com/aksonov/react-native-router-flux
Also answering to your question it seems like you are passing the data through props. So on the next screen you can access these props like: this.props.foo (of course you need to declare it on the second screen somehow to access it.)
I found what i was missing ,forgot to declare
return (<ProductDetails title="ProductDetails"
navigator={navigator}
{...route.passProps} route={route}
/>)
on my return component. This is the reason i was getting undefined value.
Related
I use React Native and Expo to develop an application on mobile and tablet.
The objective is to be able to answer a questionnaire where several questions are divided into various categories. A question may have a category or not, so they don't really follow each other in the code.
I use a loop to display my categories, with its questions inside. Questions are components, categories too.
When I answer a question, sometimes I want to reload another question specifically (or several). After answering my question, I have a list of questions I want to reload.
I would like either to launch a function in the component, or to reload it entirely.
How do I reload the question component, which may be quite far from the one I acted on?
Thanks for your help !
I wanted to listen with UseEffect for the modification of my global variable, but it doesn't work. Also, I can't fully reload my page either. I would like to specifically reload the question component or run the function.
What I have already tried:
Reloading the page entirely from my screen with a function in global, didn't work (
I have a lot of elements so I would like to avoid reloading everything)
Listen with useEffect the change of my list of questions to modify to check if my id was in it, but the listening is not done
I can't send functions or other elements in the props of my question because they can be in different components (category or other) so too far away.
Question Component (simplified) :
export default function RealisationQuestionComponent(props){
//When action in Question A
function changeCheckA(value) {
[...]
if (props.question.questions_impactees !== undefined) {
global.questions_impactees = props.question.questions_impactees;
}
}
//Effect in Question B
useEffect(() => {
[my function or reload entire component]
}, [global.questions_impactees]);
return (
<>...</>
)
EDIT :
Following the answer, I tried to use useContext to retrieve my information, but it tells me Can't find variable : RealContext
What i would like to do :
https://www.w3schools.com/react/showreact.asp?filename=demo2_react_context2
What I have done :
My screen AuditRealisationScreen
const RealContext = createContext();
const [listIdVictimes, setListIdVictimes] = useState('please test');
[...]
return (
<RealContext.Provider value={listIdVictimes}>
<RealisationChapitreComponent/>
</RealContext.Provider>
)
RealisationChapitreComponent > [...] > RealisationQuestionComponent
In my component RealisationQuestionComponent
const listTest = useContext(RealContext);
[...]
return (
<Text> {listTest} </Text>
)
Can it work this way?
Use [contexts][1]. Using [reducers][2] with context would be more flexible and organised.
If you have a lot of states to manage with mess of siblings and parent-child and child-parent relations then using [Redux][3] would give you more control to manage those components and its states
What I used do for
How to reload a component or call a function after action in another
component with React Native
const context = ... // declare
and then
// import context
const App=()=>{
...
return(
<Context.Provider value={your functions, data, states, props whatever you want}>
{{ ...child components }}
<Context.Provider/>
)
}
You can play with these contexts usage to achieve your goal
[1]: https://reactjs.org/docs/hooks-reference.html#usecontext
[2]: https://reactjs.org/docs/hooks-reference.html#usereducer
[3]: https://redux.js.org/introduction/why-rtk-is-redux-today#what-is-redux
I know this is a stupid question.
I have a component lets call it Component that is used in several screens for Example Screen1,Screen2,...
And in the Component I am navigating to a new Screen when the user click a button, lets call it ImagePicker.
my Question is how do I go back and pass a parameter( in this case image data) and get it back in the Component
I tried using navigation.goBack({img: image}) but that didn't work. I also can't use navigation.navigate('Screen') since my functions are in the Component component.
So what is the best solution for my problem ?
We cannot pass any params to the goBack method.
If we have to do so then, we can use the navigate method to navigate to the back screen, and using this method we can pass the params to the previous screen.
For ex.
navigation.navigate('PrevScreenName', {key: value})
Check out the official docs for the react-navigation.
React Navigation
If I understand your problem well, just do
navigation.navigate('Screen', {img: image})
instead of navigation.goBack({img: image}) and it should work
In the component code, I would pass along a callback function to the image picker screen
handleImageData = (data) =>
{
// do whatever
}
...
navigation.navigate('ImagePickerScreen',{mycallback:this.handleImageData});
and then in the screen code just call it like
this.props.route.params.mycallback(data);
navigation.goBack();
Kinda new to react/react-native.
I have a list component that contains an array of items in state
The list component sometimes query the server for information, and according to the information he gets from the server, he should update some things in the items state.
For testing purposes, I tried to do the something like the following:
componentWillMount() {
this.setState({posts: [<Item key={0} ... >, <Item key={1} ... >]}
}
...
testFunc() {
... // get data from server
this.state.posts[0].updateNewInfoFromServer(new_info);
}
But it didn't work, and it printed that the updateNewInfoFromServer function of my item component is undefined (it did the same when I tried to change it to any other function of my item component. It's pretty weird to me that I can't access the component's functions but I am able to access its props).
I also tried to add refs to the Items inside the posts array and then try to call this._myref.updateNewInfoFromServer inside the testFunc(), but I got exactly the same error..
What is the "react" way to solve this problem?
Thanks a lot!
I've got a little problem with vuejs.
My state is basically something like this.
state: ()=>({
activeSide : "from",
}),
I want a component to be focused or blurred based on whether activeSide has the value activeSide set to "from" or not
my idea at the moment, doesn't seem to be very elegant, I basically created a computed property in my component,
focusSide(){
console.log("changed active side")
this.$store.state.activeSide
}
and then I set up a watch to see if that property changes.
watch:{
focusSide : function(newV,_){
console.log("changing focus")
newV=="from" ? this.$refs.fromArea.$el.focus() : this.$refs.fromArea.blur()
}
},
the problems here is that apart from the fact that the solution doesn't look elegant the watch doesn't work either, I've seen that focusSide is changing its value correctly (or at least the body of the method is executed), but the watcher is not executed, I have the feeling that since focusSide state is never used in my template, vuejs thinks that it's not necessary to react and change values, something like reactive frameworks where if the value is not observated then don't change (maybe I'm wrong)
what would be the ideal way for achieve this???
thank you
You need return value of computed properties focusSide, otherwise it will always return undefined
focusSide () {
console.log("changed active side")
return this.$store.state.activeSide
}
I have a FlatList that displays a user's comments and I want to also populate the header with the user's profile (which is a different network call from the one fetching the comments).
Here's how render() looks like:
render() {
return (
<FlatList
data = {this.state.comments}
renderItem = {this.renderComment}
ListHeaderComponent={this.renderHeader}
keyExtractor={(comment, index) => comment.id}
/>
)
}
and then renderHeader looks like:
renderHeader() {
return (
<ProfileView user={this.state.profile} />
)
}
I use fetch in componentWillMount and then setState in order to get the data (this part works fine).
Now the error I get on the simulator is
undefined is not an object (evaluating 'this.state.profile')
but when I remove the renderHeader method, comments are fetched properly.
Since I'm very new to RN, can you help me understand what is wrong and how to fix it?
This looks like simply an issue with accessing context. When you run the renderHeader method called by the FlatList it doesn't know what this relates to.
So, you can simply set this.renderHeader = this.renderHeader.bind(this) in your constructor() method.
Alternatively, you should also be able to use an arrow function to call it, as this automatically refers to the correct this context.
ListHeaderComponent={() => this.renderHeader()}