0

I would like to add an image to TextInput. Like Android's Spannable and IOS's NSAttributedString

<Text>
<Text> Test </ Text>
<Image source = {myImage} />
</Text>

I get the results I want.

However, it was not available in TextInput. If add <Image> or <Text> to a TextInput [Object object] appears.

How can I add this?

addImage = () => {
  const { content } = this.state;
  this.setState({
    content: content + <Image source={this.myImage} />
  })
}

<TextInput
  ref={(c) => { this.input = c; }}
  multiline
  style={[styles.inputStyle, { height: inputHeight }]}
  underlineColorAndroid="transparent"
  placeholder="PlaceHolder"
  placeholderTextColor="#BCBCBC"
  value={content}
  onChangeText={text => changeContent(text)}
  onContentSizeChange={event => changeInputHeight(event)}
 />
 <Button onPress={() => addImage()} />

same result

<TextInput
      ref={(c) => { this.input = c; }}
      multiline
      style={[styles.inputStyle, { height: inputHeight }]}
      underlineColorAndroid="transparent"
      placeholder="PlaceHolder"
      placeholderTextColor="#BCBCBC"
      value={content}
      onChangeText={text => changeContent(text)}
      onContentSizeChange={event => changeInputHeight(event)}
     >
       <Text>
         {content}
       </Text>
     </TextInput
     <Button onPress={() => addImage()} />

What I want is to say the image that goes between contents like emoji. It is not an image that is fixed to the left or right.

this is React Native Bug https://github.com/facebook/react-native/issues/18566

oijafoijf asnjksdjn
  • 1,115
  • 12
  • 35

2 Answers2

0

You could wrap your TextInput in a View with an Image that has absolute positioning:

<View style={{ flex: 1 }}>
  <Image
    source={this.myImage}
    style={{
      position: 'absolute',
      width: inputHeight,
      height: inputHeight,
      top: 0,
      right: 0,
    }}
  />
  <TextInput
    ref={(c) => { this.input = c; }}
    multiline
    style={[styles.inputStyle, { height: inputHeight }]}
    underlineColorAndroid="transparent"
    placeholder="PlaceHolder"
    placeholderTextColor="#BCBCBC"
    value={content}
    onChangeText={text => changeContent(text)}
    onContentSizeChange={event => changeInputHeight(event)}
   />
 </View>
 <Button onPress={() => addImage()} />
Danny Buonocore
  • 3,731
  • 3
  • 24
  • 46
0

Here is a code extract showing how to add an image icon:

       <View style={styles.SectionStyle}>
      <Image
        //We are showing the Image from online
        source={{uri:'https://aboutreact.com/wp-content/uploads/2018/08/phone.png',}}

        //You can also show the image from you project directory like below
        //source={require('./Images/phone.png')}

        //Image Style
        style={styles.ImageStyle}
      />

      <TextInput
        style={{ flex: 1 }}
        placeholder="Enter Your Mobile No Here"
        underlineColorAndroid="transparent"
      />
    </View>
Mwongera808
  • 880
  • 11
  • 16