Combining two flex elements with auto-growing capabilities in react-native

Question

Combining two flex elements with auto-growing capabilities in react-native

I am excited about using react-native to have a TextInput aligned with a MaterialIcons.Button in the same line. I have been trying to center these elements horizontally but haven't been successful with the code below:

import React from 'react';
import {
  StyleSheet, TextInput, View,
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const WordInput = () => {
  return (
    <View style={styles.container}>
      <View style={styles.textInputContainer}>
        <TextInput
          textAlign="left"
        />
      </View>
      
      <View style={styles.arrowButtonContainer}>
        <MaterialIcons.Button
          name="arrow-forward-ios"
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flex: 1,
  },
  textInputContainer: {
    flex: 1,
    alignItems: 'flex-end',
    justifyContent: 'center',
  },
  arrowButtonContainer: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
  },
});

You can view the code on expo snack link.

The issue I'm facing is that when I type in the TextInput, the Button does not move at all. I want it to shift dynamically to the right as the TextInput's width grows while keeping everything horizontally centered.

If anyone has any suggestions on how to proceed, I would greatly appreciate it!

Thank you!

css react-native flexbox

Answer 1

Answer №1

Unfortunately, the <TextInput> component does not have built-in support for auto-growing behavior. However, you can create this functionality yourself by utilizing a hidden <Text> element that mirrors the styling of your <TextInput>. By rendering the input value to the hidden <Text> element, you can measure its layout and apply the width to the <TextInput> component.

import { useState } from 'react';
import { StyleSheet, TextInput, View, Dimensions, Text } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

export default function App() {
  const [value, setValue] = useState();
  const [containerWidth, setContainerWidth] = useState(
    Dimensions.get('window').width
  );
  const [textWidth, setTextWidth] = useState(0);
  const [buttonWidth, setButtonWidth] = useState(0);

  const inputWidth = Math.min(textWidth, containerWidth - buttonWidth);

  return (
    <View style={styles.root}>
      <View
        style={styles.inner}
        onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>
        <Text
          style={styles.hiddenText}
          onLayout={(e) => setTextWidth(e.nativeEvent.layout.width)}
          numberOfLines={1}
          accessibilityElementsHidden
          importantForAccessibility="no-hide-decendants">
          {value}
        </Text>
        <TextInput
          textAlign="left"
          placeholder="enter text"
          style={[styles.input, { width: inputWidth }]}
          onChangeText={setValue}
        />
        <View onLayout={(e) => setButtonWidth(e.nativeEvent.layout.width)}>
          <MaterialIcons.Button name="arrow-forward-ios" />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    justifyContent: 'center',
  },
  inner: {
    flexDirection: 'row',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: 'red',
  },
  input: {
    borderWidth: 1,
    borderColor: 'green',
    minWidth: 100,
  },
  hiddenText: {
    position: 'absolute',
    top: 0,
    left: 0,
    opacity: 0,
  },
});

You can view a demonstration of this implementation in this expo snack example.

Answer 2

Unfortunately, the <TextInput> component does not have built-in support for auto-growing behavior. However, you can create this functionality yourself by utilizing a hidden <Text> element that mirrors the styling of your <TextInput>. By rendering the input value to the hidden <Text> element, you can measure its layout and apply the width to the <TextInput> component.

import { useState } from 'react';
import { StyleSheet, TextInput, View, Dimensions, Text } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

export default function App() {
  const [value, setValue] = useState();
  const [containerWidth, setContainerWidth] = useState(
    Dimensions.get('window').width
  );
  const [textWidth, setTextWidth] = useState(0);
  const [buttonWidth, setButtonWidth] = useState(0);

  const inputWidth = Math.min(textWidth, containerWidth - buttonWidth);

  return (
    <View style={styles.root}>
      <View
        style={styles.inner}
        onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>
        <Text
          style={styles.hiddenText}
          onLayout={(e) => setTextWidth(e.nativeEvent.layout.width)}
          numberOfLines={1}
          accessibilityElementsHidden
          importantForAccessibility="no-hide-decendants">
          {value}
        </Text>
        <TextInput
          textAlign="left"
          placeholder="enter text"
          style={[styles.input, { width: inputWidth }]}
          onChangeText={setValue}
        />
        <View onLayout={(e) => setButtonWidth(e.nativeEvent.layout.width)}>
          <MaterialIcons.Button name="arrow-forward-ios" />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    justifyContent: 'center',
  },
  inner: {
    flexDirection: 'row',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: 'red',
  },
  input: {
    borderWidth: 1,
    borderColor: 'green',
    minWidth: 100,
  },
  hiddenText: {
    position: 'absolute',
    top: 0,
    left: 0,
    opacity: 0,
  },
});

You can view a demonstration of this implementation in this expo snack example.

Combining two flex elements with auto-growing capabilities in react-native

Answer №1

Similar questions

Using Javascript to retrieve form data from a separate file

The blur() function does not function properly on IOS devices such as iPad and iPhone

How is the CSS selector affected by the presence of an asterisk (*)?

Erase embedded frame from a Google Sheets document

3D Animation for All Browsers

Interactive Map Using HTML5, CSS, and JQuery

Customize the appearance of semantic-ui-react components with hover effects

Setting up Scss and purgeCss configuration in Next.js custom postCSS configuration: A step-by-step guide

Find a solution for displaying custom product badges

Not all Angular Material2 styles are being fully applied

Adjust the width of columns using HTML and CSS

Just a snippet of a webpage shown

Is it best to stick with a static page size, or

Padding located within a div tag

Is it possible for CSS div to have a height of 100% when placed within fluid parents

Innovative Inter-Browser Link with a Distinct Shape

The 3D Circle Flip feature on a certain webpage designed by Nordstrom is experiencing issues when viewed on Firefox

Finding unique data stored in separate JSON files and loading them individually may require using different methods for

When you hover over them, chips transform their color

Traverse div elements using jQuery and showcase the text within them