Develop Reference

How do I make my FlatList scrollable while sibling Modal is visible?

My FlatList is not scrollable while my Modal is visible. I've tried a bunch of things but none seem to do the job. I'm building for Android. You can find the Expo snack here https://snack.expo.dev/#ordis45/modal_flatlist?platform=android. Code is as follows:
Any pointers in the right direction would be appreciated!
const styles = StyleSheet.create({
container: {
flex: 1,
},
modal: {
position: 'relative',
bottom: 0,
height: 20,
},
modalContent: {
backgroundColor: 'white',
padding: 22,
justifyContent: 'center',
alignItems: 'center',
borderColor: 'rgba(0, 0, 0, 0.1)',
},
openButton: {
backgroundColor: '#F194FF',
borderRadius: 20,
padding: 10,
elevation: 2,
position: 'absolute',
bottom: 20,
right: 20,
},
});
const myComp = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.container} overflow='scroll'>
<Modal
visible={modalVisible}
style={styles.modal}
transparent={true}
>
<View style={styles.modalContent}>
<Text>This is a modal</Text>
<TouchableOpacity onPress={() => setModalVisible(false)}>
<Text>Close</Text>
</TouchableOpacity>
</View>
</Modal>
<FlatList
style={{height: 300, position: 'relative', elevation: 1}}
data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
renderItem={({ item }) => <Text style={{padding: 50}}>{item}</Text>}
/>
<TouchableOpacity onPress={() => setModalVisible(true)} style={styles.openButton}>
<Text>Open</Text>
</TouchableOpacity>
</View>
);
};
I tried things like changing the elevation and z-indices of the View component and the FlatList and Modal components- to no avail. I also tried setting supportedOrientations={['landscape']} but that didn't work either.

Nested TouchableOpacity in a FlatList is not working properly

I want to create custom Dropdown without using library so, I have created a FlatList of TouchableOpacity cards with a Kebab(ThreeDots) dropdown but the dropDown menu is not clicking properly.
Working: i have created a touchable flatlist for cards and nested another touchable for the kebab dropdown which get enable on the basis of id check and render on the basis of checks
DropDown menu is not clicking if it moves out from the card area View.
The code :
import {
FlatList,
StyleSheet,
Text,
TouchableOpacity,
View,
Image,
TouchableWithoutFeedback,
Pressable,
SafeAreaView,
} from 'react-native';
import React, {useState, useEffect} from 'react';
const Card = () => {
const [sideBar, setSideBar] = useState({
visibility: false,
id: '',
});
const dropDown = (item, index) => {
setSideBar({
visibility: !sideBar.visibility,
id: item.id,
});
};
const renderItem = ({item, index}) => {
return (
<TouchableOpacity
style={[
sideBar.id === item.id
? {
backgroundColor: '#fff',
}
: {
// backgroundColor: '#123456',
},
{
// flex: 1,
borderWidth: 1,
height: 70,
marginVertical: 8,
marginHorizontal: 16,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: 10,
},
]}
onPress={(item, index) => {
setSideBar({
visibility: !sideBar.visibility,
id: item.id,
});
}}>
{/* TITLE */}
<View
style={{
flexDirection: 'row',
flex: 1,
justifyContent: 'space-between',
alignItems: 'center',
marginVertical: 5,
marginHorizontal: 6,
}}>
<Text style={styles.title}>{item.title}</Text>
</View>
{/*ADDRESS */}
<View>
<Text style={{fontSize: 12}}>1339 Arling Drive ODGEN, UT 84403</Text>
</View>
{/*ThreeDOTS */}
<TouchableOpacity
// style={{justifyContent:'flex-end',alignItems:'flex-end'}}
onPress={() => dropDown(item, index)}>
<Image
style={{width: 30, height: 30}}
source={require('../../assets/dots-vertical-512.webp')}
/>
</TouchableOpacity>
{sideBar.visibility && sideBar.id === item.id ? (
<View
style={{
position: 'absolute',
width: 190,
top: 50,
right: 10,
borderWidth: 1,
alignItems: 'flex-end',
backgroundColor:'red',
}}>
{/*DropDown 1 */}
<TouchableOpacity
onPress={() => alert('D!!!')}
style={{
flexDirection: 'row',
height: 30,
width: '86%',
justifyContent: 'space-evenly',
alignItems: 'center',
marginBottom: 5,
borderRadius: 15,
backgroundColor: '#abcdef',
}}>
<Text
style={{
fontSize: 13,
fontWeight: 'normal',
color: '#000000',
alignSelf: 'center',
}}>
Send Text Message
</Text>
<Image
style={{width: 20, height: 20}}
source={require('../../assets/chat.png')}
/>
</TouchableOpacity>
{/*DropDown 1 */}
<TouchableOpacity
onPress={() => alert('D!!!')}
style={{
flexDirection: 'row',
height: 30,
width: '86%',
justifyContent: 'space-evenly',
alignItems: 'center',
marginBottom: 5,
borderRadius: 15,
backgroundColor: '#abcdef',
}}>
<Text
style={{
fontSize: 13,
fontWeight: 'normal',
color: '#000000',
alignSelf: 'center',
}}>
Send Text Message
</Text>
<Image
style={{width: 20, height: 20}}
source={require('../../assets/chat.png')}
/>
</TouchableOpacity>
{/* DropDown 1 */}
<TouchableOpacity
onPress={() => alert('D!!!')}
style={{
flexDirection: 'row',
height: 30,
width: '86%',
justifyContent: 'space-evenly',
alignItems: 'center',
marginBottom: 5,
borderRadius: 15,
backgroundColor: '#abcdef',
}}>
<Text
style={{
fontSize: 13,
fontWeight: 'normal',
color: '#000000',
alignSelf: 'center',
}}>
Send Text Message
</Text>
<Image
style={{width: 20, height: 20}}
source={require('../../assets/chat.png')}
/>
</TouchableOpacity>
</View>
) : null}
</TouchableOpacity>
);
};
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
isMenuOpen: false,
},
{
id: '1',
title: 'Second Item',
isMenuOpen: true,
},
{
id: '2',
title: 'Third Item',
isMenuOpen: false,
},
{
id: '3',
title: 'Third Item',
isMenuOpen: false,
},
{
id: '4',
title: 'Third Item',
isMenuOpen: false,
},
{
id: '5',
title: 'Third Item',
isMenuOpen: false,
},
{
id: '6',
title: 'Third Item',
isMenuOpen: false,
},
{
id: '7',
title: 'Third Item',
isMenuOpen: false,
},
{
id: '8',
title: 'Third Item',
isMenuOpen: false,
},
{
id: '9',
title: 'Third Item',
isMenuOpen: false,
},
];
return (
// <SafeAreaView>
<View
style={[
sideBar.visibility && sideBar.id
? {
backgroundColor: '#808080',
}
: {
backgroundColor: '#fff',
},
]}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
// </SafeAreaView>
);
};
export default Card;
const styles = StyleSheet.create({
// item: {
// flex: 1,
// borderWidth: 1,
// height: 70,
// marginVertical: 8,
// marginHorizontal: 16,
// flexDirection: 'row',
// justifyContent: 'space-between',
// alignItems: 'center',
// borderRadius: 10,
// },
title: {
fontSize: 17,
fontWeight: 'bold',
},
});

