Skip to content
Advertisement

How to use inlineImageLeft in an Expo React Native project

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
/>

Advertisement

Answer

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?

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement