What is considered a screen by react-navigation?
Is it any entry in the RouteConfigs (i.e. StackNavigator)?
Does it also need to be an ES6 class?
I am trying to access the this.props.navigation but props is undefined and I suspect that it is because my component is a stateless functional component.
If I turn it into a class the props are there.
Is there a way to work with stateless functional components and navigation?
When you work with stateless components, you can’t access the props using this.props, as stateless means just a simple function (rather than a class instance) i.e. without this. So, you can access props using the function arguments instead. See the following two examples:
const StatelessComponent = props => (
<div>{props.label}</div>
);
or alternatively:
const StatelessComponent = ({label , anotherProp}) => (
<div>{label}</div>
);
So in your case, just simply access props.navigation.
Related
I have a quite decent background in android but now I am starting digging into react native and I am really confused with the ways to change the state of a component through hooks and set state function.
To the point, I have my main screen and I have many small components which change visibility. This is done by letting the user change some filter settings within dialogs. So the suggested way to do that is by having a hook in my main screen with a list that holds the values for the visibility of each component. But since I change the visibility of the components from inside the modals, every time I want to show a modal I will have to pass in a different function(for example setComponentEnable or setComponentDisabled) to set the state for each component. So my main screen will be polluted from all these small functions. Also I should not forget to mention that my modals are consisted from many smaller components and I will have to pass as deep as it goes the proper function to match the user action.
So my question is, is there a way to do this thing without polluting my main with all these small functions and make it possible for the main screen to update every time the user change the filters within the modals?
I already read about context but the docs say:
Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
So I dont think that this should be a great case for context use.
What I am trying to do now is create a hook with a list
const [isibility, setVisibility] = useState([]);
create visibility handler functions
const setVisibilityEnable = () => {
...
}
and pass it into my modal.
<MyModal
visibilityHandler={setVisibilityEnable}/>
Is there a way to manipulate the state without passing all these callbacks to the modals? Or maybe is there anyone that can suggest a better and clean solution to avoid end up having a really huge main screen?
you can include all the settings in one object and pass that object to all the components. Then each component will then modify that object accordingly.
const defaultVisibility = {
childComponentOne: true,
childComponentTwo: true,
};
const [visibilityObject, setVisibilityObject] = useState(defaultVisibility);
pass both the function and the object into your child components:
<ChildComponentOne visibilityObject={visibilityObject} setVisibilityObject={setVisibilityObject} />
Then in your child component, you set the visibility like so:
setVisibilityObject({...visibilityObject, childComponentOne: false});
Why you don't just pass a property to your modal and check if changed in oncomponentdidchange method?
componentDidUpdate(prevProps) {
if (this.props.yourPoperty!== prevProps.yourPoperty) {
//do your visibility stuff
}
}
Alternatively you can do it with redux when you connect your components to the store.
I have a React table component that gets its data via a prop called TableStore. This prop is a high-level abstraction for getting row data:
interface TableStore<RowType> {
getRowIds: () => Array<RowId>;
getRow: (rowId: RowId) => RowType | undefined;
}
interface MaterialTableProps<RowType> {
tableStore: TableStore<RowType>;
}
function MaterialTable<RowType>(props: MaterialTableProps<RowType>) {
...
}
As you can see MaterialTable is not a MobX observer. It is part of a component library that is not dependent on MobX.
When I use this component in my app, I supply it a MobX-based TableStore. I would like the table component to re-render whenever the MobX-based store changes:
<MaterialTable tableStore={orderStore} />
However that does not happen because the table component is not a MobX observer. Is there any way to force the table component to re-render? For example, I am able to force a re-render by dereferencing the store in the parent component (using a simple console.log()). But this feels like a hack. Is there a better way?
Answering my own question....
I looked at several options but all of them were kludgy. I finally decided to rework the props of the table component to pass in an array instead of an abstract TableStore interface (which the table component can't react to). This allowed me to refrain from adding MobX as a dependency to the table component library while still leverage MobX in the parent component. In summary, the parent component now watches the MobX store, reacts to changes by creating a new array and passing it to the table component.
Here's the new interface for the table component:
export interface MaterialTableProps<T extends Entity> extends TableProps {
entityList: Array<T>;
}
export function MaterialTable<T extends Entity>(props: MaterialTableProps<T>) {
...
}
I am using react-native and react-redux to create a simple app. Thus, all of my props are passed in from mapStateToProps, coming from redux.
I should have to use mapDispachToProps to manipulate the props but that is not what is happening.
I have an event handler that allows me to directly manipulate the props. Why is this behavior occurring?
nameHandler(text) {
console.log(this.props.group.name); //output: Billy
this.props.group.name = 'illegal!';
console.log(this.props.group.name); // output: illegal!
}
I am binding 'this' to 'nameHandler' within the constructor, but that doesn't seem relevant.
I've mostly gotten around this, but shouldn't this not be possible?
I have a Vue component that's used multiple times with identical props. I'd like to keep the code DRY by always adding these props in a single place.
Example:
<wrapped-foo bar=1 />
should be extended to
<real-foo bar=1 spam=eggs />
I'm trying to solve this using a wrapper component that takes the props given, modifies them, and passes them to the wrapped component. There are multiple tutorials on how to do this, e.g.
vue wrap another component, passing props and events
https://v2.vuejs.org/v2/guide/render-function.html#Functional-Components
It looks like all of the solutions don't pass at least one of props, class, style, event listeners, other attributes, etc. to the wrapped component. Is there a solution that keeps all of these intact?
You can do it with Vue Mixins: https://v2.vuejs.org/v2/guide/mixins.html
Or simply with inheritance:
Example:
const wrappedFoo = Vue.component('real-foo').extend({
props: {
spam: ...
}
})
Vue.component('wrapped-foo', wrappedFoo)
I am using react native.
Here's my code.
function mapStateToProps(state) {
return {
markers: state.markers,
};
}
I set props using mapStateToProps and it only called when I dispatch an action.
I can set state using setState({..}); like this.
Here's my question.
How can I set props? Is there anything like setProps({..})?
It seems like you're using Redux. If you do, make sure to have both reducer and action scripts. The reducer is used to get a value from a specific state property or properties.
You have to define a function in your action script to assign or set a value to your specific state property and properties. You also need a store to bring both reducers and actions together.
The store initializes everything and allows you to dispatch actions and set or get values.
Two common ways of passing the props.
From Redux Store
Like what you have done in your code.
From other Components
Props can be passed by
<Foo prop1={bar} />
And in your Foo Component the props of prop1 is whatever bar is.