We Keep Coding

Custom Drawer in react navigation

In my react native project I have custom drawer with screens like screen1 and screen2. Screen1 is used for stack navigator and in Screen 2 it contains tab navigator. How to enable this kind of nesting navigation.
I am using react navigation 5 in order to build custom drawer.
Here is my code:
import { DrawerContentScrollView, DrawerItem } from "#react-navigation/drawer";
.............
render = () => {
<DrawerContentScrollView {...props}>
<View style={styles.menuContainer}>
<View style={[styles.menuItemsCard, { backgroundColor: "#fff2df" }]}>
<View style={[styles.circleContainer, { backgroundColor: "#FFC56F" }]}>
<Icon travel name="suitcase" type="font-awesome" color="#fbae41" />
</View>
<DrawerItem
label="Screen1"
labelStyle={{ color: "#fbae41", fontSize: 10 }}
onPress={() => {
props.navigation.navigate("PatientInfo");
}}
/>
</View>
<View style={[styles.itemCard, { backgroundColor: "#EFFFD5" }]}>
<View style={[styles.circleContainer, { backgroundColor: "#b5ff39" }]}>
<Icon Medical name="briefcase" type="font-awesome" color="#609806"></Icon>
</View>
<DrawerItem
label="Screen2"
labelStyle={{ color: "#609806" }}
onPress={() => {
props.navigation.navigate("Diagnose");
}}
/>
</View>
</View>
</DrawerContentScrollView>
}
mainNaviagtor:
const MainNavigator = () => {
return (
<Drawer.Navigator drawerContent={props => <Menu {...props} />} drawerStyle={{ width:
"100%" }}>
<Stack.Screen name="Screen1" component={PatientInfoScreen} screenOptions={headerOptions} />
<Stack.Screen name="Screen2" component={DiagnoseScreen} /> //Here i need tab navigator
</Drawer.Navigator>
);
};
My older code: (react navigation 4.x)
createDrawerNavigator(
{
Screen1: {
screen: createStackNavigator(
{
PatientInfo: { screen: PatientInfoScreen }
},
headerOptions
)
},
Screen2: {
screen: createBottomTabNavigator({
Diagnose: {
screen: diagnoseNavigation
},
Causes: { screen: causeNavigation },
})
},
})
Output:
How should I solve this issue? I also referred to the https://reactnavigation.org/docs/nesting-navigators/.
Any one please help me to solve this issue.

Working Example: Expo Snack
Final Output:
Full source Code:
import * as React from 'react';
import {
View,
Text,
StyleSheet,
useWindowDimensions,
Button,
} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { Feather } from '#expo/vector-icons';
import { createStackNavigator } from '#react-navigation/stack';
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
function TabNav() {
return (
<Tab.Navigator>
<Tab.Screen
name="TabOne"
component={() => (
<View style={styles.container}>
<Text>TabOne</Text>
</View>
)}
/>
<Tab.Screen
name="TabTwo"
component={() => (
<View style={styles.container}>
<Text>TabTwo</Text>
</View>
)}
/>
</Tab.Navigator>
);
}
const StackNav = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Feed" component={Feed} />
<Stack.Screen name="Article" component={Article} />
</Stack.Navigator>
);
};
function CustomDrawerContent(props) {
const width = useWindowDimensions().width * 0.3;
return (
<DrawerContentScrollView {...props}>
<View style={styles.menuContainer}>
<View
style={[
styles.menuItemsCard,
{ backgroundColor: '#fff2df', width: width, height: width },
]}>
<>
<View
style={[styles.circleContainer, { backgroundColor: '#FFC56F' }]}>
<Feather travel name="briefcase" size={25} color="#fbae41" />
<DrawerItem
label="Screen1"
labelStyle={{ color: '#fbae41', fontSize: 10 }}
onPress={() => {
props.navigation.navigate('Screen1');
}}
/>
</View>
</>
<DrawerItem
style={{
position: 'absolute',
left: 0,
width: width,
height: width,
}}
label="Screen2"
labelStyle={{ color: '#609806' }}
onPress={() => {
props.navigation.navigate('Screen1');
}}
/>
</View>
<View
style={[
styles.menuItemsCard,
{ backgroundColor: '#EFFFD5', width: width, height: width },
]}>
<View
style={[styles.circleContainer, { backgroundColor: '#b5ff39' }]}>
<Feather Medical name="briefcase" size={25} color="#609806" />
</View>
<DrawerItem
style={{
position: 'absolute',
left: 0,
width: width,
height: width,
}}
label="Screen2"
labelStyle={{ color: '#609806' }}
onPress={() => {
props.navigation.navigate('StackNav');
}}
/>
</View>
</View>
</DrawerContentScrollView>
);
}
function MyDrawer() {
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Screen1" component={StackNav} />
<Drawer.Screen name="StackNav" component={TabNav} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
function Feed({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Feed Screen</Text>
<Button
title={'Article'}
onPress={() => navigation.navigate('Article')}
/>
</View>
);
}
function Article({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Article Screen</Text>
<Button title={'Feed'} onPress={() => navigation.navigate('Feed')} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
menuContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-evenly',
},
menuItemsCard: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
},
circleContainer: {
width: 50,
height: 50,
borderRadius: 25,
padding: 10,
},
});

