How can I focus on textinput when i click on TouchableWithoutFeedback?

Question

I have a textinput. In this textinput, I have a letter "O" as an icon. I want textinput to be clickable when I press on "O" letter, how could i do that?

For now it doesn't work, since i couldnt add this property to that letter. I added how my textinput looks in the app. Thank you in advance.

Here is the App.js

import React, { useState } from 'react';
import { TouchableWithoutFeedback, StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView, TouchableHighlight } from 'react-native';
import Application from "../icons/application.svg"
import HorizontalCircles from '../HorizontalCircles';
import HorizontalDiscussion from "../HorizontalDiscussion";
import Energy from "../icons/energy.svg"
import Add from "../icons/add.svg"
import Calendar from "../icons/calendar.svg"
import Clock from "../icons/clock.svg"


const MainScreen = ({ navigation }) => {

  const [text, setText] = useState("");
  return (
    // for ios, i add safeareview and flex:1, otherwise height doesnt become 100%
    <SafeAreaView style={{flex:1,}} > 
      <View style={styles.container}>
        <View style={styles.appIcon}>
          <Application height={30} width={22} fill={"#1E2439"} />
          <View style={{ height: 30, width: 30, backgroundColor: "#DBF1F9", borderRadius: 20 }} />
        </View>
        <View style={[styles.input,{ flexDirection: "row", alignItems: "center" }]}>
          <TouchableWithoutFeedback onPress={onfocus(TextInput)}>
            <Text style={{ marginLeft: 5 }}>O</Text>
          </TouchableWithoutFeedback>
          <TextInput style={{ flex: 1 }} placeholder="Search" placeholderTextColor="#B9B9C5" onChangeText={setText} value={text}></TextInput>
        </View>
        <Text>{text}</Text>
        <View style={{ height: 120 }}>
          <ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ marginVertical: 20, alignItems: "center" }} horizontal={true}>
            <View style={{ height: 40, width: 40, backgroundColor: "#FFFFFF", borderRadius: 20, marginRight: 10, borderStyle: "dotted", borderWidth: 5, borderColor: "#E2E2E2" }} />
            <HorizontalCircles colorFirst={"#CFC8FF"} colorSecond={"#4CC98F"} />
            <HorizontalCircles colorFirst={"#FFA2BF"} colorSecond={"#FFD24D"} />
            <HorizontalCircles colorFirst={"#FEE3AA"} colorSecond={"#4DC98F"} />
            <HorizontalCircles colorFirst={"#FEDFCC"} colorSecond={"#B3C2D8"} />
            <HorizontalCircles colorFirst={"#FFA2BF"} colorSecond={"#FF3FFF"} />
            <HorizontalCircles colorFirst={"#F3A5FF"} colorSecond={"#1CB28F"} />
            <HorizontalCircles colorFirst={"#EFBCFF"} colorSecond={"#22398F"} />
            <HorizontalCircles colorFirst={"#AFBFCF"} colorSecond={"#44798F"} />
            <HorizontalCircles colorFirst={"#AEDF5F"} colorSecond={"#98C98F"} />
            <HorizontalCircles colorFirst={"#DDB825"} colorSecond={"#359424"} />
          </ScrollView>
        </View>

        {/* Discussion Part */}
        <Text style={styles.blackText}>Group Discussion On Going</Text>

        <View style={{ height: 250 }}>
          <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{ flexDirection: "row", alignItems: "center", }}>
            <HorizontalDiscussion color={"#FFF9F2"} />
            <HorizontalDiscussion color={"#E7FBFF"} />
          </ScrollView>
        </View>

        <Text style={styles.blackText}>Todays Task</Text>

        {/* Task Part */}
        <ScrollView style={{ height: 300 }}>
          <View style={{ padding: 30 }}>
            <View style={styles.task}>
              <View style={{ backgroundColor: "#FFEFE2", padding: 10, borderRadius: 13 }}>
                <Energy height={35} width={25} fill={"#FB9238"} />
              </View>

              <View style={{ marginLeft: 15, flex: 1 }}>
                <Text style={styles.blackText}>8 Tasks Today</Text>
                <Text style={styles.grayText}>Meet them & Share your experience</Text>
              </View>

              <View style={{ marginLeft: 5 }}>
                <Add height={35} width={25} fill={"#ABA8BA"} />

              </View>

            </View>

            <View style={styles.task}>
              <View style={{ backgroundColor: "#FEF8E6", padding: 10, borderRadius: 13 }}>
                <Calendar height={35} width={25} fill={"#FCC626"} />

              </View>

              <View style={{ marginLeft: 15, flex: 1 }}>
                <Text style={styles.blackText}>Event</Text>
                <Text style={styles.grayText}>Create & Share Event</Text>
              </View>

              <TouchableHighlight onPress={() => navigation.navigate("NewScreen")}>
                <View>
                  <Add height={35} width={25} fill={"#ABA8BA"} />

                </View>
              </TouchableHighlight>

            </View>

            <Text style={styles.blackText}>Proposed classes</Text>

            <View>
              <Text style={{ color: "#9993D3", fontSize: 18 }}>Math class</Text>
              <View style={styles.proposed}>
                <Text style={{ color: "#706E80", fontSize: 20 }}>Rasyid Hilman</Text>
                <View style={{ height: 35, width: 35, backgroundColor: "#FEE3AA", borderRadius: 25, marginHorizontal: 10, }} />

              </View>

              <View style={styles.proposed}>
                <View style={styles.agendaClockSvg}>
                  <Calendar height={40} width={30} fill={"#D4D3DA"} />
                  <Text style={{ color: "#B0AFB7", fontSize: 18, marginLeft: 10 }}>August 16, 2021</Text>
                </View>

                <View style={styles.agendaClockSvg}>
                  <Clock height={40} width={30} fill={"#C0BFC6"} />
                  <Text style={{ color: "#AFAEB8", fontSize: 18, marginLeft: 10 }}>15:00</Text>
                </View>
              </View>
            </View>
          </View>

        </ScrollView>

      </View>

    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#FFFFFF",
  },
  appIcon: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  input: {
    height: 40,
    borderWidth: .5,
    borderRadius: 10,
    marginVertical: 10,
    backgroundColor: "#F7F6F9",
    marginVertical: 20,
  },
  blackText: {
    fontSize: 20,
    fontWeight: "bold",
  },
  grayText: {
    color: "#A29E97",
    fontSize: 17,
  },
  task: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 15,
    justifyContent: "space-between"
  },
  proposed: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  agendaClockSvg: {
    flexDirection: "row",
    alignItems: "center",
  }


});

export default MainScreen;

Here is my textinput:

Answer 1

You can use the useRef hooks from react to focus any element. You just have to create a new Ref and then assign it to <TextInput /> and onPress on any element you can just focus that input ref using inputRef.current.focus()

const MainScreen = ({ navigation }) => {
  const inputRef = useRef();
  const [text, setText] = useState("");
  ...
  ...
<TouchableWithoutFeedback onPress={() => {inputRef.current.focus()}}>
            <Text style={{ marginRight: 25 }}>O</Text>
          </TouchableWithoutFeedback>
          <TextInput style={{ flex: 1 }} placeholder="Search" placeholderTextColor="#B9B9C5" onChangeText={setText} value={text} ref={inputRef}></TextInput>
...