Skip to content

Commit d81fc41

Browse files
author
andyboythekid
committed
update README and examples
1 parent e920ae0 commit d81fc41

File tree

10 files changed

+117
-113
lines changed

10 files changed

+117
-113
lines changed

‎.npmignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
example
2-
coverage
2+
coverage
3+
docs

‎README.md‎

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ A component-driven React Native navigation library.
44

55
- [Example project](https://github.com/CrowdLinker/react-navigation-library/blob/master/example/src/index.tsx)
66

7+
<p align="center">
8+
<img src="docs/assets/tabview-locationbar.gif">
9+
<img src="docs/assets/tabview-swipes.gif">
10+
<img src="docs/assets/login-location.gif">
11+
</p>
12+
713
# Features
814

915
## Routing
@@ -45,18 +51,18 @@ Having routing at the core of your app architecture has a lot of benefits:
4551
**Why?**
4652

4753
- panning and swiping behaviours are too important to ignore
48-
- they can be configured to your app's needs or turned off via navigator props
54+
- they can be configured to your app's needs or turned off via navigator props
4955

5056
This library uses `react-native-gesture-handler` and `react-native-reanimated` in hopes of improving performance over the core animated / pan gesture APIs in react-native.
5157

52-
# Install
58+
# Install
5359

5460
`yarn add react-navigation-library`
5561

56-
If you're using expo, all dependencies are already installed by default. If not, you'll need to install two dependencies along with this library:
62+
If you're using expo, all dependencies are already installed by default. If not, you'll need to install two dependencies along with this library:
5763

5864
```
59-
yarn add react-native-gesture-handler
65+
yarn add react-native-gesture-handler
6066
yarn add react-native-reanimated
6167
```
6268

@@ -69,42 +75,49 @@ There are additional steps to setting these up:
6975

7076
```
7177
import React from 'react'
72-
import { View } from 'react-native'
73-
import { Navigator, Tabs, Link } from 'react-navigation-library'
74-
import { Signup, Login } from './forms'
75-
import { Feeds } from './feeds'
78+
import { Navigator, Tabs, Link, Headers, Header, Tabbar, Tab } from 'react-navigation-library'
79+
80+
<!-- ./feeds.tsx -->
81+
<!-- full src at /example/src/feeds-example --> -->
7682
77-
function Entry() {
83+
function Feeds({ }: NavigatorScreen) {
7884
return (
79-
<Navigator routes={[ 'signup', '/', 'login' ]}>
85+
<Navigator routes={['home', 'popular', 'news']}>
86+
<Headers>
87+
<FeedHeader title="Home" />
88+
<FeedHeader title="Popular" />
89+
<FeedHeader title="News" />
90+
</Headers>
91+
8092
<Tabs>
81-
<Signup />
82-
<SelectionScreen />
83-
<Login />
93+
<Feed items={items} />
94+
<Feed items={items} />
95+
<Feed items={items} />
8496
</Tabs>
97+
98+
<Tabbar>
99+
<Tab to="home" activeStyle={{ borderWidth: 1 }}>
100+
<Text>Home</Text>
101+
</Tab>
102+
<Tab to="popular" activeStyle={{ borderWidth: 1 }}>
103+
<Text>Popular</Text>
104+
</Tab>
105+
<Tab to="news" activeStyle={{ borderWidth: 1 }}>
106+
<Text>News</Text>
107+
</Tab>
108+
</Tabbar>
85109
</Navigator>
86-
)
110+
);
87111
}
88112
89-
function SelectionScreen() {
90-
return (
91-
<View style={{ flex: 1 }}>
92-
<Link to='signup'>
93-
<Text>Signup</Text>
94-
</Link>
95-
96-
<Link to='login'>
97-
<Text>Login</Text>
98-
</Link>
99-
</View>
100-
)
101-
}
113+
<!-- ./app.tsx -->
102114
103115
function App() {
104116
return (
105-
<Navigator routes={[ 'entry', 'feeds' ]} initialPath='/entry'>
117+
<Navigator routes={[ 'login', '/', 'feeds' ]} initialPath='/feeds/home' showLocationBar>
106118
<Tabs>
107-
<Entry unmountOnExit />
119+
<Entry />
120+
<Index />
108121
<Feeds />
109122
</Tabs>
110123
</Navigator>
@@ -115,3 +128,5 @@ export default App
115128
```
116129

117130
# API Reference
131+
132+
WIP

‎docs/assets/login-location.gif‎

1.31 MB
Loading

‎docs/assets/login-swipes.gif‎

1.91 MB
Loading

‎docs/assets/tabview-locationbar.gif‎

1.39 MB
Loading

‎docs/assets/tabview-swipes.gif‎

1.22 MB
Loading

‎example/src/entry-example.tsx‎

Lines changed: 21 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,60 +8,51 @@ import {
88
Headers,
99
Header,
1010
} from 'react-navigation-library';
11-
import { TextInput, BorderlessButton } from 'react-native-gesture-handler';
11+
import { TextInput } from 'react-native-gesture-handler';
1212

1313
function Entry({ }: NavigatorScreen) {
1414
return (
1515
<Navigator routes={['signup-form', '/', 'login-form']} defaultIndex={1}>
16-
{({ state }: any) => (
17-
<>
18-
<Headers>
19-
<Header>
20-
<Text style={styles.title}>Signup</Text>
21-
</Header>
22-
<Header>
23-
<Text style={styles.title}>Select Option</Text>
24-
</Header>
25-
<Header>
26-
<Text style={styles.title}>Login</Text>
27-
</Header>
28-
</Headers>
29-
<Tabs>
30-
<Signup />
31-
<SelectionScreen email={state.email} />
32-
<Login />
33-
</Tabs>
34-
</>
35-
)}
16+
<Headers>
17+
<Header>
18+
<Text style={styles.title}>Signup</Text>
19+
</Header>
20+
<Header>
21+
<Text style={styles.title}>Select Option</Text>
22+
</Header>
23+
<Header>
24+
<Text style={styles.title}>Login</Text>
25+
</Header>
26+
</Headers>
27+
28+
<Tabs>
29+
<Signup />
30+
<SelectionScreen />
31+
<Login />
32+
</Tabs>
3633
</Navigator>
3734
);
3835
}
3936

4037
function Signup() {
4138
return (
4239
<Screen background="coral">
43-
<Form title="Signup" />
40+
<Form />
4441
</Screen>
4542
);
4643
}
4744

4845
function Login() {
4946
return (
5047
<Screen background="cadetblue">
51-
<Form title="Login" />
48+
<Form />
5249
</Screen>
5350
);
5451
}
5552

5653
function SelectionScreen({ email = '' }: any) {
5754
return (
5855
<Screen background="aquamarine">
59-
{Boolean(email) && (
60-
<Text
61-
style={[styles.title, { flex: 0, marginVertical: 20 }]}
62-
>{`Thanks ${email}!`}</Text>
63-
)}
64-
6556
<View style={{ flex: 1, alignItems: 'center' }}>
6657
<Link to="signup-form" style={styles.button}>
6758
<Text>Signup</Text>
@@ -100,7 +91,7 @@ function Form() {
10091
style={styles.input}
10192
/>
10293

103-
<Link to="./" style={styles.button} state={{ email }}>
94+
<Link to="/feeds/home" style={styles.button}>
10495
<Text style={{ textAlign: 'center' }}>Submit</Text>
10596
</Link>
10697
</View>

‎example/src/feeds-example.tsx‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,9 @@ function Feeds({ }: NavigatorScreen) {
2424
return (
2525
<Navigator routes={['home', 'popular', 'news']}>
2626
<Headers>
27-
<Header style={{ justifyContent: 'center' }}>
28-
<Text style={styles.title}>Home</Text>
29-
</Header>
30-
<Header style={{ justifyContent: 'center' }}>
31-
<Text style={styles.title}>News</Text>
32-
</Header>
33-
<Header style={{ justifyContent: 'center' }}>
34-
<Text style={styles.title}>Popular</Text>
35-
</Header>
27+
<FeedHeader title="Home" />
28+
<FeedHeader title="Popular" />
29+
<FeedHeader title="News" />
3630
</Headers>
3731

3832
<Tabs>
@@ -70,7 +64,7 @@ function Feed({ items }: any) {
7064
function CardList({ items }: any) {
7165
return (
7266
<FlatList
73-
style={{ flex: 1, borderWidth: 1 }}
67+
style={{ flex: 1, backgroundColor: 'white' }}
7468
contentContainerStyle={{ padding: 10 }}
7569
data={items}
7670
renderItem={Card}
@@ -89,19 +83,22 @@ function Card({ item }: any) {
8983

9084
function ProfileView({ id }: any) {
9185
return (
92-
<View
93-
style={{
94-
flex: 1,
95-
justifyContent: 'center',
96-
alignItems: 'center',
97-
backgroundColor: 'white',
98-
}}
99-
>
86+
<View style={styles.profile}>
10087
<Text style={styles.title}>{`Profile: ${id}`}</Text>
10188
</View>
10289
);
10390
}
10491

92+
function FeedHeader({ title }: any) {
93+
return (
94+
<Header>
95+
<View style={styles.centered}>
96+
<Text style={styles.title}>{title}</Text>
97+
</View>
98+
</Header>
99+
);
100+
}
101+
105102
const styles = StyleSheet.create({
106103
card: {
107104
height: 75,
@@ -118,6 +115,19 @@ const styles = StyleSheet.create({
118115
fontWeight: 'bold',
119116
textAlign: 'center',
120117
},
118+
119+
centered: {
120+
flex: 1,
121+
alignItems: 'center',
122+
justifyContent: 'center',
123+
},
124+
125+
profile: {
126+
flex: 1,
127+
justifyContent: 'center',
128+
alignItems: 'center',
129+
backgroundColor: 'white',
130+
},
121131
});
122132

123133
export { Feeds };

‎example/src/index.tsx‎

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// app entry
2-
import React from 'react';
2+
import React, { useState, useEffect } from 'react';
33
import {
44
AppRegistry,
55
Platform,
@@ -14,34 +14,22 @@ import { ScrollView } from 'react-native-gesture-handler';
1414
import { Link, Navigator, Tabs, BOTTOM_SPACE } from 'react-navigation-library';
1515

1616
function App() {
17-
const routes = ['/', '/login', '/feeds'];
17+
const routes = ['/login', '/', '/feeds'];
1818

1919
return (
2020
<AppContainer>
2121
<Navigator routes={routes} showLocationBar>
22-
{({ activeIndex }) => (
23-
<>
24-
<Tabs pan={{ enabled: false }}>
25-
<Index routes={routes} />
26-
<Entry unmountOnExit />
27-
<Feeds unmountOnExit />
28-
</Tabs>
29-
30-
{activeIndex === 1 && (
31-
<Link to="/" style={styles.homeButton}>
32-
<Text style={styles.title}>Home</Text>
33-
</Link>
34-
)}
35-
</>
36-
)}
22+
<Tabs pan={{ enabled: false }}>
23+
<Entry />
24+
<Index />
25+
<Feeds />
26+
</Tabs>
3727
</Navigator>
3828
</AppContainer>
3929
);
4030
}
4131

42-
function Index({ routes }: any) {
43-
const [, ...rest] = routes;
44-
32+
function Index() {
4533
return (
4634
<SafeAreaView style={{ flex: 1 }}>
4735
<Text style={styles.title}>Index</Text>
@@ -50,20 +38,12 @@ function Index({ routes }: any) {
5038
style={{ flex: 1 }}
5139
contentContainerStyle={{ alignItems: 'center', paddingTop: 20 }}
5240
>
53-
{rest.map((route: string) => (
54-
<Link
55-
key={route}
56-
to={`${route}`}
57-
style={{
58-
borderWidth: 1,
59-
borderRadius: 4,
60-
padding: 10,
61-
marginVertical: 10,
62-
}}
63-
>
64-
<Text>{route}</Text>
65-
</Link>
66-
))}
41+
<Link to={`/login`} style={styles.link}>
42+
<Text>Login</Text>
43+
</Link>
44+
<Link to={`/feeds/home`} style={styles.link}>
45+
<Text>Feeds</Text>
46+
</Link>
6747
</ScrollView>
6848
</SafeAreaView>
6949
);
@@ -110,6 +90,13 @@ const styles = StyleSheet.create({
11090
fontWeight: 'bold',
11191
textAlign: 'center',
11292
},
93+
94+
link: {
95+
borderWidth: 1,
96+
borderRadius: 4,
97+
padding: 10,
98+
marginVertical: 10,
99+
},
113100
});
114101

115102
const APP_NAME = 'example';

‎src/views.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ interface HeadersProps {
1414
function HeadersImpl({ activeIndex, defaultIndex, children }: HeadersProps) {
1515
const child = children[activeIndex] || children[defaultIndex];
1616

17-
return <View>{child}</View>;
17+
return child;
1818
}
1919

2020
function Headers({ children }: { children: any }) {

0 commit comments

Comments
 (0)