-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4 from okwasniewski/feat/chat-example
feat: add Chat example
- Loading branch information
Showing
15 changed files
with
773 additions
and
168 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,109 @@ | ||
| import { StyleSheet } from 'react-native'; | ||
| import TabView, { | ||
| type OnPageSelectedEventData, | ||
| type TabViewItems, | ||
| } from 'react-native-bottom-tabs'; | ||
| import { Article } from './Screens/Article'; | ||
| import { Contacts } from './Screens/Contacts'; | ||
| import { Albums } from './Screens/Albums'; | ||
| import { useState } from 'react'; | ||
| import { enableScreens } from 'react-native-screens'; | ||
| // run this before any screen render(usually in App.js) | ||
| enableScreens(); | ||
|
|
||
| const items: TabViewItems = [ | ||
| { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' }, | ||
| { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '5' }, | ||
| { key: 'contacts', title: 'Contacts', icon: 'person.fill' }, | ||
| import * as React from 'react'; | ||
| import { | ||
| StyleSheet, | ||
| Text, | ||
| ScrollView, | ||
| TouchableOpacity, | ||
| Button, | ||
| Alert, | ||
| } from 'react-native'; | ||
| import { NavigationContainer, useNavigation } from '@react-navigation/native'; | ||
| import { createStackNavigator } from '@react-navigation/stack'; | ||
| import { createNativeStackNavigator } from '@react-navigation/native-stack'; | ||
| import { SafeAreaProvider } from 'react-native-safe-area-context'; | ||
| import JSBottomTabs from './Examples/JSBottomTabs'; | ||
| import ThreeTabs from './Examples/ThreeTabs'; | ||
| import FourTabs from './Examples/FourTabs'; | ||
|
|
||
| const examples = [ | ||
| { component: ThreeTabs, name: 'Three Tabs' }, | ||
| { component: FourTabs, name: 'Four Tabs' }, | ||
| { component: JSBottomTabs, name: 'JS Bottom Tabs' }, | ||
| ]; | ||
|
|
||
| export default function App() { | ||
| const [selectedPage, setSelectedTab] = useState<string>('contacts'); | ||
| function App() { | ||
| const navigation = useNavigation(); | ||
| return ( | ||
| <ScrollView> | ||
| {examples.map((example) => ( | ||
| <TouchableOpacity | ||
| key={example.name} | ||
| testID={example.name} | ||
| style={styles.exampleTouchable} | ||
| onPress={() => { | ||
| //@ts-ignore | ||
| navigation.navigate(example.name); | ||
| }} | ||
| > | ||
| <Text style={styles.exampleText}>{example.name}</Text> | ||
| </TouchableOpacity> | ||
| ))} | ||
| </ScrollView> | ||
| ); | ||
| } | ||
|
|
||
| const handlePageSelected = ({ | ||
| nativeEvent: { key }, | ||
| }: { | ||
| nativeEvent: OnPageSelectedEventData; | ||
| }) => setSelectedTab(key); | ||
| const Stack = createStackNavigator(); | ||
|
|
||
| const goToAlbums = () => { | ||
| setSelectedTab('albums'); | ||
| }; | ||
| const NativeStack = createNativeStackNavigator(); | ||
|
|
||
| export default function Navigation() { | ||
| const [mode, setMode] = React.useState<'native' | 'js'>('native'); | ||
| const NavigationStack = mode === 'js' ? Stack : NativeStack; | ||
| return ( | ||
| <TabView | ||
| style={styles.fullWidth} | ||
| items={items} | ||
| tabViewStyle="sidebarAdaptable" | ||
| selectedPage={selectedPage} | ||
| onPageSelected={handlePageSelected} | ||
| > | ||
| <Article onClick={goToAlbums} /> | ||
| <Albums /> | ||
| <Contacts /> | ||
| </TabView> | ||
| <SafeAreaProvider> | ||
| <NavigationContainer> | ||
| <NavigationStack.Navigator initialRouteName="BottomTabs Example"> | ||
| <NavigationStack.Screen | ||
| name="BottomTabs Example" | ||
| component={App} | ||
| options={{ | ||
| headerRight: () => ( | ||
| <Button | ||
| onPress={() => | ||
| Alert.alert( | ||
| 'Alert', | ||
| `Do you want to change to the ${ | ||
| mode === 'js' ? 'native stack' : 'js stack' | ||
| } ?`, | ||
| [ | ||
| { text: 'No', onPress: () => {} }, | ||
| { | ||
| text: 'Yes', | ||
| onPress: () => { | ||
| setMode(mode === 'js' ? 'native' : 'js'); | ||
| }, | ||
| }, | ||
| ] | ||
| ) | ||
| } | ||
| title={mode === 'js' ? 'JS' : 'NATIVE'} | ||
| color="blue" | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| {examples.map((example, index) => ( | ||
| <NavigationStack.Screen | ||
| key={index} | ||
| name={example.name} | ||
| component={example.component} | ||
| /> | ||
| ))} | ||
| </NavigationStack.Navigator> | ||
| </NavigationContainer> | ||
| </SafeAreaProvider> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| exampleTouchable: { | ||
| padding: 16, | ||
| }, | ||
| fullWidth: { | ||
| width: '100%', | ||
| height: '100%', | ||
| exampleText: { | ||
| fontSize: 16, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { StyleSheet } from 'react-native'; | ||
| import TabView, { | ||
| type OnPageSelectedEventData, | ||
| type TabViewItems, | ||
| } from 'react-native-bottom-tabs'; | ||
| import { useState } from 'react'; | ||
| import { Article } from '../Screens/Article'; | ||
| import { Albums } from '../Screens/Albums'; | ||
| import { Chat } from '../Screens/Chat'; | ||
| import { Contacts } from '../Screens/Contacts'; | ||
|
|
||
| const items: TabViewItems = [ | ||
| { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' }, | ||
| { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '5' }, | ||
| { key: 'contacts', title: 'Contacts', icon: 'person.fill' }, | ||
| { key: 'chat', title: 'Chat', icon: 'keyboard' }, | ||
| ]; | ||
|
|
||
| export default function FourTabs() { | ||
| const [selectedPage, setSelectedTab] = useState<string>('contacts'); | ||
|
|
||
| const handlePageSelected = ({ | ||
| nativeEvent: { key }, | ||
| }: { | ||
| nativeEvent: OnPageSelectedEventData; | ||
| }) => setSelectedTab(key); | ||
|
|
||
| const goToAlbums = () => { | ||
| setSelectedTab('albums'); | ||
| }; | ||
|
|
||
| return ( | ||
| <TabView | ||
| style={styles.fullWidth} | ||
| items={items} | ||
| tabViewStyle="sidebarAdaptable" | ||
| selectedPage={selectedPage} | ||
| onPageSelected={handlePageSelected} | ||
| > | ||
| <Article onClick={goToAlbums} /> | ||
| <Albums /> | ||
| <Contacts /> | ||
| <Chat /> | ||
| </TabView> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| fullWidth: { | ||
| width: '100%', | ||
| height: '100%', | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; | ||
| import { Article } from '../Screens/Article'; | ||
| import { Albums } from '../Screens/Albums'; | ||
| import { Contacts } from '../Screens/Contacts'; | ||
| import { Chat } from '../Screens/Chat'; | ||
|
|
||
| const Tab = createBottomTabNavigator(); | ||
|
|
||
| function JSBottomTabs() { | ||
| return ( | ||
| <Tab.Navigator screenOptions={{ headerShown: false }}> | ||
| <Tab.Screen name="Article" component={Article} /> | ||
| <Tab.Screen name="Albums" component={Albums} /> | ||
| <Tab.Screen name="Contacts" component={Contacts} /> | ||
| <Tab.Screen name="Chat" component={Chat} /> | ||
| </Tab.Navigator> | ||
| ); | ||
| } | ||
|
|
||
| export default JSBottomTabs; |
Oops, something went wrong.