Skip to content

Commit 358fc56

Browse files
esthoresthor
authored
Merge pull request #84 from esthor/update-example-app
Update example app for 0.75+
2 parents d68446a + 4198c5b commit 358fc56

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+12942
-8300
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,6 @@ node_modules
1212

1313
# macOS being a macOS
1414
.DS_Store
15+
16+
# Xcode
17+
examples/SwipeableListExampleApp/ios/.xcode.env.local

‎examples/SwipeableListExampleApp/.buckconfig

-6
This file was deleted.

‎examples/SwipeableListExampleApp/.bundle/config

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
BUNDLE_PATH: "vendor/bundle"
2-
BUNDLE_FORCE_RUBY_PLATFORM: 1
2+
BUNDLE_FORCE_RUBY_PLATFORM: 1

‎examples/SwipeableListExampleApp/.eslintrc.js

+1-13
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,4 @@
11
module.exports = {
22
root: true,
3-
extends: '@react-native-community',
4-
parser: '@typescript-eslint/parser',
5-
plugins: ['@typescript-eslint'],
6-
overrides: [
7-
{
8-
files: ['*.ts', '*.tsx'],
9-
rules: {
10-
'@typescript-eslint/no-shadow': ['error'],
11-
'no-shadow': 'off',
12-
'no-undef': 'off',
13-
},
14-
},
15-
],
3+
extends: '@react-native',
164
};

‎examples/SwipeableListExampleApp/.gitignore

+25-11
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ DerivedData
2020
*.hmap
2121
*.ipa
2222
*.xcuserstate
23+
**/.xcode.env.local
2324

2425
# Android/IntelliJ
2526
#
@@ -29,32 +30,45 @@ build/
2930
local.properties
3031
*.iml
3132
*.hprof
33+
.cxx/
34+
*.keystore
35+
!debug.keystore
3236

3337
# node.js
3438
#
3539
node_modules/
3640
npm-debug.log
3741
yarn-error.log
3842

39-
# BUCK
40-
buck-out/
41-
\.buckd/
42-
*.keystore
43-
!debug.keystore
44-
4543
# fastlane
4644
#
4745
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
4846
# screenshots whenever they are needed.
4947
# For more information about the recommended setup visit:
5048
# https://docs.fastlane.tools/best-practices/source-control/
5149

52-
*/fastlane/report.xml
53-
*/fastlane/Preview.html
54-
*/fastlane/screenshots
50+
**/fastlane/report.xml
51+
**/fastlane/Preview.html
52+
**/fastlane/screenshots
53+
**/fastlane/test_output
5554

5655
# Bundle artifact
5756
*.jsbundle
5857

