react-native-spacer-view

A little helper view to give you granular control over your layouts.

Installation

yarn add react-native-spacer-view
cd ios && pod install

Note

This component depends on safe area insets provided by 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.

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.

API

All props are optional.

Prop	Type	Description
height	number	Adds to total height of Spacer.
width	number	Adds to total width of Spacer.
safeTop	boolean	Adds the device's top safe area inset to the total height of Spacer.
safeBottom	boolean	Adds the device's bottom safe area inset to the total height of Spacer.
flex	true or number	Passing true gives Spacer flex: 1, passing a number gives Spacer flex: [number].
style	ViewStyle	Adds to Spacer's styles. All properties take precedence over any other props passed to Spacer.

Example

import { ScrollView } from 'react-native';
import { Spacer } from 'react-native-spacer-view';
import { Content, Footer, Header } from './components';

export function MyNeatScreen() {
  return (
    <ScrollView>
      <Spacer safeTop height={16} />
      <Header />
      <Spacer height={16} />
      <Content />
      <Spacer height={16} />
      <Footer />
      <Spacer safeBottom height={24} />
    </ScrollView>
  )
}

License

MIT

---

Made with create-react-native-library