React Native Screen Wrapper

Wrap all your pages inside react-native-screen-wrapper to avoid repetition of commonly used components for every page.

Installation

Install with npm

  npm install react-native-screen-wrapper

OR

Install with yarn

  yarn add react-native-screen-wrapper

Blog

Here is a blog post explaining the usage of React-Native-Screen-Wrapper.

Usage

...
import { ScreenWrapper } from 'react-native-screen-wrapper'

const App = () => {
  const arr = new Array(100).fill(0)
  return <ScreenWrapper >
    <View style={{ flex: 1 }} >
       {/* Your Content here*/}
    </View>
  </ScreenWrapper>
}
export default App;

With Scroll Enabled

...
import { ScreenWrapper } from 'react-native-screen-wrapper'

const App = () => {
  const arr = new Array(100).fill(0)
  return <ScreenWrapper scrollType='scroll'>
    <View style={{ flex: 1 }} >
       {/* Your Content here*/}
    </View>
  </ScreenWrapper>
}
export default App;

With Keyboard Aware Scroll Enabled

...
import { ScreenWrapper } from 'react-native-screen-wrapper'

const App = () => {
  const arr = new Array(100).fill(0)
  return <ScreenWrapper scrollType='keyboard'>
    <View style={{ flex: 1 }} >
       {/* Your Content here*/}
    </View>
  </ScreenWrapper>
}
export default App;

With customized Status Bar Styles

...
import { ScreenWrapper } from 'react-native-screen-wrapper'

const App = () => {
  const arr = new Array(100).fill(0)
  return <ScreenWrapper statusBarColor='white' barStyle='dark-content'>
    <View style={{ flex: 1 }} >
       {/* Your Content here*/}
    </View>
  </ScreenWrapper>
}
export default App;

Props

All props are optional. | Prop Name | Type | Default | Description | | :-------- | :------- | :------- | :-------------------------------- | | barStyle | string | light-content | light-content OR dark-content OR default| | statusBarColor | string | #000 | Status bar background color Note: This will not be effective if using default Header from React Navigation| | translucent | boolean | false | Pass this prop to make status bar translucent| | bottomSafeAreaColor | string | undefined | IOS Only Bottom area (Outside SafeArea) background color Note: This will not be effective if using Bottom Tab Navigation from React Navigation| | scrollType | string | none | none OR scroll none OR keyboard| | scrollViewProps | object | null | Pass props to Scroll View|

Author

• @shoaib_ahmed

Contributors

• @m_muheet
• @ahmad_hasham
• @saim_nasser

Support

For support, email [email protected]

Buy me a Coffee

Use this link to support the author.

Buy Me a Coffee

Used By

This project is used by the following companies:

• Develo IT Solutions
• Mypro Tech