So I have a this.state.comments in my Home Screen and that's an array. In my other screen called Comments Screen I'd like to show the results of that state. Aka id like to use that array I mean this.state.comments and display it in a FLATLIST in Comments screen. That file Comments Screen just has one function and inside it a flatlist. Any help?
in Home use this.props.navigation.navigate('Comments',{comments: this.state.comments})
and in Comments screen if using react-navigation v4 use :
const commentsArray = this.props.navigation.getParam('comments')
if using react-navigation v5 use :
const commentsArray = this.props.route.params.comments;
As a response to your comment with the picture, if Komentar is a screen that is added in the navigation configuration you do:
const Komentar = (props) =>{
const commentsArray = props.navigation.getParam('comments');
return(
// your code here
)}
because it's a functional component you can't use this to access props.
Related
I have a table that has items in it. When I click a specific item's edit button. It goes to edit page but when I submit an edit of that item. It goes back to main table page but the table page won't be updated. So, I think I need to trigger the useeffect function. To do that I need to update the state in main table page from another screen that is edit page screen.
my apps are not class-based. all of them functional. Here are my codes.
Main Table Page:
//I created a state to update
const [reload,
setReloader] = useState('');
I try to send the state to change it in edit item screen.
<TouchableOpacity onPress={() => navigation.navigate('addProduct', [reload])}>
Edit Item Page:
const [reload,
setReloader] = useState(route.params.reload); //I tried to pass state but it didn't work like that.
Pass a function through navigation
Pass the function in which you will be updating the state. i.e. setReloader
<TouchableOpacity onPress={() => navigation.navigate('addProduct', {setReloader})}>
On addProduct screen get the function by
const setReloader = route.params.setReloader;
once you have edited simply call the setReloader function on the edit page and then go back to the main screen
Using the navigation lifecycle method.
On the main screen, you can add a focus lister
const focusListner = navigation.addListener('focus', () => {
//call the API to fetch the updated data from the server
});
Focus listener is called whenever the return to that screen
You can do something like:
//I created a state to update
const [reload, setReloader] = useState('');
const updateState = (value) => {
setReloader(value);
}
Send `setReloader` as callback to update on edit screen
<TouchableOpacity onPress={() => navigation.navigate('addProduct', {callback: updateState})}>
Edit Item Page:
const callback = route.params.callback;
// call `callback` which will update view on parent screen
import { useIsFocused } from "#react-navigation/native";
const isFocused = useIsFocused();
Well it is worked for me. To trigger.
useEffect not called in React Native when back to screen
Being a newbie to the field of app development, I actually don't know the name of this UI component .
This component basically act as a switcher between two screen, which shows up Explore screen when Explore is clicked and My Community screen when My Community is clicked
Someone please help me to know what to call this component and which npm package need to be used to deploy it.
THANKS IN ADVANCE!!!
You can use the switch component and its boolean value to conditionally display different screens/components.
Basic example using setState:
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
return (
<View>
<Switch
onValueChange={toggleSwitch}
value={isEnabled}
/>
{isEnabled ? <Text>Placerholder Screen 1</Text> : <Text>Placerholder Screen 2</Text>}
</View>
);
But in this situation I would advise you to use Tabs instead of a Switch. React Navigation is a great library to help you with this. You may want to look at the bottom tabs, material bottom tabs or material top tabs.
In React Native iOS, I would like to slide in and out of a like in the following picture.
So I installed this https://github.com/octopitus/rn-sliding-up-panel for ease.
but this error is showing =>
i cant understand whats wrong, I am new to react native. Please Help!
You cannot access variable called _panel from this object because you are inside a function itself. besides you are using function based react, in order to create a reference check useRef() hook or switch to class based component and then you can use this._panel;
smthg like this:
function AccessingElement() {
const elementRef = useRef();
const onPress = () => {
// e.g
elementRef.current.show();
}
return (
<View ref={elementRef}>
...child views
</View>
);
}
I want to open drawer with touching anywhere on screen.I tried with minSwipeDistance property of drawer navigator.Although I didn't get error It didn't work.How should I implement this process into my code? If anyone knows help me please! Thanks in advance!
For React Navigation V5
put this to take the device width
function ProfileDrawer() {
const dimensions = useWindowDimensions();
and edgeWidth is what you want I think
<Drawer.Navigator initialRouteName="Profile"
edgeWidth={dimensions.width}
>
You can check the Official Page to see detail for DrawerNavigator:
https://reactnavigation.org/docs/drawer-navigator#props
I'm developing a react-native / redux app with a bottom-tab-navigator similar to the example at https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance. My screens all connect to a Redux store and display shared data, however I'd like at least one of these screens to ignore the current data in the store and instead re-initialize this data each time it's navigated to (instead of continuing to display the data in whatever state it was last left in).
The screen has a method to do this, but I can't figure out how to call it after the first time the screen is rendered (e.g. from the constructor or componentDidMount() method). I can't call it from the render() method as this causes a "Cannot update during an existing state transition" error.
I need my navigator to somehow cause my HomeScreen.initializeData() method to be invoked each time the Home icon is pressed, but how do I do this?
HomeScreen.js:
initializeData() {
this.props.resetData(initialValue);
}
const initialValue = ...
(resetData() is a dispatch function that re-initializes the Redux store).
Updating state from render() would create an infinite loop. Also, you don’t want to run your state update every time the component re-render, only when the tab button is pressed. This tells me that the proper place to make your state update is some onPress function on the tab button.
So the question now relies on how to implement some onPress function on a tab button. I believe this answer this question:
Is there an onPress for TabNavigator tab in react-navigation?
So I found an answer, it's a little more complicated than might be expected: As Vinicius has pointed out I need to use the tabBarOnPress navigation option, but I also need to make my dispatch function available to this navigation option.
To do this I found I need to pass a reference to my dispatch function (which is available as a property of my screen) into the navigation option, so I've used navigation params to do this and here's what I've ended up with:
HomeScreen.js:
componentDidMount() {
initializeData(this.props);
this.props.navigation.setParams({ homeProps: this.props });
}
export const initializeData = (homeProps) => {
homeProps.resetData(initialValue);
};
const initialValue = ...
AppNavigator.js:
tabBarOnPress: ({navigation, defaultHandler}) => {
const routeName = navigation.state.routeName;
if (navigation.state.params === undefined) {
// no params available
} else if (routeName === 'Home') {
let homeProps = navigation.getParam('homeProps', null);
initializeData(homeProps);
} else if (routeName === ...
...
}
defaultHandler();
}
Notes:
I'm passing props as a navigation param rather than my dispatch function (which also works) as it's more flexible (e.g. it makes all of my dispatch functions available).
initializeData() is called both during construction of HomeScreen (for the first time the screen is displayed) and from the navigation icon (for subsequent displays of the screen).
It's necessary to check that params is defined within the navigation option as it'll be undefined the first time the screen is displayed (as screen construction has yet to occur). This also makes it necessary to call initializeData() during screen construction.