React native TextInput shifting other element outside of screen

Question

Here, I have a View component inside of which there is a TextInput and IconButton adjacent to each other. Where the TextInput takes the max width available because of flex-grow: 1.

The problem is when the text inside of TextInput has more increases to 100% width or more than that the TextInput gets bigger and shifts the IconButton outside of screen.

I'm using react-native-paper.

I'm providing two images for reference

<View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', marginVertical: 2 }}>
        <TextInput
          value={msg.text}
          onChangeText={(value) => setMsg({ ...msg, text: value })}
          mode='outlined'
          placeholder='Message'
          outlineStyle={{ borderRadius: 30, borderWidth: 0 }}
          style={{ flexGrow: 1, marginBottom: 8 }}
          right={<TextInput.Icon icon="camera" />}
        />

        <IconButton
          icon="send"
          mode='contained'
          iconColor='white'
          containerColor='#167BD1'
          size={24}
          onPress={() => console.log('Pressed')}
        />
</View>

score 1 · Accepted Answer · answered May 20 '23 at 16:56

Code:

import { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput, Button } from 'react-native-paper';

export default function App() {
  const [message, setMessage] = useState('');

  const handleButtonPress = () => {
    alert('Message sent: ' + message);
    setMessage('');
  };

  const handleChangeText = (text) => {
    setMessage(text)
  }

  return (
    <View style={styles.container}>
      <TextInput
        label="Message"
        value={message}
        onChangeText={handleChangeText}
        style={styles.textInput}
      />
      <Button mode="contained" onPress={handleButtonPress}></Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
  },
  textInput: {
    flex: 1,
    marginRight: 8,
  },
});

Online playground: https://snack.expo.dev/@vasylnahuliak/76296165

React native TextInput shifting other element outside of screen

1 Answers1