CODEWITHSUNDEEP
react-native
lalit jadhav
lalit jadhav

Reputation: 330

React native inlineImageLeft value

I want to know the proper value for inlineImageLeft prop. in react native <TextInput> component. Can any one help me?

I copied the image in drawable folder.

<TextInput
  autoCapitalize= {'words'}
  autoFocus={true}
  caretHidden = {false}
  keyboardType={'url'}
  defaultValue={'Hello!'}
  placeholder={'hello world'}
  placeholderTextColor= {'red'}
  returnKeyType = {'send'}
  secureTextEntry={true}
  selectTextOnFocus={false}
  inlineImageLeft="user"
/>

Upvotes: 2

Views: 7332

Answers (4)

yusuf
yusuf

Reputation: 1

I also can't see the icon inside TextInput. Then, I try to uninstall and reinstall App.

I got the build failed error:

  • What went wrong: Execution failed for task ':app:mergeDebugResources'.

    C:\Users\yusuf\git\App3\android\app\src\main\res\drawable\search.ico: Error: The file name must end with .xml or .png

Then, I changed my file type from .ico to .png

Image should be in the "drawable" folder.

<TextInput
    style={styles.modalInput}
    autoFocus ={true}
    inlineImageLeft='search'
    inlineImagePadding={5}
    placeHolder ="Search Product"
    placeholderTextColor="white"
    onChangeText={ (text) => this.setState({text})}
    value = {this.state.text}
    />

With the above change, it works now.

Upvotes: 0

Paras Watts
Paras Watts

Reputation: 2665

Create Drawable folder inside android res directory . Copy the image say image.png in that folder. Then use in TextInput component.

inlineImageLeft="image"

If image is not showing just uninstall the previous app and rerun the project.

Upvotes: 2

Vahid Boreiri
Vahid Boreiri

Reputation: 3438

You can find an example in UIExplorer in react-native. In this example the inlineImageLeft prop used this way:

<TextInput inlineImageLeft="ic_menu_black_24dp"/>

Example is in:

react-native/Examples/UIExplorer/js/TextInputExample.android.js

It seems path should be relative to ./android/app/src/main/res/drawable/. Any other path does not work. Also image does not scale.

Upvotes: 0

EthanBar
EthanBar

Reputation: 705

From the React Native github page:

<TextInput
    inlineImageLeft="ic_menu_black_24dp"
    placeholder="This has drawableLeft set"
    style={styles.singleLine}
/>

Upvotes: 0

Related Questions