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

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:

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

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,
  },
});

CodePudding user response：

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