https://github.com/mrnkr/react-native-expo-headers
A compilation of header components for React Native with Expo
https://github.com/mrnkr/react-native-expo-headers
headers human-interface-design material-design mobile-app plugin react react-native
Last synced: 3 months ago
JSON representation
A compilation of header components for React Native with Expo
- Host: GitHub
- URL: https://github.com/mrnkr/react-native-expo-headers
- Owner: mrnkr
- Created: 2018-03-28T18:30:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-27T19:29:51.000Z (about 8 years ago)
- Last Synced: 2025-01-24T04:43:31.874Z (over 1 year ago)
- Topics: headers, human-interface-design, material-design, mobile-app, plugin, react, react-native
- Language: JavaScript
- Size: 28.3 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Headers
## Nice looking headers for React Native
### Intro
Just a compilation of header components I have made since I started working on React Native :)
### Quick Start
```javascript
const { scrollY } = this.state;
{Platform.OS === "ios" ?
,
onPress: () => console.log("Pressed the left button!")
}}
rightButton={{
icon: ,
onPress: () => console.log("Pressed the right button!")
}} /> : null}
{Platform.OS === "ios" ?
,
onPress: () => console.log("Pressed the left button!")
}}
rightButton={{
icon: ,
onPress: () => console.log("Pressed the right button!")
}} /> : null}
{Platform.OS === 'android' ?
, onPress: () => console.log('Menu') }}
rightButtons={[{ icon: , onPress: () => console.log("Filter"), showAsAction: 'ifRoom' },
{ icon: , onPress: () => console.log("Share!"), showAsAction: 'ifRoom' },
{ icon: , title: 'Give the man a beer!', onPress: () => console.log('Sure! He will get his beer!'), showAsAction: 'never' },
{ icon: , title: 'Bowtie?', onPress: () => console.log('Bowties are cool!'), showAsAction: 'never' }]} /> : null}
{Platform.OS === "android" ?
, onPress: () => console.log('Menu') }}
rightButtons={[{ icon: , onPress: () => console.log("Filter"), showAsAction: 'ifRoom' },
{ icon: , onPress: () => console.log("Share!"), showAsAction: 'ifRoom' },
{ icon: , title: 'Give the man a beer!', onPress: () => console.log('Sure! He will get his beer!'), showAsAction: 'never' },
{ icon: , title: 'Bowtie?', onPress: () => console.log('Bowties are cool!'), showAsAction: 'never' }]} /> : null}
```
For `zIndex` is not supported on Android, always position Android headers below all the rest of the Component code in order for it to show on top of it all.
Also, remember all these are absolutely positioned, just in case.