Merge pull request #73 from netguru/BN-1701

[BN-1701] Unnecessary assets removed; Readme cleaned up

.npmignore

@@ -1 +1,7 @@
-readme_*
+readme_*
+node_modules
+yarn-error.log
+.history
+.DS_Store
+assets
+

docs/CONTRIBUTING.md

@@ -0,0 +1,38 @@
+# Contributing
+
+## Running/Development
+1. iOS:
+```bash
+$ react-native run-ios
+```
+
+2. Android:
+```bash
+$ react-native run-android
+```
+
+## Running Tests
+```bash
+$ yarn test
+```
+
+## Creating new Pull Request
+* remember to add appropriate title, ticket, description
+* adding video or screenshot is very beneficial but it's not mandatory
+* additionally please remember to add appropriate Pull Request title from following:
+  * `[RNS-XX] short description` - for normal feature branches
+
+## Code structure
+```
+src/
+├──assets
+├──components
+├──constants
+├──predefinedComponents
+```
+
+## Code Style
+* Make sure you are using linter with linting rules defined in ESLint config (.eslinrc)
+* Name branch according to your ticket following this pattern: RNS-XX-short_description
+* Imports and exports inside `index.js` files eg. `screens/index.js`, `components/index.js` should be alfabetically
+* Style names in `ComponentName.styles.js` should be ordered alfabetically

docs/CUSTOM.md

