Lines Matching refs:area

11 Creating a safe area is a great way to ensure that your app's content is appropriately positioned a…
13 When the content on your app's screen is not positioned within the safe area, it can be obscured by…
16 …alt="Without defining a safe area, the content can be obscured by the device's interface elements."
17   src="/static/images/safe-area/without-safe-area.png"
23 ## Use `react-native-safe-area-context`
25 …ative-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context) provides a …
27 …sult of the previous example changes as it displays the content inside a safe area, as shown below:
30   alt="On using react-native-safe-area-context, the content is positioned within the safe area."
31   src="/static/images/safe-area/with-safe-area.png"
37 Install `react-native-safe-area-context` by running the command below:
39 <Terminal cmd={['$ npx expo install react-native-safe-area-context']} />
45 …ort [`<SafeAreaProvider>`](https://github.com/th3rdwave/react-native-safe-area-context#safeareapro…
49 import { SafeAreaProvider } from 'react-native-safe-area-context';
62 …github.com/th3rdwave/react-native-safe-area-context#safeareaview), which is a regular `<View>` wit…
66 …thub.com/th3rdwave/react-native-safe-area-context#usesafeareainsets) hook that gives direct access…
81 <SnackInline label="Using react-native-safe-area-context" dependencies={['react-native-safe-area-co…
85 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
91       <Text style={{ fontSize: 28 }}>Content is in safe area.</Text>
109 …area-context` as a peer dependency. For more information on how it uses the library, see the [Reac…
113 … out the [Web SSR section](https://github.com/th3rdwave/react-native-safe-area-context#web-ssr) in…