src/components/onboarding/ArrowButton.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

import React from 'react';
import {
  Image,
  StyleSheet,
  TouchableOpacity,
  TouchableOpacityProps,
} from 'react-native';
import {normalize} from '../../utils';

interface ArrowButtonProps extends TouchableOpacityProps {
  direction: 'forward' | 'backward';
  disabled?: boolean;
  onboarding?: boolean;
}
const ArrowButton: React.FC<ArrowButtonProps> = (props) => {
  const {direction, disabled, onboarding} = props;
  let uri;

  if (direction === 'forward') {
    if (disabled) {
      uri = require('../../assets/images/arrow-forward-disabled.png');
    } else {
      uri = require('../../assets/images/arrow-forward-enabled.png');
    }
  } else {
    if (onboarding) {
      uri = require('../../assets/images/onboarding-backarrow.png');
    } else {
      uri = require('../../assets/images/arrow-backward.png');
    }
  }

  return (
    <TouchableOpacity style={[styles.defautSize, props.style]} {...props}>
      <Image style={styles.image} source={uri} />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  image: {
    width: '100%',
    height: '100%',
  },
  defautSize: {
    width: normalize(29),
    height: normalize(25),
  },
});

export default ArrowButton;