App.js

import React, { Component } from 'react';
import {
  ScrollView,
  StyleSheet, Text, View
} from 'react-native';

import { Button, Slider } from 'react-native-elements';
import SelectionCell from './components/SelectionCell'
import EditField from './components/EditFields';

const styles = StyleSheet.create({
  backgroundColorBlue: {
    backgroundColor: '#0A4C8D',
    margin:40

  },

  boxTitle: {
    borderBottomWidth: 0.3,
    padding: 10,
  },
  boxListHashTag:{
    height: 60,
    backgroundColor: 'white',
    justifyContent: 'center',borderColor: 'gray',
    borderWidth: 0.3,
  },
  container: {
    flex: 1,
    backgroundColor: '#F1F1F5',
  },
  containerSlider: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: 10,
    borderBottomWidth: 0.3,
    borderColor: '#738082',
    height: 60,
    backgroundColor: 'white',
  },
  fontSize16: {
    fontSize: 16,
  },

  fontWeight600: {
    fontWeight: '600',
  },

  pT20: {
    paddingTop: 20,
  },
  padding10 : {
    padding:10
  }
});
//Functions
const formatHashTags = values => {
  const transformStringAndArray = values.split(' ');
  const deleteBlank = transformStringAndArray.filter(value => {
    return value !== '';
  });
  return deleteBlank.map(value => {
    if (value.charAt(0) !== '#') {
      const transformValueAndArray = value.split('');
      transformValueAndArray.unshift('#');
      return transformValueAndArray.join('');
    }
    return value;
  });
};

// Components
const Title = ({title}) => (
  <View style={styles.boxTitle}>
    <Text style={[styles.fontSize16, styles.fontWeight600]}>{title}</Text>
  </View>
);


const Box = ({children}) => <View style={styles.pT20}>{children}</View>;

export default class SearchPosts extends Component {
  static navigationOptions = {
    title: 'SearchPosts',
  };

  state = {
    subscription: true,
    value: 0,
    hashtag: null,
    hashtags: []
  };

  onSubscriptionChange = subscription => this.setState({subscription});

  handleChange = (e) => {
    this.setState({hashtag: e})
  };

  handleClick = () => {
    const {hashtag} = this.state;
    if (hashtag !== null) {
      this.setState({hashtags: [...this.state.hashtags, formatHashTags(hashtag)]})
    }
    this.setState({hashtag: null})
  };

  createListHashTag = () =>
    (
      <View>
        {
          this.state.hashtags.map((l, i) => (
            <View key={i} style={styles.boxListHashTag}>
              <Text style={styles.padding10}>{l}</Text>
            </View>
          ))
        }
      </View>
    );

  render() {

    console.log(this.state);
    //Desctructuring this
    const {
      renderSlider,
      rendertitle,
      renderhashtags,
      renderSubscription,
      renderButton,
      handleClick,
      handleChange,
      onSubscriptionChange,
      createListHashTag,
      renderCity
    } = this;

    //Desctructuring state
    const {value, subscription, hashtag} = this.state;

    return (
      <>
      <ScrollView style={styles.container}>
        {renderSubscription({subscription, onSubscriptionChange})}
        <Box>
          {rendertitle('Localisation')}
          {renderCity()}
          {renderSlider({value})}
        </Box>
        {renderhashtags({handleChange, hashtag})}
        {rendertitle('Historique')}
        {createListHashTag()}
      </ScrollView>
        {renderButton({handleClick})}
        </>
    );
  }

  renderSlider = ({value}) => (
    <View style={styles.containerSlider}>
      <Text style={styles.fontSize16}>Alentours</Text>
      <View style={{flex: 1, padding: 5}}>
        <Slider
          thumbTintColor="#0A4C8D"
          minimumValue={0}
          maximumValue={100}
          value={value}
          onValueChange={value => this.setState({value})}
        />
      </View>
      <Text style={styles.fontSize16}>
        Km(s):
        {value.toFixed(0)}
      </Text>
    </View>
  )

  rendertitle = title => (
    <Box>
      <Title title={title}/>
    </Box>
  )

  renderhashtags = ({handleChange, hashtag}) => (
    <Box>
      <EditField
        title="Hashtags"
        placeholder="#cuisine #Japon ...."
        onChangeText={handleChange}
        value={hashtag}
      />
    </Box>
  )
  renderButton = ({handleClick}) => (
    <View style={{  backgroundColor: '#F1F1F5',}}>
    <Button
      buttonStyle={styles.backgroundColorBlue}
      onPress={() => handleClick()}
      title="Rechercher des posts"
    />
    </View>
  )

  renderSubscription = ({subscription, onSubscriptionChange}) => (
    <Box>
      <SelectionCell
        title="Mes abonnement"
        type="switch"
        data={subscription}
        onValueChange={onSubscriptionChange}
      />
    </Box>
  )

  renderCity = () => (
    <SelectionCell
      title="Ville"
      type="chevron"
    />
  )

}