59-
# CocoaPods
60-
/ios/Pods/
58+
# Ruby / CocoaPods
59+
**/Pods/
60+
/vendor/bundle/
61+
62+
# Temporary files created by Metro to check the health of the file watcher
63+
.metro-health-check*
64+
65+
# testing
66+
/coverage
67+
68+
# Yarn
69+
.yarn/*
70+
!.yarn/patches
71+
!.yarn/plugins
72+
!.yarn/releases
73+
!.yarn/sdks
74+
!.yarn/versions

‎examples/SwipeableListExampleApp/.prettierrc.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module.exports = {
2+
arrowParens: 'avoid',
3+
bracketSameLine: true,
24
bracketSpacing: false,
3-
jsxBracketSameLine: true,
45
singleQuote: true,
56
trailingComma: 'all',
6-
arrowParens: 'avoid',
77
};

‎examples/SwipeableListExampleApp/.ruby-version

-1
This file was deleted.

‎examples/SwipeableListExampleApp/.watchmanconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{}
1+
{}

‎examples/SwipeableListExampleApp/.yarn/releases/yarn-stable-temp.cjs

+925
Large diffs are not rendered by default.

‎examples/SwipeableListExampleApp/App.tsx

+79-43
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useState} from 'react';
1+
import React, { useState} from 'react';
22
import {
33
SafeAreaView,
44
StyleSheet,
@@ -9,6 +9,7 @@ import {
99
Alert,
1010
} from 'react-native';
1111

12+
// @ts-ignore-next-line
1213
import SwipeableFlatList from 'react-native-swipeable-list';
1314

1415
import {dummyData} from './data/dummyData';
@@ -28,11 +29,28 @@ const colorEmphasis = {
2829
disabled: 0.38,
2930
};
3031

31-
const extractItemKey = item => {
32+
const extractItemKey = (item: Item) => {
3233
return item.id.toString();
3334
};
3435

35-
const Item = ({item, backgroundColor, textColor, deleteItem}) => {
36+
interface RenderItemProps {
37+
item: {
38+
id: number;
39+
name: string;
40+
subject: string;
41+
text: string;
42+
};
43+
deleteItem: (itemId: Item['id']) => void;
44+
}
45+
46+
type Item = {
47+
id: number;
48+
name: string;
49+
subject: string;
50+
text: string;
51+
};
52+
53+
const RenderItem = ({item}: RenderItemProps) => {
3654
return (
3755
<>
3856
<View style={styles.item}>
@@ -54,21 +72,56 @@ const Item = ({item, backgroundColor, textColor, deleteItem}) => {
5472
);
5573
};
5674

75+
interface QuickActionsProps {
76+
index: number;
77+
item: Item;
78+
archiveItem: (itemId: Item['id']) => void;
79+
snoozeItem: (itemId: Item['id']) => void;
80+
deleteItem: (itemId: Item['id']) => void;
81+
}
82+
83+
const QuickActions = ({
84+
item,
85+
archiveItem,
86+
snoozeItem,
87+
deleteItem,
88+
}: QuickActionsProps) => {
89+
return (
90+
<View style={styles.qaContainer}>
91+
<View style={[styles.button, styles.button1]}>
92+
<Pressable onPress={() => archiveItem(item.id)}>
93+
<Text style={styles.buttonText}>Archive</Text>
94+
</Pressable>
95+
</View>
96+
<View style={[styles.button, styles.button2]}>
97+
<Pressable onPress={() => snoozeItem(item.id)}>
98+
<Text style={styles.buttonText}>Snooze</Text>
99+
</Pressable>
100+
</View>
101+
<View style={[styles.button, styles.button3]}>
102+
<Pressable onPress={() => deleteItem(item.id)}>
103+
<Text style={styles.buttonText}>Delete</Text>
104+
</Pressable>
105+
</View>
106+
</View>
107+
);
108+
};
109+
57110
function renderItemSeparator() {
58111
return <View style={styles.itemSeparator} />;
59112
}
60113

61114
const App = () => {
62115
const [data, setData] = useState(dummyData);
63116

64-
const deleteItem = itemId => {
117+
const deleteItem = (itemId: Item['id']) => {
65118
// ! Please don't do something like this in production. Use proper state management.
66119
const newState = [...data];
67120
const filteredState = newState.filter(item => item.id !== itemId);
68121
return setData(filteredState);
69122
};
70123

71-
const archiveItem = itemId => {
124+
const archiveItem = (itemId: Item['id']) => {
72125
Alert.alert(
73126
'DISHONESTY ALERT',
74127
"Not gonna Archive it. We're actually are gonna just delete it.",
@@ -87,7 +140,7 @@ const App = () => {
87140
);
88141
};
89142

90-
const snoozeItem = itemId => {
143+
const snoozeItem = (itemId: Item['id']) => {
91144
Alert.alert(
92145
'DISHONESTY ALERT',
93146
"Not gonna Snooze it. We're actually are gonna just delete it.",
@@ -106,28 +159,6 @@ const App = () => {
106159
);
107160
};
108161

109-
const QuickActions = (index, qaItem) => {
110-
return (
111-
<View style={styles.qaContainer}>
112-
<View style={[styles.button, styles.button1]}>
113-
<Pressable onPress={() => archiveItem(qaItem.id)}>
114-
<Text style={[styles.buttonText, styles.button1Text]}>Archive</Text>
115-
</Pressable>
116-
</View>
117-
<View style={[styles.button, styles.button2]}>
118-
<Pressable onPress={() => snoozeItem(qaItem.id)}>
119-
<Text style={[styles.buttonText, styles.button2Text]}>Snooze</Text>
120-
</Pressable>
121-
</View>
122-
<View style={[styles.button, styles.button3]}>
123-
<Pressable onPress={() => deleteItem(qaItem.id)}>
124-
<Text style={[styles.buttonText, styles.button3Text]}>Delete</Text>
125-
</Pressable>
126-
</View>
127-
</View>
128-
);
129-
};
130-
131162
return (
132163
<>
133164
<StatusBar barStyle="dark-content" />
@@ -138,13 +169,16 @@ const App = () => {
138169
<SwipeableFlatList
139170
keyExtractor={extractItemKey}
140171
data={data}
141-
renderItem={({item}) => (
142-
<Item item={item} deleteItem={() => deleteItem} />
172+
renderItem={({item}: RenderItemProps) => (
173+
<RenderItem item={item} deleteItem={() => deleteItem} />
143174
)}
144175
maxSwipeDistance={240}
145-
renderQuickActions={({index, item}) => QuickActions(index, item)}
176+
renderQuickActions={({index, item}: {index: number; item: Item}) =>
177+
QuickActions({index, item, archiveItem, snoozeItem, deleteItem})
178+
}
146179
contentContainerStyle={styles.contentContainerStyle}
147-
shouldBounceOnMount={true}
180+
// shouldBounceOnMount={false} -- This is not working on 0.74+ React Native
181+
bounceFirstRowOnMount={false} // THIS IS THE WORKAROUND
148182
ItemSeparatorComponent={renderItemSeparator}
149183
/>
150184
</SafeAreaView>
@@ -175,7 +209,7 @@ const styles = StyleSheet.create({
175209
padding: 10,
176210
},
177211
messageContainer: {
178-
backgroundColor: darkColors.backgroundColor,
212+
backgroundColor: darkColors.background,
179213
maxWidth: 300,
180214
},
181215
name: {
@@ -228,22 +262,24 @@ const styles = StyleSheet.create({
228262
alignItems: 'center',
229263
justifyContent: 'center',
230264
},
231-
buttonText: {
232-
fontWeight: 'bold',
233-
opacity: colorEmphasis.high,
265+
button1: {
266+
backgroundColor: darkColors.primary,
234267
},
235-
button1Text: {
236-
color: darkColors.primary,
268+
button2: {
269+
backgroundColor: darkColors.secondary,
237270
},
238-
button2Text: {
239-
color: darkColors.secondary,
271+
button3: {
272+
backgroundColor: darkColors.error,
240273
},
241-
button3Text: {
242-
color: darkColors.error,
274+
buttonText: {
275+
fontWeight: 'bold',
276+
opacity: colorEmphasis.high,
277+
color: darkColors.onBackground,
278+
fontSize: 16,
243279
},
244280
contentContainerStyle: {
245281
flexGrow: 1,
246-
backgroundColor: darkColors.backgroundColor,
282+
backgroundColor: darkColors.background,
247283
},
248284
});
249285

‎examples/SwipeableListExampleApp/Gemfile

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
source 'https://rubygems.org'
2+
23
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
3-
ruby '2.7.4'
4-
gem 'cocoapods', '~> 1.11', '>= 1.11.2'
4+
ruby ">= 2.6.10"
5+
6+
# Exclude problematic versions of cocoapods and activesupport that causes build failures.
7+
gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
8+
gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'

‎examples/SwipeableListExampleApp/Gemfile.lock

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,4 +95,4 @@ DEPENDENCIES
9595
RUBY VERSION
9696
ruby 2.7.4p191
9797
BUNDLED WITH
98-
2.2.27
98+
2.2.27

‎examples/SwipeableListExampleApp/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,4 @@ or Android:
2929
yarn android
3030
```
3131

32-
Note: You will of course need XCode to run it in an iOS simualtor or Android Studio to run it in an Android emulator.
32+
Note: You will of course need XCode to run it in an iOS simualtor or Android Studio to run it in an Android emulator.

‎examples/SwipeableListExampleApp/__tests__/App-test.tsx renamed to ‎examples/SwipeableListExampleApp/__tests__/App.test.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import 'react-native';
66
import React from 'react';
77
import App from '../App';
88

9+
// Note: import explicitly to use the types shipped with jest.
10+
import {it} from '@jest/globals';
11+
912
// Note: test renderer must be required after react-native.
1013
import renderer from 'react-test-renderer';
1114

0 commit comments

Comments
 (0)