Skip to content

Commit

Permalink
feat: add functional components to example (#1393)
Browse files Browse the repository at this point in the history 
* feat: add functional components to example

* refactor: change type
  • Loading branch information
@szymonrybczak
szymonrybczak committed Oct 2, 2022
1 parent 773e66e commit 2ca852c
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 174 deletions.
27 changes: 12 additions & 15 deletions packages/react-native-tab-view/example/src/Shared/Albums.tsx
View file
Expand Up @@ -14,21 +14,18 @@ const COVERS = [
require('../../assets/album-art-8.jpg'),
];

export default class Albums extends React.Component {
render() {
return (
<ScrollView
style={styles.container}
contentContainerStyle={styles.content}
>
{COVERS.map((source, i) => (
// eslint-disable-next-line react/no-array-index-key
<Image key={i} source={source} style={styles.cover} />
))}
</ScrollView>
);
}
}
const Albums = () => {
return (
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
{COVERS.map((source, i) => (
// eslint-disable-next-line react/no-array-index-key
<Image key={i} source={source} style={styles.cover} />
))}
</ScrollView>
);
};

export default Albums;

const styles = StyleSheet.create({
container: {
Expand Down
79 changes: 38 additions & 41 deletions packages/react-native-tab-view/example/src/Shared/Article.tsx
View file
@@ -1,48 +1,45 @@
import * as React from 'react';
import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';

export default class Article extends React.Component {
render() {
return (
<ScrollView
style={styles.container}
contentContainerStyle={styles.content}
>
<View style={styles.author}>
<Image
style={styles.avatar}
source={require('../../assets/avatar-1.png')}
/>
<View style={styles.meta}>
<Text style={styles.name}>Knowledge Bot</Text>
<Text style={styles.timestamp}>1st Jan 2025</Text>
</View>
const Article = () => {
return (
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
<View style={styles.author}>
<Image
style={styles.avatar}
source={require('../../assets/avatar-1.png')}
/>
<View style={styles.meta}>
<Text style={styles.name}>Knowledge Bot</Text>
<Text style={styles.timestamp}>1st Jan 2025</Text>
</View>
<Text style={styles.title}>Lorem Ipsum</Text>
<Text style={styles.paragraph}>
Contrary to popular belief, Lorem Ipsum is not simply random text. It
has roots in a piece of classical Latin literature from 45 BC, making
it over 2000 years old.
</Text>
<Image style={styles.image} source={require('../../assets/book.jpg')} />
<Text style={styles.paragraph}>
Richard McClintock, a Latin professor at Hampden-Sydney College in
Virginia, looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source.
</Text>
<Text style={styles.paragraph}>
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de
Finibus Bonorum et Malorum&quot; (The Extremes of Good and Evil) by
Cicero, written in 45 BC. This book is a treatise on the theory of
ethics, very popular during the Renaissance. The first line of Lorem
Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
section 1.10.32.
</Text>
</ScrollView>
);
}
}
</View>
<Text style={styles.title}>Lorem Ipsum</Text>
<Text style={styles.paragraph}>
Contrary to popular belief, Lorem Ipsum is not simply random text. It
has roots in a piece of classical Latin literature from 45 BC, making it
over 2000 years old.
</Text>
<Image style={styles.image} source={require('../../assets/book.jpg')} />
<Text style={styles.paragraph}>
Richard McClintock, a Latin professor at Hampden-Sydney College in
Virginia, looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source.
</Text>
<Text style={styles.paragraph}>
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics, very
popular during the Renaissance. The first line of Lorem Ipsum,
&quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in section
1.10.32.
</Text>
</ScrollView>
);
};

export default Article;

const styles = StyleSheet.create({
container: {
Expand Down
81 changes: 40 additions & 41 deletions packages/react-native-tab-view/example/src/Shared/Chat.tsx
View file
Expand Up @@ -15,52 +15,51 @@ const MESSAGES = [
'make me a sandwich',
];

export default class Chat extends React.Component {
render() {
return (
<View style={styles.container}>
<ScrollView
style={styles.inverted}
contentContainerStyle={styles.content}
>
{MESSAGES.map((text, i) => {
const odd = i % 2;
const Chat = () => {
return (
<View style={styles.container}>
<ScrollView
style={styles.inverted}
contentContainerStyle={styles.content}
>
{MESSAGES.map((text, i) => {
const odd = i % 2;

return (
return (
<View
// eslint-disable-next-line react/no-array-index-key
key={i}
style={[odd ? styles.odd : styles.even, styles.inverted]}
>
<Image
style={styles.avatar}
source={
odd
? require('../../assets/avatar-2.png')
: require('../../assets/avatar-1.png')
}
/>
<View
// eslint-disable-next-line react/no-array-index-key
key={i}
style={[odd ? styles.odd : styles.even, styles.inverted]}
style={[styles.bubble, odd ? styles.received : styles.sent]}
>
<Image
style={styles.avatar}
source={
odd
? require('../../assets/avatar-2.png')
: require('../../assets/avatar-1.png')
}
/>
<View
style={[styles.bubble, odd ? styles.received : styles.sent]}
>
<Text style={odd ? styles.receivedText : styles.sentText}>
{text}
</Text>
</View>
<Text style={odd ? styles.receivedText : styles.sentText}>
{text}
</Text>
</View>
);
})}
</ScrollView>
<TextInput
style={styles.input}
placeholder="Write a message"
underlineColorAndroid="transparent"
/>
</View>
);
}
}
</View>
);
})}
</ScrollView>
<TextInput
style={styles.input}
placeholder="Write a message"
underlineColorAndroid="transparent"
/>
</View>
);
};

export default Chat;
const styles = StyleSheet.create({
container: {
flex: 1,
Expand Down
77 changes: 41 additions & 36 deletions packages/react-native-tab-view/example/src/Shared/Contacts.tsx
View file
@@ -1,5 +1,11 @@
import * as React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import {
View,
Text,
FlatList,
StyleSheet,
ListRenderItemInfo,
} from 'react-native';

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

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

class ContactItem extends React.PureComponent<{
item: { name: string; number: number };
}> {
render() {
const { item } = this.props;

return (
<View style={styles.item}>
<View style={styles.avatar}>
<Text style={styles.letter}>
{item.name.slice(0, 1).toUpperCase()}
</Text>
</View>
<View style={styles.details}>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.number}>{item.number}</Text>
</View>
const ContactItem = ({ item: { name, number } }: { item: Item }) => {
return (
<View style={styles.item}>
<View style={styles.avatar}>
<Text style={styles.letter}>{name.slice(0, 1).toUpperCase()}</Text>
</View>
<View style={styles.details}>
<Text style={styles.name}>{name}</Text>
<Text style={styles.number}>{number}</Text>
</View>
);
}
}
</View>
);
};

export default class Contacts extends React.Component {
private renderItem = ({ item }: { item: Item }) => (
<ContactItem item={item} />
const Contacts = () => {
const renderItem = React.useCallback(({ item }: ListRenderItemInfo<Item>) => {
return <ContactItem item={item} />;
}, []);

const keyExtractor = React.useCallback(
({ number }: Item) => number.toString(),
[]
);

private ItemSeparator = () => <View style={styles.separator} />;
const ItemSeparator = React.useCallback(() => {
return <View style={styles.separator} />;
}, []);

return (
<FlatList
data={CONTACTS}
keyExtractor={keyExtractor}
renderItem={renderItem}
ItemSeparatorComponent={ItemSeparator}
/>
);
};

render() {
return (
<FlatList
data={CONTACTS}
keyExtractor={(_, i) => String(i)}
renderItem={this.renderItem}
ItemSeparatorComponent={this.ItemSeparator}
/>
);
}
}
export default Contacts;

const styles = StyleSheet.create({
item: {
Expand Down
79 changes: 38 additions & 41 deletions packages/react-native-tab-view/example/src/Shared/Profile.tsx
View file
@@ -1,48 +1,45 @@
import * as React from 'react';
import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';

export default class Profile extends React.Component {
render() {
return (
<ScrollView
style={styles.container}
contentContainerStyle={styles.content}
>
<View style={styles.author}>
<Image
style={styles.avatar}
source={require('../../assets/avatar-1.png')}
/>
<View style={styles.meta}>
<Text style={styles.name}>Knowledge Bot</Text>
<Text style={styles.timestamp}>1st Jan 2025</Text>
</View>
const Profile = () => {
return (
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
<View style={styles.author}>
<Image
style={styles.avatar}
source={require('../../assets/avatar-1.png')}
/>
<View style={styles.meta}>
<Text style={styles.name}>Knowledge Bot</Text>
<Text style={styles.timestamp}>1st Jan 2025</Text>
</View>
<Text style={styles.title}>Lorem Ipsum</Text>
<Text style={styles.paragraph}>
Contrary to popular belief, Lorem Ipsum is not simply random text. It
has roots in a piece of classical Latin literature from 45 BC, making
it over 2000 years old.
</Text>
<Image style={styles.image} source={require('../../assets/book.jpg')} />
<Text style={styles.paragraph}>
Richard McClintock, a Latin professor at Hampden-Sydney College in
Virginia, looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source.
</Text>
<Text style={styles.paragraph}>
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de
Finibus Bonorum et Malorum&quot; (The Extremes of Good and Evil) by
Cicero, written in 45 BC. This book is a treatise on the theory of
ethics, very popular during the Renaissance. The first line of Lorem
Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
section 1.10.32.
</Text>
</ScrollView>
);
}
}
</View>
<Text style={styles.title}>Lorem Ipsum</Text>
<Text style={styles.paragraph}>
Contrary to popular belief, Lorem Ipsum is not simply random text. It
has roots in a piece of classical Latin literature from 45 BC, making it
over 2000 years old.
</Text>
<Image style={styles.image} source={require('../../assets/book.jpg')} />
<Text style={styles.paragraph}>
Richard McClintock, a Latin professor at Hampden-Sydney College in
Virginia, looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source.
</Text>
<Text style={styles.paragraph}>
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics, very
popular during the Renaissance. The first line of Lorem Ipsum,
&quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in section
1.10.32.
</Text>
</ScrollView>
);
};

export default Profile;

const styles = StyleSheet.create({
container: {
Expand Down

0 comments on commit 2ca852c

Please sign in to comment.