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 shoaib.ahmed@emumba.com

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