Skip to content

Commit c663b1e

Browse files
justinkxjustinkx
committed
created basic laycout components with login-logoutflow
1 parent 9ba2ede commit c663b1e

File tree

19 files changed

+385
-75
lines changed

19 files changed

+385
-75
lines changed

‎App/assets/icons/pre-loader.gif‎

67.9 KB
Loading

‎App/components/button.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { View, TouchableOpacity, Text } from 'react-native';
3+
4+
export const Button = ({ onClick, style, children }) => {
5+
return (
6+
<TouchableOpacity
7+
onPress={onClick}
8+
activeOpacity={0.7}
9+
style={[{
10+
padding: 6,
11+
minHeight: 20,
12+
borderRadius: 3,
13+
flexDirection: 'column',
14+
justifyContent: 'center',
15+
alignItems: 'center',
16+
shadowColor: 'rgba(0,0,0, .4)', // IOS
17+
shadowOffset: { height: 3, width: 2 }, // IOS
18+
shadowOpacity: 1, // IOS
19+
shadowRadius: 1, //IOS
20+
backgroundColor: '#fff',
21+
elevation: 3, // Android
22+
}, style]}>
23+
{children}
24+
</TouchableOpacity>
25+
)
26+
}

‎App/components/content.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
import React from 'react';
2-
import { View,ScrollView } from 'react-native';
2+
import { View, } from 'react-native';
3+
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
34

45

56
export const Content = ({style,children}) => {
67
return (
7-
<ScrollView
8+
<KeyboardAwareScrollView
9+
automaticallyAdjustContentInsets={false}
10+
style={{flex: 1}}
811
showsVerticalScrollIndicator
912
contentContainerStyle={[{
10-
padding: 10
13+
padding: 15,
14+
flexDirection: 'column'
1115
},style]}>
1216
{children}
13-
</ScrollView>
17+
</KeyboardAwareScrollView>
1418

1519
)
1620
}

‎App/components/footer.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import { View, Text } from 'react-native';
3+
4+
export const Footer = ({ style, children }) => {
5+
return (
6+
<View
7+
style={[{
8+
minHeight: 48,
9+
position: 'absolute',
10+
bottom: 0,
11+
borderTopColor: 'gray',
12+
borderTopWidth: 1,
13+
paddingHorizontal: 10,
14+
width: '100%',
15+
flexDirection: 'row',
16+
justifyContent: 'center',
17+
alignItems: 'center',
18+
backgroundColor: 'transparent'
19+
}, style]}>
20+
{children}
21+
</View>
22+
)
23+
}

‎App/components/header.js‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,59 @@
11
import React from 'react';
22
import { View,StatusBar } from 'react-native';
3+
import { BarStyle } from '../theme/global';
34

