fix: add custom scroll view with custom scroll bar (#511)

* fix: add custom scroll view with custom scroll bar

* add copy right info for new file

src/components/CustomScrollView.js

+// Copyright 2015-2019 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+'use strict';
+
+import React from 'react';
+import { Animated, ScrollView, StyleSheet, View } from 'react-native';
+
+import colors from '../colors';
+
+export default class CustomScrollview extends React.PureComponent {
+	state = {
+		indicator: new Animated.Value(0),
+		visible: false,
+		visibleHeight: 0,
+		wholeHeight: 1
+	};
+
+	render() {
+		const indicatorSize =
+			this.state.wholeHeight > this.state.visibleHeight
+				? (this.state.visibleHeight * this.state.visibleHeight) /
+				  this.state.wholeHeight
+				: this.state.visibleHeight;
+
+		const difference =
+			this.state.visibleHeight > indicatorSize
+				? this.state.visibleHeight - indicatorSize
+				: 1;
+
+		return (
+			<View style={this.props.containerStyle}>
+				<ScrollView
+					showsVerticalScrollIndicator={false}
+					onContentSizeChange={(width, height) => {
+						this.setState({ wholeHeight: height });
+					}}
+					onLayout={({
+						nativeEvent: {
+							layout: { height }
+						}
+					}) => this.setState({ visibleHeight: height })}
+					scrollEventThrottle={16}
+					onScroll={Animated.event([
+						{ nativeEvent: { contentOffset: { y: this.state.indicator } } }
+					])}
+					{...this.props}
+				>
+					{this.props.children}
+				</ScrollView>
+				<Animated.View
+					style={[
+						styles.indicator,
+						{
+							height: indicatorSize,
+							transform: [
+								{
+									translateY: Animated.multiply(
+										this.state.indicator,
+										this.state.visibleHeight / this.state.wholeHeight
+									).interpolate({
+										extrapolate: 'clamp',
+										inputRange: [0, difference],
+										outputRange: [0, difference]
+									})
+								}
+							]
+						}
+					]}
+				/>
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	indicator: {
+		backgroundColor: colors.bg_text_sec,
+		borderRadius: 5,
+		position: 'absolute',
+		right: 0,
+		width: 5
+	}
+});

src/screens/About.js

@@ -17,14 +17,18 @@
 'use strict';
 
 import React from 'react';
-import { Linking, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Linking, StyleSheet, Text, View } from 'react-native';
 import colors from '../colors';
 import fonts from '../fonts';
+import CustomScrollview from '../components/CustomScrollView';
 
 export default class About extends React.PureComponent {
 	render() {
 		return (
-			<ScrollView style={styles.body} contentContainerStyle={{ padding: 20 }}>
+			<CustomScrollview
+				containerStyle={styles.body}
+				contentContainerStyle={{ padding: 20 }}
+			>
 				<Text style={styles.title}>PARITY SIGNER</Text>
 				<View>
 					<Text style={styles.text}>
@@ -81,7 +85,7 @@ export default class About extends React.PureComponent {
 						.
 					</Text>
 				</View>
-			</ScrollView>
+			</CustomScrollview>
 		);
 	}
 }

src/screens/PrivacyPolicy.js

@@ -17,18 +17,19 @@
 'use strict';
 
 import React from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import privacyPolicy from '../../docs/privacy-policy.md';
 import colors from '../colors';
 import Markdown from '../components/Markdown';
+import CustomScrollview from '../components/CustomScrollView';
 
 export default class PrivacyPolicy extends React.PureComponent {
 	render() {
 		return (
 			<View style={styles.body}>
-				<ScrollView contentContainerStyle={{ paddingHorizontal: 16 }}>
+				<CustomScrollview contentContainerStyle={{ paddingHorizontal: 16 }}>
 					<Markdown>{privacyPolicy}</Markdown>
-				</ScrollView>
+				</CustomScrollview>
 			</View>
 		);
 	}

src/screens/TermsAndConditions.js

@@ -17,7 +17,7 @@
 'use strict';
 
 import React from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import toc from '../../docs/terms-and-conditions.md';
 import colors from '../colors';
@@ -27,6 +27,7 @@ import Markdown from '../components/Markdown';
 import TouchableItem from '../components/TouchableItem';
 import { saveToCAndPPConfirmation } from '../util/db';
 import testIDs from '../../e2e/testIDs';
+import CustomScrollview from '../components/CustomScrollView';
 
 export default class TermsAndConditions extends React.PureComponent {
 	state = {
@@ -46,12 +47,12 @@ export default class TermsAndConditions extends React.PureComponent {
 
 		return (
 			<View style={styles.body} testID={testIDs.TacScreen.tacView}>
-				<ScrollView
-					style={styles.scrollView}
+				<CustomScrollview
+					containerStyle={styles.scrollView}
 					contentContainerStyle={{ paddingHorizontal: 16 }}
 				>
 					<Markdown>{toc}</Markdown>
-				</ScrollView>
+				</CustomScrollview>
 
 				{!disableButtons && (
 					<View>