Example of searching input React Native component

SearchInput.js

import React, {Component} from 'react';

import SearchIcon from '../../icons/search-icon';
import {
  SearchInputView,
  IconContainer,
  InputView,
  StyledInput,
  StyledText
} from './styles';

export default class SearchInput extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isFocused: false,
      value: null
    };
  }

  onFocus = () => !this.state.isFocused && this.setState({isFocused: true});

  onBlur = () => this.state.isFocused && this.setState({isFocused: false});

  onChange = (value) => {
    if (this.props.onChange) {
      this.props.onChange(value);
    }

    this.setState({value});
  };

  render() {
    const {isFocused, value} = this.state;

    return (
      <SearchInputView>
        <IconContainer>
          <SearchIcon />
        </IconContainer>
        {!isFocused && !value && <StyledText>{this.props.placeholder}</StyledText>}
        <InputView>
          <StyledInput
            underlineColorAndroid="transparent"
            selectionColor="#999"
            onFocus={this.onFocus}
            onBlur={this.onBlur}
            onChangeText={this.onChange}
          />
        </InputView>
      </SearchInputView>
    );
  }
}

styles.js

import styled from 'styled-components';

export const SearchInputView = styled.View`
  width: 92%;
  height: 35px;
  background-color: #f2f3f5;
  padding: 0 4%;
  margin-top: -20;
  border-radius: 70px;
  align-items: center;
  justify-content: center;
`;

export const IconContainer = styled.View`
  align-self: flex-start;
`;

export const InputView = styled.View`
  position: absolute;
  top: 2;
  align-items: center;
  width: 220;
`;

export const StyledInput = styled.TextInput`
  height: 35;
  width: 100%;
`;

export const StyledText = styled.Text`
  position: absolute;
`;