CODEWITHSUNDEEP
cssreact-nativeflexbox
Wilson Chew
Wilson Chew

Reputation: 81

How do I place a TextInput between two Text components and have it wrap nicely?

I'm currently trying to place a TextInput between two Text components but it's not wrapping very nicely. This is what it looks like now where the text gets wrapped above the TextInput instead of being on the same line:

enter image description here

I would like to achieve something like the picture below here, where the Text wraps onto the same line as the TextInput:

enter image description here

Here's my code:

import * as React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row_container}>  
        
        <Text>I have not been given notice of unpaid leave for a period of</Text>
        
        <View style={{width: 50, height: 30}}>
          <TextInput style={styles.text_input}/>
        </View>
        
        <Text>days on the date of this application. </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',    
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  row_container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  text_input: {
    backgroundColor: 'white',
    borderColor: 'grey',
    borderWidth: 1,
  },
});

Here's the snack link if it helps

Upvotes: 1

Views: 82

Answers (2)

SalsaJJ
SalsaJJ

Reputation: 374

You can just add the TextInput inside the Text like so:

<Text>
  {'I have not been given notice of unpaid leave for a period of '}
  <View style={{ width: 50, height: 10 }}>
    <TextInput style={styles.text_input} />
  </View>
  {' days on the date of this application.'}
</Text>

The text inside {''} is to add extra space before and after the text input.
Also changed the View's height to avoid it taking extra space if the following text wraps below.

spacing

Edit:
If you want to change height of TextInput you might need a bit hackish solution since display: 'inline' isn't supported in react native (only on web), look at the following where I add lineHeight: 25 on Text and marginBottom: -10 in TextInput:

  <Text style={{lineHeight: 25}}>
  {'I have not been given notice of unpaid leave for a period of '}
  <View>
    <TextInput style={{ backgroundColor: 'white', height: 30, width:50, marginBottom: -10 }} />
  </View>
  {' days on the date of this application. Lorem ipsum dotem done fou'}
</Text>

enter image description here

Upvotes: 1

Todor Markov
Todor Markov

Reputation: 517

Seems css structure is not ok...

    import * as React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row_container}>  
        
        <Text>I have not been given notice of unpaid leave for a period of</Text>
        
        <View style={{display:"inline"}}>
          <TextInput style={styles.text_input}/>
        </View>
        
        <Text>days on the date of this application</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  row_container: {
   display:"inline"
  },
  text_input: {
    backgroundColor: 'white',
     width: 50,
     height: 30,
     marginLeft:"10px",
       marginRight:"10px"
  },
});

https://snack.expo.dev/mh8RoCqYQ

Upvotes: 0

Related Questions