pin ajaib

Pin.js

import React, { PureComponent } from 'react'
import { Text, View, FlatList, TouchableOpacity } from 'react-native'

const Button = [
  { name: '1', icon: '' },
  { name: '2', icon: '' },
  { name: '3', icon: '' },
  { name: '4', icon: '' },
  { name: '5', icon: '' },
  { name: '6', icon: '' },
  { name: '7', icon: '' },
  { name: '8', icon: '' },
  { name: '9', icon: '' },
  { name: 'sidik', icon: 'finger' },
  { name: '0', icon: '' },
  { name: 'delete', icon: 'delete' }
]

const dot = ['', '', '', '', '', '']

class PinAjaib extends PureComponent {
  state={
    pin: ''
  }

  inputPin (item) {
    const { pin } = this.state
    switch (item.name) {
      case 'sidik':
        break
      case 'delete':
        const delPin = pin.slice(0, pin.length - 1)
        return this.setState({ pin: delPin })
      default:
        if (pin.length < 6) return this.setState({ pin: `${pin}${item.name}` })
        break
    }
  }

  render () {
    const { pin } = this.state
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 0.5 }}>
          <View style={{ alignItems: 'center', backgroundColor: 'red', height: '100%' }}>
            <Text>Masukan Pin</Text>
            <FlatList
              data={dot}
              horizontal
              extraData={this.state}
              keyExtractor={(item, index) => { return index.toLocaleString() }}
              renderItem={({ index }) => (<View style={{ height: 30, width: 30, borderRadius: 50, backgroundColor: pin.length <= index ? '#000' : '#fff', margin: 5 }} />)}
            />
            <Text>{pin}</Text>
            <Text>Lupa pin ?</Text>
            <Text>Gunakan Password</Text>
          </View>
        </View>
        <View style={{ backgroundColor: 'grey', flex: 1 }}>
          <FlatList
            data={Button}
            keyExtractor={(item, index) => { return index.toLocaleString() }}
            numColumns={3}
            contentContainerStyle={{ justifyContent: 'space-between' }}
            renderItem={({ item }) => (
              <TouchableOpacity onPress={() => this.inputPin(item)} style={{ flex: 1, alignItems: 'center', padding: 30, borderWidth: 1 }}>
                <Text>{item.name}</Text>
              </TouchableOpacity>
            )}
          />
        </View>
      </View>
    )
  }
}

export default PinAjaib