Skip to content

Commit 9986df6

Browse files
yakupdurmusyakupdurmus
committed
List animated add & readme change
1 parent f1e8015 commit 9986df6

File tree

12 files changed

+9070
-6
lines changed

12 files changed

+9070
-6
lines changed

‎index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44

55
import {AppRegistry} from 'react-native';
6-
import App from './App';
6+
import Home from './src';
77
import {name as appName} from './app.json';
88

9-
AppRegistry.registerComponent(appName, () => App);
9+
AppRegistry.registerComponent(appName, () => Home);

‎ios/Animasyon.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3+
<plist version="1.0">
4+
<dict>
5+
<key>IDEDidComputeMac32BitWarning</key>
6+
<true/>
7+
</dict>
8+
</plist>

‎package-lock.json

Lines changed: 8813 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"lint": "eslint ."
1111
},
1212
"dependencies": {
13+
"native-base": "^2.13.8",
1314
"react": "16.9.0",
1415
"react-native": "0.61.5"
1516
},

‎readme.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
### React Native Animated Component
22
React native animated component basic example
33

4-
![](./resimler/spinner.gif)
4+
![](./src/images/animated.gif)

‎src/AnimatedList.js

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
import React, { Component } from 'react';
2+
import { View, StyleSheet, Platform, Animated, ScrollView, } from 'react-native';
3+
import { List, ListItem, Left, Body, Right, Thumbnail, Text } from 'native-base';
4+
5+
6+
const HEADER_MIN_HEIGHT = 0;
7+
const HEADER_MAX_HEIGHT = 300;
8+
9+
const data = [
10+
{
11+
title:"Rihanna Diamond",
12+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
13+
time: "3:43 pm",
14+
image : {uri: 'https://i.pravatar.cc/150?img=26'}
15+
},
16+
{
17+
title:"Rihanna Needed Me",
18+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
19+
time: "3:43 pm",
20+
image : {uri: 'https://i.pravatar.cc/150?img=27'}
21+
},
22+
{
23+
title:"Needed Me",
24+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
25+
time: "3:43 pm",
26+
image : {uri: 'https://i.pravatar.cc/150?img=28'}
27+
},
28+
{
29+
title:"Rihanna Diamond",
30+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
31+
time: "3:43 pm",
32+
image : {uri: 'https://i.pravatar.cc/150?img=29'}
33+
},
34+
{
35+
title:"Rihanna Diamond",
36+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
37+
time: "3:43 pm",
38+
image : {uri: 'https://i.pravatar.cc/150?img=30'}
39+
},
40+
{
41+
title:"Rihanna Needed Me",
42+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
43+
time: "3:43 pm",
44+
image : {uri: 'https://i.pravatar.cc/150?img=28'}
45+
},
46+
{
47+
title:"Rihanna Diamond",
48+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
49+
time: "3:43 pm",
50+
image : {uri: 'https://i.pravatar.cc/150?img=26'}
51+
},
52+
{
53+
title:"Needed Me",
54+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
55+
time: "3:43 pm",
56+
image : {uri: 'https://i.pravatar.cc/150?img=27'}
57+
},
58+
{
59+
title:"Rihanna Diamond",
60+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
61+
time: "3:43 pm",
62+
image : {uri: 'https://i.pravatar.cc/150?img=28'}
63+
},
64+
{
65+
title:"Rihanna Diamond",
66+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
67+
time: "3:43 pm",
68+
image : {uri: 'https://i.pravatar.cc/150?img=27'}
69+
},
70+
{
71+
title:"Needed Me",
72+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
73+
time: "3:43 pm",
74+
image : {uri: 'https://i.pravatar.cc/150?img=28'}
75+
},
76+
{
77+
title:"Rihanna Needed Me",
78+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
79+
time: "3:43 pm",
80+
image : {uri: 'https://i.pravatar.cc/150?img=28'}
81+
},
82+
{
83+
title:"Rihanna Diamond",
84+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
85+
time: "3:43 pm",
86+
image : {uri: 'https://i.pravatar.cc/150?img=26'}
87+
},
88+
{
89+
title:"Rihanna Diamond",
90+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
91+
time: "3:43 pm",
92+
image : {uri: 'https://i.pravatar.cc/150?img=27'}
93+
},
94+
{
95+
title:"Rihanna Needed Me",
96+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
97+
time: "3:43 pm",
98+
image : {uri: 'https://i.pravatar.cc/150?img=28'}
99+
},
100+
{
101+
title:"Rihanna Diamond",
102+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
103+
time: "3:43 pm",
104+
image : {uri: 'https://i.pravatar.cc/150?img=27'}
105+
},
106+
{
107+
title:"Needed Me",
108+
body : "Rihanna - baby, this is what you came for lightning strikes every time she moves and every body's watching her . . . ",
109+
time: "3:43 pm",
110+
image : {uri: 'https://i.pravatar.cc/150?img=28'}
111+
}
112+
]
113+
114+
export default class AnimatedList extends Component {
115+
116+
constructor() {
117+
super();
118+
119+
this.scrollYAnimatedValue = new Animated.Value(0);
120+
}
121+
122+
123+
124+
renderItem(item,index)
125+
{
126+
return (
127+
<ListItem key={index} avatar onPress={()=>{}}>
128+
<Left>
129+
<Thumbnail source={item.image} />
130+
</Left>
131+
<Body>
132+
<Text style={styles.avatarText}>{item.title}</Text>
133+
<Text style={styles.avatarText} note>{item.body}</Text>
134+
</Body>
135+
<Right>
136+
<Text style={styles.avatarText} note>{item.time}</Text>
137+
</Right>
138+
</ListItem>);
139+
}
140+
141+
142+
143+
render() {
144+
145+
const headerHeight = this.scrollYAnimatedValue.interpolate(
146+
{
147+
inputRange: [(HEADER_MIN_HEIGHT - HEADER_MAX_HEIGHT), (HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT)],
148+
outputRange: [HEADER_MAX_HEIGHT+ (HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT), HEADER_MIN_HEIGHT],
149+
extrapolate: 'clamp'
150+
});
151+
152+
return (
153+
<View style={styles.container} >
154+
<Animated.Image
155+
source={{url:"https://c1.staticflickr.com/7/6209/6126637255_23896dca42.jpg"}}
156+
style={[styles.animatedHeaderContainer, { height: headerHeight }]}
157+
/>
158+
<ScrollView
159+
contentContainerStyle={{ paddingTop: HEADER_MAX_HEIGHT }}
160+
scrollEventThrottle={()=>{}}
161+
onScroll={Animated.event(
162+
[{ nativeEvent: { contentOffset: { y: this.scrollYAnimatedValue } } }]
163+
)}>
164+
{
165+
<List style={{width:'100%'}}>
166+
{data.map((item,index)=>{
167+
return this.renderItem(item,index);
168+
})}
169+
</List>
170+
}
171+
</ScrollView>
172+
173+
</View>
174+
);
175+
}
176+
}
177+
178+
const styles = StyleSheet.create(
179+
{
180+
container: {
181+
flex: 1,
182+
},
183+
animatedHeaderContainer: {
184+
position: 'absolute',
185+
left: 0,
186+
right: 0,
187+
justifyContent: 'center',
188+
alignItems: 'center'
189+
},
190+
headerText: {
191+
color: 'white',
192+
fontSize: 22
193+
},
194+
item: {
195+
backgroundColor: '#fff',
196+
borderBottomWidth:2,
197+
borderColor:"#eee",
198+
height: 45,
199+
justifyContent: 'center',
200+
alignItems: 'center'
201+
},
202+
itemText: {
203+
color: 'black',
204+
fontSize: 16
205+
}
206+
207+
});