Navigate to another screen with react-native-navigation

Good afternoon everyone. I'm a little bit stucked with a navigation on button click.
I would like to move to another screen on a button click
Button code part (./Components/Dashboard.js):
<List>
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: 'image-url' }} />
</Left>
<Body>
<Button dark transparent>
<Text>Euro</Text>
<Text>4200</Text>
</Button>
</Body>
</ListItem>
</List>
And I have a new screen with few buttons (./Components/Screens/EuroScreen.js)
import * as React from 'react';
import { Button, View, Text } from 'react-native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Euro Screen</Text>
<Button dark>Test</Button>
</View>
);
}
How I can add a click property to my Button in ./Components/Dashboard?

This might help
Dashboard({ navigation }) {
return (
<View>
<List>
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: "image-url" }} />
</Left>
<Body>
<Button onPress={() => navigation.navigate("EuroScreen")}>
<Text>Euro</Text>
<Text>4200</Text>
</Button>
</Body>
</ListItem>
</List>
</View>
);
}

React Native how to fix something in the bottom

I am creating a custom picker in RN and want the picker to appear from the bottom of the screen
Below is the image which shows how it is appearing currently.
Consider this as my code for the current Picker component (child Component)
import React, {useState} from 'react'
import PropTypes from 'prop-types'
import {View, Picker, StyleSheet, Dimensions} from 'react-native'
const styles = StyleSheet.create({
pickerDefault:{
flex: 1,
position: 'absolute',
width: Dimensions.get('window').width,
bottom: 0
}
})
const RNPicker = (props) => {
return (
<Picker
selectedValue={'js'}
style={styles.pickerDefault}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
)
}
RNPicker.propTypes = {
}
export default RNPicker
How can I make Picker stick to the bottom of the screen.?
This is how I am rendering code (won't prefer to change this code) in the parent component
<View style={{backgroundColor: backgroundViewColor, height: '100%'}}>
<Spinner
visible={Loading} />
<ProgressBar {...ProgressBarProps} />
<View style={styles.renderComponentView}>
<Text style={[{color: defaultColor}, styles.textStyling, textStyle]}> {label}</Text>
{CustomPicker}
{ Error.status ? (<Text style={[styles.subText, styles.errorColor, helperTextStyle]}>{Error.message}</Text>): null }
<Text style={[styles.subText, errorStyle]}>{helper}</Text>
<TouchableOpacity
style={[{borderColor: defaultColor, color: defaultColor}, styles.customButton]}
onPress={getValueFromState}
>
<Text style={[{borderColor: defaultColor, color: defaultColor},styles.buttonText, buttonTextStyle]}> {usedButtonText} </Text>
</TouchableOpacity>
</View>
</View>

I saw your problem and I am trying to solving it please try this :
<View style={{ position: "absolute", bottom: 0, flex: 1 }}>
{< CustomPicker/>}
</View>
by replacing your {customPicker}

React Native Keyboard Avoiding view with Native base

I'm using native base in screen, and I'm trying to add but it is not working properly as keyboard still hides the text inputs
render() {
return (
<Container>
<Header style={styles.header}>
<Left style={styles.left}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("Welcome")}
>
<FontAwesome
name={I18nManager.isRTL ? "angle-right" : "angle-left"}
size={30}
color="#6f6f6f"
/>
</TouchableOpacity>
</Left>
<Body style={styles.body} />
<Right style={styles.right} />
</Header>
<View style={styles.signuplogosec}>
<Image source={Logo} style={styles.signuplogostyle} />
</View>
<KeyboardAvoidingView behavior="padding" enabled>
<Form style={styles.form}>
<Item rounded style={styles.inputStyle}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="First Name"
onChangeText={(first_name) => { this.setState({ first_name }) }}
style={styles.inputmain}
/>
</Item>
<Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="Last Name"
style={styles.inputmain}
onChangeText={(last_name) => { this.setState({ last_name }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="Email"
style={styles.inputmain}
autoCapitalize='none'
onChangeText={(email) => { this.setState({ email }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
placeholder="Password"
secureTextEntry={true}
textAlign={I18nManager.isRTL ? "right" : "left"}
style={styles.inputmain}
onChangeText={(password) => { this.setState({ password }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
placeholder="Confirm Password"
secureTextEntry={true}
textAlign={I18nManager.isRTL ? "right" : "left"}
style={styles.inputmain}
onChangeText={(confirm_password) => { this.setState({ confirm_password }) }}
/>
</Item>
<TouchableOpacity
info
style={styles.signInbtn}
onPress={this.signIn}
>
<Text autoCapitalize="words" style={styles.buttongetstarted}>
Sign Up
</Text>
</TouchableOpacity>
</Form>
</KeyboardAvoidingView>
<View style={styles.signupbottomView}>
<TouchableOpacity
style={styles.fbButton}
onPress={() => alert("Facebook button Clicked")}
>
<View iconRight style={styles.fbview}>
<Ionicons name="logo-linkedin" size={30} color="white" />
<Text autoCapitalize="words" style={styles.fbButtonText}>
Sign Up with LinkedIn
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={styles.signupbottomText}
onPress={()=>{this.props.navigation.navigate('SignIn')}}>
<Text style={styles.bottomText01}>
Do you have an account?{" "}
<Text style={styles.bottomText02}>Sign In</Text>
</Text>
</TouchableOpacity>
</View>
</Container>
);
}
}
export default SignUpScreen;
I have tried to add different views inside form tag but it is still not working, I have tried to create different form tags but failed.
My requirement is simple I want to use the KeyboardAvoidingView inside Native base components, I'm wrong some where but I don't know where

Just import KeyboardAvoidingView from react-native using with
behavior='position'
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, KeyboardAvoidingView} from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<KeyboardAvoidingView behavior='position'>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
</KeyboardAvoidingView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
}

import { Image,KeyboardAvoidingView } from 'react-native';
import { Container, Content, Text, Card, CardItem, Button, Icon, Form, Item, Input, Spinner } from 'native-base';
//https://github.com/GeekyAnts/NativeBase/issues/1163
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<Content>...</Content>
</KeyboardAvoidingView>;

How to render data in cards using ListView?

I want to render Local json file by listing it in cards, Im using FlatList View but couldn't get it rendered.
Here is my code Snippet :
import React, { Component, View, FlatList } from 'react';
import { Image } from 'react-native';
import {
Container,
Header,
Title,
Content,
Button,
Icon,
Card,
CardItem,
Text,
Thumbnail,
Left,
Body,
Right
} from 'native-base';
import styles from './styles';
const json = require('./fixtures.json');
const logo = require('../../../assets/logo.png');
const cardImage = require('../../../assets/cskvsdd.jpg');
class Fixtures extends Component {
render() {
return (
<FlatList
renderItem={({item}) => {
<Container style={styles.container}>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>Fixtures</Title>
</Body>
<Right />
</Header>
<Content padder>
<Card style={styles.mb}>
<CardItem>
<Left>
<Thumbnail source={logo} />
<Body>
<Text>json data</Text>
<Text note>json data</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image
style={{
resizeMode: 'cover',
width: null,
height: 200,
flex: 1
}}
source={cardImage}
/>
</CardItem>
<CardItem style={{ paddingVertical: 0 }}>
<Left>
<Button transparent>
<Icon active name="thumbs-up" />
<Text>josn data</Text>
</Button>
</Left>
<Body>
<Button transparent>
<Icon active name="chatbubbles" />
<Text>json data</Text>
</Button>
</Body>
<Right>
<Text>json data</Text>
</Right>
</CardItem>
</Card>
</Content>
</Container>
}
/>
);
}
}
export default Fixtures;
I Have overcome many tutorials before asking here. But couldn't figure it out. Apologies if this is too novice.
Kindly help me render json data to cards by refactoring my code.
Thank in advance

By looking at your code snippet I realized that you are not setting the data anywhere in the code. please pass the array of data into Flatlist.
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
keyExtractor={(item, index)=> index}
/>
keyExtractor should be unique .

Please check flatlist documentation:
https://facebook.github.io/react-native/docs/flatlist.html
Make sure your JSON data is correctly formated and accessed.