CODEWITHSUNDEEP
javascriptcssreactjsreact-native
Adokiye Iruene
Adokiye Iruene

Reputation: 870

Place Element over TextBox

I am trying to place an Avatar element over my TextInput so that it will look like a conventional search bar, but it doesn't go over the TextInput Please isn't it working, or can another better method of putting the search icon over the TextInput be suggested, Thank you

 import { Avatar } from 'react-native-elements';
import FontAwesome
from './node_modules/@expo/vector-icons/fonts/FontAwesome.ttf';
import MaterialIcons
from './node_modules/@expo/vector-icons/fonts/MaterialIcons.ttf';


export default class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {timePassed: false};
}
   state = {
    fontLoaded: false
    };
   async componentWillMount() {
    try {
        await Font.loadAsync({
            FontAwesome,
            MaterialIcons
        });
        this.setState({ fontLoaded: true });
    } catch (error) {
        console.log('error loading icon fonts', error);
    }
 }

 render() {
    setTimeout(() => {
        this.setState({timePassed: true})
    }, 4000);
    if (!this.state.timePassed) {
        return <Splash/>;
    } else {
        return (
            <View style={BackStyles.container}>
                <Avatar style={BackStyles.searchIcon} icon={{ name: 'search', size: 25, }}/>
                <TextInput placeholder="Search for your herbs.."
                underlineColorAndroid={'transparent'}  style={BackStyles.textBox}
            /></View>
        );
    }
}
}

const BackStyles = StyleSheet.create({
container: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    alignSelf: 'stretch',
    flex: 1,
    backgroundColor: '#E2E2E2',
    marginTop: 20,
  //  width: '100%'
},
textBox: {
    flex: 1,
    height: 45,
    padding: 4,
  //  textAlignVertical: 'top',
    paddingLeft: 20,
   // marginRight: 5,
    flexGrow: 1,
  //  fontSize: 18,
    color: '#000',
    backgroundColor: '#fff',
   // textAlign: 'center'
},
searchIcon:{
    position: 'absolute',
    alignSelf: 'stretch',
    height: 45,
    flex: 1,
    top: 50,
    flexGrow: 1,
    padding: 4
}
});

Upvotes: 0

Views: 38

Answers (1)

Jason Kao
Jason Kao

Reputation: 1070

You can use Flexbox's justifyContent feature to force the TextInput to the left and the search icon to the right. If you put a border on the container and not the TextInput, the entire thing will appear as there is a search icon fixed onto the right of the TextInput, when, in reality, they are two separate components.

// styles
const styles = StyleSheet.create({
  searchBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'black',
  },
});

// the component
<View style={styles.searchBox}>
  <TextInput ...yourprops />
  <Avatar ...yourprops />
</View>

If you want to read more about justifyContent and how godly Flexbox is, you should check out Chris Coyier's Flexbox guide.

Upvotes: 1

Related Questions