Skip to content
Permalink
Browse files

Tab Navigation

  • Loading branch information...
Qaiser Abbas Qaiser Abbas
Qaiser Abbas authored and Qaiser Abbas committed May 12, 2018
1 parent d0377da commit 007ec23b049f45bf38279c39e22f32db894f16a7
Showing with 64 additions and 29 deletions.
  1. +15 −0 src/components/Title.js
  2. +9 −13 src/views/author/index.js
  3. +30 −0 src/views/book/components/book-type-tabs.js
  4. +10 −16 src/views/book/index.js
@@ -0,0 +1,15 @@
import React from 'react'
import { StyleSheet, Text } from 'react-native'

const styles = StyleSheet.create({
header: {
textAlign: 'center',
padding: 20,
marginTop: 20,
fontSize: 20,
color: '#fff',
backgroundColor: '#434343',
},
})

export default ({ text }) => <Text style={styles.header}>{text}</Text>
@@ -1,16 +1,12 @@
import React from 'react'
import { createStackNavigator } from 'react-navigation'
import { Button } from 'react-native'
import { View, Button } from 'react-native'

const AuthorsScreen = ({ navigation }) => (
<Button
onPress={() => navigation.navigate('Books')}
title="Go back to Books"
/>
)
import Title from '../../components/Title'

export default createStackNavigator({
Authors: {
screen: AuthorsScreen,
},
})
export default ({ navigation }) => (
<View>
<Title text="Authors List" />
<Button onPress={() => navigation.openDrawer()} title="Open Drawer" />
<Button onPress={() => navigation.navigate('Books')} title="Go to Books" />
</View>
)
@@ -0,0 +1,30 @@
import React from 'react'
import { View, Button } from 'react-native'
import Title from '../../../components/Title'

export const AllBooksTab = ({ navigation }) => (
<View>
<Title text="All Books" />
<Button
onPress={() => navigation.navigate('Authors')}
title="Go to Authors"
/>
<Button
onPress={() => navigation.navigate('NonfictionBooksTab')}
title="Go to NonfictionBooksTab"
/>
<Button onPress={() => navigation.openDrawer()} title="Open Drawer" />
</View>
)

export const FictionBooksTab = () => (
<View>
<Title text="Fiction Books" />
</View>
)

export const NonfictionBooksTab = () => (
<View>
<Title text="Nonfiction Books" />
</View>
)
@@ -1,19 +1,13 @@
import React from 'react'
import { createStackNavigator } from 'react-navigation'
import { View, Button } from 'react-native'
import { createBottomTabNavigator } from 'react-navigation'

const BooksScreen = ({ navigation }) => (
<View>
<Button
onPress={() => navigation.navigate('Authors')}
title="Go to Authors"
/>
<Button onPress={() => navigation.openDrawer()} title="Open Drawer" />
</View>
)
import {
AllBooksTab,
FictionBooksTab,
NonfictionBooksTab,
} from './components/book-type-tabs'

export default createStackNavigator({
Books: {
screen: BooksScreen,
},
export default createBottomTabNavigator({
'All Books': AllBooksTab,
Fiction: FictionBooksTab,
Nonfiction: NonfictionBooksTab,
})

0 comments on commit 007ec23

Please sign in to comment.
You can’t perform that action at this time.