AnimatedScanner - adding 'containerStyle' prop (#981)

Author: Inbal-Tish

demo/src/screens/componentScreens/CardScannerScreen.js

@@ -1,68 +1,68 @@
 import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
-import {View, Assets, Constants, Card, Button, Colors, Typography, Text, AnimatedScanner} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Card, Button, Colors, Text, AnimatedScanner} from 'react-native-ui-lib'; //eslint-disable-line
 import posts from '../../data/posts';
 
+
 const featureIcon = require('../../assets/icons/star.png');
 const shareIcon = require('../../assets/icons/share.png');
 
 export default class CardScannerScreen extends Component {
   constructor(props) {
     super(props);
 
-    this.start = this.start.bind(this);
-    this.reset = this.reset.bind(this);
-    this.onBreak = this.onBreak.bind(this);
-
     this.state = {
       progress: 0,
       started: false,
       reset: false,
-      isDone: false,
+      isDone: false
     };
   }
 
-  onBreak({isDone}) {
+  onBreak = ({isDone}) => {
     if (!isDone) {
       this.start();
     } else {
-      this.setState({
-        isDone,
-      });
+      this.setState({isDone});
     }
   }
 
-  start() {
+  start = () => {
     const {progress} = this.state;
+
     this.setState({
       started: true,
       reset: false,
-      progress: progress + 25,
+      progress: progress + 25
     });
   }
 
-  reset() {
+  reset = () => {
     this.setState({
       started: false,
       progress: 0,
       reset: true,
-      isDone: false,
+      isDone: false
     });
   }
 
   render() {
     const {reset} = this.state;
     const post = posts[0];
     const statusColor = post.status === 'Published' ? Colors.green30 : Colors.orange30;
+
     return (
       <View flex useSafeArea>
         <View flex padding-20>
-          <View paddingL-40 height={6} width={'100%'} bg-violet50 marginB-20>
-            <AnimatedScanner backgroundColor={Colors.purple30} progress={98} duration={1600} />
+          <View paddingL-40 marginB-20>
+            <AnimatedScanner
+              backgroundColor={Colors.purple30}
+              progress={98} duration={1600}
+              containerStyle={{backgroundColor: Colors.violet50, height: 6}}
+            />
           </View>
 
           <Card containerStyle={{marginBottom: 15}} onPress={() => console.log('press on a card')}>
-            <Card.Image height={115} imageSource={post.coverImage} />
+            <Card.Image height={115} source={post.coverImage}/>
             <View padding-20>
               <Text text40 color={Colors.dark10}>
                 {post.title}
@@ -80,8 +80,8 @@ export default class CardScannerScreen extends Component {
                 {post.likes} Likes
               </Text>
               <View row spread>
-                <Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature" />
-                <Button text90 link iconSource={shareIcon} label="Share" />
+                <Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature"/>
+                <Button text90 link iconSource={shareIcon} label="Share"/>
               </View>
             </View>
 
@@ -107,8 +107,8 @@ export default class CardScannerScreen extends Component {
         </View>
 
         <View row center padding-20>
-          <Button size="medium" label="Reset" onPress={this.reset} disabled={!this.state.isDone} />
-          <Button marginL-10 size="medium" label="Publish" onPress={this.start} disabled={this.state.started} />
+          <Button size="medium" label="Reset" onPress={this.reset} disabled={!this.state.isDone}/>
+          <Button marginL-10 size="medium" label="Publish" onPress={this.start} disabled={this.state.started}/>
         </View>
       </View>
     );

src/components/animatedScanner/index.js

@@ -1,11 +1,12 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {StyleSheet, Animated} from 'react-native';
+import {ViewPropTypes, StyleSheet, Animated} from 'react-native';
 import {Colors} from '../../style';
 import {BaseComponent} from '../../commons';
 import View from '../../components/view';
 
+
 // TODO: add finisher animation (check icon animation or something)
 /**
  * @description: Scanner component for progress indication
@@ -40,7 +41,11 @@ export default class AnimatedScanner extends BaseComponent {
     /**
      * should hide the scanner line
      */
-    hideScannerLine: PropTypes.bool
+    hideScannerLine: PropTypes.bool,
+    /**
+     * the container style
+     */
+    containerStyle: ViewPropTypes.style
   };
 
   static defaultProps = {
@@ -59,6 +64,7 @@ export default class AnimatedScanner extends BaseComponent {
 
   componentDidMount() {
     const {progress, duration} = this.props;
+
     if (progress > 0) {
       this.animate(progress, duration);
     }
@@ -70,6 +76,7 @@ export default class AnimatedScanner extends BaseComponent {
 
   componentDidUpdate(prevProps) {
     const {progress, duration} = this.props;
+
     if (prevProps.progress !== progress) {
       this.animate(progress, duration);
     }
@@ -81,26 +88,26 @@ export default class AnimatedScanner extends BaseComponent {
 
   animate(toValue, duration) {
     const {animatedProgress} = this.state;
+
     Animated.timing(animatedProgress, {
       toValue,
       duration,
       useNativeDriver: false
     }).start(({finished}) => {
       if (finished) {
         const isDone = toValue >= 100;
-        this.setState({
-          isDone
-        });
+        this.setState({isDone});
         _.invoke(this.props, 'onBreakpoint', {progress: toValue, isDone});
       }
     });
   }
 
   render() {
-    const {opacity, backgroundColor, hideScannerLine, style} = this.props;
+    const {opacity, backgroundColor, hideScannerLine, style, containerStyle} = this.props;
     const {isDone, animatedProgress} = this.state;
+
     return (
-      <View style={{...StyleSheet.absoluteFillObject}}>
+      <View style={[{...StyleSheet.absoluteFillObject}, containerStyle]}>
         <Animated.View
           style={[
             this.styles.container,