Skip to content

Commit af0a5ab

Browse files
SimekSimek
authored
update examples to use cross-platform SafeAreaView (facebook#4231)
1 parent 263e502 commit af0a5ab

Some content is hidden

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

59 files changed

+2787
-2709
lines changed

‎docs/accessibilityinfo.md‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ Sometimes it's useful to know whether or not the device has a screen reader that
99

1010
```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
1111
import React, {useState, useEffect} from 'react';
12-
import {AccessibilityInfo, View, Text, StyleSheet} from 'react-native';
12+
import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
13+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1314
1415
const App = () => {
1516
const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
@@ -43,14 +44,16 @@ const App = () => {
4344
}, []);
4445
4546
return (
46-
<View style={styles.container}>
47-
<Text style={styles.status}>
48-
The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
49-
</Text>
50-
<Text style={styles.status}>
51-
The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
52-
</Text>
53-
</View>
47+
<SafeAreaProvider>
48+
<SafeAreaView style={styles.container}>
49+
<Text style={styles.status}>
50+
The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
51+
</Text>
52+
<Text style={styles.status}>
53+
The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
54+
</Text>
55+
</SafeAreaView>
56+
</SafeAreaProvider>
5457
);
5558
};
5659

‎docs/actionsheetios.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-i
77

88
## Example
99

10-
```SnackPlayer name=ActionSheetIOS&supportedPlatforms=ios
10+
```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
1111
import React, {useState} from 'react';
12-
import {ActionSheetIOS, Button, StyleSheet, Text, View} from 'react-native';
12+
import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
13+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1314
1415
const App = () => {
1516
const [result, setResult] = useState('🔮');
@@ -34,10 +35,12 @@ const App = () => {
3435
);
3536
3637
return (
37-
<View style={styles.container}>
38-
<Text style={styles.result}>{result}</Text>
39-
<Button onPress={onPress} title="Show Action Sheet" />
40-
</View>
38+
<SafeAreaProvider>
39+
<SafeAreaView style={styles.container}>
40+
<Text style={styles.result}>{result}</Text>
41+
<Button onPress={onPress} title="Show Action Sheet" />
42+
</SafeAreaView>
43+
</SafeAreaProvider>
4144
);
4245
};
4346

‎docs/activityindicator.md‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,18 @@ Displays a circular loading indicator.
99

1010
```SnackPlayer name=ActivityIndicator%20Example
1111
import React from 'react';
12-
import {ActivityIndicator, StyleSheet, View} from 'react-native';
12+
import {ActivityIndicator, StyleSheet} from 'react-native';
13+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1314
1415
const App = () => (
15-
<View style={[styles.container, styles.horizontal]}>
16-
<ActivityIndicator />
17-
<ActivityIndicator size="large" />
18-
<ActivityIndicator size="small" color="#0000ff" />
19-
<ActivityIndicator size="large" color="#00ff00" />
20-
</View>
16+
<SafeAreaProvider>
17+
<SafeAreaView style={[styles.container, styles.horizontal]}>
18+
<ActivityIndicator />
19+
<ActivityIndicator size="large" />
20+
<ActivityIndicator size="small" color="#0000ff" />
21+
<ActivityIndicator size="large" color="#00ff00" />
22+
</SafeAreaView>
23+
</SafeAreaProvider>
2124
);
2225
2326
const styles = StyleSheet.create({

‎docs/alert.md‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ This is an API that works both on Android and iOS and can show static alerts. Al
1313

1414
```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android
1515
import React from 'react';
16-
import {View, StyleSheet, Button, Alert} from 'react-native';
16+
import {StyleSheet, Button, Alert} from 'react-native';
17+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1718
1819
const App = () => {
1920
const createTwoButtonAlert = () =>
@@ -41,10 +42,12 @@ const App = () => {
4142
]);
4243
4344
return (
44-
<View style={styles.container}>
45-
<Button title={'2-Button Alert'} onPress={createTwoButtonAlert} />
46-
<Button title={'3-Button Alert'} onPress={createThreeButtonAlert} />
47-
</View>
45+
<SafeAreaProvider>
46+
<SafeAreaView style={styles.container}>
47+
<Button title={'2-Button Alert'} onPress={createTwoButtonAlert} />
48+
<Button title={'3-Button Alert'} onPress={createThreeButtonAlert} />
49+
</SafeAreaView>
50+
</SafeAreaProvider>
4851
);
4952
};
5053
@@ -79,7 +82,8 @@ The cancel event can be handled by providing an `onDismiss` callback property in
7982

8083
```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android
8184
import React from 'react';
82-
import {View, StyleSheet, Button, Alert} from 'react-native';
85+
import {StyleSheet, Button, Alert} from 'react-native';
86+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
8387
8488
const showAlert = () =>
8589
Alert.alert(
@@ -102,9 +106,11 @@ const showAlert = () =>
102106
);
103107
104108
const App = () => (
105-
<View style={styles.container}>
106-
<Button title="Show alert" onPress={showAlert} />
107-
</View>
109+
<SafeAreaProvider>
110+
<SafeAreaView style={styles.container}>
111+
<Button title="Show alert" onPress={showAlert} />
112+
</SafeAreaView>
113+
</SafeAreaProvider>
108114
);
109115
110116
const styles = StyleSheet.create({

‎docs/animated.md‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,10 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho
1313

1414
The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
1515

16-
```SnackPlayer name=Animated
16+
```SnackPlayer name=Animated%20Example
1717
import React, {useRef} from 'react';
18-
import {
19-
Animated,
20-
Text,
21-
View,
22-
StyleSheet,
23-
Button,
24-
SafeAreaView,
25-
} from 'react-native';
18+
import {Animated, Text, View, StyleSheet, Button} from 'react-native';
19+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
2620
2721
const App = () => {
2822
// fadeAnim will be used as the value for opacity. Initial Value: 0
@@ -47,22 +41,24 @@ const App = () => {
4741
};
4842
4943
return (
50-
<SafeAreaView style={styles.container}>
51-
<Animated.View
52-
style={[
53-
styles.fadingContainer,
54-
{
55-
// Bind opacity to animated value
56-
opacity: fadeAnim,
57-
},
58-
]}>
59-
<Text style={styles.fadingText}>Fading View!</Text>
60-
</Animated.View>
61-
<View style={styles.buttonRow}>
62-
<Button title="Fade In View" onPress={fadeIn} />
63-
<Button title="Fade Out View" onPress={fadeOut} />
64-
</View>
65-
</SafeAreaView>
44+
<SafeAreaProvider>
45+
<SafeAreaView style={styles.container}>
46+
<Animated.View
47+
style={[
48+
styles.fadingContainer,
49+
{
50+
// Bind opacity to animated value
51+
opacity: fadeAnim,
52+
},
53+
]}>
54+
<Text style={styles.fadingText}>Fading View!</Text>
55+
</Animated.View>
56+
<View style={styles.buttonRow}>
57+
<Button title="Fade In View" onPress={fadeIn} />
58+
<Button title="Fade Out View" onPress={fadeOut} />
59+
</View>
60+
</SafeAreaView>
61+
</SafeAreaProvider>
6662
);
6763
};
6864

‎docs/animatedvaluexy.md‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ title: Animated.ValueXY
77

88
## Example
99

10-
```SnackPlayer name=Animated.ValueXY
10+
```SnackPlayer name=Animated.ValueXY%20Example
1111
import React, {useRef} from 'react';
12-
import {Animated, PanResponder, StyleSheet, View} from 'react-native';
12+
import {Animated, PanResponder, StyleSheet} from 'react-native';
13+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1314
1415
const DraggableView = () => {
1516
const pan = useRef(new Animated.ValueXY()).current;
@@ -32,12 +33,14 @@ const DraggableView = () => {
3233
});
3334
3435
return (
35-
<View style={styles.container}>
36-
<Animated.View
37-
{...panResponder.panHandlers}
38-
style={[pan.getLayout(), styles.box]}
39-
/>
40-
</View>
36+
<SafeAreaProvider>
37+
<SafeAreaView style={styles.container}>
38+
<Animated.View
39+
{...panResponder.panHandlers}
40+
style={[pan.getLayout(), styles.box]}
41+
/>
42+
</SafeAreaView>
43+
</SafeAreaProvider>
4144
);
4245
};
4346

‎docs/animations.md‎

Lines changed: 53 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,6 @@ The following example implements a horizontal scrolling carousel where the scrol
313313
```SnackPlayer name=Animated&supportedPlatforms=ios,android
314314
import React, {useRef} from 'react';
315315
import {
316-
SafeAreaView,
317316
ScrollView,
318317
Text,
319318
StyleSheet,
@@ -322,6 +321,7 @@ import {
322321
Animated,
323322
useWindowDimensions,
324323
} from 'react-native';
324+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
325325

326326
const images = new Array(6).fill(
327327
'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
@@ -333,57 +333,61 @@ const App = () => {
333333
const {width: windowWidth} = useWindowDimensions();
334334

335335
return (
336-
<SafeAreaView style={styles.container}>
337-
<View style={styles.scrollContainer}>
338-
<ScrollView
339-
horizontal={true}
340-
pagingEnabled
341-
showsHorizontalScrollIndicator={false}
342-
onScroll={Animated.event([
343-
{
344-
nativeEvent: {
345-
contentOffset: {
346-
x: scrollX,
336+
<SafeAreaProvider>
337+
<SafeAreaView style={styles.container}>
338+
<View style={styles.scrollContainer}>
339+
<ScrollView
340+
horizontal={true}
341+
pagingEnabled
342+
showsHorizontalScrollIndicator={false}
343+
onScroll={Animated.event([
344+
{
345+
nativeEvent: {
346+
contentOffset: {
347+
x: scrollX,
348+
},
347349
},
348350
},
349-
},
350-
])}
351-
scrollEventThrottle={1}>
352-
{images.map((image, imageIndex) => {
353-
return (
354-
<View style={{width: windowWidth, height: 250}} key={imageIndex}>
355-
<ImageBackground source={{uri: image}} style={styles.card}>
356-
<View style={styles.textContainer}>
357-
<Text style={styles.infoText}>
358-
{'Image - ' + imageIndex}
359-
</Text>
360-
</View>
361-
</ImageBackground>
362-
</View>
363-
);
364-
})}
365-
</ScrollView>
366-
<View style={styles.indicatorContainer}>
367-
{images.map((image, imageIndex) => {
368-
const width = scrollX.interpolate({
369-
inputRange: [
370-
windowWidth * (imageIndex - 1),
371-
windowWidth * imageIndex,
372-
windowWidth * (imageIndex + 1),
373-
],
374-
outputRange: [8, 16, 8],
375-
extrapolate: 'clamp',
376-
});
377-
return (
378-
<Animated.View
379-
key={imageIndex}
380-
style={[styles.normalDot, {width}]}
381-
/>
382-
);
383-
})}
351+
])}
352+
scrollEventThrottle={1}>
353+
{images.map((image, imageIndex) => {
354+
return (
355+
<View
356+
style={{width: windowWidth, height: 250}}
357+
key={imageIndex}>
358+
<ImageBackground source={{uri: image}} style={styles.card}>
359+
<View style={styles.textContainer}>
360+
<Text style={styles.infoText}>
361+
{'Image - ' + imageIndex}
362+
</Text>
363+
</View>
364+
</ImageBackground>
365+
</View>
366+
);
367+
})}
368+
</ScrollView>
369+
<View style={styles.indicatorContainer}>
370+
{images.map((image, imageIndex) => {
371+
const width = scrollX.interpolate({
372+
inputRange: [
373+
windowWidth * (imageIndex - 1),
374+
windowWidth * imageIndex,
375+
windowWidth * (imageIndex + 1),
376+
],
377+
outputRange: [8, 16, 8],
378+
extrapolate: 'clamp',
379+
});
380+
return (
381+
<Animated.View
382+
key={imageIndex}
383+
style={[styles.normalDot, {width}]}
384+
/>
385+
);
386+
})}
387+
</View>
384388
</View>
385-
</View>
386-
</SafeAreaView>
389+
</SafeAreaView>
390+
</SafeAreaProvider>
387391
);
388392
};
389393

‎docs/appstate.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ To see the current state, you can check `AppState.currentState`, which will be k
2424

2525
```SnackPlayer name=AppState%20Example
2626
import React, {useRef, useState, useEffect} from 'react';
27-
import {AppState, StyleSheet, Text, View} from 'react-native';
27+
import {AppState, StyleSheet, Text} from 'react-native';
28+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
2829
2930
const AppStateExample = () => {
3031
const appState = useRef(AppState.currentState);
@@ -50,9 +51,11 @@ const AppStateExample = () => {
5051
}, []);
5152
5253
return (
53-
<View style={styles.container}>
54-
<Text>Current state is: {appStateVisible}</Text>
55-
</View>
54+
<SafeAreaProvider>
55+
<SafeAreaView style={styles.container}>
56+
<Text>Current state is: {appStateVisible}</Text>
57+
</SafeAreaView>
58+
</SafeAreaProvider>
5659
);
5760
};
5861

0 commit comments

Comments
 (0)