focus on next rn input

App.js

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Platform,
  Button,
  ScrollView,
  InputAccessoryView,
  KeyboardAvoidingView,
} from 'react-native';
import { HeaderHeightContext } from '@react-navigation/stack';
import TextInputCard from '../components/TextInputCard';

class CreateEligibleItemScreen extends Component {
  render() {
    const inputAccessoryViewIDSize = 'size';
    const inputAccessoryViewIDWeight = 'weight';
    const { route, navigation } = this.props;
    const { barcode = '' } = route.params;

    return (
      <HeaderHeightContext.Consumer>
        {(headerHeight) => (
          <KeyboardAvoidingView
            style={styles.container}
            behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
            keyboardVerticalOffset={headerHeight + 20}
          >
            <ScrollView keyboardDismissMode="interactive" style={{ flex: 1 }}>
              <TextInputCard
                label="Barcode"
                name="barcode"
                value={barcode}
                editable={false}
              />
              <TextInputCard
                label="Name"
                name="name"
                returnKeyType="next"
                onSubmitEditing={() => this.size.focus()}
                blurOnSubmit={false}
              />
              <View
                style={{
                  // flex: 1,
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}
              >
                <View style={{ flex: 1 }}>
                  <TextInputCard
                    label="Size"
                    name="size"
                    keyboardType="numeric"
                    inputAccessoryViewID={inputAccessoryViewIDSize}
                    inputRef={(ref) => (this.size = ref)}
                  />
                </View>
                <View style={{ flex: 1, marginLeft: 20 }}>
                  <TextInputCard
                    label="Unit"
                    name="unit"
                    inputRef={(ref) => (this.unit = ref)}
                    onSubmitEditing={() => this.weight.focus()}
                    returnKeyType="next"
                  />
                </View>
                <View style={{ flex: 1, marginLeft: 20 }}>
                  <TextInputCard
                    label="Weight (g)"
                    name="weignt"
                    keyboardType="numeric"
                    inputAccessoryViewID={inputAccessoryViewIDWeight}
                    inputRef={(ref) => (this.weight = ref)}
                  />
                </View>
              </View>
              <TextInputCard
                label="Pack Format"
                name="pack_format"
                returnKeyType="done"
                inputRef={(ref) => (this.packFormat = ref)}
              />
            </ScrollView>
            <InputAccessoryView nativeID={inputAccessoryViewIDSize} style={{}}>
              <View
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'flex-end',
                  backgroundColor: '#FFFFFF',
                  paddingHorizontal: 10,
                }}
              >
                <Button onPress={() => this.unit.focus()} title="Next" />
              </View>
            </InputAccessoryView>

            <InputAccessoryView
              nativeID={inputAccessoryViewIDWeight}
              style={{}}
            >
              <View
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'flex-end',
                  backgroundColor: '#FFFFFF',
                  paddingHorizontal: 10,
                }}
              >
                <Button onPress={() => this.packFormat.focus()} title="Next" />
              </View>
            </InputAccessoryView>
          </KeyboardAvoidingView>
        )}
      </HeaderHeightContext.Consumer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    paddingHorizontal: 25,
    paddingTop: 20,
  },
});
export default CreateEligibleItemScreen;