‎App.js renamed to ‎src/Spinner.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
33
import { View, Text, StyleSheet,Animated,StatusBar,SafeAreaView,Easing } from 'react-native';
44

55
// create a component
6-
class App extends Component {
6+
class Spinner extends Component {
77

88
componentDidMount()
99
{
@@ -17,7 +17,7 @@ class App extends Component {
1717

1818
startAnimation = () =>{
1919
Animated.loop(Animated.timing(this.state.animation,{
20-
duration:2000,
20+
duration:5000,
2121
toValue:1,
2222
easing:Easing.linear
2323
})).start();
@@ -86,5 +86,5 @@ const styles= StyleSheet.create({
8686
})
8787

8888

89-
export default App;
89+
export default Spinner;
9090

‎src/images/animated.gif

3.22 MB
Loading

‎images/cubuk.png renamed to ‎src/images/cubuk.png

File renamed without changes.

‎images/pervane.png renamed to ‎src/images/pervane.png

File renamed without changes.

‎images/spinner.gif renamed to ‎src/images/spinner.gif

File renamed without changes.

‎src/index.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { Component } from 'react';
2+
import AnimatedList from './AnimatedList';
3+
import Spinner from './Spinner';
4+
import { View } from 'react-native';
5+
import { Footer, FooterTab, Button, Text } from 'native-base';
6+
7+
export default class Home extends Component {
8+
state = {page:"spinner"};
9+
render() {
10+
return (
11+
<View style={{flex:1}}>
12+
<View style={{flex:1}}>
13+
{this.state.page=="spinner" && <Spinner/>}
14+
{this.state.page=="animatedlist" && <AnimatedList/>}
15+
</View>
16+
<Footer>
17+
<FooterTab >
18+
<Button onPress={()=>this.setState({page:"spinner"})} active = {this.state.page=="spinner"}>
19+
<Text>Spinner</Text>
20+
</Button>
21+
<Button onPress={()=>this.setState({page:"animatedlist"})} active = {this.state.page=="animatedlist"}>
22+
<Text>AnimatedList</Text>
23+
</Button>
24+
</FooterTab>
25+
</Footer>
26+
27+
</View>
28+
);
29+
}
30+
}
31+
32+
33+
34+
35+

0 commit comments

Comments
 (0)