We Keep Coding

How to create new page in React Native?

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

Redux or simple React to handle navigation

I am very new to React and Redux and I am currently trying to wrap my head around how states are shared through the UI.
I have a pretty simple use case.
Picture a container with three columns:
A left Side Menu with four buttons
A central content section
A right container with some other content
When I click one of the four buttons I want three things to happen:
The class on the button is updated so it has borders
The class on the other buttons is updated so if they had been clicked before their border class is removed
The content in one part of the middle section is updated. This content requires data from the backend (Django Rest) to be fetched
Here are my questions:
Should I separate this interaction into a UI only concern and a Data driven one or handle both with a single state?
Because the buttons share a parent component but they do not with the central component, would I be better off using Redux if I do not want to define the state at the very top level of the Container?
Because I am new and Hooks seem to be the way to go I am trying to use hooks rather than classes, does it still make sense to separate components and containers?

You can use react-router-dom library to achieve want you want.
for your left side menu you can create active class in css and then check for current route with location.pathname property of react-router-dom and if it is for that button, active class set for it.
and for your main section you can fetch data in useEffect hook.
I think it is good to separate data and UI but for buttons what I say is good.
and you can store data in redux for your main section.

Redux and react-navigation bottom-tabs component

I'm currently working on an app on which I have integrated Redux and react-navigation and I can't figure out how to do this correctly :
I have to use a bottom tabs navigation bar that I got from react-native-material-bottom-tabs and right now, I have a connection view, and the view that render the navigation bar with the redux router to navigate between those two.
There is a profile view with some children views displayed in one of the Bottom bar navigation's view and I can't figure out how to setup navigation for those views because they are inside a Bottom Navigation class, which is in the current redux navigation, but not the views it contains...
I tried different things such as local navigator inside the profile view for it and his children but I can't use my redux store by passing it to the local Navigator...
Right now architecture is AppNavigator contains { Connection , BottomTabs } and BottomTabs contains { Profile View, Home View, Event View }
How can I supply navigation and store with redux inside my bottom bar's view?

I have used this 'react-native-tabbar-bottom' api from npm you can also refer following link https://www.npmjs.com/package/react-native-tabbar-bottom.

I found a solution but it don't seem right : I pass the informations through the screenProps props of a StackNavigation, and those informations comes from my redux store.
This solutions works while finding a better way to handle it.

JS main app which uses routing to show dialogs and such?

I'm wondering if I can have a JavaScript-based application which has a main "template" as a background/main app of some sorts mixed with some URL routing to show dialogs and such? say, here's a short example:
Main app displays google map and whatnot. URL: /#
User clicks some menu item and it displays an options dialog. URL: /#options
User goes to a sub-options menu. URL: /#options/advanced
User closes the main option dialog, back to main app. URL: /#
User puts some coordinates in URL and the map locates it. URL:/#coords/100/100
The main idea here is to keep the map visible (and other stuff that I want to show in that template, too) in the background while using the URL to either display dialogs, forms or even to control the google map itself - BUT that if the user goes to, for example, /#options on first load, the app should load everything and then show the options dialog, okay?
Basically, I'd like to have a "main state" page which contains the most important part of my app, but I'd like to use url-routing for displaying dialogs and executing actions, that users can bookmark in the future and share and so on. I dunno how is this idea/concept called, so that's why I'm asking.
Also, what can I use to archieve something like this? I know this is kind of an open question, but I'm aiming for a JavaScript-based app/framework (TypeScript works too). I don't know if Angular2 + ui-router can do this, or even how should I google this?...
If Angular2+ui-router can do it, then great! but how?. If there are any other frameworks or combinations please provide an example! I've read about vue.js, react.js and so on, but vue.js seemed too simple and react.js still makes me feel uneasy mixing HTML inside the JS files, it just feels unnatural. Thanks in advance for any pointers you can provide! :)

Angular 2 can accomplish this. One way would be to have just one component. This component shows your map.
Your logic can watch for changes to the URI parameters and show/hide options accordingly. Since these parameters are not always present, you would use optional parameters.
While your app is running, you can add event listeners to buttons and links that should change the view state. When the user clicks a Select City button, the event listener could direct him to a URI with the appropriate parameter: ;view=dialog;target=city (Angular 2 uses matrix uri notation by default)
The component would be listening for changes in the parameters and react accordingly.
ngOnInit() {
this.route.params.forEach((params: Params) => {
// this is executed every time new URI parameters arrive
this.viewType = params['view'];
this.target = params['target'];
//todo: update the model to match new parameters
});
}

Navigation in a single page app with react.js

I'm building a single page application with React and Backbone and am trying to figure out best practices for handling navigation between content in the app. My app will have a sidebar with links, for example, to "photos" and "settings". The sidebar is always present, so upon clicking "settings" I want the settings component to be rendered without the entire page reloading. Slack is a great example of what I'm looking for, where clicking a different channel switches the conversation content, but does not reload the entire page.
I had a few ideas on how to implement this, but i'm not sure what's best:
Have a general react component (console.jsx) that accepts a urlparameter as a prop to determine which content (photos or settings) to render.
or 2. have a general react component and define a state variable that represents which content to render.
Any help would be greatly appreciated!

Have you heard about react router? Seems to be what you want.
react router