Image will not resize to fit window, all other fixes make the image disappear - React Native

I'm having an issue with React Native. I'm trying to put an image as a header, which needs to resize itself responsively to fit inside of the viewport and be centred horizontally.
Unfortunately, I'm unable to produce any sort of result using styling arguments such as resizeMode: 'contain' and the image disappears when following the advice of people who say to use the styling arguments width: undefined and height: undefined.
I'm a bit new to React Native so it's certainly possible that there's a blindingly obvious issue with how I'm approaching this problem. I'm also new to posting on Stack Overflow so any pointers about how best to describe or show my problem would also be most welcome.
Here is the source code I am using which produces the result where the image is too big for the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image going off the side of the screen
And here is the Source Code I am using where the image disappears off the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
height: undefined,
width: undefined,
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image disappeared entirely

After viewing the related questions, I found a solution which worked for me. Adding the following styling arguments did the trick:
width: null,
resizeMode: 'contain',
height: 220
The Stack Overflow question this solution was taken from

Inner nested React Native swiper doesn't show any content

I'm trying to make two nested swipers on Android with React Native, using react-native-swiper. Each swiper works correctly when is separate, but when I add one to the other, the inner nested swiper doesn't show any content. It's a little bit weird, it recognized its children, I can swipe but Views are not rendered. Here is my simple demonstration example:
import React from 'react'
import {
Text,
View
} from 'react-native'
import Swiper from 'react-native-swiper'
const Dimensions = require('Dimensions');
const window = Dimensions.get('window');
var styles = {
wrapper: {
backgroundColor: 'transparent'
},
innerSwiper: {
width: window.width,
height: window.height / 3,
marginTop: 60,
backgroundColor: '#92BBD9'
},
slide1: {
flex: 1,
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5'
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold'
}
}
export default () =>
<Swiper style={styles.wrapper} showsButtons>
<View style={styles.slide1}>
<View style={styles.innerSwiper}>
<Swiper style={styles.wrapper} showsButtons>
<View style={styles.slide1}>
<Text style={styles.text}>Hello Swiper</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
</View>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>

