Skip to content
This repository was archived by the owner on Nov 27, 2022. It is now read-only.

Commit c8ce6b0

Browse files
szymonrybczakszymonrybczak
authored
feat: add functional components to example (#1393)
* feat: add functional components to example * refactor: change type
1 parent 1cbabc0 commit c8ce6b0

File tree

5 files changed

+169
-174
lines changed

5 files changed

+169
-174
lines changed

‎example/src/Shared/Albums.tsx

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,18 @@ const COVERS = [
1414
require('../../assets/album-art-8.jpg'),
1515
];
1616

17-
export default class Albums extends React.Component {
18-
render() {
19-
return (
20-
<ScrollView
21-
style={styles.container}
22-
contentContainerStyle={styles.content}
23-
>
24-
{COVERS.map((source, i) => (
25-
// eslint-disable-next-line react/no-array-index-key
26-
<Image key={i} source={source} style={styles.cover} />
27-
))}
28-
</ScrollView>
29-
);
30-
}
31-
}
17+
const Albums = () => {
18+
return (
19+
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
20+
{COVERS.map((source, i) => (
21+
// eslint-disable-next-line react/no-array-index-key
22+
<Image key={i} source={source} style={styles.cover} />
23+
))}
24+
</ScrollView>
25+
);
26+
};
27+
28+
export default Albums;
3229

3330
const styles = StyleSheet.create({
3431
container: {

‎example/src/Shared/Article.tsx

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,45 @@
11
import * as React from 'react';
22
import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
33

4-
export default class Article extends React.Component {
5-
render() {
6-
return (
7-
<ScrollView
8-
style={styles.container}
9-
contentContainerStyle={styles.content}
10-
>
11-
<View style={styles.author}>
12-
<Image
13-
style={styles.avatar}
14-
source={require('../../assets/avatar-1.png')}
15-
/>
16-
<View style={styles.meta}>
17-
<Text style={styles.name}>Knowledge Bot</Text>
18-
<Text style={styles.timestamp}>1st Jan 2025</Text>
19-
</View>
4+
const Article = () => {
5+
return (
6+
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
7+
<View style={styles.author}>
8+
<Image
9+
style={styles.avatar}
10+
source={require('../../assets/avatar-1.png')}
11+
/>
12+
<View style={styles.meta}>
13+
<Text style={styles.name}>Knowledge Bot</Text>
14+
<Text style={styles.timestamp}>1st Jan 2025</Text>
2015
</View>
21-
<Text style={styles.title}>Lorem Ipsum</Text>
22-
<Text style={styles.paragraph}>
23-
Contrary to popular belief, Lorem Ipsum is not simply random text. It
24-
has roots in a piece of classical Latin literature from 45 BC, making
25-
it over 2000 years old.
26-
</Text>
27-
<Image style={styles.image} source={require('../../assets/book.jpg')} />
28-
<Text style={styles.paragraph}>
29-
Richard McClintock, a Latin professor at Hampden-Sydney College in
30-
Virginia, looked up one of the more obscure Latin words, consectetur,
31-
from a Lorem Ipsum passage, and going through the cites of the word in
32-
classical literature, discovered the undoubtable source.
33-
</Text>
34-
<Text style={styles.paragraph}>
35-
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de
36-
Finibus Bonorum et Malorum&quot; (The Extremes of Good and Evil) by
37-
Cicero, written in 45 BC. This book is a treatise on the theory of
38-
ethics, very popular during the Renaissance. The first line of Lorem
39-
Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
40-
section 1.10.32.
41-
</Text>
42-
</ScrollView>
43-
);
44-
}
45-
}
16+
</View>
17+
<Text style={styles.title}>Lorem Ipsum</Text>
18+
<Text style={styles.paragraph}>
19+
Contrary to popular belief, Lorem Ipsum is not simply random text. It
20+
has roots in a piece of classical Latin literature from 45 BC, making it
21+
over 2000 years old.
22+
</Text>
23+
<Image style={styles.image} source={require('../../assets/book.jpg')} />
24+
<Text style={styles.paragraph}>
25+
Richard McClintock, a Latin professor at Hampden-Sydney College in
26+
Virginia, looked up one of the more obscure Latin words, consectetur,
27+
from a Lorem Ipsum passage, and going through the cites of the word in
28+
classical literature, discovered the undoubtable source.
29+
</Text>
30+
<Text style={styles.paragraph}>
31+
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
32+
Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
33+
written in 45 BC. This book is a treatise on the theory of ethics, very
34+
popular during the Renaissance. The first line of Lorem Ipsum,
35+
&quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in section
36+
1.10.32.
37+
</Text>
38+
</ScrollView>
39+
);
40+
};
41+
42+
export default Article;
4643

4744
const styles = StyleSheet.create({
4845
container: {

‎example/src/Shared/Chat.tsx

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -15,52 +15,51 @@ const MESSAGES = [
1515
'make me a sandwich',
1616
];
1717

18-
export default class Chat extends React.Component {
19-
render() {
20-
return (
21-
<View style={styles.container}>
22-
<ScrollView
23-
style={styles.inverted}
24-
contentContainerStyle={styles.content}
25-
>
26-
{MESSAGES.map((text, i) => {
27-
const odd = i % 2;
18+
const Chat = () => {
19+
return (
20+
<View style={styles.container}>
21+
<ScrollView
22+
style={styles.inverted}
23+
contentContainerStyle={styles.content}
24+
>
25+
{MESSAGES.map((text, i) => {
26+
const odd = i % 2;
2827

29-
return (
28+
return (
29+
<View
30+
// eslint-disable-next-line react/no-array-index-key
31+
key={i}
32+
style={[odd ? styles.odd : styles.even, styles.inverted]}
33+
>
34+
<Image
35+
style={styles.avatar}
36+
source={
37+
odd
38+
? require('../../assets/avatar-2.png')
39+
: require('../../assets/avatar-1.png')
40+
}
41+
/>
3042
<View
31-
// eslint-disable-next-line react/no-array-index-key
32-
key={i}
33-
style={[odd ? styles.odd : styles.even, styles.inverted]}
43+
style={[styles.bubble, odd ? styles.received : styles.sent]}
3444
>
35-
<Image
36-
style={styles.avatar}
37-
source={
38-
odd
39-
? require('../../assets/avatar-2.png')
40-
: require('../../assets/avatar-1.png')
41-
}
42-
/>
43-
<View
44-
style={[styles.bubble, odd ? styles.received : styles.sent]}
45-
>
46-
<Text style={odd ? styles.receivedText : styles.sentText}>
47-
{text}
48-
</Text>
49-
</View>
45+
<Text style={odd ? styles.receivedText : styles.sentText}>
46+
{text}
47+
</Text>
5048
</View>
51-
);
52-
})}
53-
</ScrollView>
54-
<TextInput
55-
style={styles.input}
56-
placeholder="Write a message"
57-
underlineColorAndroid="transparent"
58-
/>
59-
</View>
60-
);
61-
}
62-
}
49+
</View>
50+
);
51+
})}
52+
</ScrollView>
53+
<TextInput
54+
style={styles.input}
55+
placeholder="Write a message"
56+
underlineColorAndroid="transparent"
57+
/>
58+
</View>
59+
);
60+
};
6361

62+
export default Chat;
6463
const styles = StyleSheet.create({
6564
container: {
6665
flex: 1,

‎example/src/Shared/Contacts.tsx

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import * as React from 'react';
2-
import { View, Text, FlatList, StyleSheet } from 'react-native';
2+
import {
3+
View,
4+
Text,
5+
FlatList,
6+
StyleSheet,
7+
ListRenderItemInfo,
8+
} from 'react-native';
39

410
type Item = { name: string; number: number };
511

@@ -56,46 +62,45 @@ const CONTACTS: Item[] = [
5662
{ name: 'Vincent Sandoval', number: 2606111495 },
5763
];
5864

59-
class ContactItem extends React.PureComponent<{
60-
item: { name: string; number: number };
61-
}> {
62-
render() {
63-
const { item } = this.props;
64-
65-
return (
66-
<View style={styles.item}>
67-
<View style={styles.avatar}>
68-
<Text style={styles.letter}>
69-
{item.name.slice(0, 1).toUpperCase()}
70-
</Text>
71-
</View>
72-
<View style={styles.details}>
73-
<Text style={styles.name}>{item.name}</Text>
74-
<Text style={styles.number}>{item.number}</Text>
75-
</View>
65+
const ContactItem = ({ item: { name, number } }: { item: Item }) => {
66+
return (
67+
<View style={styles.item}>
68+
<View style={styles.avatar}>
69+
<Text style={styles.letter}>{name.slice(0, 1).toUpperCase()}</Text>
70+
</View>
71+
<View style={styles.details}>
72+
<Text style={styles.name}>{name}</Text>
73+
<Text style={styles.number}>{number}</Text>
7674
</View>
77-
);
78-
}
79-
}
75+
</View>
76+
);
77+
};
8078

81-
export default class Contacts extends React.Component {
82-
private renderItem = ({ item }: { item: Item }) => (
83-
<ContactItem item={item} />
79+
const Contacts = () => {
80+
const renderItem = React.useCallback(({ item }: ListRenderItemInfo<Item>) => {
81+
return <ContactItem item={item} />;
82+
}, []);
83+
84+
const keyExtractor = React.useCallback(
85+
({ number }: Item) => number.toString(),
86+
[]
8487
);
8588

86-
private ItemSeparator = () => <View style={styles.separator} />;
89+
const ItemSeparator = React.useCallback(() => {
90+
return <View style={styles.separator} />;
91+
}, []);
92+
93+
return (
94+
<FlatList
95+
data={CONTACTS}
96+
keyExtractor={keyExtractor}
97+
renderItem={renderItem}
98+
ItemSeparatorComponent={ItemSeparator}
99+
/>
100+
);
101+
};
87102

88-
render() {
89-
return (
90-
<FlatList
91-
data={CONTACTS}
92-
keyExtractor={(_, i) => String(i)}
93-
renderItem={this.renderItem}
94-
ItemSeparatorComponent={this.ItemSeparator}
95-
/>
96-
);
97-
}
98-
}
103+
export default Contacts;
99104

100105
const styles = StyleSheet.create({
101106
item: {

‎example/src/Shared/Profile.tsx

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,45 @@
11
import * as React from 'react';
22
import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
33

4-
export default class Profile extends React.Component {
5-
render() {
6-
return (
7-
<ScrollView
8-
style={styles.container}
9-
contentContainerStyle={styles.content}
10-
>
11-
<View style={styles.author}>
12-
<Image
13-
style={styles.avatar}
14-
source={require('../../assets/avatar-1.png')}
15-
/>
16-
<View style={styles.meta}>
17-
<Text style={styles.name}>Knowledge Bot</Text>
18-
<Text style={styles.timestamp}>1st Jan 2025</Text>
19-
</View>
4+
const Profile = () => {
5+
return (
6+
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
7+
<View style={styles.author}>
8+
<Image
9+
style={styles.avatar}
10+
source={require('../../assets/avatar-1.png')}
11+
/>
12+
<View style={styles.meta}>
13+
<Text style={styles.name}>Knowledge Bot</Text>
14+
<Text style={styles.timestamp}>1st Jan 2025</Text>
2015
</View>
21-
<Text style={styles.title}>Lorem Ipsum</Text>
22-
<Text style={styles.paragraph}>
23-
Contrary to popular belief, Lorem Ipsum is not simply random text. It
24-
has roots in a piece of classical Latin literature from 45 BC, making
25-
it over 2000 years old.
26-
</Text>
27-
<Image style={styles.image} source={require('../../assets/book.jpg')} />
28-
<Text style={styles.paragraph}>
29-
Richard McClintock, a Latin professor at Hampden-Sydney College in
30-
Virginia, looked up one of the more obscure Latin words, consectetur,
31-
from a Lorem Ipsum passage, and going through the cites of the word in
32-
classical literature, discovered the undoubtable source.
33-
</Text>
34-
<Text style={styles.paragraph}>
35-
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de
36-
Finibus Bonorum et Malorum&quot; (The Extremes of Good and Evil) by
37-
Cicero, written in 45 BC. This book is a treatise on the theory of
38-
ethics, very popular during the Renaissance. The first line of Lorem
39-
Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
40-
section 1.10.32.
41-
</Text>
42-
</ScrollView>
43-
);
44-
}
45-
}
16+
</View>
17+
<Text style={styles.title}>Lorem Ipsum</Text>
18+
<Text style={styles.paragraph}>
19+
Contrary to popular belief, Lorem Ipsum is not simply random text. It
20+
has roots in a piece of classical Latin literature from 45 BC, making it
21+
over 2000 years old.
22+
</Text>
23+
<Image style={styles.image} source={require('../../assets/book.jpg')} />
24+
<Text style={styles.paragraph}>
25+
Richard McClintock, a Latin professor at Hampden-Sydney College in
26+
Virginia, looked up one of the more obscure Latin words, consectetur,
27+
from a Lorem Ipsum passage, and going through the cites of the word in
28+
classical literature, discovered the undoubtable source.
29+
</Text>
30+
<Text style={styles.paragraph}>
31+
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
32+
Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
33+
written in 45 BC. This book is a treatise on the theory of ethics, very
34+
popular during the Renaissance. The first line of Lorem Ipsum,
35+
&quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in section
36+
1.10.32.
37+
</Text>
38+
</ScrollView>
39+
);
40+
};
41+
42+
export default Profile;
4643

4744
const styles = StyleSheet.create({
4845
container: {

0 commit comments

Comments
 (0)