You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+16-13Lines changed: 16 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,26 +13,25 @@
13
13
14
14
```sh
15
15
yarn add react-native-spacer-view
16
-
cd ios && pod install
17
16
```
18
17
19
18
#### Note
20
-
This component depends on safe area insets provided by [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). If you don't have this library installed, you'll need to add it and [wrap the root of your app in SafeAreaProvider](https://github.com/th3rdwave/react-native-safe-area-context#providers).
21
19
22
-
If you already have react-native-safe-area-context in your project, you may need to update the version to match what's used in this library. Otherwise you'll get a `Tried to register two views to RNCSafeAreaView` error.
20
+
This component depends on safe area insets provided by [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). If you don't have this library installed, you'll need to add it and [wrap the root of your app in SafeAreaProvider](https://github.com/th3rdwave/react-native-safe-area-context#providers).
23
21
24
22
## API
25
-
Extends [ViewProps](https://reactnative.dev/docs/view#props). Note that view props are applied *last*, so they will take precendence over Spacer's props. For example, if you pass `flex={2}` and `style={{ flex: 5 }}`, the `flex: 5` will win out.
26
23
27
-
*All propsare optional.*
24
+
Extends [ViewProps](https://reactnative.dev/docs/view#props). Note that view props are applied _last_, so they will take precendence over Spacer's props. For example, if you pass `flex={2}` and `style={{ flex: 5 }}`, the `flex: 5` will win out.
28
25
29
-
| Prop | Type | Description |
30
-
| --- | --- | --- |
31
-
| height |`number`| Adds to total `height` of Spacer. |
32
-
| width |`number`| Adds to total `width` of Spacer. |
33
-
| safeTop |`boolean`| Adds the device's top safe area inset to the total height of Spacer. |
34
-
| safeBottom |`boolean`| Adds the device's bottom safe area inset to the total height of Spacer. |
35
-
| flex |`true` or `number`| Passing `true` gives Spacer `flex: 1`, passing a number gives Spacer `flex: [number]`. |
| height |`number`| Adds to total `height` of Spacer. |
31
+
| width |`number`| Adds to total `width` of Spacer. |
32
+
| safeTop |`boolean`| Adds the device's top safe area inset to the total height of Spacer. |
33
+
| safeBottom |`boolean`| Adds the device's bottom safe area inset to the total height of Spacer. |
34
+
| flex |`true` or `number`| Passing `true` gives Spacer `flex: 1`, passing a number gives Spacer `flex: [number]`. |
36
35
37
36
## Usage
38
37
@@ -52,18 +51,22 @@ export function MyNeatScreen() {
52
51
<Footer />
53
52
<Spacer safeBottom height={24} />
54
53
</ScrollView>
55
-
)
54
+
);
56
55
}
57
56
```
58
57
59
58
## Example App
59
+
60
60
You can run an [example](example/src/App.tsx) implementation of how you might use `Spacer` in a `FlatList` by cloning this repo and running the following commands:
0 commit comments