1
\$\begingroup\$

Here is the React Native code to optimize: it's an OTP form. I want it to be as small as possible.

/* eslint-disable react-native/no-inline-styles */
import React, {Component, createRef} from 'react';
import {Input, Button} from 'react-native-ui-kitten';
import {View, StyleSheet, Image, Dimensions, Text} from 'react-native';
import {SvgUri} from 'react-native-svg';
import {styles} from '../components/Inputs';
import {fill} from '../constants/Icons';

class ConfirmScreen extends Component {
  input1 = createRef();
  input2 = createRef();
  input3 = createRef();
  input4 = createRef();
  state = {
    phoneNumber: '',
  };

  buttonIcon = style => {
    return <SvgUri style={{fill: '#fff'}} uri={fill.forward} />;
  };

  handleTextChange1 = value => {
    this.setState({phoneNumber: value});
    this.input2.current.focus();
  };

  handleTextChange2 = value => {
    this.setState({phoneNumber: value});
    this.input3.current.focus();
  };

  handleTextChange3 = value => {
    this.setState({phoneNumber: value});
    this.input4.current.focus();
  };

  handleTextChange4 = value => {
    this.setState({phoneNumber: value});
  };

  render() {
    return (
      <>
        <View style={styles.container}>
          <View style={styles.card}>
            <Image
              style={{
                width: 60,
                height: 60,
                transform: [{translateX: getWidth(100) / 2.6}],
                marginTop: 30,
                marginBottom: 10,
              }}
              source={require('../assets/images/icon.png')}
            />
            <View>
              <Text style={styles.header1}>Are you new to miles?</Text>
            </View>

            <View>
              <Text style={styles.header2}>
                Enter the 6 digit sent to your mobile number.
              </Text>
              <View style={{marginBottom: 10}}>
                <Text style={{color: '#fe4c5a', fontWeight: 'bold'}}>
                  0754669999
                </Text>
              </View>
            </View>
            <View>
              <Input
                style={styless.input}
                onChangeText={this.handleTextChange1}
                keyboardType="number-pad"
              />
              <Input
                style={[styless.input, styless.secondInput]}
                ref={this.input2}
                onChangeText={this.handleTextChange2}
                keyboardType="number-pad"
              />
              <Input
                style={[styless.input, styless.thirdInput]}
                ref={this.input3}
                onChangeText={this.handleTextChange3}
                keyboardType="number-pad"
              />
              <Input
                style={[styless.input, styless.fourthInput]}
                ref={this.input4}
                onChangeText={this.handleTextChange4}
                keyboardType="number-pad"
              />
            </View>
            <View style={{position: 'relative', bottom: 150}}>
              <Text
                onPress={this.socialScreenOrPassword}
                style={styles.socialLink}>
                Resend code in:{' '}
                <Text style={{color: '#000', fontWeight: 'bold'}}>00:59</Text>
              </Text>
              <Button
                style={styles.buttonContinue}
                size="medium"
                icon={this.buttonIcon}
              />
            </View>
          </View>
        </View>
      </>
    );
  }
}

ConfirmScreen.navigationOptions = {
  header: null,
};

const getWidth = percentage => {
  if (Dimensions.get('window').width > Dimensions.get('window').height) {
    return (Dimensions.get('window').height * percentage) / 100;
  }
  return (Dimensions.get('window').width * percentage) / 100;
};

const styless = StyleSheet.create({
  input: {
    borderColor: '#dddddd',
    backgroundColor: '#fff',
    width: 80,
    textAlign: 'center',
    position: 'relative',
  },
  secondInput: {
    bottom: 52,
    left: 88,
  },
  thirdInput: {
    bottom: 104,
    left: 176,
  },
  fourthInput: {
    bottom: 156,
    left: 263.5,
  },
});

export default ConfirmScreen
\$\endgroup\$
  • 5
    \$\begingroup\$ The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How do I ask a good question? for examples, and revise the title accordingly. \$\endgroup\$ – Martin R Oct 7 '19 at 7:10
  • 1
    \$\begingroup\$ Please see How to get the best value out of Code Review: Asking Questions for guidance on writing good question titles. \$\endgroup\$ – BCdotWEB Oct 7 '19 at 9:26