4-
5-
export const Header = ({style,statusbarColor,barStyle,children}) => {
5+
export const Header = ({style,statusbarColor,barStyle = BarStyle ,children}) => {
66
console.log(children)
77
return (
88
<View style={[{
9-
height: 55,
9+
height: 48,
10+
paddingHorizontal: 10,
1011
width: '100%',
1112
flexDirection: 'row',
12-
justifyContent: 'space-evenly',
13+
justifyContent: 'space-between',
1314
alignItems: 'center',
1415

15-
backgroundColor: 'red'
16+
backgroundColor: '#5297ff'
1617
},style]}>
1718
<StatusBar backgroundColor={statusbarColor} barStyle={barStyle}/>
1819
{children}
1920
</View>
2021

2122
)
23+
}
24+
25+
export const HeaderLeft = ({style,children}) => {
26+
return (
27+
<View style={[{
28+
flexDirection: 'row',
29+
minWidth: '15%',
30+
justifyContent: 'flex-start',
31+
alignItems: 'center'
32+
},style]}>
33+
{children}
34+
</View>
35+
)
36+
}
37+
export const HeaderBody = ({style,children}) => {
38+
return (
39+
<View style={[{
40+
flexDirection:'column',
41+
justifyContent: 'center',
42+
alignItems:'center'
43+
},style]}>
44+
{children}
45+
</View>
46+
)
47+
}
48+
export const HeaderRight = ({style,children}) => {
49+
return (
50+
<View style={[{
51+
flexDirection: 'row',
52+
minWidth: '15%',
53+
justifyContent: 'flex-end',
54+
alignItems: 'center'
55+
},style]}>
56+
{children}
57+
</View>
58+
)
2259
}

‎App/components/iconButton.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import { TouchableOpacity } from 'react-native';
3+
4+
5+
export const IconButton = ({style,buttonEvent,children}) => {
6+
return (
7+
<TouchableOpacity onPress={buttonEvent}
8+
style={{
9+
minWidth: 30,
10+
minHeight: 30,
11+
flexDirection: 'column',
12+
justifyContent: 'center',
13+
alignItems: 'center'
14+
}}>
15+
{children}
16+
</TouchableOpacity>
17+
)
18+
}

‎App/components/index.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
import { Container } from './container';
2-
import { Header } from './header';
3-
import { Content } from './content'
2+
import { Header,HeaderBody,HeaderRight,HeaderLeft } from './header';
3+
import { Content } from './content';
4+
import { IconButton } from './iconButton';
5+
import { Button } from './button';
6+
import { Footer } from './footer';
47
export {
58
Container,
69
Header,
7-
Content
10+
HeaderBody,
11+
HeaderRight,
12+
HeaderLeft,
13+
Content,
14+
Button,
15+
Footer,
16+
IconButton
817
}

‎App/containers/about/index.js‎

Lines changed: 80 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,92 @@
1-
import React, {PureComponent} from 'react';
2-
import {View, Text, Button} from 'react-native';
3-
import {GlobalStyle} from '../../theme/global';
4-
import { Container, Header, Content } from '../../components/index';
1+
import React, { PureComponent } from 'react';
2+
import { View, Text, Image, StyleSheet } from 'react-native';
3+
import { GlobalStyle } from '../../theme/global';
4+
import {
5+
Container, Header, Content, HeaderBody,
6+
HeaderRight,
7+
HeaderLeft, Button
8+
} from '../../components/index';
59

610
export default class AboutScreen extends PureComponent {
11+
712
render() {
13+
const images = [
14+
'https://cdn.dribbble.com/users/4103091/screenshots/7353178/media/6d1a3a06961c0dcfd513ffe241636472.png',
15+
'https://cdn.dribbble.com/users/4103091/screenshots/7154300/media/7839c89716a90284e0c52595efb61dd5.jpg',
16+
'https://cdn.dribbble.com/users/4103091/screenshots/7144043/media/d656c920c640137820705cb7f2c74b8d.png',
17+
'https://cdn.dribbble.com/users/4103091/screenshots/7161471/media/5a8d8a0ca7ef17438d3abb153f65964a.png',
18+
'https://cdn.dribbble.com/users/4103091/screenshots/7182137/media/e62354aab046eaa95906378326401ae3.jpg',
19+
'https://cdn.dribbble.com/users/4103091/screenshots/7206198/media/3abe7e52b17db092707f8571acdc1692.jpg',
20+
'https://cdn.dribbble.com/users/4103091/screenshots/7206610/media/ffb593de453a0ec31a07d87032d874bb.jpg'
21+
]
822
return (
923
<Container>
10-
<Header
11-
barStyle="dark-content"
12-
statusbarColor="white">
13-
<Text>Header</Text>
24+
<Header
25+
barStyle="dark-content"
26+
statusbarColor="white">
27+
<HeaderLeft />
28+
<HeaderBody>
29+
<Text style={[GlobalStyle.headerTitle]}>About</Text>
30+
</HeaderBody>
31+
<HeaderRight />
1432
</Header>
1533
<Content>
16-
<Text>AboutScreen</Text>
17-
<Button
18-
onPress={() => this.props.navigation.push('details')}
19-
title="go to details"></Button>
34+
<View style={{
35+
flexDirection: 'column',
36+
width: '100%',
37+
justifyContent: 'center',
38+
alignItems: 'center',
39+
marginBottom: 30,
40+
}}>
41+
<Text style={style.title}>About Screen</Text>
42+
43+
<Button
44+
style={{ backgroundColor: 'green' }}
45+
onClick={() => this.props.navigation.push('details')}>
46+
<Text style={{ color: 'white' }}>Details Screen</Text>
47+
</Button>
48+
</View>
49+
50+
{images.map((image, index) => (
51+
<View key={index} style={style.imageContainer}>
52+
<Image style={style.image}
53+
loadingIndicatorSource={require('../../assets/icons/pre-loader.gif')}
54+
defaultSorce={require('../../assets/icons/pre-loader.gif')}
55+
source={{ uri: image }}
56+
/>
57+
</View>
58+
))}
2059
</Content>
21-
60+
2261
</Container>
2362
);
2463
}
2564
}
65+
66+
const style = StyleSheet.create({
67+
title: {
68+
fontSize: 18,
69+
marginBottom: 15,
70+
fontWeight: 'bold'
71+
},
72+
imageContainer: {
73+
height: 250,
74+
marginBottom: 20,
75+
borderRadius: 5,
76+
shadowColor: "#000",
77+
shadowOffset: {
78+
width: 0,
79+
height: 4,
80+
},
81+
shadowOpacity: 0.32,
82+
shadowRadius: 5.46,
83+
backgroundColor: 'white',
84+
elevation: 9,
85+
},
86+
image: {
87+
width: '100%',
88+
height: 250,
89+
resizeMode: 'stretch',
90+
borderRadius: 5,
91+
}
92+
})

‎App/containers/details/index.js‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,44 @@
1-
import React, {PureComponent} from 'react';
2-
import {View, Text, Button} from 'react-native';
3-
import { Container, Header, Content } from '../../components/index';
1+
import React, { PureComponent } from 'react';
2+
import { View, Text, Button } from 'react-native';
3+
import {
4+
Container,
5+
Header,
6+
Content,
7+
HeaderBody,
8+
HeaderRight,
9+
HeaderLeft,
10+
IconButton
11+
} from '../../components/index';
12+
import {GlobalStyle} from '../../theme/global';
13+
import Icon from 'react-native-vector-icons/Ionicons';
14+
415

516
export default class DetailsScreens extends PureComponent {
617
constructor(props) {
718
super(props);
819
}
20+
goBack() {
21+
this.props.navigation.pop()
22+
}
923
render() {
1024
return (
11-
<Container
12-
style={{
13-
flex: 1,
14-
justifyContent: 'center',
15-
alignItems: 'center',
16-
}}>
17-
<Header
18-
barStyle="dark-content"
19-
statusbarColor="white">
20-
<Button
21-
onPress={() => this.props.navigation.pop()}
22-
title="go Back"></Button>
23-
<Text>Details</Text>
25+
<Container>
26+
<Header
27+
barStyle="dark-content"
28+
statusbarColor="white">
29+
<HeaderLeft>
30+
<IconButton buttonEvent={()=> this.goBack()}>
31+
<Icon size={22} color='white' name="md-arrow-back" />
32+
</IconButton>
33+
</HeaderLeft>
34+
<HeaderBody>
35+
<Text style={[GlobalStyle.headerTitle]}>Details</Text>
36+
</HeaderBody>
37+
<HeaderRight />
2438
</Header>
25-
39+
<Content>
40+
<Text>This is details screen.</Text>
41+
</Content>
2642
</Container>
2743
);
2844
}

‎App/containers/login/actions.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,19 @@ export const login = loginData => ({
55
loginData
66
});
77

8-
export const LogOut = () => ({
9-
type: loginTypes.LOGOUT
10-
});
11-
128
export const loginSuccess = user =>({
139
type: loginTypes.LOGIN_SUCCESS,
1410
user
1511
});
1612

1713
export const loginError = () =>({
1814
type: loginTypes.LOGIN_ERROR
15+
});
16+
17+
export const LogOut = () => ({
18+
type: loginTypes.LOGOUT
19+
});
20+
21+
export const LogOutSuccess = () => ({
22+
type: loginTypes.LOGOUT_SUCCESS
1923
});

0 commit comments

Comments
 (0)