React Native: "Auto" Width for Text Node

React Native: Auto width for text node

You can achieve this if element will have alignSelf property, like:

alignSelf: 'flex-start'

or

alignSelf: 'center'

How to make a Text take up the entire width with React Native?

make sure the parent has flex style and set the style alignItems : 'center'

How to make an automatic increase in the width of the text input field depending on the number of lines?

onLayout={(event) => {
                    if (textInputHeight === 0) {
                      setTextInputHeight(event.nativeEvent.layout.height);
                    }
                  }}
                  onContentSizeChange={(event) => {
                    setTextInputHeight(event.nativeEvent.contentSize.height);
                  }}

Centering TextInput with dynamic width in React Native

Sorry kept you waiting, fininally got time to finish this. Use View,Image and Text to fake TextInput.

• 1st step: format text when changed

you still need a TextInput.
emoji in text might look like :fire: or /code>, I choose the later.
when text changes use regexp replace all emoji expressions to emoji character.
then you move cursor it will not stop inside an emoji

• 2nd setp: faked TextInput

it should look like

<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>  <Image style={styles.img} source={{uri: some_emoji}} />  <Text>    {"s"}  </Text>  <Text>    {"s"}  </Text>  <MyCursor /></View>

React native layout fixed width and stretch remaining space

Try this:

  <View style={{flex: 1, flexDirection: 'row'}}>
    <View style={{
      backgroundColor: 'blue',
      flexGrow: 1,
    }}>
      <Text>Fluid</Text>
    </View>
    <View style={{
      backgroundColor: 'red',
      width: 100,
    }}>
      <Text>Fixed</Text>        
    </View>
  </View>

---

Related Topics

Why Does Firefox Treat Helvetica Differently from Chrome

Twitter Bootstrap Radio/Checkbox - How to Put Glyphicon

Change The Color Profile of a Page in CSS

CSS Selector for Custom Qt Class

When to Use: Before or: After

Bootstrap Table No New Line

Selecting Children Elements But Not Grandchildren

CSS Selector If Exist Adjacent Sibling

Table Overflows Parent Div When Td Content Is Too Wide

Why Am I Unable to Apply a Border to an Angular Mat-Table Row

Working with CSS Floats in HTML2Pdf

How to Select CSS Id's with Numbers in Them

How Do Browsers Parse/Render CSS

Text Is Wrapping Under Bullet in CSS List

Diamond Menu Items Using CSS and Svg

100% Height Div and Overflow:Auto

Sass Is Concatenating Instead of Adding

Horizontally Center <P> Within a Div While Keeping The Text Left-Aligned