react-native-spacer-view v0.1.3

Installation

yarn add react-native-spacer-view

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.

API

Extends ViewProps. 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.

All props are optional.

Usage

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>
  );
}

Example App

You can run an example implementation of how you might use Spacer in a FlatList by cloning this repo and running the following commands:

cd example
yarn
yarn ios (or yarn android)

License

MIT

Made with create-react-native-library