Skip to content

Commit 2f4e821

Browse files
aarononealaarononeal
committed
style(rn-tester): improve button text styling
- Apply smallButtonTextLabel style to all text labels - Move fontSize property to text label style - Improve text alignment for button content
1 parent 8932fbc commit 2f4e821

1 file changed

Lines changed: 38 additions & 16 deletions

File tree

‎packages/rn-tester/js/examples/FlatList/FlatList-maintainVisibleContentPosition.js‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -159,14 +159,16 @@ export component FlatList_maintainVisibleContentPosition() {
159159
<TouchableOpacity
160160
style={styles.smallButtonText}
161161
onPress={addItemAtTop}>
162-
<Text>Add 1 item at top</Text>
162+
<Text style={styles.smallButtonTextLabel}>Add 1 item at top</Text>
163163
</TouchableOpacity>
164164
</View>
165165
<View style={styles.smallButtonContainer}>
166166
<TouchableOpacity
167167
style={styles.smallButtonText}
168168
onPress={addItemAtBottom}>
169-
<Text>Add 1 item at bottom</Text>
169+
<Text style={styles.smallButtonTextLabel}>
170+
Add 1 item at bottom
171+
</Text>
170172
</TouchableOpacity>
171173
</View>
172174
</View>
@@ -175,14 +177,18 @@ export component FlatList_maintainVisibleContentPosition() {
175177
<TouchableOpacity
176178
style={styles.smallButtonText}
177179
onPress={addItemAtTopMultiple}>
178-
<Text>Add 3 items at top</Text>
180+
<Text style={styles.smallButtonTextLabel}>
181+
Add 3 items at top
182+
</Text>
179183
</TouchableOpacity>
180184
</View>
181185
<View style={styles.smallButtonContainer}>
182186
<TouchableOpacity
183187
style={styles.smallButtonText}
184188
onPress={addItemAtTopFifty}>
185-
<Text>Add 50 items at top</Text>
189+
<Text style={styles.smallButtonTextLabel}>
190+
Add 50 items at top
191+
</Text>
186192
</TouchableOpacity>
187193
</View>
188194
</View>
@@ -191,7 +197,9 @@ export component FlatList_maintainVisibleContentPosition() {
191197
<TouchableOpacity
192198
style={styles.smallButtonText}
193199
onPress={addItemAtTopAndRemoveBottom}>
194-
<Text>Add + Remove (net -2)</Text>
200+
<Text style={styles.smallButtonTextLabel}>
201+
Add + Remove (net -2)
202+
</Text>
195203
</TouchableOpacity>
196204
</View>
197205
</View>
@@ -200,14 +208,18 @@ export component FlatList_maintainVisibleContentPosition() {
200208
<TouchableOpacity
201209
style={styles.smallButtonText}
202210
onPress={() => setHorizontal(h => !h)}>
203-
<Text>{horizontal ? 'Horizontal: ON' : 'Horizontal: OFF'}</Text>
211+
<Text style={styles.smallButtonTextLabel}>
212+
{horizontal ? 'Horizontal: ON' : 'Horizontal: OFF'}
213+
</Text>
204214
</TouchableOpacity>
205215
</View>
206216
<View style={styles.smallButtonContainer}>
207217
<TouchableOpacity
208218
style={styles.smallButtonText}
209219
onPress={() => setInverted(i => !i)}>
210-
<Text>{inverted ? 'Inverted: ON' : 'Inverted: OFF'}</Text>
220+
<Text style={styles.smallButtonTextLabel}>
221+
{inverted ? 'Inverted: ON' : 'Inverted: OFF'}
222+
</Text>
211223
</TouchableOpacity>
212224
</View>
213225
</View>
@@ -216,14 +228,16 @@ export component FlatList_maintainVisibleContentPosition() {
216228
<TouchableOpacity
217229
style={styles.smallButtonText}
218230
onPress={() => setWindowSize(windowSize === 51 ? 3 : 51)}>
219-
<Text>{windowSize === 51 ? 'Recycle: OFF' : 'Recycle: ON'}</Text>
231+
<Text style={styles.smallButtonTextLabel}>
232+
{windowSize === 51 ? 'Recycle: OFF' : 'Recycle: ON'}
233+
</Text>
220234
</TouchableOpacity>
221235
</View>
222236
<View style={styles.smallButtonContainer}>
223237
<TouchableOpacity
224238
style={styles.smallButtonText}
225239
onPress={() => setVariableHeight(v => !v)}>
226-
<Text>
240+
<Text style={styles.smallButtonTextLabel}>
227241
{variableHeight ? 'Height: Variable' : 'Height: Fixed'}
228242
</Text>
229243
</TouchableOpacity>
@@ -238,7 +252,7 @@ export component FlatList_maintainVisibleContentPosition() {
238252
autoscrollToTopThreshold === 100 ? null : 100,
239253
)
240254
}>
241-
<Text>
255+
<Text style={styles.smallButtonTextLabel}>
242256
{autoscrollToTopThreshold === 100
243257
? 'Threshold: 100'
244258
: 'Threshold: OFF'}
@@ -251,7 +265,7 @@ export component FlatList_maintainVisibleContentPosition() {
251265
onPress={() =>
252266
setScrollEventThrottle(scrollEventThrottle === 16 ? 500 : 16)
253267
}>
254-
<Text>
268+
<Text style={styles.smallButtonTextLabel}>
255269
{scrollEventThrottle === 16
256270
? 'Throttle: 16ms'
257271
: 'Throttle: 500ms'}
@@ -264,14 +278,18 @@ export component FlatList_maintainVisibleContentPosition() {
264278
<TouchableOpacity
265279
style={styles.smallButtonText}
266280
onPress={scrollToOffset100}>
267-
<Text>ScrollToOffset 100</Text>
281+
<Text style={styles.smallButtonTextLabel}>
282+
ScrollToOffset 100
283+
</Text>
268284
</TouchableOpacity>
269285
</View>
270286
<View style={styles.smallButtonContainer}>
271287
<TouchableOpacity
272288
style={styles.smallButtonText}
273289
onPress={scrollToOffset500}>
274-
<Text>ScrollToOffset 500</Text>
290+
<Text style={styles.smallButtonTextLabel}>
291+
ScrollToOffset 500
292+
</Text>
275293
</TouchableOpacity>
276294
</View>
277295
</View>
@@ -280,14 +298,16 @@ export component FlatList_maintainVisibleContentPosition() {
280298
<TouchableOpacity
281299
style={styles.smallButtonText}
282300
onPress={clearData}>
283-
<Text>Clear (empty list)</Text>
301+
<Text style={styles.smallButtonTextLabel}>
302+
Clear (empty list)
303+
</Text>
284304
</TouchableOpacity>
285305
</View>
286306
<View style={styles.smallButtonContainer}>
287307
<TouchableOpacity
288308
style={styles.smallButtonText}
289309
onPress={resetData}>
290-
<Text>Reset</Text>
310+
<Text style={styles.smallButtonTextLabel}>Reset</Text>
291311
</TouchableOpacity>
292312
</View>
293313
</View>
@@ -323,9 +343,11 @@ const styles = StyleSheet.create({
323343
marginVertical: 1,
324344
},
325345
smallButtonText: {
326-
fontSize: 10,
327346
paddingVertical: 2,
328347
paddingHorizontal: 4,
348+
},
349+
smallButtonTextLabel: {
350+
fontSize: 10,
329351
textAlign: 'center',
330352
},
331353
smallButtonContainer: {

0 commit comments

Comments
 (0)