React Native error: showing blank screen on setting up react-navigation
After setting up react navigation in my react native project the screen in the android emulator turns blank and shows no errors. Below is my code for app.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
import ImageViewer from './components/ImageViewer';
import ButtonOne from './components/ButtonOne';
import * as ImagePicker from 'expo-image-picker'
import { useState } from 'react';
import IconButton from './components/IconButton';
import CircleButton from './components/CircleButton';
import EmojiPicker from "./components/EmojiPicker";
import EmojiList from './components/EmojiList';
import { Provider } from 'react-redux';
import { store } from './ReduxStore/store'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// import { hello } from './modules/my-module';
import { GestureHandlerRootView } from "react-native-gesture-handler";
import ImageEditPage from './components/pages/ImagEditPage/index';
import CounterPage from './components/pages/counterPage/index';
const Stack = createNativeStackNavigator();
export default function App() {
const [currentVal, setcurrentVal] = useState(0)
return (
<NavigationContainer>
<Provider store={store}>
<GestureHandlerRootView style={styles.container}>
<Text className="text-[#fff]">Hello</Text>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={ImageEditPage}
options={{ title: 'Welcome' }}
/>
<Stack.Screen name="Counter" component={CounterPage} />
</Stack.Navigator>
<StatusBar style="auto" />
</GestureHandlerRootView>
</Provider>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#25292e',
alignItems: 'center',
justifyContent: 'center',
color: "#fff"
},
}
);
Admin
2023-07-30
The reason why your emulator is showing a blank screen is because you added alignItems: 'center' to your css, remove it and your emulator should show the specific component added on that route.
Similar Content
- DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument error on React Native.
- How to view NFT metadata on hedera block chain
- How to find mean value from an array in Javascript
- Next js 14 Error: Cannot find module 'crypto'
- How to change the background of a selectfields dropdown using css or tailwind
Privacy Policy
By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.