@@ -0,0 +1,183 @@
+# Custom Header 
+
+## Custom Header Props
+
+| Property                         | Type                | Required   | Default   | Description                                                     | 
+| :------------------------------: | :-----------------: | :--------: | :-------: | :-------------------------------------------------------------: |
+| `background`                     | `node`              | No         | -         | This renders background component                               |
+| `backgroundImage`                | `number`            | No         | -         | This renders background image instead of background component   |
+| `backgroundColor`                | `string`            | Yes        |`""`       | Header background color                                         |
+| `bounces`                        | `bool`              | Yes        | `true`    | Bounces on swiping up                                           |
+| `children`                       | `node`              | No         | -         | This renders all the children inside the component              |
+| `foreground`                     | `node`              | Yes        | -         | This renders foreground component                               |
+| `header`                         | `node`              | Yes        | -         | This renders header component                                   |
+| `headerHeight`                   | `number`            | No         | `92`      | Sets height of folded header                                    |
+| `headerSize`                     | `func`              | No         | -         | Returns size of header for current device                       |
+| `initialPage`                    | `number`            | No         | `0`       | Set initial page of tab bar                                     |
+| `onChangeTab`                    | `func`              | No         | -         | Tab change event                                                |
+| `onEndReached`                   | `func`              | No         | -         | Tab change event                                                |
+| `parallaxHeight`                 | `number`            | No         | `0`       | Sets height of opened header                                    |
+| `snapToEdge`                     | `bool`              | No         | `true`    | Boolean to fire the function for snap To Edge                   |
+| `scrollEvent`                    | `func`              | No         | -         | Returns offset of header to apply custom animations             |
+| `tabs`                           | `arrayOf(string)`   | No         | -         | Array of tab names                                              |
+| `tabTextStyle`                   | `shape({})`         | No         | {}        | Text styles of tab                                              |
+| `tabTextActiveStyle`             | `shape({})`         | No         | {}        | Text styles of active tab                                       |
+| `tabTextContainerStyle`          | `shape({})`         | No         | {}        | Container styles of tab                                         |
+| `tabTextContainerActiveStyle`    | `shape({})`         | No         | {}        | Container styles of active tab                                  |
+| `tabsContainerBackgroundColor`   | `string`            | No         | -         | Background color of tab bar container                           |
+| `tabsWrapperStyle`               | `shape({})`         | No         | {}        | Tabs Wrapper styles                                             |
+
+<h1 id="Usage">Usage</h1>
+
+Here is a basic example of how you can create a custom header
+
+```jsx
+import React from 'react'
+import { Text, View, Animated, StyleSheet } from 'react-native'
+import StickyParallaxHeader from 'react-native-sticky-parallax-header'
+
+const styles = StyleSheet.create({
+  content: {
+    height: 1000,
+    marginTop: 50
+  },
+  foreground: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  message: {
+    color: 'white',
+    fontSize: 40,
+    paddingTop: 24,
+    paddingBottom: 7
+  },
+  headerWrapper: {
+    backgroundColor: 'green',
+    width: '100%',
+    paddingHorizontal: 24,
+    paddingBottom: 25,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  headerTitle: {
+    fontSize: 16,
+    color: 'white',
+    margin: 12
+  },
+  tabsWrapper: {
+    paddingVertical: 12
+  },
+  tabTextContainerStyle: {
+    backgroundColor: 'transparent',
+    borderRadius: 18
+  },
+  tabTextContainerActiveStyle: {
+    backgroundColor: 'lightgreen'
+  },
+  tabText: {
+    fontSize: 16,
+    lineHeight: 20,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    color: 'white'
+  }
+})
+
+class TabScreen extends React.Component {
+  state = {
+    scroll: new Animated.Value(0)
+  }
+
+  componentDidMount() {
+    const { scroll } = this.state
+    scroll.addListener(({ value }) => (this._value = value))
+  }
+
+  renderContent = (label) => (
+    <View style={styles.content}>
+      <Text>{label}</Text>
+    </View>
+  )
+
+  renderForeground = () => {
+    const { scroll } = this.state
+    const titleOpacity = scroll.interpolate({
+      inputRange: [0, 106, 154],
+      outputRange: [1, 1, 0],
+      extrapolate: 'clamp'
+    })
+
+    return (
+      <View style={styles.foreground}>
+        <Animated.View style={{ opacity: titleOpacity }}>
+          <Text style={styles.message}>STICKY HEADER</Text>
+        </Animated.View>
+      </View>
+    )
+  }
+
+  renderHeader = () => {
+    const { scroll } = this.state
+    const opacity = scroll.interpolate({
+      inputRange: [0, 160, 210],
+      outputRange: [0, 0, 1],
+      extrapolate: 'clamp'
+    })
+
+    return (
+      <View style={styles.headerWrapper}>
+        <Animated.View style={{ opacity }}>
+          <Text style={styles.headerTitle}>STICKY HEADER</Text>
+        </Animated.View>
+      </View>
+    )
+  }
+
+  render() {
+    const { scroll } = this.state
+
+    return (
+      <StickyParallaxHeader
+        foreground={this.renderForeground()}
+        header={this.renderHeader()}
+        parallaxHeight={200}
+        headerHeight={90}
+        headerSize={() => {}}
+        onEndReached={() => {}}
+        scrollEvent={Animated.event([{ nativeEvent: { contentOffset: { y: scroll } } }])}
+        tabs={[
+          {
+            title: 'First Tab',
+            content: this.renderContent('FIRST TAB')
+          },
+          {
+            title: 'Second Tab',
+            content: this.renderContent('SECOND TAB')
+          },
+          {
+            title: 'Third Tab',
+            content: this.renderContent('THIRD TAB')
+          },
+          {
+            title: 'Fourth Tab',
+            content: this.renderContent('FOURTH TAB')
+          },
+          {
+            title: 'Fifth Tab',
+            content: this.renderContent('FIFTH TAB')
+          }
+        ]}
+        tabTextStyle={styles.tabText}
+        tabTextContainerStyle={styles.tabTextContainerStyle}
+        tabTextContainerActiveStyle={styles.tabTextContainerActiveStyle}
+        tabsContainerBackgroundColor={'green'}
+        tabsWrapperStyle={styles.tabsWrapper}
+      >
+      </StickyParallaxHeader>
+    )
+  }
+}
+```
+
+## Tips
+In order to nest scrollable component use `scrollEnabled={false}` on it and move all the logic to the header eg. by using `onEndReached` prop.

docs/INSTALLATION.md

@@ -0,0 +1,31 @@
+# Installation for React Native < 0.60.0
+
+Add package version 0.0.59
+```bash
+$ yarn add react-native-sticky-parallax-header@0.0.59
+```
+
+Link fonts
+```bash
+$ react-native link react-native-sticky-parallax-header
+```
+
+In order to make tab bar work, we have to link react-native-nested-scroll-view package
+```bash
+$ react-native link react-native-nested-scroll-view
+```
+
+Depending on the version of React Native you use, the package can be still making issues for you, you have to install patch-package
+```bash
+$ yarn add patch-package postinstall-postinstall
+```
+
+Then you add this script to your scripts:
+```bash
+ "scripts": {
++  "postinstall": "patch-package"
+ }
+```
+
+_After all those steps, just copy a 'patches' folder from this repository and run `yarn` again to apply the patched package.
+You're ready to use the package now._