how to style an icon inside input in React-Native

Question

import React from 'react';
import {
  View,
  Image
} from 'react-native';
//import { useNavigation }from '@react-navigation/native'
import {
  Octicons,
  Fontisto
} from '@expo/vector-icons'

import logoImg from '../../asserts/logo.png'

import styles from './style'
import {
  TextInput
} from 'react-native-gesture-handler';
export default function Welcome() {
  return ( <
    View style = {
      styles.container
    } >
    <
    View style = {
      styles.header
    } >
    <
    Image source = {
      logoImg
    }
    /> < /
    View >

    <
    View style = {
      styles.busca
    } >
    <
    Octicons name = 'three-bars'
    style = {
      styles.bars
    }
    /> <
    TextInput style = {
      styles.input
    } > Buscar <
    Fontisto name = 'mic'
    style = {
      styles.mic
    }
    /> < /
    TextInput > <
    /View>

    <
    /View>
  );
}

import {
  StyleSheet
}

from 'react-native' export default StyleSheet.create( {
  container: {
    backgroundColor: '#fff', flex: 1,
  }
  , header: {
    marginTop: 30, marginBottom:30,
  }
  , busca: {
    flexDirection: 'row', justifyContent:'space-between'
  }
  , bars: {
    fontSize: 40, color:'grey', marginTop:2, marginLeft:15, marginRight:20
  }
  , input: {
    borderWidth: 1.7, width:250, height:45, fontSize:30, color:'#bebebe', fontWeight:'700', borderRadius: 10, paddingLeft:90, marginRight:30, borderColor:'#bebebe',
  }
  , mic: {
    fontSize: 30, color:'gray',
  }
}

)

I’m not able to put the Mic icon at the end of imput and the words search at the beginning of imput the two only move together already tried with flex,alignitems,justifyconten and nothing out of the margin and paddding that moves the input or the two together wanted passes a stylization for each.

Answer 1

From what I saw of your code, the "search" style is correct, when you define a Direction as "Row" and define the alignment as "space-between", if you have two elements, the first goes left, the second goes right.

There are two ways to get this result. The first would be to change the order of the elements. The second would be to use a component that has an input with left or right icon.

The first example (changing the order of the elements) would be like this:

render() {
    return (
    <View style={styles.container}>
        <View style={styles.SectionStyle}>
            <TextInput style={{flex:1}} placeholder="Buscar" underlineColorAndroid="transparent" />
            <Image source={require('./Images/ic_person.png')} style={styles.ImageStyle} />
        </View>
    </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10
  },

  SectionStyle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth: .5,
    borderColor: '#000',
    height: 40,
    borderRadius: 5 ,
    margin: 10
},

ImageStyle: {
    padding: 10,
    margin: 5,
    height: 25,
    width: 25,
    resizeMode : 'stretch',
},
});

If you want to avoid this work, or the result has not yet met your expectation, you can try using this component:

https://www.npmjs.com/package/react-native-textinput-with-icons

Example of use:

import React, { Component } from 'react'
import TextInput from 'react-native-textinput-with-icons'

export default class Example extends Component {
  state = {
    name: ''
  }

  render() {
    let { name } = this.state

    return (
      <TextInput
        label="Name"
        // RTL must used when label in arabic ex: label="اللغة العربيه"
        leftIcon="thumbsup"
        leftIconType="oct"
        rippleColor="blue"
        rightIcon="react"
        rightIconType="material"
        value={name}
        refrance={(refrance) => {
            this.input = refrance;
        }}
        onChangeText={name => this.setState({ name })}
      />
    )
  }
}

Here are some tutorials that can help you: Examples of textbox with icons: https://aboutreact.com/image-icon-with-react-native-textinput/ https://reactnativecode.com/place-image-icon-inside-textinput-left-side/

Alignment with Flexbox:

https://reactnative.dev/docs/flexbox