I'm using the React Native Stack Navigation to configure the header in my app and then nest a Drawer Navigation inside of it.
In the android emulator, everything is working fine. But whenever I try to open the app using expo, there's nothing more then a white blank screen. Developer tools aren't logging any errors, Expo itself doesn't give me an error nor does the terminal.
I tried replacing the whole navigation with just a <Text> component and in this case Expo shows the text. But I can't seem to find what I'm doing wrong. Some help would be much appreciated since I'm just learning React Native.
This is my code:
index.tsx
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
App.tsx
import React, {Component} from 'react';
import {NavigationContainer} from '#react-navigation/native';
import RootStack from './src/__plugins/navigation';
export default class App extends Component {
render() {
return (
<NavigationContainer>
<RootStack />
</NavigationContainer>
);
}
}
navigation/index.tsx
import {createStackNavigator} from '#react-navigation/stack';
import SignOutModalScreen from '../../_view/SignOutModalScreen';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {FontAwesomeIcon} from '#fortawesome/react-native-fontawesome';
import {faBars, faSignOutAlt, faTimes} from '#fortawesome/free-solid-svg-icons';
import {StyleSheet} from 'react-native';
import StartDrawer from './StartDrawer';
import {DrawerActions} from '#react-navigation/native';
export enum RoutingStack {
START = 'start',
GAME = 'main'
}
export enum RoutingDrawer {
START = 'start',
GAME = 'game'
}
export enum RoutingIdentifier {
JOIN_SCREEN = 'join',
GAME_SCREEN = 'game',
HELP_SCREEN = 'help',
SIGNOUT_SCREEN = 'sign_out'
}
const Stack = createStackNavigator();
const RootStack = () => {
return (
<Stack.Navigator
mode="modal"
screenOptions={({ navigation }) => ({
headerStyle: {
backgroundColor: '#80cbc4',
},
headerLeft: () => {
return (
<TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer)}>
<FontAwesomeIcon icon={faBars} style={styles.menuIcon} />
</TouchableOpacity>
);
},
headerRight: () => {
return (
<TouchableOpacity onPress={() => navigation.navigate(RoutingIdentifier.SIGNOUT_SCREEN)}>
<FontAwesomeIcon icon={faSignOutAlt} style={styles.signOutIcon} />
</TouchableOpacity>
);
},
})}
>
<Stack.Screen
name={RoutingDrawer.START}
component={StartDrawer}
options={{ title: '' }}
/>
<Stack.Screen
name={RoutingIdentifier.SIGNOUT_SCREEN}
component={SignOutModalScreen}
options={({ navigation }) => ({
headerTitle: '',
headerStyle: {
elevation: 0,
backgroundColor: '#F5FCFF',
},
headerLeft: () => {
return (
<TouchableOpacity onPress={() => navigation.navigate(RoutingDrawer.START)}>
<FontAwesomeIcon icon={faTimes} style={styles.closeIcon} />
</TouchableOpacity>
);
},
})}
/>
</Stack.Navigator>
);
};
const styles = StyleSheet.create({
closeIcon: {
marginStart: 10,
color: 'black',
},
menuIcon: {
marginStart: 10,
color: 'white',
},
signOutIcon: {
marginEnd: 10,
color: 'white',
},
});
export default RootStack;
And the StartDrawer.tsx
import {createDrawerNavigator} from '#react-navigation/drawer';
import {RoutingIdentifier} from './index';
import JoinPage from '../../join/_view/JoinScreen';
import {FontAwesomeIcon} from '#fortawesome/react-native-fontawesome';
import {faQuestionCircle, faSignInAlt} from '#fortawesome/free-solid-svg-icons';
import {StyleSheet} from 'react-native';
import {trans} from '../i18n';
const Drawer = createDrawerNavigator();
const StartDrawer: FC = () => {
return (
<Drawer.Navigator drawerType="slide" hideStatusBar={false}>
<Drawer.Screen
name={RoutingIdentifier.JOIN_SCREEN}
component={JoinPage}
options={{
drawerLabel: trans.getString('MENU_START_GAME'),
drawerIcon: () => (
<FontAwesomeIcon icon={faSignInAlt} style={styles.icon} />
),
}}
/>
<Drawer.Screen
name={RoutingIdentifier.HELP_SCREEN}
component={() => null}
options={{
drawerLabel: trans.getString('MENU_HELP'),
drawerIcon: () => (
<FontAwesomeIcon icon={faQuestionCircle} style={styles.icon} />
),
}}
/>
</Drawer.Navigator>
);
};
const styles = StyleSheet.create({
icon: {
marginEnd: -20,
marginStart: 10,
},
});
export default StartDrawer;
I am not sure but have you tried the opposite? stack inside drawer instead of drawer inside of stack?
I have had good results with this. Perhaps my root navigator may help you. Try using it as a template (I have written this code some time ago so I don't remember specifics but it works well) :
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { fetchPaymentMethods } from 'reducers/paymentMethods';
import { fetchNextPayments } from 'reducers/nextPayments';
import Home from 'pages/home';
import Orders from 'pages/orders';
import Settings from 'pages/settings';
import Scanner from 'pages/scanner';
import Support from 'pages/support';
import SideDrawer from 'components/SideDrawer';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const StackNavigator = () => (
<Stack.Navigator headerMode="none">
<Stack.Screen name="Home" component={Home} />
<Drawer.Screen name="Orders" component={Orders} />
<Drawer.Screen name="Settings" component={Settings} />
<Drawer.Screen name="Scanner" component={Scanner} />
<Drawer.Screen name="Support" component={Support} />
</Stack.Navigator>
);
const RootNavigator = props => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchNextPayments());
dispatch(fetchPaymentMethods());
}, []);
return (
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Home"
screenOptions={{ gestureEnabled: true }}
drawerContent={props => <SideDrawer {...props} />}
>
<Drawer.Screen name="Root" component={StackNavigator} />
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="Orders" component={Orders} />
<Drawer.Screen name="Settings" component={Settings} />
<Drawer.Screen name="Scanner" component={Scanner} />
<Drawer.Screen name="Support" component={Support} />
</Drawer.Navigator>
</NavigationContainer>
);
};
export default RootNavigator;
Related
Packages Used:
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
Problem :
Image 1,2 & 3: I have implemented drawer which shows two option as HomePage and Terms & Condition. If you click on t&c option it opens its screen and same if you click on homescreen it goes back to homepage screen.
Image 1 & 4: I have made "Click for details page" text as clickable on HomeScreen and after I click it should go to details screen but throws error as image 4 I am confused on how to implement it. Where do I write Stack.Navigation code.
App.js
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
import HomeScreen from './Screens/HomeScreen';
import DetailPage from './Screens/DetailPage';
import TermsCondition from './Screens/TermsCondition';
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="HomeScreen">
<Drawer.Screen name="HomeScreen" component={HomeScreen} />
<Drawer.Screen name="Term&Condition" component={TermsCondition} />
</Drawer.Navigator>
</NavigationContainer>
);
}
HomeScreen.js
export default function HomeScreen({ navigation }) {
return (
<TouchableOpacity onPress={() => navigation.navigate('DetailPage')}>
<View style={{ flexDirection: 'row' }}>
<Text style={{ fontSize: 50 }}>Click for Details Page</Text>
</View>
</TouchableOpacity>
);
}
TermsCondition.js
function TermsCondition({ navigation}) {
return (
<View style={{ flexDirection: 'row' }}>
<Text style={{fontSize:50}}>T&C Page</Text>
</View>
);
}
export default TermsCondition;
DetailPage.js
function DetailPage({ navigation}) {
return (
<View style={{ flexDirection: 'row' }}>
<Text style={{fontSize:50}}>DetailPage</Text>
</View>
);
}
export default DetailPage;
Sorry for this silly question but I tried it online but confused a lot.
Thank You in advance!
It was simple step of Nested Navigation
Here is the solution for the same:
App.js
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
import HomeScreen from './Screens/HomeScreen';
import DetailPage from './Screens/DetailPage';
import TermsCondition from './Screens/TermsCondition';
import { createStackNavigator } from '#react-navigation/stack';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
{/* Add Drawer.Navigation to a function.*/}
function Root() {
return (
<Drawer.Navigator>
<Drawer.Screen name="HomeScreen" component={HomeScreen} />
<Drawer.Screen name="Term&Condition" component={TermsCondition} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen options={{
}} name="Root" component={Root} {/*Call function as Stack.Screen*/}
options={{ headerShown: false }} /> {/*This will disable function header*/}
<Stack.Screen options={{
title: 'DetailPage'
}} name="DetailPage" component={DetailPage} />
</Stack.Navigator>
</NavigationContainer>
);
}
Note: Rest All the code for DetailPage.js, HomeScreen.js,TermCondition.js is same.
Ps. Take some break from the error and return back with fresh mind. that might solve it:-)
My app is currently set up as follows, and I want to show the Hub screen when the user presses on Study:
App.js:
import React, { Component } from 'react';
...
import { View } from 'react-native'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './redux/reducers'
import thunk from 'redux-thunk'
const store = createStore(rootReducer, applyMiddleware(thunk))
...
export class App extends Component {
...
render() {
return (
<Provider store={store}>
<NavigationContainer>
<Stack.Navigator initialRouteName="Main">
<Stack.Screen name="Main" component={MainScreen} options={{ headerShown: false }}/>
</Stack.Navigator>
</NavigationContainer>
</Provider>
)
}
}
export default App
Main:
import React, { Component } from 'react'
import { View } from 'react-native'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchUser, clearData } from '../redux/actions/index'
import ProfileScreen from './main/Profile'
import HomeScreen from './main/Home'
import StudyScreen from './main/Study'
import TestScreen from './main/Test'
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs'
const Tab = createMaterialBottomTabNavigator();
// https://reactnavigation.org/docs/bottom-tab-navigator/
export class Main extends Component {
componentDidMount() {
this.props.clearData();
this.props.fetchUser();
}
render() {
...
return (
<Tab.Navigator initialRouteName="Home" activeColor="#f0edf6" barStyle={{ backgroundColor: '#694fad' }} shifting='true'>
<Tab.Screen name="Home" component={HomeScreen}
options={{
tabBarLabel: 'Home', tabBarColor: '#FF6347', tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={26}/>
),
}} />
<Tab.Screen name="Study" component={StudyScreen}
options={{
tabBarLabel: 'Study', tabBarColor: '#694FAD', tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="school" color={color} size={26}/>
),
}} />
<Tab.Screen name="Profile" component={ProfileScreen}
options={{
tabBarLabel: 'Profile', tabBarColor: '#1F65FF', tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account" color={color} size={26}/>
),
}} />
<Tab.Screen name="Test" component={TestScreen}
options={{
tabBarLabel: 'Test', tabBarColor: '#3490AA', tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="history" color={color} size={26}/>
),
}} />
</Tab.Navigator>
)
}
}
const mapStateToProps = (store) => ({
currentUser: store.userState.currentUser
})
const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser, clearData}, dispatch)
export default connect(mapStateToProps, mapDispatchProps)(Main);
Study:
import React, { Component } from 'react'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
import HubScreen from './studyWebviews/Hub'
export class Study extends Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Hub">
<Stack.Screen name="Hub" component={HubScreen} options={{ headerShown: false }}/>
</Stack.Navigator>
</NavigationContainer>
);
}
}
Hub:
import React from 'react'
import { Text } from 'react-native'
export default function Hub() {
return (
<Text>Hub</Text>
)
}
Trying to load my app gives this error:
×
Error: Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'Study'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.
How do I fix this? Please let me know if I need to clarify anything or make any changes for the sake of readability, thank you.
I believe you are importing the components incorrectly, as the message suggests: "...or mixed up default import and named import when importing."
Try export default class Study...
I am having trouble realising the following:
I want a Tab Navigation with two Tabs: Home and Map.
In the Home Tab I want a Drawer Navigation. Within the Drawer Navigation I want to be able to Navigate to the screens Profile and About. When clicking the Back Button from Profile or About, I want to come back to the open Drawer Menu.
Currently I have this:
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { createStackNavigator } from '#react-navigation/stack';
import DrawerContent from './DrawerContent';
import Mapp from './Mapp';
import Home from './Home';
import Profile from './Profile';
import About from './About';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const HomeStackNavigator = () => {
return <Stack.Navigator>
<Stack.Screen
name='Tab'
component={TabNavigator} />
<Stack.Screen
name='Profile'
component={Profile} />
<Stack.Screen
name='About'
component={About} />
</Stack.Navigator>
}
const TabNavigator = () => {
return <Tab.Navigator>
<Tab.Screen name='Home' component={Home} />
<Tab.Screen name='Map' component={Mapp} />
</Tab.Navigator>
}
const DrawerNavigator = () => {
return <Drawer.Navigator
drawerContent={props => DrawerContent(props)}>
<Drawer.Screen name='Home' component={HomeStackNavigator} />
</Drawer.Navigator>
}
const Navigation = () => {
return <NavigationContainer>
<DrawerNavigator />
</NavigationContainer >
}
and <DrawerContent /> looks like this
import React from 'react';
import {
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
const DrawerContent = props => {
return <DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label='Profile' onPress={() => props.navigation.navigate('Profile')} />
<DrawerItem label='About' onPress={() => props.navigation.navigate('About')} />
</DrawerContentScrollView>
}
export default DrawerContent;
This gives me
The Tab Navigation (why is there a header with title Tab, I don't want this, but I must set name prop in <HomeStackNavigator />).
Then I can open the Drawer (works as expected)
When I click on i.e. Profile I am only able to go back to Tab. Why not to Drawer?
What also drives me nuts is, that I cannot remove the Home Menu Item in the Drawer.
The drawer doesn't open in that scenario, you will need to open it yourself:
const HomeStackNavigator = () => {
return <Stack.Navigator>
<Stack.Screen
name='Tab'
component={TabNavigator} />
<Stack.Screen
name='Profile'
component={Profile}
options={({ navigation }) => ({
title: '',
headerLeft: () => (
<Button
title="<"
onPress={() => {
navigation.goBack();
navigation.openDrawer();
}}
/>
),
})}/>
<Stack.Screen
name='About'
component={About} />
</Stack.Navigator>
}
Here's a working Snack.
I am building an app in which several of the screens have dynamically rendered cards that are mapped to an array of objects called ENTRIES. Each one of these cards can be pressed to navigate to a corresponding screen, however, I cannot seem to get the navigation to work.
I am passing is the screen value from ENTRIES as props from the Settings.js screen into the ClickableCard component, which then gets passed into the TouchableOpacity onClick as this.props.navigation.navigate(screen).
However I keep getting the following error TypeError: undefined is not an object (evaluating '_this3.props.navigation.navigate')
Here is an example of the code below:
App.js File
import React from 'react;
import {createMaterialBottomTabNavigator} from '#react-navigation/material-bottom-tabs';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import Home from './src/screens/Home';
import SettingsScreen from './src/screens/SettingsScreen';
import PrivacyScreen from './src/screens/PrivacyScreen';
import NotificationsScreen from './src/screens/NotificationsScreen';
import SoundsScreen from './src/screens/SoundsScreen';
import ThemeScreen from './src/screens/ThemeScreen';
const PrivacyStack = createStackNavigator();
const SettingsStack = createStackNavigator();
const AuthStack = createStackNavigator();
const MainStack = createStackNavigator();
const Tabs = createMaterialBottomTabNavigator();
const TabNavigator = () => {
return (
<Tabs.Navigator
initialRouteName="Home"
<Tabs.Screen
name="Home"
component={HomeStack}
/>
Tabs.Screen
name="Settings"
component={SettingsStack}
children={this.SettingsStack}
</Tabs.Navigator>
)
}
const AuthStack = () => (
<AuthStack.Navigator>
<AuthStack.Screen
name="Auth"
component={Auth}
/>
</AuthStack.Navigator>
);
const SettingsStackScreen = () => (
<SettingsStack.Navigator>
<SettingsStack.Screen
name="Settings"
component={Settings}
/>
<SettingsStack.Screen
name="Privacy"
component={PrivacyStack}
/>
<SettingsStack.Screen
name="Theme"
component={ThemeScreen}
/>
<SettingsStack.Screen
name="Notifications"
component={NotificationsScreen}
/>
<SettingsStack.Screen
name="Sound"
component={SoundsScreen}
/>
</SettingsStack.Navigator>
);
const PrivacyStack = () => (
<PrivacyStack.Navigator>
<PrivacyStack.Screen
name="Privacy"
component={PrivacyScreen}
/>
<PrivacyStack.Screen
name="Notifications"
component={NotificationsScreen}
/>
</PrivacyStack.Navigator>
);
const App = () => {
return (
<NavigationContainer ref={navigationRef}>
<MainStack.Navigator>
<MainStack.Screen name="Tabs" component={TabNavigator} />
<MainStack.Screen
name="Auth"
component={AuthStack}
options={{gestureEnabled: false}}
/>
</MainStack.Navigator>
</NavigationContainer>
)
}
Settings.js File
import React, {Component} from 'react';
import {TouchableOpacity, ScrollView} from 'react-native;
import ClickableCard from './ClickableCard'
export default class Settings extends Component {
render(screen, index) {
return (
<ScrollView>
{ENTRIES.map((entry, index) => (
<ClickableCard screen={entry.screen} key={entry.index}/>
))}
</ScrollView>
)
}
export default Settings
ClickableCard.js Component
import React, {Component} from 'react';
import {TouchableOpacity, ScrollView} from 'react-native;
export default class ClickableCard extends Component {
constructor(props) {
super(props);
}
render() {
const {
screen,
key
} = this.props
return (
<TouchableOpacity
key={key}
onPress={() => this.props.navigation.navigate(screen)}>
</TouchableOpacity>
)
}
}
entries.js File
import React from 'react';
export const ENTRIES = [
{
name: "Theme",
screen: "ThemeScreen",
},
{
name: "Sounds",
screen: "SoundsScreen",
},
{
name: "Notifications",
screen: "NotificationsScreen",
},
]
You are trying to access navigation outside the navigation stack.
If you are using a functional component you can go with the useNavigation hook but as this is a class based component you will have to send the navigation as a prop or you can do the below as suggested in the documentation
import { useNavigation } from '#react-navigation/native';
class ClickableCard extends Component {
constructor(props) {
super(props);
}
render() {
const { screen, key } = this.props;
return (
<TouchableOpacity
key={key}
onPress={() =>
this.props.navigation.navigate(screen)
}></TouchableOpacity>
);
}
}
const ClickableCardWithNavigation= (props) {
const navigation = useNavigation();
return <ClickableCard {...props} navigation={navigation} />;
}
export default connect(ClickableCardWithNavigation)(TodoList)
I can't seem to find anything that is up to date here about changing screens with the header button. So I am wondering what the correct syntax is for the header button to change screens nowadays. I have defined my header in my navigation stack code file where I make the header but I can't seem to figure how to get the navigation prop and be able to call it on the header. some answers say to use navigation Options or make it static but from the documentation (which never explains how to do this) there is nothing in the correct version about navigation options so I think they removed. Also when I try the code nothing works. Thank you for all your help and hopefully, I can get an answer or find out what the correct syntax would be.
here is my current version of my code. it says navigate is not a function when I hit the button:
import React from 'react';
import {Button} from 'react-native';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import Home from '../Views/Home';
import AddTask from '../Views/AddTask';
const Stack = createStackNavigator();
const HomeStack = ({navigate}) => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{
headerStyle: {backgroundColor: 'darkslateblue'},
headerRight: () => (
<Button
onPress={() => navigate('Add Task')}
title="Add Task"
color="#000000"
/>
),
}}
/>
<Stack.Screen
name="Add Task"
component={AddTask}
options={{
headerStyle: {backgroundColor: 'darkslateblue'},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default HomeStack;
I havent found a method of doing this within App.js but found you can easily implement this from within a component or screen that has access to the navigator via useNavigation.
For example, here is my App.js that does not define the header button:
import 'react-native-gesture-handler';
import * as React from 'react';
import { Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import IndexScreen from './src/screens/IndexScreen';
import ShowScreen from './src/screens/ShowScreen';
import CreateScreen from './src/screens/CreateScreen';
import { Provider } from './src/context/BlogContext';
const Stack = createStackNavigator();
const App = () => {
return (
<Provider>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Index"
component={IndexScreen}
options={{
title: 'Blogs',
}}
/>
<Stack.Screen
name="Show"
component={ShowScreen}
options={{ title: 'Show Screen' }}
/>
<Stack.Screen
name="Create"
component={CreateScreen}
options={{ title: 'New Post' }}
/>
</Stack.Navigator>
</NavigationContainer>
</Provider>
);
}
export default App;
And here is an example of a screen where I add a headerRight button that navigates to another screen:
import React, { useContext } from 'react';
import { useNavigation } from '#react-navigation/native';
import {View, Text, StyleSheet, FlatList, Button, TouchableOpacity} from 'react-native';
import { Context } from '../context/BlogContext';
import { Feather } from '#expo/vector-icons';
const IndexScreen = () => {
const {state, addBlogPost, deleteBlogPost} = useContext(Context);
const navigation = useNavigation();
navigation.setOptions({
headerRight: () => (
<Button title="Add Post" onPress={() => navigation.navigate('Create')} />
),
});
return (
<View style={styles.containerStyle}>
<Text style={styles.titleStyle}>Index Screen</Text>
<FlatList
horizontal={false}
data={state}
keyExtractor={(item) => item.title}
renderItem={({item}) => {
return (
<TouchableOpacity onPress={navigation.navigate('Show', { id: item.id })}>
<View style={styles.blogPostStyle}>
<Text style={styles.blogPostTitleStyle}>{item.title}</Text>
<TouchableOpacity onPress={() => {
deleteBlogPost(item.id);
}}>
<Feather
name="trash"
style={styles.deleteIconStyle}
/>
</TouchableOpacity>
</View>
</TouchableOpacity>
);
}}
/>
</View>
);
};
const styles = StyleSheet.create({
containerStyle: {
margin: 10
},
titleStyle: {
},
blogPostStyle: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingVertical: 20,
borderTopWidth: 1,
color: 'gray'
},
blogPostTitleStyle: {
fontSize: 18
},
deleteIconStyle: {
fontSize: 24
}
});
export default IndexScreen;