How to use inlineImageLeft in an Expo React Native project

byMR

July 26, 2022

So I was going through the React Native docs on <TextInput />

I saw a property called ‘inlineImageLeft’ and it seemed to add an icon on the left side of the <TextInput />.

But in the docs, its specified that the icon should be stored in /android/app/src/main/res/drawable

But I am using an Expo generated project. Is it possible to use this property on Expo?

Here is the example I tried from the react-native docs but it didn’t work:

<TextInput
    placeholder={`Search for ${currentMode}`}
    style={styles.input}
    value={searchState.search}
    onChangeText={handleChange}
    placeholderTextColor='white'
    autoCorrect={false}
    inlineImageLeft='search_icon' // Does not work
/>

>Solution :

If you are using the managed workflow (which it sounds like you are) then it is not possible to use inlineImageLeft. Even if you were in the bare workflow, this only works for Android.

You will have to build your own component that renders an icon/image inside the text input. Something like this: How can I put an icon inside a TextInput in React Native?