React Native Navigation error. ' Main' should declare a screen

I am currently working with React Native and the new React Navigation. but there is an error: Currently having an error in one screen.
Navigation is as follows
MainScreen->Login takes to Splash Screen
Splash -> click on a button takes to Home Screen
HomeScreen->Logout Should take to Main Screen
MainScreen to Home is working fine But Home Screen to Main is not working.
Below is the error coming
' Main' should declare a screen
//Code for the Main screen
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Image,
Alert
} from 'react-native';
import Splash from './Splash';
import Signin from './signin';
import Forget from './forget';
import { StackNavigator } from 'react-navigation';
class Main extends Component {
constructor(props) {
super(props)
this.state = {
txt_input_email: '',
txt_input_password: '',
};
}
//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
//==========================function to validate user information=========================================//
mvalidate(){
const { navigate } = this.props.navigation;
if (this.state.txt_input_email==""){
Alert.alert("Please enter email");
return;
}
if(this.state.txt_input_password==""){
Alert.alert("Please enter Password");
return;
}
if(!this.validateEmail(this.state.txt_input_email ||
!this.vlidatePassword(this.state.txt_input_password))){
Alert.alert("Email/Password is invalid/Wrong");
}else{
if(this.state.txt_input_email=="abc#gmail.com" && this.state.txt_input_password=="abc123"){
navigate('SplashPage')
}else{
Alert.alert('Wrong username/password');
}
}
}
validateEmail(email) {
if(/^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/){
return true;
}else{
return false;
}
}
vlidatePassword(password){
if(/^[a-zA-Z0-9]{4,100}$/){
return true;
}else{
false;
}
}
//=========================================================================================================//
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require('../images/logo.jpg')} style={styles.image}></Image>
<Text style={styles.text}> Sign In</Text>
<View style={styles.set}>
<View style={styles.imageset}>
<Image source={require('../images/facebook-logo.png')} style={styles.facebook}></Image>
<Image source={require('../images/google-plus.png')} style={styles.google}></Image>
</View>
<View style={[styles.inputWrap, styles.set]}>
<TextInput
placeholder="Email/Employee Id"
style={styles.input}
underlineColorAndroid="transparent"
onChangeText={value => this.setState({txt_input_email: value.trim()})}
/>
</View>
<View style={styles.inputWrap}>
<TextInput
placeholder="Password"
secureTextEntry
style={styles.input}
underlineColorAndroid="transparent"
onChangeText={value => this.setState({txt_input_password: value.trim()})}
/>
</View>
<View style={styles.imageset}>
<TouchableOpacity activeOpacity={.5} onPress={() => navigate('ForgetPage')}>
<View>
<Text style={styles.forget}>Forget Password ?</Text>
</View>
</TouchableOpacity>
<TouchableOpacity activeOpacity={.5} onPress={()=>this.mvalidate()} >
<View style={styles.button}>
<Text style={styles.buttonText}> SIGN IN</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.imageset}>
<Text style={styles.user}>New User ? </Text>
<TouchableOpacity activeOpacity={.5} onPress={() => navigate('SigninPage')} >
<View>
<Text style={styles.signup}>Sign Up</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
},
inputWrap: {
flexDirection: "row",
marginVertical: 10,
height: 40,
width: 300,
marginHorizontal: 20,
backgroundColor: "#FF0000"
},
text: {
color: "#FFF",
fontSize: 25
},
input: {
flex: 1,
paddingHorizontal: 15,
backgroundColor: '#fff'
},
button: {
backgroundColor: "#FF8C00",
paddingVertical: 15,
marginVertical: 15,
marginLeft: 45,
width: 100,
height: 35,
alignItems: "center",
justifyContent: "center"
},
buttonText: {
color: '#FFF',
fontSize: 15
},
forget: {
color: "#11D923",
backgroundColor: "transparent",
fontSize: 18,
marginHorizontal: 15,
marginTop: 20,
},
signup: {
color: "#11D923",
backgroundColor: "transparent",
fontSize: 18,
marginLeft: 25,
marginTop: 15
},
image: {
width: 250,
height: 110
},
set: {
marginTop: 20
},
imageset: {
flexDirection: "row"
},
facebook: {
marginLeft: 85,
width: 65,
height: 65
},
google: {
marginLeft: 20,
width: 65,
height: 65
},
user: {
fontSize: 18,
color: "#FFF",
marginLeft: 25,
marginTop: 17
}
});
const FirstProject = StackNavigator({
MainPage: { screen: Main },
SplashPage: { screen: Splash },
SigninPage: { screen: Signin },
ForgetPage: { screen: Forget },
});
export default FirstProject;
//Code or the Splash Screen
import React, { Component } from 'react';
import { AppRegistry, View, Text, Image, StyleSheet, TouchableHighlight } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './Home';
class Splash extends Component {
//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.contain}>
<Image source={require('../images/splash.jpg')} style={{
height: 435, width: 300,
marginHorizontal: 30, marginTop: 52
}}>
<TouchableHighlight onPress={() => navigate('HomePage')} >
<Image source={require('../images/cancel.png')} style={styles.container}>
</Image></TouchableHighlight>
<Image source={require('../images/facebook-logo.png')} style={styles.facebook}></Image>
</Image>
<View style={styles.dir}>
<TouchableHighlight >
<Image source={require('../images/heart.png')} style={styles.welcome}></Image>
</TouchableHighlight>
<Image source={require('../images/whatsapp.png')} style={styles.whatsap}></Image>
<Image source={require('../images/sharing-big-symbol.png')} style={styles.instructions}></Image>
</View>
<Image source={require('../images/google-plus.png')} style={styles.google}></Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: 30,
width: 30,
marginHorizontal: 270
},
contain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
},
welcome: {
height: 35,
width: 35,
marginHorizontal: 40,
marginVertical: 5
},
instructions: {
height: 45,
width: 45,
marginHorizontal: 14,
marginVertical: 5
},
whatsap: {
height: 35,
width: 35,
marginLeft: 135,
marginVertical: 9
},
facebook: {
height: 35,
width: 35,
marginLeft: 247,
marginVertical: 368
},
google: {
height: 35,
width: 35,
marginLeft: 235
},
dir: {
flexDirection: 'row'
}
});
const SplashPage = StackNavigator({
SplashPage: { screen: Splash },
HomePage: { screen: Home}
});
export default SplashPage;
// Code for the Home Page
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View, Image,
TouchableHighlight,
DrawerLayoutAndroid,
TouchableOpacity
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Main from './Main';
import About from './meditationpages/about';
class Home extends Component {
openDrawer() {
this.refs['DRAWER'].openDrawer()
}
//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
render() {
navigationView = (
<View style={{ flex: 1, backgroundColor: '#B0E0E6', }}>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Home</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Meditation</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Art & Wellness</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>One - on - One counselling</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Health Moments</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Blogs</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Live Sessions</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Forums</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Masters</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Global Events & Retreats</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Interview/Audio/Video</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Online Learning</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>e-store</Text>
</View>
);
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<DrawerLayoutAndroid
drawerWidth={250}
ref={'DRAWER'}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={styles.welcome}>
<TouchableHighlight onPress={() => this.openDrawer()}>
<Image source={require('../images/menu.png')} style={styles.imagess}></Image>
</TouchableHighlight>
<Image source={require('../images/home.png')} style={[styles.imagess, styles.menu_diff]}></Image>
<TouchableHighlight onPress={() => navigate('AboutPage')} >
<Image source={require('../images/meditation.png')} style={[styles.imagess, styles.icon_diff]}></Image></TouchableHighlight>
<Image source={require('../images/art.png')} style={[styles.imagess, styles.icon_diff]}></Image>
</View>
<TouchableHighlight onPress={() => navigate('MainPage')} style={styles.set}>
<View style={styles.button}>
<Text style={styles.buttonText} > Logout</Text>
</View>
</TouchableHighlight>
</DrawerLayoutAndroid>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#4682B4',
},
welcome: {
flexDirection: 'row',
marginTop: 10,
backgroundColor: '#4682B4'
},
imagess: {
marginLeft: 10,
height: 35,
width: 35
},
menu_diff: {
marginLeft: 177
},
icon_diff: {
marginLeft: 15
},
buttonText: {
color: '#FFF',
fontSize: 20
},
button: {
backgroundColor: "#FF8C00",
paddingVertical: 15,
marginVertical: 15,
marginHorizontal: 120,
width: 100,
height: 40,
alignItems: "center",
justifyContent: "center"
},
set: {
marginTop: 250,
justifyContent: 'center',
alignItems: 'center',
},
});
const HomePages = StackNavigator({
HomePage: { screen: Home },
AboutPage: { screen: About },
MainPage:{ screen: Main},
});
export default HomePages

I have solved this issue. I commented one line
const HomePages = StackNavigator({
HomePage: { screen: Home },
AboutPage: { screen: About },
// MainPage:{ screen: Main}, //Commenting this line solved the issue
});
Maybe main page reference was already created that's why it was creating the problem.