How to open new Screen in React Native - reactjs

In my react native project I have BottomTabNavigation with 5 bottom tabs but i want to add new screens not a tab (like login,signup, change password ,cart,sign out ) but i dont know 😢 how to do this , can anyone tell me how this will happen. Thanks in Advance.
Here is my app screenshot https://ibb.co/4fqgXwp

React Native doesn't provide a navigation solution as robust as you're asking for. Take a look at react-navigation for a solution that should be easy to follow and meet your needs.

You should use Stack Navigator as your main navigator . Add Bottom Tab navigator as stack navigator scene
Code For AppNavigator React Navigation
const TabNavigator = createBottomTabNavigator({
Tab1: Tab1,
Tab2: Tab2,
Tab3: Tab3,
Tab4: Tab4,
Tab5: Tab5
});
const AppNavigator = createStackNavigator({
Home: TabNavigator,
Login: Login
});
export default createAppContainer(AppNavigator);
Working Demo

You can use react-native-navigation library as mentioned in official documentation.

Related

React Native - StackNavigator header has double height

I have a similar issue as After upgrading to expo SDK 37.0.0 my stackNavigator header doubled in height, however I had the same problem with Expo SDK 36. I tried to upgrade Expo (37.0.0) and react-navigation version, but it had no effect on the header.
"react-navigation": "^3.13.0",
"react-navigation-drawer": "^1.4.0",
"react-navigation-stack": "^1.7.3",
"react-navigation-tabs": "^1.2.0",
I have an authentication switch (As in react-navigation docs), which then routes to a stack above the BottomTabNavigator. In this way I can have a screen rendered over the bottom bar. Then I have a list of stacks in the BottomTabNavigator.
// Main appNavigator
export default createAppContainer(
createAnimatedSwitchNavigator({
AuthLoading: AuthLoadingScreen,
Auth: AuthStack,
App: AboveBottomTabStack,
}, {
initialRouteName: 'AuthLoading',
})
);
// Components routed here are ABOVE bottom tab navigator
const AboveBottomTabStack = createStackNavigator(
{
Tabs: {
screen: MainTabNavigator,
navigationOptions: {
// Hides the header, in this case the headers of the Stack components inside TabNavigator are shown
header: null,
}
},
ReportScreen: ReportScreen
}
);
// Components routed here are UNDER bottom tab navigator
const MainTabNavigator = createBottomTabNavigator({
HomeStack: HomeStack,
ReportListStack: ReportListStack,
SettingsStack: SettingsStack,
});
// One of the stacks inside the TabNavigator
const HomeStack = createStackNavigator(
{
Dashboard: {
screen: DashboardScreen,
navigationOptions: {
headerStyle: {
//backgroundColor:'#00beb8',
height: 0, // Even with height 0 the header is displayed
}
}
},
}
);
I tried in setting the last stack's header to null (the one in HomeStack for example), and the header actually hides. The problem is the size, even if the height is set to 0, a small portion of header is displayed, you can see pictures in the linked question at the top.
Ok with the help of a friend we managed to find the solution to this problem.
Using the following prop in the navigation options fixed the issue for us:
navigationOptions: {
headerForceInset: { vertical: 'never' },
}
From what I understood from react-navigation docs it creates a SafeAreaView component around the app's content, however why does it create this annoying small bar on the top is still unknown to me.
EDIT: This prop should be written for android only, because on Iphone it creates graphical issues

How can I navigate into components on react native?

I've fletched a list of items and rendered it into my app.
Its the first page of the app.
The thing that I want to do is:
Make each of the items "touchable", and when you touch it, you open a component filled with objects from a second fetch requisition.
I am new to react native, do you know if I have to use a lib or something to do it?
I'll try to answer your questions one by one.
Make each of the items "touchable"
Wrap your components with TouchableOpacity which you can import from react native like this import {TouchableOpacity} from "react-native";
when you touch it, you open a component filled with objects
You need to implement onPress method there and also react navigation to load other components.
<TouchableOpacity onPress={() => this.props.navigation.navigate("newScreenName")}>
<MyCustomComponent>
...
</MyCustomComponent>
</TouchableOpacity>
and creating screen will be like this :
import { createStackNavigator } from "react-navigation";
import Screen1 from "./Screen1";
import Screen2 from "./Screen2";
...
const customStackNavigator = createStackNavigator(
{
newScreenName: {
screen: Screen1
},
newScreenName1: {
screen: Screen2
}
},
{}
);
check API & Docs here
Also, Please check this example for more details

Displaying white screen when opening React-Native from existing native android App

In Android, integrating react native to an existing app. Basically, my android app was originally developed in Java. From the java side, I click on the button to go to another screen that is using React Native.
Then, there is a problem, every time I click the button that opens the App.js (which contains stack navigation), it takes 2 or 3 seconds in a white screen (loading the bundle). so how to avoid this white screen?
Updated Code
const Navigation = StackNavigator({
home:{
screen: HomeScreen,
}
})
class MyApp extends Component {
render() {
return (
<Navigation/>
);
}
}
export default MyApp;
AppRegistry.registerComponent('MyApp', () => Navigation);

React Navigation trigger when routeName changed

I'm using react navigation for navigate screen. I used nested navigation, TabNavigator and StackNavigator. How can I know in current screen has been swipe / change to other screen and change the state inside the screen without using Redux . I try to get this.props.navigation.state.routeName , it get the routeName of the screen, but how to trigger when routeName has change
const mainNav = TabNavigator({
Home: {
screen: HomeScreen,
},
Live: {
screen: LiveScreen,
},
Radio: {
screen: RadioScreen,
},
} );
export const mainStack = StackNavigator({
Home: { screen: mainNav},
Content: { screen: ContentScreen },
});
At present there is no way to track swipe gestures in react navigation. You can use hacks to achieve this, But mostly all of them requires hooking react navigation with redux.
Best way to track your screens will be to use react redux and hook the state with appState. This will give you most control over navigation and you can also use redux actions to control navigations along with other business stuff f in the app.
Simplest method to use react navigation with redux
You can refer
https://github.com/react-community/react-navigation/issues/1063

How to pass a parameter in react native navigator?

I tried an example of React Native Navigator:
const StudentStackNav = StackNavigator({
Home: {
screen: StudentLogin,
}
});
How do I pass a parameter to StudentStackNav and pass it to StudentLogin?
I have tried <StudentStackNav name='Lucy'> but this.props.name is not available in Home.
Normal props on a Navigator component can be used to configure the navigator.
To send arbitrary props to the screens, you have to use screenProps.
So for example:
<StudentStackNav screenProps={{ name: 'Lucy' }}/>
Which will be available in StudentLogin as this.props.screenProps.
screenProps is documented on this page

Resources